/* Sign In */
body {
  font-family: 'AvenirNextMedium', Arial, sans-serif;
  margin-bottom: 100px;
}
a {
  color: #7ea7cc;
}
.logo {
  margin-top: 100px;
  width: 100px;
}
.login-title {
  font-weight: bold;
  margin-top: 20px;
	font-family: 'AvenirNextDemi', Arial, sans-serif;
}
.card {
  background-color: white;
  border: 1px solid #e5e5e5;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
  border-radius: 0px;
}
.error {
  color: red;
}

.locale-select{
	margin-bottom:20px;
}

.card-mfa #verificationCode{ margin-bottom:5px; }
.card-mfa #verificationCode ~ .buttons #cancel{ margin-left:0; }

.card-header {
  background: #fff;
}
.card-header::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e3e3e3;
  background-size: 14px 14px;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 12px;
  opacity: .75;
  vertical-align: bottom;
  background-image: url('icn-key.png');
}
.card-title {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 23px;
	font-family: 'AvenirNextDemi', Arial, sans-serif;
}
.card-body {
  background: #fafafa;
}

.intro h2 {
  display: none;
}

#logonIdentifier {
  display: block;
  margin-bottom: 20px;
  width: 100%;
}

#password {
  width: 100%;
}

#password, #next {
  margin-bottom: 20px;
}

#forgotPassword {
  padding-left: 15px;
}

#createAccount {
  padding-left: 5px;
}

#next, #continue {
  background-color: #7fa7cc;
  color: #fff;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 6px 14px;
  display: inline-block;
  cursor: pointer;
  border: none;
  font-size: 0.9em;
  line-height: 1.4em;
  outline: none;
  transition: all 0.15s ease;
  font-weight: 500;
}

#next:hover {
  color: #fff;
  background-color: #8aafd0;
}

#next span {
  display: flex;
  align-items: center;
  line-height: 1;
}

#next span::before {
  content: '';
  display: block;
  background-image: url('icn-chevron-right.png');
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 7px;
  background-color: #6293c0;
  background-size: 6px 8px;
  background-position: center center;
  background-repeat: no-repeat;
}

.divider h2 {
  font-size: 20px;
}

.entry-item label {
  font-weight: bold;
	font-family: 'AvenirNextDemi', Arial, sans-serif;
}

@media (min-width: 1200px) {
  .container{
      max-width: 768px;
  }
}

/* Sign Up */
#attributeVerification #attributeList ul {
  list-style: none;
  padding: 0;
}

.attrEntry input {
  width: 100%;
  margin-bottom: 20px;
}

.attrEntry .verify {
  margin-bottom: 20px;
}

#email_ver_but_send {
  background-color: #93a261;
  color: #fff;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 6px 14px;
  display: inline-block;
  cursor: pointer;
  border: none;
  font-size: 0.9em;
  line-height: 1.4em;
  outline: none;
  transition: all 0.15s ease;
  font-weight: 500;
}

#cancel {
  background-color: #a7a7aa;
  color: #fff;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 6px 14px;
  display: inline-block;
  cursor: pointer;
  border: none;
  font-size: 0.9em;
  line-height: 1.4em;
  outline: none;
  transition: all 0.15s ease;
  font-weight: 500;
}


/** Language Select **/

.locale-select{ margin-bottom:20px; }
.locale-select span{ margin-right:5px; }


/** Signup **/

.maintenance-card{ display:none; margin:20px 0; }
	.maintenance-card .card-body{ padding:30px 20px; }
	.maintenance-card h4{ font-weight:bold; font-family: 'AvenirNextDemi', Arial, sans-serif; }
	.unified-card{ display:block; }

	.entry-item input{ padding:2px 8px; }
	.rememberMe{
		display: none;
	}
	.btn-primary {
		background-color: #7fa7cc;
		border-color: #7fa7cc;
		text-transform: uppercase;
		color: #fff !important;
	}
	.btn-primary:hover {
		background-color: #8aafd0;
		border-color: #8aafd0;
	}
	.native-login {
		font-size: 14px;
		font-weight: 500;
	}
	.localAccount .divider {
		display: none;
	}
	.card-footer {
		background-color: inherit;
		padding: 0;
	}
	.login-description {
		padding-top: 20px;
	}


