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

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

#mfa_setup_container {
  width: 20vw !important;
  height: var(--login-container-height) !important;
  overflow: auto;
  width: var(--login-container-width) !important;
  width: var(--login-container-width) !important;
  height: var(--login-container-height_stretched) !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_setup_button_container {
  height: 100%;
  background-color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;

}

#mfa_setup_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_setup_button:hover {
  background-color: var(--purple-light) !important;
}

#feedback_mfa_setup_row {

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


#mfa_setup_button,#back_mfa_setup_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_setup_button {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

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



#mfa_setup_button:hover, #back_mfa_setup_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;
}

#mfa_qr_code_container {
  padding-top: 1vh;
}

#mfa_qr_code_container Img {
  width: 10vw;
  height: 10vw;
}

/* #mfa_code {
  font-size: calc(0.8 * var(--font-size-body))
} */