:root {
  --mainColor: #00884e;
  --buttonColor: #238478;
  --hoverColor: #154F48; 
  --text-primary: #29292A;  
  --font-family: Roboto, Montserrat, sans-serif;
  --info-background: #E8F6FE;
}


.contained-button {
  margin-top: 1rem;
  margin-bottom: 0;
  background-color: var(--buttonColor);
  border: 1px solid var(--buttonColor);
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px 32px;
  font-family: Roboto, Nunito, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: white;
  font-weight: bold;
  max-width: min-content;
}

.contained-button:hover {
  background-color: var(--hoverColor);
  cursor: pointer;
}

.loginLink {
  font-family: Roboto, Nunito, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  color: var(--buttonColor);
  margin-top: 1rem !important;
  border: 1px solid transparent;
  padding: 18px 30px;
  font-weight: bold;
}

.loginLink:hover {
  color: var(--hoverColor);
}

.info-icon {
  display: inline-block;
  width: 24px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--info-dark, #346295);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 6.41667H13V8.25H11V6.41667ZM11 10.0833H13V15.5833H11V10.0833ZM12 1.83333C6.48 1.83333 2 5.94 2 11C2 16.06 6.48 20.1667 12 20.1667C17.52 20.1667 22 16.06 22 11C22 5.94 17.52 1.83333 12 1.83333ZM12 18.3333C7.59 18.3333 4 15.0425 4 11C4 6.9575 7.59 3.66667 12 3.66667C16.41 3.66667 20 6.9575 20 11C20 15.0425 16.41 18.3333 12 18.3333Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 6.41667H13V8.25H11V6.41667ZM11 10.0833H13V15.5833H11V10.0833ZM12 1.83333C6.48 1.83333 2 5.94 2 11C2 16.06 6.48 20.1667 12 20.1667C17.52 20.1667 22 16.06 22 11C22 5.94 17.52 1.83333 12 1.83333ZM12 18.3333C7.59 18.3333 4 15.0425 4 11C4 6.9575 7.59 3.66667 12 3.66667C16.41 3.66667 20 6.9575 20 11C20 15.0425 16.41 18.3333 12 18.3333Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.info-card {
  border-radius: 4px;
  padding: 6px 16px;
  background-color: var(--info-background);
  height: fit-content;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.25;
  text-transform: none;
  color: var(--info-dark, #346295);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.page-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
  max-width: 900px;
  padding: 48px 24px;
}

.fp-card {
  border: none;
  border-radius: 4px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
}

.fp-create-password-card {
  display: flex;
  flex-direction: row;
}

.button-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 34px;
}

.fp-card-header {
  font-size: 16px;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  color: #38383b;
  text-transform: none;
}

.fp-page-title {
  font-size: 20px;
  font-family: var(--h2-font, Roboto, Montserrat, sans-serif);
  color: var(--neutral-dark, #707173);
  text-transform: none;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fp-shield-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--neutral-dark, #5E6875);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 12.59L15.4 16.47L12 14.42L8.6 16.47L9.5 12.6L6.5 10.01L10.46 9.67L12 6.02L13.54 9.66L17.5 10L14.5 12.59ZM12 3.19L19 6.3V11C19 15.52 16.02 19.69 12 20.93C7.98 19.69 5 15.52 5 11V6.3L12 3.19ZM12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 12.59L15.4 16.47L12 14.42L8.6 16.47L9.5 12.6L6.5 10.01L10.46 9.67L12 6.02L13.54 9.66L17.5 10L14.5 12.59ZM12 3.19L19 6.3V11C19 15.52 16.02 19.69 12 20.93C7.98 19.69 5 15.52 5 11V6.3L12 3.19ZM12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.typography-body1 {
  font-size: 16px;
  font-family: var(--font-family);
  line-height: 1.5;
  text-transform: none;
}

.typography-body2 {
  font-size: 14px;
  font-family: var(--font-family);
  line-height: 1.25;
  text-transform: none;
}

.typography-body3 {
  font-size: 24px;
  font-family: var(--font-family);
  line-height: 1.75;
  text-transform: none;
}

.text-color-primary {
  color: var(--text-primary);
}



/* Confirmation Banner Styles */
.fp-confirmation-banner {
  background-color: #e6f4ed;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #b8e6d0;
}

.confirmation-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.confirmation-banner-icon {
  font-size: 24px;
  color: #6DC768;
  flex-shrink: 0;
  margin-top: 2px;
}

.confirmation-banner-text {
  flex: 1;
}

.confirmation-main-text {
  font-size: 16px;
  font-family: Roboto, Montserrat, sans-serif;
  color: var(--success-extra-dark, #38383b);
  margin: 0 0 10px 0;
  line-height: 1.5;
}

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

.left-side {
  width: 50%;
}

.page {
  padding: 20px;
  max-width: 1100px;
  font-family: Montserrat, sans-serif;
}

.input-textbox-label {
  font-size: 14px;
  font-weight: 400;
  font-family: Roboto, Montserrat, sans-serif;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-transform: none;
}

.input-textbox-label-error {
            color: #ba1a1a;
        }


.input-textbox {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary, #38383b);
}

.input-textbox:focus {
  border-color: var(--hoverColor);
  outline: none;
}

.password-rules {
  margin-left: 20px;
}

/* Email validation error message */
.email-error-message {
  color: #d32f2f;
  background-color: #ffebee;
  border: 1px solid #ef5350;
  border-radius: 4px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
  font-family: Montserrat, sans-serif;
}

@media only screen and (max-width: 1024px) {
  .fp-create-password-card {
    flex-direction: column;
  }
  .password-rules {
    margin-left: 0;
  }
  .left-side {
    width: 100%;
  }
}