html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--ds-text-ff-body);
	font-size: 18px;
	font-weight: var(--ds-text-fw-regular);
	background: var(--ds-color-bg-body);
	color: var(--ds-color-fg-default);
}

* {
	box-sizing: border-box;
}

h1, h2, h3 {
	font-family: var(--ds-text-ff-heading);
}

.no_display {
	display: none
}
/* ms-webview styles */

.helpText {
	display: none;
}

.helpText.show {
	display: inline-block;
	font-size: small;
	color: var(--ds-color-fg-danger);
	padding-bottom: 10px;
	padding-top: 10px;
}

.tiny {
	display: none;
}

.dropdown_single {
	background-color: transparent;
	border: 1px solid #cdcdcd;
	width: 220px;
	padding: 0;
	color: #B0B0B0;
	font-size: 16px;
	border-color: transparent;
	border-bottom-color: white;
	box-shadow: none;
}

#email_ver_input_label {
	display: none !important;
}

#email_ver_input[style="display: inline;"] {
	display: block !important;
	margin-bottom: 20px;
}

/* custom styles */
.custom-page-header {
	max-width: 1320px;
	margin-inline: auto;
	margin-block-end: 24px;
	padding-inline: 24px;
	height: 68px;
	display: grid;
	align-items: center;
}
.coloplast-logo {
	max-width: 70%;
	width: 123px;
}

.form-container {
	position: relative;
	box-sizing: content-box;
    max-width: 352px;
    margin-inline: auto;
    padding-inline: 24px;
}

.intro {
	width: 100%;
    margin: 0px auto 18px auto !important; 
}

.intro p {
	margin: 0;
    color: #2e3233;
	font-family: var(--ds-text-ff-heading);
	font-weight: var(--ds-text-fw-bold);
	font-size: 24px;
	line-height: 28px;
}

.localAccount .intro {
	display: block;
	margin: 0 0 32px;
}

.localAccount .intro h2 {
	margin: 0;
	color: #2e3233;
	font-family: var(--ds-text-ff-heading);
	font-weight: var(--ds-text-fw-bold);
	font-size: 24px;
	line-height: 28px;
}


#createAccount{
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    float: left;
    align-items: center;
    color: #2e3233;
    position: relative;
    justify-content: center;
	font-family: var(--ds-text-ff-body);
	font-weight: var(--ds-text-fw-medium);
	font-size: 18px;
	line-height: 28px;
    cursor: pointer;
    max-width: 100%;
    background-color: #ffff;
    background-image: none;
    border: none;
    border-radius: 36px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.12);
    min-height: 56px;
    outline: none;
    padding-top: 14px;
    text-decoration: none;
    display: block;
    width: 100%;
    margin: 0 0 4px;
}

#createAccount:before {
    content: none !important;
    white-space: normal;
}

.attrEntry,
.entry-item {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	margin: 0;
	position: relative;
}

form label {
	display: block;
	margin-block-end: 6px;
	font-family: var(--ds-text-ff-body);
	font-size: 14px;
	color: var(--ds-color-fg-muted);
}

/* Input styles */
form input[type=password],
form input[type=email],
form input[type=number],
form input[type=tel],
form input[type=date],
form input[type=text] {
	background: var(--ds-color-bg-field);
	border-radius: 8px;
	box-shadow : none;
	border: 1px solid var(--ds-color-border-strong);
	width: 100%;
	min-height: 46px;
	outline: none;
	padding: 10px 12px;
	margin: 0;
	font-family: var(--ds-text-ff-body);
	font-size: 18px;
	color: #2e3233;
}

form input::placeholder {
	color: var(--ds-color-fg-placeholder);
	text-indent: 0 !important;
}

form input:invalid {
	outline: 0;
}
form .validate input:invalid,
form input.highlightError {
	border-color: var(--ds-color-border-danger);
}

form .password-label label {
	position: relative;
}
form label.password-toggle-icon::after {
	cursor: pointer;
	content: "";
	position: absolute;
	top: 31px;
	right: 11px;
	width: 28px;
	height: 28px;
	background-image: url(../img/eye-off.svg);
	background-repeat: no-repeat;
	background-size: contain;
}
form label.password-toggle-icon.password-is-visible::after {
	background-image: url(../img/eye.svg);
}

