input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
textarea,
select,
.input-inline-radio,
.input-inline-checkbox,
.simulate-input {
	background-color: var(--nearly-white); /* rgba(253,253,254,.5) */
	display: inline-flex;
	align-items: center;

	width: 100%;
	color: var(--dark-color);
	padding: 0 10px;
	font-size: var(--text-font-size-button);
	font-family: inherit;
	line-height: 42px;
	min-height: 42px;
	letter-spacing: var(--text-letter-spacing);
	border: 1px solid var(--medium-gray);
	border-radius: 3px;
	box-sizing: border-box;
	outline: 0;
	transition: border-color .25s ease, background-color .25s ease;
	-webkit-transition: border-color 0.25s ease, background-color .25s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	appearance: none;
}

input[type="text"]:hover,
input[type="text"]:focus-visible,
input[type="number"]:hover,
input[type="number"]:focus-visible,
input[type="email"]:hover,
input[type="email"]:focus-visible,
input[type="password"]:hover,
input[type="password"]:focus-visible,
textarea:hover,
textarea:focus-visible,
select:hover,
select:focus-visible,
.simulate-input:hover,
.simulate-input:focus-visible {
	border-color: var(--input-color);
}

input[type="text"]:active,
input[type="text"]:focus,
input[type="number"]:active,
input[type="number"]:focus,
input[type="email"]:active,
input[type="email"]:focus,
input[type="password"]:active,
input[type="password"]:focus,
textarea:active,
textarea:focus,
select:active,
select:focus,
.simulate-input:focus,
.simulate-input:focus-within,
.simulate-input.simulate-active {
	border-color: var(--input-color);
	box-shadow: .5px .5px 0 var(--box-shadow), -.5px -.5px 0 var(--box-shadow), .5px -.5px 0 var(--box-shadow), -.5px .5px 0 var(--box-shadow);
}

input[type="checkbox"],
input[type="radio"],
select,
.simulate-select {
	cursor: pointer;
}

select,
.simulate-select {
	box-shadow: inset 0 -21px 12px -12px var(--box-shadow), inset 0 -1px 2px -2px var(--box-shadow);
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 22"><g stroke="%23555" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M1 15l6 6 6-6M13 7L7 1 1 7"/></g></svg>') no-repeat right center;
	background-color: var(--nearly-white);
	background-size: 28px 12px;
}
select:active,
select:focus,
.simulate-select:active,
.simulate-select:focus {
	box-shadow: inset 0 -21px 12px -12px var(--box-shadow), inset 0 -1px 2px -2px var(--box-shadow), .5px .5px 0 var(--box-shadow), -.5px -.5px 0 var(--box-shadow), .5px -.5px 0 var(--box-shadow), -.5px .5px 0 var(--box-shadow);
}

select.small,
.simulate-select.small {
	line-height: 22px;
	padding: 0 24px 0 6px;
	min-height: 26px;
}

label {
	display: block;
	color: var(--dark-color);
	font-size: var(--text-font-size);
	letter-spacing: var(--text-letter-spacing);
	font-weight: var(--text-font-weight-normal);
	cursor: pointer;
	margin-bottom: 4px;
}

label.thin_weight {
	font-weight: 300;
}

textarea {
	resize: vertical;
	padding: 8px;
	line-height: 20px;
}

/*  INLINE RADIO COMPONENT  */
.input-inline-radio,
.input-inline-checkbox {
	padding: 0;
	display: -moz-inline-block;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
}

.input-inline-radio .radio-option,
.input-inline-checkbox .check-option {
	padding: 0;
	-webkit-flex: 1;  /* Safari 6.1+ */
	-ms-flex: 1;  /* IE 10 */
	flex: 1;
	display: flex;
	border-right: 1px solid var(--grey-light);
	overflow: hidden;
}

.input-inline-radio .radio-option:last-child,
.input-inline-checkbox .check-option:last-child {
	border-right: 0 none;
}

.input-inline-radio input,
.input-inline-checkbox input {
	opacity: 0.01;
	width: 1px;
	height: 1px;
	z-index: -1;
	position: absolute;
}
.input-inline-radio label,
.input-inline-checkbox label {
	-webkit-flex: 1;  /* Safari 6.1+ */
	-ms-flex: 1;  /* IE 10 */
	flex: 1;
	margin-bottom: 0;
	font-weight: 300;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
	align-items: center;
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease;
	-webkit-transition: border-color 0.15s ease, background-color .15s ease;
}