/** Sign up **/

	.attrEntry input, .attrEntry select{ margin-bottom:20px; padding:2px 8px; height:32px; }
	#attributeVerification #attributeList ul{ margin-bottom:0; }

  #customerNbrMessage {
    font-size: 0.875em;
  }
  #customerNbrError {
    color: red;
    font-size: 0.875em;
    margin:5px 0; 
  }

	#attributeList ul{
		display:flex;
		flex-wrap:wrap;
		align-items: flex-end;
	}

	#attributeList ul li,
	#attributeList ul li input,
	#attributeList ul select{ 
		width:100%; 
	}

	#attributeList ul li.newPassword,
	#attributeList ul li.reenterPassword,
	#attributeList ul li.givenName,
	#attributeList ul li.surname{
		width:calc(50% - 10px);
	}

	#attributeList ul li.reenterPassword,
	#attributeList ul li.surname{
		margin-left:20px;
	}

	#attributeList ul li.extension_CustomerNumberHidden{ margin-top:20px; }

  #extension_CustomerRoleOther {
    display: none;
  }
	
	#requiredFieldsMessage, .ckl-required-msg{ margin-top:20px; }

  .intro, .helpLink, .itemLevel, #extension_CustomerNumber, label[for="email"], 
  label[for="newPassword"], label[for="reenterPassword"], label[for="givenName"],
  label[for="surname"], label[for="jobTitle"], label[for="extension_CompanyName"],
  label[for="extension_CustomerNumber"], label[for="extension_CustomerNumberHidden"],
  label[for="extension_CustomerIsValid"], label[for="extension_CustomerRole"],
  label[for="extension_CustomerRoleOther"], label[for="extension_CustomerCountry"]{
    display: none;
  }

	label#email_ver_input_label{ display:none !important; }

	.buttons button[disabled]{ opacity:0.4; }
	.buttons button + button{ margin-left:5px; }

  .verifyButton {
    background-color: #93a261;
    color: #fff;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 6px 14px;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0.9em;
    line-height: 1.4em;
    outline: none;
    transition: all 0.15s ease;
    font-weight: 500;
  }
  .sendButton, .editButton, .defaultButton {
    background-color: #7fa7cc;
    color: #fff;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 6px 14px;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0.9em;
    line-height: 1.4em;
    outline: none;
    transition: all 0.15s ease;
    font-weight: 500;
  }

	#customerNbrMessage{
		margin:0 0 20px;
		border-radius:4px;
		padding:8px 15px;
		background-color:#e2edff;
		color:#507dad;
		box-shadow:0px 0px 0px 1px rgba(80, 125, 173, 0.2) inset;
	}

	#extension_CustomerRole{ margin-bottom:0; }
	#extension_CustomerRoleOther{ margin:10px 0 0; }
	#extension_CustomerNumberHidden{ margin:0; }
	#extension_CustomerCountry{ margin:20px 0 0; }

	.extension_CustomerNumberLocal{ display:none; }

	.attrEntry .verify{ margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid #ddd; }
	#email{ margin-bottom:10px; }
	#email_ver_input{ margin-bottom:10px; }
	#verifyMsg, .ckl-verify-msg{
		font-size:0.875em;
		margin-top:8px;
		font-style:italic;
		opacity:0.75;
	}
	#country{ margin:20px 0 0; }

	.error.pageLevel{ margin-bottom:10px; }
	
	.attrEntry.validate .error.show + input,
	.attrEntry.validate .error.show + select,
	.attrEntry input.invalid,
	.attrEntry select.invalid{ 
		border:1px solid red; 
	}

	.attrEntry.validate .error.show{
		font-size:0.875em;
		display:block;
		margin-bottom:3px;
	} 

	.attrEntry.validate .error.show > *{ margin-bottom:0; }

	.extension_CustomerLanguage{ display:none; }


 
  @media only screen and (max-width: 768px) {
			#attributeList ul li.newPassword,
			#attributeList ul li.reenterPassword,
			#attributeList ul li.givenName,
			#attributeList ul li.surname{
				width:100%;
			}

			#attributeList ul li.reenterPassword,
			#attributeList ul li.surname{
				margin-left:0px;
			}
  }