.localAccount .divider {
	display: none !important;
}

.localAccount .create {
	color: #969899;
	font-family: var(--ds-text-ff-body);
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}

.localAccount .create a,
.localAccount a#forgotPassword {
	outline: none;
	color: #00b0ca;
	text-decoration: none;
}

.localAccount a#forgotPassword {
	position: absolute;
	top: 100%;
	padding-top: 10px;
}

.localAccount .create a:hover,
.localAccount a#forgotPassword:hover {
	text-decoration: none;
	color: #00b3ce;
}

.localAccount .create a:before {
	content: "\A";
	white-space: pre;
}

.localAccount .create p {
	margin: 0;
}

.buttons {
	display: flex;
	flex: 1 0 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-block: 16px;
	margin-block: 40px 4px;
	gap: 16px;
}
form ul .buttons {
	padding-block: 0;
	margin-block: 0;
}
#customArea .buttons {
	padding-block: 0;
	margin-block: 0;
}

/*
	Basic Button Styles for all buttons. 
	Colors are default styled as secondary Neutral buttons
*/
.buttons button,
.buttons .link-button {
	background-color: var(--ds-color-comp-button-secondary-neutral-default-bg-color);
	color: var(--ds-color-comp-button-secondary-neutral-default-text-color);
	border-color: var(--ds-color-comp-button-secondary-neutral-default-border-color);
	background-image: none;
	border-width: 1px;
	border-style: solid;
	border-radius: 999px;
	min-height: 56px;
	padding-block: 10px;
	padding-inline: 24px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	position: relative;
	justify-content: center;
	font-family: var(--ds-text-ff-body);
	font-weight: var(--ds-text-fw-medium);
	font-size: 18px;
	line-height: 28px;
	text-decoration: none;
	cursor: pointer;
}
.buttons button:hover,
.buttons .link-button:hover {
	background-color: var(--ds-color-comp-button-secondary-neutral-hover-bg-color);
	color: var(--ds-color-comp-button-secondary-neutral-hover-text-color);
	border-color: var(--ds-color-comp-button-secondary-neutral-hover-border-color);
}

/*Disabled Button Styles for all buttons*/
.buttons button:disabled, 
.buttons button[aria-disabled="true"],
.buttons .link-button:disabled {
	opacity: .3;
    cursor: default;
	pointer-events: none;
    box-shadow: none;
}

/*Primary Button Colors*/
.buttons button#next, 
.buttons button#emailVerificationControl_but_send_code, 
.buttons button.verifyCode, 
.buttons button#continue {
	background-color: var(--ds-color-comp-button-primary-default-bg-color);
	color: var(--ds-color-comp-button-primary-default-text-color);
	border-color: var(--ds-color-comp-button-primary-default-border-color);
}
.buttons button#next:hover, 
.buttons button#emailVerificationControl_but_send_code:hover, 
.buttons button.verifyCode:hover, 
.buttons button#continue:hover {
	background-color: var(--ds-color-comp-button-primary-hover-bg-color);
	text-decoration: none;
}

/*Secondary Button Colors*/
.buttons .link-button#signUpNow {
	background-color: var(--ds-color-comp-button-secondary-default-bg-color);
	color: var(--ds-color-comp-button-secondary-default-text-color);
	border-color: var(--ds-color-comp-button-secondary-default-border-color);
}
.buttons .link-button#signUpNow:hover {
	background-color: var(--ds-color-comp-button-secondary-hover-bg-color);
	text-decoration: none;
}

/*Ghost Buttons*/
.buttons button#cancel {
	background-color: var(--ds-color-comp-button-ghost-default-bg-color);
	color: var(--ds-color-comp-button-ghost-default-text-color);
	border-color: var(--ds-color-comp-button-ghost-default-border-color);
	
}
.buttons button#cancel:hover {
	background-color: var(--ds-color-comp-button-ghost-hover-bg-color);
	color: var(--ds-color-comp-button-ghost-hover-text-color);
	border-color: var(--ds-color-comp-button-ghost-hover-border-color);
}

