:root {
  --light-blue-clicklease: linear-gradient(107.48deg, #0396d026 0%, #07888815 100%),
    linear-gradient(0deg, #FDFDFE, #fcfcfd);
  --card-container-background: linear-gradient(138deg, #F7FCFE 0%, #FDFDFE 100%);
  --white-color: #ffffff;
  --active-color: #4e5b63;
  --label-default-color: #9e9e9e;
  --label-active-color: #1f2427;
  --label-error-color: #e4193f;
  --input-default-color: #697a86;
  --input-disabled-color: #969899;
  --input-disabled: #5a59596b;
  --input-active-color: #909ca5;
  --input-error-color: #F44336;
  --button-primary: #0396d0;
  --button-primary-hover: #00719e;
  --button-primary-focus: #004e6d;
  --alert-warning-background: #FDF5EF;

  --border-radius-size: 0.75rem;
  --font-name: 'Figtree';
  --default-font-size-px: 16px;
  --default-font-size: 1rem;
  --small-font-size: 0.875rem;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  font-family: var(--font-name);
  font-size: var(--default-font-size-px);
  line-height: 1.15;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

img {
  border-style: none;
}

[hidden] {
  display: none;
}

.main-container {
  background: var(--light-blue-clicklease);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 1.5rem;
  min-height: 100vh;
  position: relative;
}

.main-container:before {
  flex-grow: 1;
  min-height: 1.875rem;
  box-sizing: border-box;
}

.main-container:after {
  min-height: 4rem;
  flex-grow: 1;
  box-sizing: border-box;
}

.main-container .card-container {
  width: 26.625rem;
  border-radius: 1rem;
  padding: 2.5rem;
  position: relative;
  margin: auto;
  flex-shrink: 0;
  background: var(--card-container-background);
  border: 1px solid var(--white-color);
  box-shadow: 0px 2px 8px #505a621a, 0px 8px 12px #505a6214;
  box-sizing: border-box;
}

.main-container .card-container .clk-header-logo {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translate(-50%, 0);
}


.reset-title {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));
  text-align: center;
  font-family: Figtree;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}


.invalid {
  color: var(--label-error-color) !important;
}

.hiddendiv {
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding-top: 1.2rem;
  position: absolute;
  top: 0;
  z-index: -1;
}

.section-title {
  margin-bottom: 0;
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));
  text-align: center;
  font-family: Figtree;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.section-description {
  margin-top: 0;
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));
  text-align: center;
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  width: 353px;
  height: 40px;
}

.alert {
  display: inline-flex;
  width: 100%;
  margin-bottom: 15px;
  border-radius: var(--border-radius-size);
}

.alert-warning {
  background: #FDF5EF;
  /* display: none; */
}

.material-icons {
  color: #b4bdc3;
  text-rendering: optimizeLegibility;
  font-size: 1.3rem;
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  font-family: var(--font-name);
  transition: background-color 5000s;
  font-size: var(--default-font-size);
}

.input-field {
  width: 100%;
  height: 43px;
  position: relative;
  margin-top: 1rem;
  /* margin-bottom: 0.25rem; */
  padding: 0 12px;
  border-radius: 0.75rem;
  background: var(--white-color) !important;
  border: 1px solid #ebedef;
  display: flex;
  align-items: center;
}

div#input-container-confirm-password {
  margin-bottom: 2.5rem;
}

.prefix {
  width: 92%;
}

i.material-icons.suffix.input-icon-error-new-pass.invalid,
i.material-icons.suffix.input-icon-error-confirm-pass.invalid {
  margin-left: 8px;
}

i.material-icons.suffix.input-icon-new-pass,
i.material-icons.suffix.input-icon-confirm-pass {
  cursor: pointer;
}

