/* This is client specific! */
/* ---------------------------------------- G E N E R A L ---------------------------------------- */

html, body {
	background-color:#8d8d8d; /* [body_backgroundColor] option: hex color*/
	background-image:url('../images/signin_bg.png'); /* [body_backgroundImage] option: url*/
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}

a {
	color: #04AEEF; /* [login_linkColor] */
	text-decoration: underline;
}

a:hover {
	color:#7e7e7e; /* [login_linkHoverColor] */
	text-decoration: underline;
}

/* De distance bepaalt of de content in het verticale midden van het scherm staat */
div.distance 	{}
.horizon		{}

/* In de container zit al het andere */
.container {
     width:960px; /* [login_pageWidth] */
	 margin-left:auto;
	 margin-right:auto;
}

/* The Owner Logo */
.logo {
    background-image: url("../images/client_logo.png"); /* [client_Logo] */
	background-repeat:no-repeat;
	background-position:bottom ;
	height:100px; /* [client_LogoHeight] */
	width:335px; /* [client_LogoWidth] */
	z-index:1;
	position:relative;
	padding-top:20px;
}

/* The small round SyncForce symbol */
.SFsymbol {
    visibility: hidden;
}

.version {
	padding-top:0px;
	position:absolute;
	top:510px;
	margin-left:20px;
	clear:both;
	color: #fff;
	display:block;
}

.copyright {
	position:absolute;
	left: 0px;
	top:490px;
	font-size: 10px;
	color: #fff;
	z-index: 0;
	margin-left:20px;
}

.copyright a {
	color: #fff;
	text-decoration: underline;
}

.copyright a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Taalswitch */
.languageselectorholderlogin {
   	position:absolute;
	clear:both;
	top:20px;
	right:0px;;
	padding: 10px 0px 10px 0px;
	margin-right:10px;
}

.languageselectorholderlogin select {
	width:200px;
	padding:10px;
	border-radius:0px;
	border:0px;
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.50);
}

/* ---------------------------------------- DIALOGUE PANEL ---------------------------------------- */
/* The dialogue panel contains the controls that form the dialogue. This dialogue panel is used in several login pages */

.dialoguePanel {
	width: 335px;
	padding: 10px 20px;
	box-sizing: border-box;
}

.dialoguePanel div {
	margin-bottom: 10px;
}

.dialoguePanel .sfi_textbox {
	display: block;
	width: 275px;
	padding: 3%;

	background-color: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 0px;
}

.dialoguePanel .sfi_button {
	display: block;
	width: 100%;
	height: 40px;
	margin: 20px 0 0 0;
	padding: 6px 12px;

	background-image: none;
	background-color: #5c2483;
	border: 1px solid #7e8183;
	cursor: pointer;

	font-size: 14px !important;
	color: #ffffff;
}

.dialoguePanel .sfi_button:hover {
	background-image: none;
	background-color: #815da9;
	border: 1px solid #7e8183;
}

.dialoguePanel .message span,
.dialoguePanel .errorMessage span {
	border-color: #31708f;
	font-size: 12px;
}
.dialoguePanel .errorMessage span {
	background-color: #FFD1D1;
	border-color: #d00e0a;

	color: #d00e0a;
}

.dialoguePanel .message a,
.dialoguePanel .errorMessage a {
	color: inherit;
}

div.dialoguePanel div.header {
	position:relative;
	font-weight:bold;
	width:100%;
}

div.dialoguePanel div.text {
	position:relative;
}

div.dialoguePanel div.label {
	font-size: 12px;
	color: #3a3a3a;
}

/* ---------------------------------------- DEFAULT PAGE ---------------------------------------- */

div.dialoguePanel div.username {
	position:relative;
}

div.dialoguePanel div.password {
	position:relative;
}

div.dialoguePanel div.loginButton {
	position:relative;
	clear:both;
}

div.dialoguePanel div.forgotPassword,
div.dialoguePanel div.register {
	position:relative;
	text-align:center;
	float:left;
	margin-right:10px;
}

div.dialoguePanel div.forgotPassword a,
div.dialoguePanel div.register a {
	color: #5c2483; /* [login_linkColor] */
}

div.dialoguePanel div.forgotPassword a:hover,
div.dialoguePanel div.register a:hover {
	color:#000 !important; /* [login_linkHoverColor] */
}

div.forgotPassword	{margin-left:20px;}

/* ---------------------------------------- FORGOT PASSWORD ---------------------------------------- */