.input-inline-radio input[type=radio]:checked + label,
.input-inline-checkbox input[type=checkbox]:checked + label {
	background-color: var(--grey);
	box-shadow: inset 0 10px 25px -15px var(--box-shadow);
	color: #3b1393;
	font-weight: var(--text-font-weight-medium);
}

/*  /INLINE RADIO COMPONENT  */


/*  BLOCK RADIO COMPONENT  */
.input-block-radio,
.input-block-checkbox {
	padding: 0;
	display: flex;
	flex-direction: column;
}

.input-block-radio .radio-option,
.input-block-checkbox .check-option {
/*	flex: 1;
	display: grid;
	grid-template-columns: 2rem 6px 1fr;
	grid-template-areas: "input . label";*/
/*	overflow: hidden; */
	position: relative;
}

.input-block-radio .radio-option:last-child,
.input-block-checkbox .check-option:last-child {
/*	border-right: 0 none; */
}

.input-block-radio .radio-option + .radio-option,
.input-block-checkbox .check-option + .check-option {
	margin-top: 1rem;
}

.input-block-radio input,
.input-block-checkbox input {
	opacity: 0.01;
	width: 1px;
	height: 1px;
	z-index: -1;
	position: absolute;
}
.input-block-radio label,
.input-block-checkbox label {
	flex: 1;
	font-weight: 300;
/*	white-space: nowrap;
	text-overflow: ellipsis; */
/*	align-items: center; */
/*	text-align: center; */
	transition: border-color .15s ease, background-color .15s ease;
	-webkit-transition: border-color 0.15s ease, background-color .15s ease;
	padding: 1rem;

	display: grid;
	grid-template-columns: auto 1rem 1fr;
	grid-template-areas: "input . label";

	border: 1px solid var(--medium-gray);
	border-radius: var(--border-radius);
/*	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
/*	z-index: -1;
	grid-area: label; */
}

.input-block-radio label:hover,
.input-block-checkbox label:hover {
	background: var(--grey);
}

.input-block-radio label:before,
.input-block-checkbox label:before {
/*	content:"";
	border: 1px solid var(--medium-gray);
	border-radius: var(--border-radius);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;*/
}

.input-block-radio input[type=radio]:checked + label,
.input-block-checkbox input[type=checkbox]:checked + label {
	border-color: var(--input-color);
	box-shadow: .5px .5px 0 var(--box-shadow), -.5px -.5px 0 var(--box-shadow), .5px -.5px 0 var(--box-shadow), -.5px .5px 0 var(--box-shadow);
}