.inline-link-button,
.buttons .inline-link-button {
	background-color: transparent;
	color: var(--ds-color-fg-link);
	border: none;
	display: inline;
	text-align: left;
	width: auto;
	padding: 0;
	cursor: pointer;
	font-family: var(--ds-text-ff-body);
	font-weight: var(--ds-text-fw-medium);
	font-size: 14px;
	min-height: auto;
}
.inline-link-button:hover,
.buttons .inline-link-button:hover { 
	color: var(--ds-color-fg-link-hover);
	background-color: transparent;
}
@media (min-width: 768px) {
	.inline-link-button,
	.buttons .inline-link-button {
		font-size: 16px;
	}
}

.attr ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.attrEntry.validate .helpText.show,
.error.itemLevel {
	order: 3;
	color: var(--ds-color-fg-danger);
	font-size: 16px;
	margin-bottom: 16px;
}

.attrEntry.validate .helpText[aria-hidden="false"] {
	padding: 0;
	display: flex;
	order: 2;
}
.verificationErrorText {
	font-size: 16px;
	line-height: 24px;
	display: block;
}

.verificationErrorText.error {
	color: var(--ds-color-fg-danger);
}

.attrEntry.validate .helpText[aria-hidden="false"],
.error.itemLevel p,
.error.pageLevel p {
	margin: 0;
	color: var(--ds-color-fg-danger);
	display: block;
	font-size: 16px;
	line-height: 24px;
	margin-top: 5px;
}

/* reset password */
div[data-tenant-branding-background-color=true] {
	display: none;
}

#attributeVerification .buttons  {
	margin: 0;
	order: 3;
}

#claimVerificationServerError {
	color: var(--ds-color-fg-danger);
}

#attributeList {
    order: 1;
}

/* Spacers */
.spacing-block-end-24 {
	margin-block-end: 24px;
}

@media (min-width: 768px) {

	.localAccount,
	#attributeVerification {
		width: 352px;
		margin: 0 auto;
	}

	#createAccount {
		box-shadow: none;
		display: inline;
		width: auto;
		font-size: 16px;
		line-height: 24px;
		min-height: auto;
		padding: 0;
		margin: 2px 0 0 6px;
		color: var(--ds-color-comp-button-link-default-text-color);
	}

	.create {
		font-family: var(--ds-text-ff-body);
		font-size: 16px;
		line-height: 24px;
	}

	.create p {
		display: flex;
		text-align: left;
	}

	#simplemodal-overlay.simplemodal-overlay {
		background: none;
	}

	#simplemodal-container.simplemodal-container {
		width: auto;
		height: auto;
		overflow: unset;
		left: auto;
		top: auto;
	}

	.simplemodal-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#simplemodal-data {
		width: 60px;
		height: 60px;
		border:8px solid #cceff4;
		border-radius:50%;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: rotate 2s infinite;
	}

	#simplemodal-data:before {
		width: 100%;
		height: 100%;
		position:absolute;
		top: 50%;
		left: 50%;
		content:'';
		border:8px solid transparent;
		border-right:8px solid var(--ds-color-fg-brand);
		border-radius:50%;
		transform: translate(-50%, -50%) rotate(40deg);
	}

	#simplemodal-container .simplemodal-wrap #simplemodal-data {
		display: none;
		padding: 0;
		overflow: visible;
	}

	#verifying_blurb {
		display: none;
	}

	#simplemodal-container + .form-container {
		opacity: 0;
	}

	.attr {
		padding: 0;
	}

	button#emailVerificationControl_but_change_claims.changeClaims {
		display: none;
		margin-block-end: 20px;
	}
}

@keyframes rotate {
	from {}
	to {
		transform: rotate(360deg);
	}
}

/* Hard overrides */

#email,
#newPassword,
#emailVerificationCode{
    margin: 0 0 20px 0;
}

#reenterPassword{
    margin: 0 0 40px 0;
}