#mfa_page_header {
  font-size: var(--font-size-header);
  font-weight: bold;
  text-align: center;
}

#mfa_page {
  background-color: var(--grey-background) !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#mfa_page_container {
  width: 20vw !important;
  height: var(--login-container-height) !important;
  overflow: auto;
  width: var(--login-container-width) !important;
  background-color: var(--auth-background) !important;
  border-radius: var(--border-radius) !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: min(2vw,20px) 1vw;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
  !important
}



#mfa_page_button_container {
  height: 100%;
  background-color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;

}

#mfa_page_button {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: var(--border-radius) !important;
  height: var(--button-height-large) !important;
  background-color: var(--purple-dark);
  color: white !important;
  margin-bottom: 0.5vh;
}


#mfa_page_button:hover {
  background-color: var(--purple-light) !important;
}

#feedback_mfa_page_row {

  background-color: inherit;
  margin-top: 2vh;
  text-align: center;
}


#mfa_page_button,#back_mfa_page_button {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: none;

  height: 2.5vw !important;
  background-color: var(--purple-dark);
  color: white !important;
  margin-bottom: 0.5vh;
  border-radius: var(--border-radius) !important;
  height: var(--button-height-large) !important;
}

#mfa_page_button {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

#back_mfa_page_button {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}



#mfa_page_button:hover, #back_mfa_page_button:hover {
  background-color: var(--purple-light) !important;
}


#mfa_button_container_row {
  height: 100%;
  background-color: inherit;
  display: flex;
  flex-direction: row;
  justify-content: flex-end !important;
  width: 100%;
  height: 2.5vw !important;
}