.input-label {
  font-size: 0.9rem;
  position: absolute;
  top: 0.6rem;
  left: 0.7rem;
  cursor: text;
  margin-left: 3rem;
  color: var(--label-default-color);
  -webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
  transition: color .2s ease-out, -webkit-transform .2s ease-out;
  transition: transform .2s ease-out, color .2s ease-out;
  transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  text-align: initial;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

.input-field .prefix~.form-input,
.input-field .prefix~.input-label,
.input-field .prefix~.validate~.input-label,
.input-field .prefix~.helper-text,
.input-field .prefix~.autocomplete-content {
  margin-left: 2rem;
  width: 92%;
  width: calc(100% - 3rem);
}

.input-field.col .prefix~.input-label,
.input-field.col .prefix~.validate~.input-label {
  display: block;
  font-family: var(--font-name);
  font-size: var(--small-font-size);
  font-weight: 500;
  line-height: var(--default-font-size);
  letter-spacing: 0rem;
  text-align: left;
  width: calc(100% - 3rem - 1.5rem);
}

.input-field>.input-label:not(.label-icon).active {
  -webkit-transform: translateY(-14px) scale(0.8);
  transform: translateY(-6px) scale(0.8);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  color: var(--label-active-color);
}

.input-field .prefix.active {
  color: var(--input-active-color);
}

.input-field .prefix {
  position: absolute;
  width: 3rem;
  -webkit-transition: color .2s;
  transition: color .2s;
  top: 12px;
}

.btn,
.form-input {
  font-family: var(--font-name);
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-decoration: none;
}

.form-input {
  background-color: var(--white-color);
  font-size: var(--default-font-size);
  font-style: normal;
  font-weight: 400;
  color: var(--input-default-color);
  box-sizing: border-box;
  outline: none;
  width: 95%;
  height: 1.5rem;
  border: none;
  margin: 16px 0px 6px 2rem;
  padding: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: border .3s, -webkit-box-shadow .3s;
  transition: border .3s, -webkit-box-shadow .3s;
  transition: box-shadow .3s, border .3s;
  transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
}

.form-input.valid,
.form-input.valid:focus {
  background: var(--white-color);
  color: var(--label-active-color);
}

.form-input.invalid,
.form-input.invalid:focus {
  background: var(--white-color);
  color: var(--label-active-color);
}

.form-input.valid~.helper-text[data-success],
.form-input:focus.valid~.helper-text[data-success],
.form-input.invalid~.helper-text[data-error],
.form-input:focus.invalid~.helper-text[data-error] {
  background-color: var(--white-color);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.form-input.valid~.helper-text:after,
.form-input:focus.valid~.helper-text:after {
  color: var(--label-active-color);
}

.form-input.invalid~.helper-text:after,
.form-input:focus.invalid~.helper-text:after {
  color: var(--label-error-color);
}

.form-input+.input-label:after {
  display: block;
  content: "";
  position: absolute;
  top: 130%;
  left: 0;
  opacity: 0;
  -webkit-transition: .2s opacity ease-out, .2s color ease-out;
  transition: .2s opacity ease-out, .2s color ease-out;
}

.form-input:not(.browser-default).validate+.input-label {
  width: 100%;
}

.form-input-container-focus {
  border: 1px solid var(--input-active-color);
}

.form-input-container-error {
  border: 1px solid var(--input-error-color);
}

::-webkit-input-placeholder {
  color: #d1d1d1;
}

::-moz-placeholder {
  color: #d1d1d1;
}

:-ms-input-placeholder {
  color: #d1d1d1;
}

::-ms-input-placeholder {
  color: #d1d1d1;
}

::placeholder {
  color: #d1d1d1;
}

.btn {
  font-size: 1.25rem;
  font-weight: 800;
  border: none;
  border-radius: 0.75rem;
  display: flex;
  height: 40px;
  width: 100%;
  line-height: 24px;
  letter-spacing: 0.04em;
  /* margin: 0.3rem 0; */
  padding: 0px 16px;
  vertical-align: middle;
  text-transform: none;
  color: var(--white-color);
  text-align: center;
  letter-spacing: .5px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  align-items: center;
  justify-content: center;
}

.btn::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.btn:-moz-focusring {
  outline: 1px dotted ButtonText;
}

.btn.disabled,
.btn:disabled,
.btn[disabled] {
  pointer-events: none;
  background-color: #DFDFDF !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #9F9F9F !important;
  cursor: default;
}

.btn.disabled:hover,
.btn:disabled:hover,
.btn[disabled]:hover {
  background-color: #DFDFDF !important;
  color: #9F9F9F !important;
}

.btn.btn-primary {
  background-color: var(--button-primary) !important;
  color: var(--Base-Colors-White, #FFF) !important;

}

.btn.btn-primary.disabled {
  opacity: 0.4;
}

.btn.btn-link {
  line-height: 2;
  color: var(--button-primary);
  /* background-color: var(--white-color); */
}

.btn.btn-link.btn.disabled {
  color: var(--button-primary);
  background-color: var(--white-color);
}

.btn.btn-primary:hover {
  background-color: var(--button-primary-hover);
}

.btn.btn-link:hover {
  background-color: #f1f9fd;
}

.btn.btn-primary:focus {
  background-color: var(--button-primary-focus);
}

.btn.btn-link:focus {
  color: #004e6d;
  background-color: #d9eff8;
}

.icon-success {
  background-image: url(../img/check_circle.svg) !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
}

.icon-warning {
  background-image: url(../img/warning.svg) !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
}

.icon-error {
  background-image: url(../img/emergency_home.svg) !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
}

.icon-info {
  background-image: url(../img/info.svg) !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
}

.icon-error-action {
  background-image: url(../img/error.svg) !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
}

.icon-link-off {
  background-image: url(../img/link_off.svg) !important;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
}

.icon-container {
  width: 12%;
}

.icon {
  width: 24px;
  height: 24px;
  margin: 1rem;
  display: inline-block;
}


div.head-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

span.expired-icon {
  background: linear-gradient(180deg, #ECB432 0%, #E7711E 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 48px;
  font-weight: 300;
}


.alert-success {
  background: var(--Success-200, #EDF6F4);
}

.alert-warning {
  background: var(--High-alert-200, #FDF5EF);
}

.alert-error {
  background: var(--Destroy-200, #FDEEF1);
}

.alert-info {
  background: var(--Tertiary-200, #EDF0FC);
}

.alert-desc {
  width: 80%;
  margin-top: 13px;
  margin-left: 13px;
  text-align: justify;
}

.alert-desc .alert-desc-title,
.alert-desc .alert-desc-subtitle {
  font-size: var(--default-font-size);
  margin: 0;
}

.alert-desc .alert-desc-subtitle {
  font-weight: 400;
  line-height: 1rem;
}



.card-header {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.01em;
  color: #1F2427;
  margin: 0 0 24px 0;
}

.alert-title-class {
  font-family: 'Figtree';
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.01em;
  margin: 0 !important;
  color: #1F2427;
}

.alert-content-class {
  width: 75%;
  font-family: 'Figtree';
  font-size: 14px;
  margin: 0 !important;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0em;
  color: #1F2427;
}

.error-container {
  display: flex;
  width: 322px;
  flex-direction: column;
  padding: 0px 12px;
}

label.error-label#password-new-error-0,
label.error-label#password-new-error-1,
label.error-label#password-new-error-2,
label.error-label#password-confirm-error-0 {
  color: var(--base-colors-destroy-700, #E4193F);
  font-family: Figtree;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.24px;
}

.alert-error-login-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 8px;
  background: var(--High-alert-200, #FDF5EF);
}

.alert-error-login-content {
  display: flex;
  padding: 16px;
  gap: 16px;
}

.alert-generic-error {
  display: flex;
  padding: 16px;
}

.error-icon {
  font-variation-settings: 'FILL' 1, 'wght' 0, 'GRAD' 0, 'opsz' 24 !important;
  background: linear-gradient(180deg, #ECB432 0%, #E7711E 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.error-message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

.input-error-message-login {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));

  /* Figtree/Title/M - 16 */
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  /* 125% */
}

.fa.fa-fw.fa-exclamation-circle,
.fa.fa-fw.fa-exclamation-triangle,
.fa.fa-fw.fa-check-circle,
.fa.fa-fw.fa-info-circle {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));

  /* Figtree/Body/M - 16 (Base) */
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  width: 274px
    /* 125% */
}

.input-error-desc-login {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));

  /* Figtree/Body/M - 16 (Base) */
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
}

section.alert.alert-warning.pf-m-warning {
  display: none;
}

/* Link expired*/

div.expired-title {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));
  text-align: center;
  font-family: Figtree;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

p.expired-link-Desc {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));
  text-align: center;
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

div.expired-icon-content,
div.error-icon-content {
  border-radius: 200px;
  background: var(--High-alert-200, #FDF5EF);
  display: flex;
  width: 80px;
  height: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

div.expired-link-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

section.action-header-section {
  display: flex;
  justify-content: center;
  padding-bottom: 16px;
}

.error-action {
  display: flex;
  width: 80px;
  height: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 200px;
  background: var(--High-alert-200, #FDF5EF);
}

span.icon-size-48 {
  height: 48px;
  width: 48px;
}

.error-action-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

span.error-action-title {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));
  text-align: center;
  font-family: Figtree;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

span.error-action-desc {
  color: var(--base-colors-text-1000, var(--base-colors-text-1000, #1F2427));
  text-align: center;
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

div.error-action-content {
  display: flex;
  padding: 0px 24px;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.action-btn-container {
  width: 100%;
}

div#kc-form-buttons {
  padding-top: 40px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}