/****************************************
  ==== RESETS
****************************************/

input, select, textarea, button {
  outline: none; -webkit-appearance: none;
}
select {
  -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
}
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0;
}

/****************************************
  ==== WRAPPERS
****************************************/

.primary-field {
  display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: stretch;
}
.secondary-field {
  display: -webkit-flex; display: flex; justify-content: center; align-items: flex-start; gap: 20px; align-self: stretch; font-size: 1.4em; line-height: 1.35714; color: #000000;
}
.secondary-field .action-wrap {
  flex: 1;
}
.secondary-field .action-wrap.align-left {
  text-align: left;
}
.secondary-field .action-wrap.align-right {
  text-align: right;
}
.new-password-wrap {
  display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: stretch; position: relative;
}
.field-validation-wrap {
  display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; align-self: stretch; position: relative;
}

/****************************************
  ==== INPUTS, TEXTAREAS & LABELS
****************************************/
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; height: 2.286em; font-size: 1.4em; display: block; line-height: 1; padding: 0 12px; border: #8c8986 1px solid; outline-width: 0; outline: none; background: #fff; resize: vertical; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
textarea {
  height: 150px;
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, select:focus, textarea:focus,
input[type="text"]:active, input[type="tel"]:active, input[type="email"]:active, input[type="url"]:active, input[type="number"]:active, input[type="password"]:active, input[type="search"]:active, select:active, textarea:active {
  -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E; -moz-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E;
}
input[type="text"]:hover, input[type="text"]:has(+ .toggle-pwd:hover), input[type="tel"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="password"]:has(+ .toggle-pwd:hover), input[type="search"]:hover, select:hover, textarea:hover {
  -webkit-box-shadow: 0px 0px 0px 3px rgba(158, 0, 126, .2); -moz-box-shadow: 0px 0px 0px 3px rgba(158, 0, 126, .2); box-shadow: 0px 0px 0px 3px rgba(158, 0, 126, .2);
}
input[type="text"]:disabled, input[type="tel"]:disabled, input[type="email"]:disabled, input[type="url"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed; border-color: #F7F4F2; background-color: #F7F4F2;
}
input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, input[type="url"]::placeholder, input[type="number"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder, select::placeholder, textarea::placeholder {
  color: #8c8986;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, #ffffff 0s 600000s !important;
}

/****************************************
  ==== FORM LABELS & MESSAGES
****************************************/

label {
  display: block; margin: 0; cursor: pointer; font-weight: 700; text-align: left; font-size: 1.6em; line-height: 1.5;
}
label .info-icon {
  position: relative; top: 3px;
}

/****************************************
  ==== CHECKBOXES
****************************************/

input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked {
  position: absolute; left: -9999px;
}
input[type="checkbox"]:not(:checked) + label, input[type="checkbox"]:checked + label {
  position: relative; padding: 0 0 0 26px; margin: 0; line-height: 22px; display: inline-block; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
input[type="checkbox"]:not(:checked) + label:before, input[type="checkbox"]:checked + label:before {
  content: ''; width: 18px; height: 18px; position: absolute; left: 0; top: 0; border: #8c8986 1px solid; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
input[type="checkbox"]:not(:checked) + label:after, input[type="checkbox"]:checked + label:after {
  content: ''; width: 20px; height: 20px; line-height: 20px; position: absolute; top: 1px; left: 1px; text-align: center; font-family: 'icons8'; font-size: 100%;
}
input[type="checkbox"]:checked + label:before {
  background-color: #9E007E; background-image: url('../images/global/checkbox/checkmark.svg'); background-size: contain; border-color: #9E007E;
}
input[type="checkbox"]:checked:focus + label:before, input[type="checkbox"]:not(:checked):focus + label:before {
  -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E; -moz-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E;
}
input[type="checkbox"]:checked:active + label:before {
  background-color: #4F003F; background-image: url('../images/global/checkbox/checkmark.svg'); background-size: contain; border-color: #4F003F;
}
input[type="checkbox"]:not(:checked):active + label:before {
  border-color: #4F003F; background-color: #F5E6F2;
}
input[type="checkbox"]:checked:hover + label:before, input[type="checkbox"]:not(:checked):hover + label:before {
  -webkit-box-shadow: 0px 0px 0px 3px rgba(158, 0, 126, .2); -moz-box-shadow: 0px 0px 0px 3px rgba(158, 0, 126, .2); box-shadow: 0px 0px 0px 3px rgba(158, 0, 126, .2);
}
input[type="checkbox"].error:not(:checked) + label:before {
  border-color: #FC3B58;
}
input[type="checkbox"]:disabled:not(:checked) + label:before, input[type="checkbox"]:disabled:checked + label:before {
  cursor: not-allowed; border-color: #F7F4F2;
}
input[type="checkbox"]:disabled + label {
  cursor: not-allowed; color: #8c8986; font-style: italic;
}
.secondary-field .action-wrap input[type="checkbox"]:not(:checked) + label, .secondary-field .action-wrap input[type="checkbox"]:checked + label {
  font-size: inherit; line-height: inherit;
}

/****************************************
  ==== RADIO BUTTONS
****************************************/

input[type="radio"]:not(:checked), input[type="radio"]:checked {
  position: absolute; left: -9999px;
}
input[type="radio"]:not(:checked) + label, input[type="radio"]:checked + label {
  position: relative; padding: 0 0 0 32px; margin: 0 0 15px 0; line-height: 22px; display: inline-block; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
input[type="radio"]:not(:checked) + label:before, input[type="radio"]:checked + label:before {
  content: ''; width: 20px; height: 20px; position: absolute; left: 0; top: 0; border: #F7F4F2 1px solid; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 2px 0 rgba(60,72,94,0.05); -moz-box-shadow: 0 2px 0 rgba(60,72,94,0.05); box-shadow: 0 2px 0 rgba(60,72,94,0.05);
}
input[type="radio"]:not(:checked) + label:after, input[type="radio"]:checked + label:after {
  content: ''; width: 12px; height: 12px; position: absolute; top: 5px; left: 5px; text-align: center; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
input[type="radio"]:checked + label:before {
  background: #fff;
}
input[type="radio"]:checked + label:after {
  background: #0e38b1;
}
input[type="radio"]:checked:focus + label:before, input[type="radio"]:not(:checked):focus + label:before {
  border-color: #0e38b1;
}
input[type="radio"].error:not(:checked) + label:before, input[type="radio"].error:checked + label:before {
  border-color: #FC3B58;
}
input[type="radio"]:disabled:not(:checked) + label:before, input[type="radio"]:disabled:checked + label:before {
  cursor: not-allowed; border-color: #F7F4F2;
}
input[type="radio"]:disabled + label {
  cursor: not-allowed; color: #8c8986; font-style: italic;
}

/****************************************
  ==== SHOW/HIDE PWD ICON
****************************************/

input.validate-pwd {
	padding-right: 30px;
}
.toggle-pwd {
  position: absolute !important; top: 17px; right: 7px; cursor: pointer;
}
.toggle-pwd:before {
  font-size: 200%;
}
.toggle-pwd.visible:after {
  content: ''; width: 2px; height: 20px; display: block; position: absolute; top: 0; left: 50%; margin: 0 0 0 -1px; visibility: visible; background: #000000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
}
.toggle-pwd span.s, .toggle-pwd.visible span.h {
  display: block;
}
.toggle-pwd span.h, .toggle-pwd.visible span.s {
  display: none;
}

/****************************************
  ==== PASSWORD HELPER
****************************************/

div.password-helper div.lbls small {
  line-height: 1.5; margin: 0 0 5px 0; padding: 0 0 0 30px; position: relative; color: #000000;
}
div.password-helper div.lbls small span {
  width: 21px; height: 21px; line-height: 21px; position: absolute; top: 0; left: 0; text-align: center; background: #F7F4F2; color: #F7F4F2;
}
div.password-helper div.lbls small.fulfilled span {
  background: #9E007E; color: #fff;
}

/****************************************
  ==== RECAPTCHA
****************************************/

.primary-field .g-recaptcha {
  align-self: stretch; background: #f9f9f9; padding: 0 15px; border: 1px solid #d3d3d3; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,.08); -moz-box-shadow: 0 0 4px 1px rgba(0,0,0,.08); box-shadow: 0 0 4px 1px rgba(0,0,0,.08); -webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,.08); -moz-box-shadow: 0 0 4px 1px rgba(0,0,0,.08);
}

.primary-field .g-recaptcha > div {
  position: relative; overflow: hidden; width: 298px !important; height: 74px !important;
}

.primary-field .g-recaptcha > div > div {
  position: absolute; top: -1px; left: -1px;
}