.input-block-radio label .input-radio {
	grid-area: input;
/*	top: 0px; */
	margin: 0;
}
.input-block-radio input[type=radio]:checked + label .input-radio {
	border-color: var(--input-color) !important;
}
.input-block-radio input[type=radio]:checked + label .input-radio:after {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.input-block-radio label .radio-option-label {
	grid-area: label;
	line-height: var(--text-line-height);
	color: var(--dark-color-text);
}

.input-block-radio label .radio-option-label span + span {
	margin-top: .5rem;
}

/*  /BLOCK RADIO COMPONENT  */



/*  STYLE FOR RADIO & CHECKBOX  */

.input-radio { border-radius: 50%; }
.input-checkbox { border-radius: 2px; }

.input-radio, .input-checkbox {
	width: 16px;
	height: 16px;
	position: relative;
	cursor: pointer;
	border: 1px solid var(--medium-gray);
	-webkit-appearance: none;
	-webkit-font-smoothing: subpixel-antialiased;
	background: transparent;
	line-height: normal;
	box-sizing: border-box;
	outline: none;
	transition-duration: 150ms;
	transition-property: background-color, border-color, box-shadow, color, -webkit-transform, transform, opacity;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	margin: 0 6px 0 0;
	background: var(--nearly-white);
/*	background: linear-gradient(180deg, #fff, #fbfafc);
	box-shadow: 0 0 0 1px transparent, 0 1px 0 0 hsla(257, 25%, 12%, 0.05); */
	float: left;
	top: -2px;
}



.input-radio:after, .input-checkbox:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;
	transition-duration: 150ms;
	transition-property: background-color, border-color, box-shadow, color, -webkit-transform, transform, opacity;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.input-radio:checked, .input-checkbox:checked,
.input-checkbox:indeterminate {
	border-color: var(--input-color) !important;
/*	border: none;
	-webkit-box-shadow: 0 0 0 10px #6a4ab8 inset;
	box-shadow: 0 0 0 10px #6a4ab8 inset;*/
}

.input-radio:focus, .input-checkbox:focus {
	border-color: var(--dark-color);
	box-shadow: .5px .5px 0 var(--box-shadow), -.5px -.5px 0 var(--box-shadow), .5px -.5px 0 var(--box-shadow), -.5px .5px 0 var(--box-shadow);
}

.input-radio:disabled, .input-checkbox:disabled {
	opacity: .8;
	pointer-events: none;
	cursor: default;
	filter: grayscale(100%);
}

.input-radio:after {
	width: 8px;
	height: 8px;
	margin-left: -4px;
	margin-top: -4px;
	background-color: var(--input-color);
	border-radius: 50%;
}

.input-checkbox:after {
	width: 10px;
	height: 9px;
	margin-left: -5px;
	margin-top: -4px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-970.9 717 95.8 78"><path d="M-883.8 718.2a4 4 0 0 0-5.6 0l-49.5 49.5a4 4 0 0 1-5.6 0l-12.2-12.2a4 4 0 0 0-5.6 0l-7.5 7.5a4 4 0 0 0 0 5.6l25.3 25.3a4 4 0 0 0 5.6 0l62.6-62.6a4 4 0 0 0 0-5.6l-7.5-7.5z" fill="%23105dd1"/></svg>') no-repeat center left transparent;
}
.input-checkbox:indeterminate:after {
	height: 2px;
	margin-top: -1.5px;
	background: var(--input-color);
	border-radius: 4px;
}

.input-radio:checked:after, .input-checkbox:checked:after, .input-checkbox:indeterminate:after {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.input-radio:hover, .input-checkbox:hover {
	border-color: #8c7db0;
}

.input-radio:active, .input-checkbox:active {
	border-color: var(--input-color);
/*	background: #fbfafc;*/
}

/*  /STYLE FOR RADIO & CHECKBOX  */


.input_error{ border-color: var(--error-color) !important; }
.error { color: var(--error-color); }

.error p {
    font-size: 13px !important;
    font-weight: 400;
    padding-top: 3px;

}




.error p:first-letter {
	text-transform: uppercase;
}
.input_helper {
	font-size: 13px;
	color: #555;
	margin-top: 4px;
	line-height: 16px;
}


/*  ------------------------  */

.button {
	background: var(--light-gray);
	border: 1px solid var(--gray);
	color: var(--dark-color-text);
	border-radius: 4px;
	box-sizing: border-box;
	font-family: inherit !important;
	font-size: var(--text-font-size-button) !important;
	letter-spacing: var(--text-letter-spacing);
	height: auto;
	cursor: pointer;
	appearance: none;
    outline: none;
	display: inline-block;
	align-items: center;
	text-align: center;
	transition-duration: 150ms;
	transition-property: border-color, box-shadow, background, color, -webkit-transform, transform;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	position: relative;
	padding: 10px;
}

/** for multiline buttons */
.button span {
	display: inline-block;
	width: 100%;
	text-align: center;

}
.button:hover {
	background: var(--medium-gray);
	border-color: var(--primary-color);
}
.button:focus {
	border: 1px solid var(--input-color);
}
.button:active {
	box-shadow: 0 0 0 0 transparent, inset 0 1px 1px 0 hsla(340, 13%, 45%, 0.1), inset 0 1px 4px -1px hsla(340, 13%, 45%, 0.1);
	background: linear-gradient(180deg,var(--nearly-white),var(--nearly-white));
	border-color: var(--medium-gray);
}


.button.primary {
	float: right; /* TODO REMOVE */
	color:#fff;
	background: linear-gradient(180deg, hsl(340, 82%, 55%), hsl(340, 82%, 52%));
	border: 1px solid hsl(340, 82%, 41%);
	box-shadow: inset 0 1px 0 0 hsla(340, 82%, 59%, 1), 0 1px 0 0 hsla(340, 25%, 12%, 0.05), 0 0 0 0 transparent;
	font-weight: var(--text-font-weight-medium);
}
.button.primary:hover {
	border-color: hsl(340, 82%, 46%);
	background: linear-gradient(180deg, hsl(340, 82%, 52%), hsl(340, 82%, 47%));
}
.button.primary:focus {
	border-color:var(--input-color);
	box-shadow: inset 0 1px 0 0 hsla(340, 82%, 59%, 1), 0 1px 0 0 hsla(340, 25%, 12%, 0.05), 0 0 0 1px hsla(340, 78%, 29%, 1);
}
.button.primary:active {
	background: linear-gradient(180deg,hsla(340, 82%, 46%, 1),hsla(340, 82%, 46%, 1));
	border-color:var(--input-color);
	box-shadow: inset 0 0 0 0 transparent, 0 1px 0 0 hsla(340, 25%, 12%, 0.05), 0 0 1px 0 hsla(340, 82%, 41%, 1);
}

.button.loading {
	cursor: default;
	pointer-events: none;
	filter: grayscale(10%);
	opacity: .5;
}

.button.loading .button-text {
	opacity: 0;
}

.button.loading:after {
	height: 18px;
	width: 18px;
	animation: rotate 0.6s infinite linear;
	border: 3px solid var(--medium-gray);
	border-right-color: transparent;
	border-radius: 50%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -9px;
	box-sizing: border-box;
	margin-left: -9px;
}

.button.loading:after {
	border-color: #413e3f;
	border-right-color: transparent;
	opacity: .8;
}
.button.primary.loading:after {
	border-color: var(--medium-gray);
	border-right-color: transparent;
}

@keyframes rotate {
	0%    { transform: rotate(0deg); }
	100%  { transform: rotate(360deg); }
}

.button.secondary {
	padding: 0 8px;
	min-height: 28px;
}



.button.aqua {
	border-color: var(--aqua);
	color: var(--aqua);
	border-radius: 4px;
	background: url(https://static.popi.nz/img/icn_next_pink.svg) no-repeat right center var(--nearly-white);
	background-position: right 10px center;
	background-size: 6px;
}

.button.aqua.primary {
	background-color:var(--aqua);
	color:#fff;
	font-weight: 500 !important;
}


.button.aqua.primary:hover {
	background-color: #14ad7a;
	border-color: #14ad7a;
}




.button.pink {
	background: var(--primary-color) none;
	color:var(--white);
}

.button.pink.prev {
	background: url(https://static.popi.nz/img/icn_prev_pink.svg) no-repeat left center var(--nearly-white);
	background-position: left 10px center;
	background-size: 6px;
	float: left;
	padding: 0 12px 0 30px;
	border: none;
	color: var(--pink);
}

.button.pink.secure {
  background: url(https://static.popi.nz/img/icn_secure_white.svg) no-repeat right center transparent;
  background-position: right 10px center;
  background-size: 12px;
}


.button.pink.magic {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><g fill="none" fill-rule="evenodd" stroke="%23FFF" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M39.2 10.8l-4.1 8.1 6.3 6.3-8.8-1.4-4.1 8-1.4-8.9-8.9-1.4 8-4.1-1.4-8.8 6.3 6.3z"/><path d="M27.6 26.1L6 47.7c-1 1-2.7 1-3.7 0s-1-2.7 0-3.7l21.6-21.6M34.8 5.6L36.1.5m-8.4 5.1L26.4.5m18 21.8l5.1 1.3m-5.1-8.4l5.1-1.3m-40.7 31l-3.7-3.7"/></g></svg>') no-repeat right center var(--pink);
	background-position: right 10px center;
	background-size: 20px;
}


.button.pink.secondary {
	background: var(--nearly-white);
	min-height: 39px;
	color: var(--pink);
	align-items: center;
	vertical-align: middle;
	display: inline-flex;
}

.button.pink.secondary:hover {
	color: var(--white);
}


.button.mauve.secondary {
	background: var(--nearly-white);
	border: 0;
	height: 30px;
	color: var(--mauve);
}

.button.no_float {
	float: none !important;
}

.button.pink:hover {
    background-color: #aa1145;
	border-color: #aa1145;
}

.button.pink.secondary:hover {
    background-color: var(--pink);
	border-color:var(--pink);
}

.button.delete {
	background: var(--nearly-white);
	color: var(--boldred);
	float: left;
	/*padding: 0 12px;
	border: 1px solid #feefed;*/
}

.button.delete:hover {
	color: var(--boldred);
	background-color: var(--nearly-white);
}

.button.delete:focus {
	border: 1px solid #e91e63;
	color: var(--boldred);
	background-color: var(--nearly-white);
}

.button.back {
	background: transparent;
	color: #3b1393;
	float: left;
	padding: 0 12px;
	border: 1px solid var(--medium-gray);
}

.button.back:hover {

	color: #3b1393;
	background-color: var(--nearly-white);
}

.button.has_icn {
	/*padding-right: 28px !important;*/
	position: relative;
}

.button.has_icn:after {
	display: inline-block;
	height: 12px;
	width: 12px;
	margin-left: 5px;
	transition-duration: 150ms;
	transition-property: background-color, border-color, box-shadow, color, fill, -webkit-transform, transform, opacity;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.button.has_icn.next:after {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10"><path fill="%23fff" fill-rule="evenodd" d="M11.7 4.3L7.56.15a.5.5 0 0 0-.7 0l-.71.7a.5.5 0 0 0 0 .71L8.59 4H.5a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h8.09L6.15 8.44a.5.5 0 0 0 0 .7l.7.71c.2.2.52.2.71 0l4.15-4.14a1 1 0 0 0 0-1.42l-.01.01z"/></svg>') no-repeat center transparent;
}

.button.has_icn.next:hover:after {
	transform: translateX(2px);
}

.button.has_icn.previous:after {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10" style="transform:rotate(180deg)"><path fill="%23413e3f" fill-rule="evenodd" d="M11.7 4.3L7.56.15a.5.5 0 0 0-.7 0l-.71.7a.5.5 0 0 0 0 .71L8.59 4H.5a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h8.09L6.15 8.44a.5.5 0 0 0 0 .7l.7.71c.2.2.52.2.71 0l4.15-4.14a1 1 0 0 0 0-1.42l-.01.01z"/></svg>') no-repeat center transparent;
}


.button.has_icn.previous:hover:after {
	transform: translateX(-2px);
}


.button:after {
  content: " ";
}

.button.disabled {
  cursor: default;
  pointer-events: none;
  opacity: .3;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
/*  filter: url(https://static.popi.nz/img/grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

.button.full_width {
	width: 100%;
	float: none;
}

input.disabled {
	color: #69696e;
	cursor: default;
	pointer-events: none;
	background: #fafafa;
	border-color: #f5f5f5;
}

/*SLE*/
input:disabled {
	cursor: default;
	pointer-events: none;
	opacity: .3;
	filter: grayscale(100%);
	filter: gray;
}


input.disabled + label {
	color: #969696 !important;
	z-index: 1;
	cursor: default;
	pointer-events: none;
}

/* Prevent spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}



.btn_mauve_small {
	background: linear-gradient(180deg,#fff,#f9f8fc);
	color: #3b1393;
	font-size: var(--text-font-size);
	padding: 5px 7px;
	border-radius: 3px;
	border: 1px solid #3b13be;
	display: inline-block;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: -.2px;
	line-height: 13px;
}

.btn_mauve_small:hover {
	background: linear-gradient(180deg, #fff, #ebe7f6);
}


.btn_back {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1015.1 755.4 15.3 26.6"><path fill="%233b1393" d="M-1013.1 770.7a2 2 0 0 1-1.4-.6 2 2 0 0 1 0-2.8l11.3-11.3c.8-.8 2-.8 2.8 0s.8 2 0 2.8l-11.3 11.3c-.3.4-.8.6-1.4.6z"/><path fill="%233b1393" d="M-1001.8 782a2 2 0 0 1-1.4-.6l-11.3-11.3c-.8-.8-.8-2 0-2.8s2-.8 2.8 0l11.3 11.3c.8.8.8 2 0 2.8a2 2 0 0 1-1.4.6z"/></svg>') no-repeat 10px center rgba(255, 255, 255, .6);
	background-size: 6px;
	color: #3b1393;
	font-size: var(--text-font-size);
	padding: 8px 10px 8px 24px;
	border-radius: 4px;
	border: 1px solid #ede9f5;
	display: inline-block;
	margin-bottom: 20px;
}
.btn_back:hover {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1015.1 755.4 15.3 26.6"><path fill="%23e91e63" d="M-1013.1 770.7a2 2 0 0 1-1.4-.6 2 2 0 0 1 0-2.8l11.3-11.3c.8-.8 2-.8 2.8 0s.8 2 0 2.8l-11.3 11.3c-.3.4-.8.6-1.4.6z"/><path fill="%23e91e63" d="M-1001.8 782a2 2 0 0 1-1.4-.6l-11.3-11.3c-.8-.8-.8-2 0-2.8s2-.8 2.8 0l11.3 11.3c.8.8.8 2 0 2.8a2 2 0 0 1-1.4.6z"/></svg>') no-repeat 10px center rgba(255, 255, 255, 1);
	background-size: 6px;
	color: #e91e63;
}

.button + .button {
	margin-right: 12px;
}
label.required{
	display: inline-block;
}

label.required:after {
	content: "*";
	display: block;
	float: right;
	color: red;
	top: -3px;
	position: relative;
}