.forgotpasswordContainer	{ height:auto;}

.forgotpasswordContainer div.dialoguePanel	{ top:0px; }
.forgotpasswordContainer .extraDiv1 {height:400px;}
.forgotpasswordContainer .copyright {top:380px;}
.forgotpasswordContainer .version {top:400px;}
.forgotpasswordContainer div.dialoguePanel div.email{
	position:relative;
}

.forgotpasswordContainer div.dialoguePanel .header{color:#5b5b5b; margin-left:10px;}
.forgotpasswordContainer div.dialoguePanel .text{
	font-size:12px;
	color:#7E7E7E;
	margin-left:10px;
	width:100%;
	}

.forgotpasswordContainer div.dialoguePanel div.goToLogin {
	display: none;
	position:relative;
}

.forgotpasswordContainer div.dialoguePanel div.forgotPasswordOK {
	position:relative;
}

/* ---------------------------------------- CHANGE PASSWORD ---------------------------------------- */

.changepasswordContainer	{}
.changepasswordContainer div.dialoguePanel	{ top:0px; }
.changepasswordContainer div.dialoguePanel .header{color:#5b5b5b; margin-left:10px;}
.changepasswordContainer div.dialoguePanel .text{
	font-size:12px;
	color:#7E7E7E;
	margin-left:10px;
	width:100%;
	}
.changepasswordContainer .extraDiv1 {height:517px;}
.changepasswordContainer .copyright {top:535px;}
.changepasswordContainer .version {top:555px;}

div.dialoguePanel div.oldPassword {

	position:relative;
}

div.dialoguePanel div.newPassword {

	position:relative;
}

div.dialoguePanel div.confirmPassword {

	position:relative;
}

div.dialoguePanel div.changePasswordOK {

	position:relative;
}

/* ---------------------------------------- OWNER SPECIFIC HTML ---------------------------------------- */

.divOwnerLoginHtml {
	float:left;
	width:335px;
	position:absolute;
	z-index:1;
	}

.welcome {
  font-size:21px;
  color:#000;
  margin:30px;
  margin-bottom:0px;
  display:block;
  font-weight:bold;
}

.welcome_txt {
 	margin:30px;
	margin-top:10px;
	line-height:21px;
	display:block;
	font-size:12px;
	color:#7E7E7E;
	padding-bottom:0px;
}

.login {
	display:none;
}

/* ---------------------------------------- EXTRA ---------------------------------------- */

/* These extra divs/spans may be used as catch-alls to add extra imagery */

/* At the top of the page */
.extraDiv1 {
	background-image:url('../images/white85.png');
	background-repeat:repeat;
	box-shadow:0px 0px 13px rgba(0,0,0,0.75);
	height:490px;
	width:335px;
	z-index:0;
	}
.extraDiv2 {}
.extraDiv3 {}

/* At the bottom of the page */
.extraDiv4 {}
.extraDiv5 {}
.extraDiv6 {}


@media (max-width: 1000px) {



.container {
	width:345px; /* [login_pageWidth] */
	margin-left:auto;
	margin-right:auto;

}

.languageselectorholderlogin {
   	position:relative;
	clear:both;
	top:20px;
	right:0px;
	padding: 10px 0px 10px 0px;
	margin-bottom:20px;
}

.languageselectorholderlogin select {
	width:335px;
	padding:10px;
	border-radius:0px;
	border:0px;
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.50);
}

.version {
	padding-top:0px;
	position:absolute;
	top:690px;
	margin-left:20px;
	clear:both;
	color: #fff;
	display:block;
}

.copyright {
	position:absolute;
	left: 0px;
	top:670px;
	font-size: 10px;
	color: #fff;
	z-index: 0;
	margin-left:20px;
}

}
    /* saml login */
    #hplSamlLogin {clear: both !important; display:block; color:#fff; font-size: 14px !important; background-color:#005caa; line-height: 42px; text-decoration:none; text-align: center;}
	#hplSamlLogin:hover {background-color:#004580; }
	#hplSamlLogin * { vertical-align:middle;}

/* openId login */
#hplIdpLogin {
	clear: both !important;
	display: block;
	color: #fff;
	font-size: 14px !important;
	background-color: #005caa;
	line-height: 42px;
	text-decoration: none;
	text-align: center;
}

#hplIdpLogin:hover {
	background-color: #004580;
}

#hplIdpLogin * {
	vertical-align: middle;
}