@font-face {
  font-family: "Sul Sans";
  src: url("/infusionsoft/fonts/Sul-Sans/Sul-Sans-Regular-05d103149f01b5649356842f4c0bf75e.otf");
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: "Sul Sans";
  src: url("/infusionsoft/fonts/Sul-Sans/Sul-Sans-Italic-d1dc4963d64076947ce22d1a9e733334.otf");
  font-weight: normal;
  font-style: italic
}

@font-face {
  font-family: "Sul Sans";
  src: url("/infusionsoft/fonts/Sul-Sans/Sul-Sans-Medium-4bd2db7a3f99a9f15a74bcd7b1316e2b.otf");
  font-weight: 500;
  font-style: normal
}

@font-face {
  font-family: "Sul Sans";
  src: url("/infusionsoft/fonts/Sul-Sans/Sul-Sans-Medium-Italic-3f794520255198822751aa5431d7c811.otf");
  font-weight: 500;
  font-style: italic
}

@font-face {
  font-family: "Sul Sans";
  src: url("/infusionsoft/fonts/Sul-Sans/Sul-Sans-Bold-28b2b9562a06614e324d4601528dc600.otf");
  font-weight: bold;
  font-style: normal
}

@font-face {
  font-family: "Sul Sans";
  src: url("/infusionsoft/fonts/Sul-Sans/Sul-Sans-Bold-Italic-f3784b25ee0e9d781cb307bc48a241f3.otf");
  font-weight: bold;
  font-style: italic
}

@font-face {
  font-family: "Sul Sans";
  src: url("/infusionsoft/fonts/Sul-Sans/Sul-Sans-Light-55b7554414e80814cd0461faa977f742.otf");
  font-weight: 300;
  font-style: normal
}

:root {
  --color-primary-lightest: #004aff;
  --color-primary-lighter: #003fee;
  --color-primary: #0040db;
  --color-primary-darker: #003db5;
  --color-primary-darkest: #003b95;
  --color-success-lightest: #4fda4e;
  --color-success-lighter: #3bc03a;
  --color-success: #36a635;
  --color-success-darker: #348f33;
  --color-success-darkest: #1d581c;
  --color-error-lightest: #ff4f26;
  --color-error-lighter: #ee4725;
  --color-error: #e24825;
  --color-error-darker: #ae4023;
  --color-error-darkest: #953019;
  --color-gray-lightest: #cdcdd1;
  --color-gray-lighter: #a6a8b3;
  --color-gray: #5d5c5f;
  --color-gray-darker: #4a4a57;
  --color-gray-darkest: #242433;
  --border-radius: 8px;
  --spacing: 8px;
  --font-family: "Sul Sans";
  --transition-duration: 0.15s
}

body {
  font-family: var(--font-family), Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--color-gray)
}

a {
  color: inherit;
  outline: none !important
}

a:hover, a:focus, a:active {
  color: var(--color-primary)
}

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

.text-success {
  color: var(--color-success)
}

.text-error {
  color: var(--color-error)
}

.btn {
  padding: var(--spacing) calc(var(--spacing) * 2);
  font-weight: 100;
  border-radius: var(--border-radius);
  outline: none !important;
  border: none !important;
  -webkit-transition: color var(--transition-duration) ease-in, var(--transition-duration) ease-in, opacity var(--transition-duration) ease-in;
  -moz-transition: color var(--transition-duration) ease-in, var(--transition-duration) ease-in, opacity var(--transition-duration) ease-in;
  -ms-transition: color var(--transition-duration) ease-in, var(--transition-duration) ease-in, opacity var(--transition-duration) ease-in;
  -o-transition: color var(--transition-duration) ease-in, var(--transition-duration) ease-in, opacity var(--transition-duration) ease-in;
  transition: color var(--transition-duration) ease-in, var(--transition-duration) ease-in, opacity var(--transition-duration) ease-in
}

.btn:disabled {
  opacity: .5 !important
}

.btn.btn-primary {
  background-color: var(--color-primary) !important
}

.btn.btn-primary:not(:disabled):hover, .btn.btn-primary:not(:disabled):focus {
  background-color: var(--color-primary-darker) !important
}

.btn.btn-primary:not(:disabled):active {
  background-color: var(--color-primary-darkest) !important
}

.btn.btn-mfa-get-started {
  background-color: var(--color-primary) !important;
  color: #fff;
}

.btn.btn-mfa-get-started:not(:disabled):hover, .btn.btn-mfa-get-started:not(:disabled):focus {
  background-color: var(--color-primary-darker) !important;
  color: #fff;
}

.btn.btn-mfa-get-started:not(:disabled):active {
  background-color: var(--color-primary-darkest) !important;
  color: #fff;
}

.btn.btn-success {
  background-color: var(--color-success) !important
}

.btn.btn-success:not(:disabled):hover, .btn.btn-success:not(:disabled):focus {
  background-color: var(--color-success-darker) !important
}

.btn.btn-success:not(:disabled):active {
  background-color: var(--color-success-darkest) !important
}

.btn.btn-error {
  background-color: var(--color-error) !important
}

.btn.btn-error:not(:disabled):hover, .btn.btn-error:not(:disabled):focus {
  background-color: var(--color-error-darker) !important
}

.btn.btn-error:not(:disabled):active {
  background-color: var(--color-error-darkest) !important
}

.input-wrapper {
  position: relative;
  text-align: left
}

.input-wrapper ::-webkit-input-placeholder {
  color: #fff
}

.input-wrapper :-moz-placeholder {
  color: #fff;
  opacity: 1
}

.input-wrapper ::-moz-placeholder {
  color: #fff;
  opacity: 1
}

.input-wrapper :-ms-input-placeholder {
  color: #fff
}

.input-wrapper > label {
  position: absolute;
  top: 9px;
  left: 13px;
  font-size: 16px;
  color: var(--color-gray-lighter);
  font-weight: 400;
  padding: 0 4px;
  pointer-events: none;
  -webkit-transition: all var(--transition-duration) ease-in;
  -moz-transition: all var(--transition-duration) ease-in;
  -ms-transition: all var(--transition-duration) ease-in;
  -o-transition: all var(--transition-duration) ease-in;
  transition: all var(--transition-duration) ease-in
}

.input-wrapper > img {
  position: absolute;
  right: var(--spacing);
  top: var(--spacing);
  z-index: 1;
  cursor: pointer;
  -webkit-transition: opacity .1s ease-in;
  -moz-transition: opacity .1s ease-in;
  -ms-transition: opacity .1s ease-in;
  -o-transition: opacity .1s ease-in;
  transition: opacity .1s ease-in
}

.input-wrapper > img:hover {
  opacity: .7
}

.input-wrapper > img ~ input, .input-wrapper > img ~ input[type=text], .input-wrapper > img ~ input[type=password], .input-wrapper > img ~ input[type=email], .input-wrapper > img ~ input[type=number], .input-wrapper > img ~ textarea, .input-wrapper > img ~ select {
  padding-right: 35px
}

.input-wrapper input, .input-wrapper input[type=text], .input-wrapper input[type=password], .input-wrapper input[type=email], .input-wrapper input[type=number], .input-wrapper textarea, .input-wrapper select {
  width: 100%;
  height: auto;
  padding: var(--spacing) calc(var(--spacing) * 2);
  font-size: 16px;
  outline: none !important;
  color: var(--color-gray-darkest);
  border: solid 1px var(--color-gray-lighter);
  border-radius: var(--border-radius);
  background-color: #fff;
  box-shadow: none !important;
  -webkit-appearance: none;
  -webkit-transition: color var(--transition-duration) ease-in, border-color var(--transition-duration) ease-in;
  -moz-transition: color var(--transition-duration) ease-in, border-color var(--transition-duration) ease-in;
  -ms-transition: color var(--transition-duration) ease-in, border-color var(--transition-duration) ease-in;
  -o-transition: color var(--transition-duration) ease-in, border-color var(--transition-duration) ease-in;
  transition: color var(--transition-duration) ease-in, border-color var(--transition-duration) ease-in
}

.input-wrapper input:focus, .input-wrapper input[type=text]:focus, .input-wrapper input[type=password]:focus, .input-wrapper input[type=email]:focus, .input-wrapper input[type=number]:focus, .input-wrapper textarea:focus, .input-wrapper select:focus {
  border-color: var(--color-primary)
}

.input-wrapper input:focus ~ label, .input-wrapper input[type=text]:focus ~ label, .input-wrapper input[type=password]:focus ~ label, .input-wrapper input[type=email]:focus ~ label, .input-wrapper input[type=number]:focus ~ label, .input-wrapper textarea:focus ~ label, .input-wrapper select:focus ~ label {
  color: var(--color-primary)
}

.input-wrapper input:focus ~ label, .input-wrapper input.has-value ~ label, .input-wrapper input[type=text]:focus ~ label, .input-wrapper input[type=text].has-value ~ label, .input-wrapper input[type=password]:focus ~ label, .input-wrapper input[type=password].has-value ~ label, .input-wrapper input[type=email]:focus ~ label, .input-wrapper input[type=email].has-value ~ label, .input-wrapper input[type=number]:focus ~ label, .input-wrapper input[type=number].has-value ~ label, .input-wrapper textarea:focus ~ label, .input-wrapper textarea.has-value ~ label, .input-wrapper select:focus ~ label, .input-wrapper select.has-value ~ label {
  -moz-transform: translateY(-18px);
  -o-transform: translateY(-18px);
  -ms-transform: translateY(-18px);
  -webkit-transform: translateY(-18px);
  transform: translateY(-18px);
  font-size: 14px;
  background: linear-gradient(0deg, transparent, transparent 47%, white 0, white 57%, transparent 0)
}

.form-group {
  margin: 0 0 calc(var(--spacing) * 2);
  padding-top: var(--spacing)
}

.form-group .is-icon {
  display: none !important
}

.form-group.has-error .input-wrapper input, .form-group.has-error .input-wrapper input[type=text], .form-group.has-error .input-wrapper input[type=password], .form-group.has-error .input-wrapper input[type=email], .form-group.has-error .input-wrapper input[type=number], .form-group.has-error .input-wrapper textarea, .form-group.has-error .input-wrapper select {
  border-color: var(--color-error) !important
}

.form-group.has-error .input-wrapper label {
  color: var(--color-error) !important
}

.form-group.has-error .help-block, .form-group.has-error .control-label, .form-group.has-error .radio, .form-group.has-error .checkbox, .form-group.has-error .radio-inline, .form-group.has-error .checkbox-inline {
  color: var(--color-error);
  display: block !important
}

.checkbox-wrapper {
  position: relative
}

.checkbox-wrapper input {
  opacity: 0;
  position: absolute;
  pointer-events: none
}

.checkbox-wrapper input:checked ~ label:before {
  background-image: url("/themes/cas-theme-keap/img/icons/check-square-f1ef5a728e73f2ff2b5504d344916cd4.svg")
}

.checkbox-wrapper input:focus ~ label .checkbox-label {
  text-decoration: underline
}

.checkbox-wrapper label {
  cursor: pointer;
  display: flex;
  text-align: left
}

.checkbox-wrapper label:before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background-image: url("/themes/cas-theme-keap/img/icons/square-86361fc6082c334b90bab78579c63415.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 7px;
  flex-shrink: 0
}

.checkbox-wrapper label .checkbox-label {
  font-weight: 400
}

.full-screen-center-view {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  width: 100vw;
  min-height: 100vh;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  text-align: center
}

.full-screen-center-view .content-wrapper {
  max-width: 400px;
  width: 100%
}

.row {
  margin-left: 0;
  margin-right: calc(var(--spacing) * -2)
}

.row div[class*=col-] {
  padding-left: 0;
  padding-right: calc(var(--spacing) * 2)
}

.page-header {
  margin: 0 0 calc(var(--spacing) * 4) 0;
  padding: 0;
  border: none
}

.page-header .logo {
  margin-bottom: calc(var(--spacing) * 4)
}

.page-header h1 {
  display: block;
  font-size: 28px;
  margin: 0;
  font-weight: 100;
  color: var(--color-gray)
}

.page-header h1:not(:last-child) {
  margin-bottom: calc(var(--spacing) * 2)
}

.page-footer {
  margin-top: calc(var(--spacing) * 6)
}

.page-footer .need-help {
  display: block;
  margin-top: calc(var(--spacing) * 2)
}

ul.checked-list {
  padding-left: 0;
  margin: 0 -5px -5px 0
}

ul.checked-list:after {
  display: table;
  clear: both;
  content: ""
}

ul.checked-list li {
  display: flex;
  align-items: flex-start;
  list-style: none !important;
  padding: 0 5px 5px 0;
  width: 50%;
  float: left;
  text-align: left
}

@media (max-width: 600px) {
  ul.checked-list li {
    width: 100%
  }
}

ul.checked-list li:before {
  content: "";
  display: block;
  background-image: url("/themes/cas-theme-keap/img/icons/square-86361fc6082c334b90bab78579c63415.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 21px;
  height: 21px;
  margin-right: 7px;
  flex-shrink: 0
}

ul.checked-list li.checked:before {
  background-image: url("/themes/cas-theme-keap/img/icons/check-square-f1ef5a728e73f2ff2b5504d344916cd4.svg")
}

.logo {
  width: 100%;
  height: auto
}

.logo.infusionsoft-logo {
  max-width: 200px
}

.logo.keap-logo {
  max-width: 100px
}

.registration-view #passwordCriteria, .registration-view #eulaWrapper {
  padding: 0 calc(var(--spacing) * 2)
}

.registration-view .already-have-id {
  margin: 0
}

.registration-view p.form-group.text-error {
  margin: calc(var(--spacing) * -2) 0 calc(var(--spacing) * 2) 0
}

.registration-reset-view .password-criteria {
  padding: 0 calc(var(--spacing) * 2)
}

.registration-success-view .content-wrapper {
  width: auto
}

.registration-success-view .content-wrapper > .page-title {
  margin-bottom: calc(var(--spacing) * 2)
}

.registration-success-view .box {
  border: solid 1px var(--color-gray-lightest);
  padding: calc(var(--spacing) * 2);
  border-radius: 14px;
  margin-bottom: calc(var(--spacing) * 4)
}

.registration-success-view .box h4 {
  font-size: 28px;
  font-weight: 100;
  margin-bottom: var(--spacing)
}

.registration-success-view .box div {
  word-break: break-word
}

.registration-success-view p {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto
}

.registration-success-view #btnDone {
  margin-top: calc(var(--spacing) * 3);
  display: block
}

.social-login {
  margin: calc(var(--spacing) * 3) 0;
  border: solid 1px var(--color-gray-lightest);
  padding: calc(var(--spacing) * 2);
  border-radius: var(--border-radius)
}

.social-login h3 {
  margin: 0;
  font-weight: 400;
  font-size: 18px
}

.social-login ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing) * -2) 0 0
}

.social-login ul li {
  padding-right: calc(var(--spacing) * 2);
  padding-top: var(--spacing)
}

.security-questions-view img.green-check {
  width: 100%;
  max-width: 150px;
  margin-bottom: calc(var(--spacing) * 4)
}

html, body {
  height: 100%;
  margin: 0;
}

.two-factor-registration-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  text-align: left;
}

.two-factor-content-wrapper {
  max-width: 540px;
  width: 100%;
}

.mfa-registration-content-wrapper {
  max-width: 570px;
  width: 100%;
  text-align: center;
}

.mfa-sms-token-content-wrapper {
  max-width: 366px;
  width: 100%;
  text-align: center;
}

.mail-ott-token-content-wrapper {
  max-width: 366px;
  width: 100%;
  text-align: center;
}

.mfa-sms-token-header {
  font-family: Poppins;
  font-size: 32px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.825);
  font-weight: bold !important;
}

.mail-ott-token-header {
  font-family: Ivar Headline;
  font-size: 32px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.825);
  font-weight: bold !important;
}

.mfa-sms-token-header-info {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  padding-left: 30px;
  padding-right: 30px;
}

.mail-ott-token-header-info {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  padding-left: 30px;
  padding-right: 30px;
}

.mail-ott-token-header-email {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  padding-left: 30px;
  padding-right: 30px;
}

.enter-sms-token-label{
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.825);
  padding-right: 24px !important;
}

.sms-token-input-box {
  border: 1px solid #0040DB;
  box-sizing: border-box;
  border-radius: 8px;

  margin: 4px 0px;

  text-align: center;
  line-height:24px;
  font-size: 20px;
  width:100%;
  height:40px;
}

.sms-token-submit-error {
  display:none;
  text-align: left;
  padding-left:8px;
  font-size: 10px;
  line-height: 16px;
  margin: 0px;
  color: #E02500;
}

.email-token-submit-error {
  display:none;
  text-align: left;
  padding-left:8px;
  font-size: 10px;
  line-height: 16px;
  margin: 0px;
  height: 32px;
  color: #E02500;
}

.resend-attempt-warning {
  display: none;
  text-align: left;
  font-size: 10px;
  line-height: 16px;
  margin: 8px 0px 0px;
  color: rgba(0, 0, 0, 0.6);
}

.email-confirm-empty-box .token-submit-no-error {
  height: 32px
}

.mfa-app-download-header {
  font-family: Poppins;
  font-weight: bold !important;
}

.mfa-register-header {
  text-align: center;
  line-height: 40px;
  font-weight: 400;
  margin: 0 0 calc(var(--spacing) * 4) 0;
  padding: 0;
  border: none;
  font-family: Poppins;
}

.mfa-header-info {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  padding-left: 80px;
  padding-right: 80px;
}

.mfa-register-header h2 {
  color: rgba(0,0,0,0.82);
  font-weight: bold !important;
  font-size: 32px;
}

.line-divide {
  background: #e6e6e8;
  height: 1px;
}

.checkbox-wrapper.checkbox-wrapper-blue input:checked~label:before{
  background-image:url("/themes/cas-theme-keap/img/icons/check-fill-blue-b95e030dab158bb2364de52c01d1c0ed.svg")
}

.checkbox-wrapper.checkbox-wrapper-blue label:before {
  margin-left: 0.4em !important;
}

.mfa-checkbox-label {
  margin-left: 0.5em !important;
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.825);
  flex: none;
  order: 1;
  align-self: flex-start;
}

.two-factor-empty-box {
  position: static;
  width: 544px;
  height: 30px;
  left: 0px;
  top: 240px;

  background: #ffffff;

  flex: none;
  order: 3;
  margin: 0px 24px;
}

.two-factor-registration-footer-view {
  text-align: center;
}

.typo-h2 {
  font-family: 'Sul Sans', Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 0;
  color: rgba(0, 0, 0, 0.825);
}

.typo-h2-font {
  font-size: 32px;
}

.text-button {
  --icon-color: #0040db;
  background-color: transparent;
  color: #0040db;
  transition: background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  border: none;
  padding: var(--spacing) calc(var(--spacing) * 2);
}

.text-button:active {
  background-color: rgba(0, 64, 219, 0.2);
  color: rgb(15, 48, 110);
  --icon-color: #0f306e;
  box-shadow: none;
  border: none;
  border-radius: var(--border-radius);
}

.text-button:hover {
  background-color: rgba(0, 64, 219, 0.1);
  color: rgb(0, 64, 219);
  --icon-color: #0040db;
  border: none;
  border-radius: var(--border-radius);
}

.two-factor-ac-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.82);
  flex: none;
  order: 4;
  align-self: flex-start;
}

.two-factor-info-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.825);
  flex: none;
  order: 1;
  align-self: flex-start;
}

.two-factor-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.825);
  flex: none;
  order: 0;
  align-self: center;
}

.two-factor-qr {
  float: right ;
  position: relative;
  width: 140px;
  height: 140px;
  margin-top: -1.5em;
}

.two-factor-code-bold {
  font-family: Sul Mono;
  font-weight: 500;
}

.two-factor-hyper-link {
  color: #0040db;
}

.two-factor-scratch-codes {
  font-family: Sul Mono;
  font-style: normal;
  font-weight: 100;
  font-size: 14px;
  line-height: 20px;
  display: inline;
  align-items: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.825);
  flex: none;
  order: 1;
  align-self: center;
  list-style-type: none;
  padding: 20px
}

.two-factor-download-codes {
  display: inline;
  width: fit-content !important;
  width: -moz-fit-content !important;
  padding: var(--spacing) calc(var(--spacing) * 2);
}

.two-factor-error-box {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  position: static;
  width: 544px;
  height: 40px;
  left: 0px;
  top: 200px;
  background: #FDE7E6;
  border: 1px solid #E02500;
  box-sizing: border-box;
  border-radius: 8px;
  flex: none;
  order: 3;
}

.two-factor-error-text {
  position: static;
  width: 512px;
  height: 20px;
  left: 16px;
  top: 10px;
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  flex: none;
  order: 0;
}

.two-factor-token-input {
  width: 136px !important;
}

.two-factor-token-submit {
  position: absolute !important;
  width: 86px !important;
  margin-left: 2em;
  color: #FFFFFF !important;
}

.two-factor-token-input-error {
  width: 136px !important;
  border: 1px solid #E02500 !important;
}

.two-factor-token-box-error {
  border: 1px solid #E02500;
}

.two-factor-important-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.825);
  flex: none;
  order: 1;
  align-self: flex-start;
}

.two-factor-codes-list {
  margin-top: -3em;
  margin-bottom: 10px;
  margin-left: 15em !important;
  width: 450px !important;
}

.button-outline {
  -webkit-transition: background-color .25s cubic-bezier(.23,1,.32,1);
  transition: background-color .25s cubic-bezier(.23,1,.32,1);
  --icon-color: #0040db;
  background-color: transparent;
  border: 1px solid #b1b1ba;
  color: #0040db !important;
}

.button-outline:active {
  background-color: transparent;
  color: #0040db;
  --icon-color: #0040db;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.button-outline:hover {
  color: #0040db;
  --icon-color: #0040db;
  border: 1px solid #0040db;
}

.button-disabled:disabled {
  background: rgba(0, 0, 0, 0.09) !important;
  color: rgba(0, 0, 0, 0.4) !important;
}

.hidden {
  display:none!important;visibility:hidden!important
}

.green-check {
  display: flex;
}

.password-change-success {
  margin-top: -1.25em;
  margin-left: 1em;
}

.password-requirements {
  position: static;
  width: 155px;
  height: 16px;
  left: 0px;
  top: 0px;
  font-family: Sul Sans;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.825);
  margin-left: 1.35em;
}

.two-factor-no-codes {
  margin-left: 15em !important;
  color: #0040DB;
}

.two-factor-no-codes:hover {
  margin-left: 15em !important;
  color: #0040DB;
  text-decoration: none;
}

.mfa-register-info-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  flex: none;
  order: 1;
  align-self: flex-start;
}

.mfa-register-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.825);
  flex: none;
  order: 0;
  align-self: center;
  margin: 0 0 0px;
}

.mfa-register-empty-box {
  height: 20px;
  background: #FFFFFF;
  order: 3;
  margin: 0px 24px;
}

.mfa-app-download-info {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.825);
  text-align: left;
}

.body-large-text-bold {
  font-family: Sul Sans;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  color: rgba(0, 0, 0, 0.825);
  font-weight: bold;
}

.pointer {
  cursor: pointer;
}

.clickable-row:hover {
  background: #E5E5E5;
}

.progress-bar-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #0037CF;
  letter-spacing: -0.7px;
  padding-left: 10px;
}

.mfa-browser-name-content-wrapper {
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.mfa-save-browser-header-info {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 0px;
}

.browser-name-field-title {
  height: 16px;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.825);
}

.browser-name-field {
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  margin: 4px 0px;
  border: 1px solid #0040DB;
  box-sizing: border-box;
  border-radius: 8px;
  height: 40px;
  width: 100%;
  max-width: 300px;
  text-indent: 10px;
  background: #ffffff;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
}

.browser-name-validation {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 16px;
  color: #E02500;
}

.mfa-browser-info-text {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  padding-left: 20px;
  padding-right: 20px;
}

.backup-code-red-text {
  font-family: Sul Sans;
  font-size: 14px;
  line-height: 16px;
  color: #E02500;
  padding-top: 20px;
}

.backup-code-outer-box {
  background: #FAFAFA;
  border-radius: 8px;
  text-align: center !important;
  margin-left: 60px;
  margin-right: 60px;
}

.btn-backup-code-download {
  font-family: Sul Sans;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #0040DB !important;
  width: 360px;
  height: 40px;
  margin: 10px 35px 30px;
  border: 1px solid rgba(0, 0, 0, 0.29) !important;
  box-sizing: border-box;
  border-radius: 8px;
  background: transparent !important;
}

.btn-backup-code-done {
  width: 290px;
  height: 40px;
  border-radius: 8px;
}

.btn-backup-code-done:disabled {
  background: rgba(0, 0, 0, 0.09) !important;
  color: rgba(0, 0, 0, 0.4) !important;
}

.btn-backup-code-finish-setup {
  width: 180px;
  height: 40px;
  border-radius: 8px;
}

.backup-code-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 148px;
  height: 47px;
  font-family: Sul Mono;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 2px;
  background: #F0F0F0;
  border-radius: 4px;
  margin: 5px;
}

.backup-code-text {
  font-family: Sul Mono;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 2px;
  color: rgba(0, 0, 0, 0.825);
}

.promo{
  overflow-x: hidden;
}

.promo-image {
  box-shadow: 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
  border-radius: 24px;
}

.promo-image img {
  border-radius: 24px;
}

.keap-logo-promo {
  position: absolute;
  width: 68.57px;
  height: 32px;
  left: 32px;
  top: 20px;
}

.promo-main-div {
  background-color: #F5F5F5;
  height: 100%;
  padding: 10% 5% !important;
}

.promo-video {
  width: 550px;
  height: 300px;

  background: #C4C4C4;
  border-radius: 24px;
}

.wistia_embed {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
}

.promo-event-heading {
  font-family: Poppins;
  font-size: 52px;
  line-height: 52px;
  color: rgba(0, 0, 0, 0.825);
  font-weight: bold;
  margin-top: 40px;
}

.promo-event-info {
  font-family: Sul Sans;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.825);
  margin-top: 20px;
  margin-bottom: 20px;
}

.promo-event-info-opaque {
  font-family: Sul Sans;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
  margin-top: 20px;
  margin-bottom: 20px;
}

.marketing_img{
  width: auto;
  height: auto;
  max-width: 85%;
}

.promo-event-info-bold {
  font-family: Sul Sans;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
  margin-top: 43px;
}

.promo-conditions-apply{
  font-family: Sul Sans;
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 8px;
  margin-bottom: 43px;
}

.promo-learn-more {
  width: 153px;
  height: 48px;
  font-family: Sul Sans;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: rgba(0, 0, 0, 0.825);
  border: 2px solid rgba(0, 0, 0, 0.825);
  box-sizing: border-box;
  border-radius: 24px;
  background: transparent;
}

.promo-learn-more:hover{
  border: 5px solid #000000;
}
.promo-okta-login {
  margin: 0 auto;
  height: 48px;
  font-weight: 400;
  color: #000000 !important;
  background: transparent;
  border-radius: 24px;
  border: 0.2rem solid #000000 !important;
  pointer-events: all;
  display: inline;
  box-sizing: border-box;
  padding: 0 20px;
  width: 224px;
}

.promo-okta-login:hover{
  border: 0.5rem solid #000000 !important;
}

.promo-google-login:hover{
  border: 0.5rem solid #000000 !important;
  padding-top: 1rem;
}

.promo-google-login {
  width: 224px;
  height: 48px;
  left: 0px;
  font-weight: 400;
  color: #000000 !important;
  background: transparent;
  border-radius: 24px;
  padding-top: 1rem;
  border: 0.2rem solid #000000 !important;
  position: absolute;
  top: 0px;
  pointer-events: all;
  display: inline;
  box-sizing: border-box;
  padding-left: 40px;
}

.promo-google-login:hover{
  border: 0.5rem solid #000000 !important;
  padding-top: 1rem;
}

.google-login-button{
  height: 50px;
  position: relative;
}

.google-login-button-no-marketing{
  height: 50px;
  width: 224px;
  top: 6px;
  margin: 0 auto;
  margin-bottom: 10px;
  position: relative;
}

.login-with-google{
  pointer-events: none;
}

.google-new-button{
  /* Auto Layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px;

  position: absolute;
  width: 33px;
  height: 16px;
  left: 185px;
  top: -5px;

  /* Green ❤️ 600 */
  background: #36A635;
  border-radius: 4px;
  z-index: 4;
  visibility: hidden;
}

.google-new-button-no-marketing{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px;
  position: absolute;
  width: 33px;
  height: 16px;
  left: 185px;
  top: -5px;
  background: #36A635;
  border-radius: 4px;
  z-index: 4;
  visibility: hidden;
}

.google-login-button:hover .google-new-button{
  visibility: visible;
}

.google-login-button-no-marketing:hover .google-new-button-no-marketing{
  visibility: visible;
}

.google-new-text{
  /* Label */
  position: absolute;
  width: 25px;
  height: 16px;
  left: 0px;
  top: 0px;

  /* Overline */
  font-family: Sul Sans;
  font-size: 12px;
  line-height: 16px;
  /* identical to box height, or 133% */

  /* Text/Reversed (Paper) */
  color: #FFFFFF;

  /* Inside Auto Layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 4px;
}

.google-new-text-no-marketing{
  /* Label */
  position: absolute;
  width: 25px;
  height: 16px;
  left: 0px;
  top: 0px;

  /* Overline */
  font-family: Sul Sans;
  font-size: 12px;
  line-height: 16px;
  /* identical to box height, or 133% */

  /* Text/Reversed (Paper) */
  color: #FFFFFF;

  /* Inside Auto Layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 4px;
}

#google-logo-with-marketing {
  position: absolute;
  width: 0px;
  height: 30px;
  top: 12px;
  left: 20px;
}

#google-logo-no-marketing {
  position: absolute;
  width: 0px;
  height: 30px;
  top: 12px;
  left: 20px;
}

/*tooltip */
.google-tooltip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  position: relative;
  width: 216px;
  height: 128px;
  left: calc(50% - 216px/2 + 4px);
  top: 0px;
  background: #FFFFFF;
  border-radius: 12px;
  flex: none;
  order: 1;
  flex-grow: 1;
  margin: 0px 0px;
  visibility: hidden;
  z-index: 10;
  /*Shadow for tooltip*/
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12));
}

/* tooltip  after*/
.google-tooltip::after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  left: 40%;
  filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12));
}

.google-login-button:hover .google-tooltip{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
}

.google-login-button-no-marketing:hover .google-tooltip{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
}

.right .google-tooltip
{
  top: -45%;
  left: 81%;
  position: absolute;
}

.right .google-tooltip::after{
  top:40%;
  left:-8%;
  transform: rotate(90deg);
}

.promo-login-button {
  width: 111px;
  height: 48px;
  font-family: Sul Sans;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  background: #006CEB;
  border-color: transparent;
  border-radius: 24px;
  font-weight: 400;
}

.promo-login-button:hover{
  background: none;
  color: #000000;
  border: 5px solid #000000 !important;
}

.partner-learn-more {
  text-decoration: none !important;
  color: #FFFFFF !important;
  border-bottom: 2px solid #FFFFFF !important;
}

.login-page-panel {
  width: 100%;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-align-items:center;
  -moz-align-items:center;
  -ms-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  -moz-justify-content:center;
  -ms-justify-content:center;
  justify-content:center;
  -ms-flex-pack:center;
  text-align:left;
  padding-top: 125px;
}

.promo-info-box {
  width: 550px;
  margin: 0 auto;
}

.promo-login-header {
  font-family: Poppins;
  font-size: 32px;
  line-height: 40px;
  color: #000000;
  width: inherit !important;
  text-align: left;
}

.promo-link-green {
  text-decoration: none !important;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.825) !important;
  border-bottom: 2px solid #00E6A7 !important;
  pointer-events: all;
}

.promo-need-help {
  text-decoration: underline;
  pointer-events: all;
}

.promo-privacy {
  margin-left: 10px;
  text-decoration: underline !important;
  pointer-events: all;
}

@media print
{
  .no-print {display:none;}
}

@font-face {
  font-family: 'Sul Mono';
  src: url('/infusionsoft/fonts/Sul-Sans/Sul-Mono-Regular-d348bbec4a76db2940e21b60fec1b1a0.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sul Mono';
  src: url('/infusionsoft/fonts/Sul-Sans/Sul-Mono-Light-57a9b51a12c1eb4047506ba4c73f7c65.otf');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Sul Mono';
  src: url('/infusionsoft/fonts/Sul-Sans/Sul-Mono-Black-744e16662610eba0e9155852d9915173.otf');
  font-weight: bold;
  font-style: normal;
}

.modal-title.verify-auth-modal-title {
  margin-top: 0px;
}

/* This is used for the Keap Mobile app */
@media only screen and (max-width: 600px) {
  .promo.row {
    margin: 0% !important;
    text-align: center !important;
  }

  .full-screen-center-view {
    min-height: 50vh;
  }

  .btn.btn-primary {
    height: 30pt;
    width: 100%;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: var(--color-primary) !important;
    border: none;
    border-radius: 20pt;
  }

  .btn.btn-primary:hover {
    height: 30pt;
    width: 100%;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: var(--color-primary-darker) !important;
    border: none;
    border-radius: 20pt;
  }

  .btn.btn-primary:not(:disabled):hover {
    height: 30pt;
    width: 100%;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: var(--color-primary-darker) !important;
    border: none;
    border-radius: 20pt;
  }
  .btn.btn-primary:not(:disabled):focus {
    height: 30pt;
    width: 100%;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: var(--color-primary-darker) !important;
    border: none;
    border-radius: 20pt;
  }

  .btn.btn-mfa-get-started {
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    width: 180px;
    height: 40px;
  }

  .btn.btn-mfa-get-started:hover {
    width: 180px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  .btn.btn-mfa-get-started:not(:disabled):hover {
    width: 180px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }
  .btn.btn-mfa-get-started:not(:disabled):focus {
    width: 180px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  a {
    color: #0040DB !important;
    text-decoration: none !important;
  }

  .disabled-message {
    width:100%
  }

  .close-modal {
    height: 14px;
    width: 14px;
    left: 21px;
    top: 21px;
    border-radius: 0px;
    position: relative;
  }

  .modal-title.verify-auth-modal-title {
    margin-top: 17px !important;
    font-family: Sul Sans;
  }

  .verify-auth-modal-title {
    font-family: "Sul Sans Medium" !important;
    font-size: 20px;
    line-height: 24px;
    left: 41px !important;
    padding: 0px !important;
    position: relative;
    top: -15px !important;
    font-weight: bolder;
  }

  .line-divide-modal {
    border: 0.5px solid #DDDDDD;
    height: 0px;
    width: 378px;
    position: absolute;
    top: 60px;
  }

  .modal-verify-custom {
    width: 378px !important;
    height: 412px !important;
    position: relative !important;
    top: 32px !important;
    border-radius: 12px !important;
  }

  .verification-modal-body {
    word-wrap: break-word;
    width: 414px;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    font-family: "Sul Sans Regular";
    color: rgba(0, 0, 0, 0.825);
    left: -75px;
    position: relative;
    padding: 0px !important;
    top: -15px;
  }

  .verify-modal-content {
    height: 412px;
  }

  .keap-logo-promo {
    position: relative;
    text-align: center;
    left: 0px;
  }

  .login-page-panel {
    text-align:center !important;
    padding-top: 5%;
  }

  .promo-info-box {
    width: 100%;
  }

  .promo-video {
    width: 100% !important;
  }

  .promo-login-header {
    text-align: center;
  }

  #keapLogo {
    padding-top: 10%;
    text-align: center;
    margin-right: 0 !important;
  }

  .promo-privacy {
    text-decoration: underline !important;
    color: rgba(0, 0, 0, 0.6) !important;
  }

  .promo-need-help {
    text-decoration: underline !important;
    color: rgba(0, 0, 0, 0.6) !important;
  }

  .promo-login-button {
    width: 250px !important;
  }

  .promo-okta-login {
    pointer-events: all;
  }
  .close-modal {
    height: 14px;
    width: 14px;
    left: 21px !important;
    top: 21px !important;
    border-radius: 0px;
    position: relative;
  }

  .modal-title .verify-auth-modal-title {
    top: 0px !important;
  }

  .verify-auth-modal-title {
    left: 0px !important;
  }
}

.mfa-confirm-code-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  text-align: left;
}

.mfa-confirm-code-content-wrapper {
  max-width: 544px;
  width:100%;

  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;
}

.mfa-confirm-header, .mfa-confirm-body {
  text-align: center;
  font-weight: 400;

  margin: 16px 0px;
  padding: 0;
  border: none
}

.mfa-confirm-empty-box {
  height: 8px;
  order: 3;
  margin: 0px 24px;
}

.mfa-confirm-header h1 {
  line-height: 40px;
  font-size: 32px;
  color: rgba(0, 0, 0, 0.825);
}

.mfa-confirm-header h2 {
  height: 16px;
  font-size: 14px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.825);
}

.mfa-confirm-header .qr-progress-bar-text {
  display:inline-block;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #0037CF;
  margin-left:10px;
}

.mfa-confirm-body .qr-help {
  height: 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
  color: rgba(0, 55, 207);
}

.mfa-confirm-body .qr-help-totp-code-display {
  display:none;
  background: #FAFAFA;
  border-radius: 8px;
  padding: 8px 4px;
}

.mfa-confirm-body .qr-help-totp-code {
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2px;
}

.mfa-confirm-body .qr-help-totp-code-title {
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.825);
}

.mfa-confirm-body .qr-help-totp-code-non-bold {
  padding-right: 1px;
}

.mfa-confirm-body .qr-help-totp-code-bold {
  font-weight: bold;
}

.mfa-confirm-body .qr-enter-6-digit-title {
  height: 16px;
  font-size: 14px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.825);
}

.qr-enter-6-digit:active {
  color: rgba(0, 0, 0, 0.825);
}

.mfa-confirm-body .qr-input {
  margin: 4px 0px;
}

.qr-error {
  border: 1px solid #E02500 !important;
}

.mfa-confirm-body .qr-enter-6-digit {
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  margin: 4px 0px;

  border: 1px solid #0040DB;
  box-sizing: border-box;
  border-radius: 8px;

  height: 40px;
  width: 100%;

  background: #ffffff;

  font-size: 20px;
  line-height: 24px;
  color: #000000;
}


.qr-input-error {
  border: 1px solid #E02500;
  box-sizing: border-box;
  border-radius: 8px;
}

.mfa-confirm-body .qr-error-message {
  height: 16px;

  display:none;
  text-align: left;
  padding-left:8px;
  font-size: 10px;
  line-height: 16px;
  margin: 0px;
  color: #E02500;
}

.mfa-confirm-body .qr-6-digit-submit-button .active {
  color: #ffffff;
}

.mfa-confirm-body .qr-6-digit-submit-button {
  width: 100%;
  height: 40px;
  margin: 8px 0px;
  border-radius: 8px;
  border: none;

  background-color: #0040DB;
}

.inactive {
  background: rgba(0, 0, 0, 0.09);
}

.active {
  background: #0040DB;
  color:#ffffff;
}

.mfa-confirm-body .qr-6-digit-submit-label {
  color: #ffffff !important;
}

.mfa-confirm-body .qr-6-digit-submit-label {
  height: 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;

  color: rgba(0, 0, 0, 0.4);

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 6px;
}

.mfa-confirm-body .qr-enter-6-digit .placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

.qr-6-digit-submit-button-verify {
  background: #0040DB;
}

.qr-progress-completed {
  display:inline-block;
}

.letter {
  color: #36A635;
}

.qr-no-error {
  height: 16px;
  margin: 0px;
}

.qr-enter-6-digit {
  text-align: center;
  width:100%;
}

.mfa-cofirm-body .qr-6-digit-input-row {
  width:100%;
}

.loading {
  display:inline-block;
  font-size: 16px;
  color: #ffffff;
  width:15px;
  text-align: left;
}

.loading:after {
  display: inline-block;
  animation: dotty steps(1,end) 1s infinite;
  content: '    ';
}

@keyframes dotty {
  0%   { content: '   '; }
  25%  { content: '.  '; }
  50%  { content: '.. '; }
  75%  { content: '...'; }
  100% { content: '   '; }
}

.progress-bar {
  text-align: center;
}

.mfa-verify-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;

  font-family: Sul Sans;
  font-style: normal;
  font-weight: normal;

  text-align: center;
}

.mfa-verify-code .title {
  font-size: 32px;
  line-height: 40px;
  margin:0px;

  color: rgba(0, 0, 0, 0.825);
}

.mfa-verify-code .subtitle {
  font-size: 14px !important;
  line-height: 16px !important;
  margin-top: 12px !important;
  font-weight: 400 !important;

  color: rgba(0, 0, 0, 0.6);
}

.mfa-register-verify .two-factor-info-text {
  font-size: 14px;
  line-height: 16px;

  color: rgba(0, 0, 0, 0.825);
}

.mfa-verify-code .progress-bar-text {
  display:inline-block;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #0037CF;
  margin-left:10px;
}

.mfa-verify-code .empty-box {
  height: 8px;
  background: #FFFFFF;
  order: 3;
  margin: 0px 24px;
}

.mfa-verify-code  .token-input-box {
  border: 1px solid #0040DB;
  box-sizing: border-box;
  border-radius: 8px;

  margin: 4px 0px;

  text-align: center;
  line-height:24px;
  font-size: 20px;
  width:100%;
  height:40px;
}

.token-submit {
  height: 40px;
  width: 100%;
  border-radius: 8px;
  border: 0px;

  color:#ffffff;
  background-color: #0040DB;
}

.spinner-button {
  height: 40px;
  border-radius: 8px;
  border: 0;

  color: #ffffff;
  background-color: #0040DB;
}

.spinner-button.sbnormal {
  width: 100%;
}

.spinner-button.sbsmall {
  width: 200px;
}

.spinner-button.sbsmall.sbdisabled {
  background-color: var(--color-gray-lighter);
}


.mail-token-submit {
  height: 40px;
  width: 100%;
  border-radius: 8px;
  border: 0;

  color: #ffffff;
  background-color: #0040DB;
}

.mfa-verify-code .mfa-verify-code-content-wrapper {
  max-width: 544px;
  width:100%;
}

.mfa-verify-code .verify-label {
  margin-right:6px;
}

.token-submit-no-error {
  height: 16px;
  margin: 0px;
}

.mfa-verify-code .token-submit-error {
  height: 16px;

  display:none;
  text-align: left;
  padding-left:8px;
  font-size: 10px;
  line-height: 16px;
  margin: 0px;
  color: #E02500;
}

.footer-body-break {
  width: 544px;
  height: 17px;

  margin-top: 8px;
  margin-bottom: 32px;
}

.authenticator-text {
  display:none;

  font-size: 14px;
  line-height: 20px;

  /* Text/Subtle (Ink 800) */
  color: rgba(0, 0, 0, 0.6);
}

.mfa-verify-code .backup-text {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
}

.mfa-verify-code .enter-6-digit-token-title {
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.825);
}

.mfa-verify-code .authenticator-text {
  font-size: 14px;
  line-height: 20px;
  display:none;

  color: rgba(0, 0, 0, 0.6);
}

.mfa-verify-code .help-text-link {
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;

  color: #0040DB;
}

.help-text-link:before {
  content: "\00a0";
}

.help-text-link:after {
  content: "\00a0";
}

.row .submit-phone-number {
  width: 100%;
  display: grid !important;
}

.row .iti__flag-container {
  padding: 0px;
  position: relative !important;
  float: left !important;
  margin-right: 8px !important;
}

.row .iti__selected-flag {
  background-color: #ffffff !important;

  color: #ffffff;
  border: 1px solid #CCCCCC;
  box-sizing: border-box;
  border-radius: 8px;
  height: 40px;
  width: 84px;
}

.row .iti__selected-dial-code {
  color: black !important;
}

.row .phone-input {
  position: relative !important;
  float: right !important;
  width: 65% !important;
  padding-left: 43px !important;
  margin-left: 8px !important;
  padding-right: 0px !important;
  border: 1px solid #CCCCCC;

  box-sizing: border-box;
  border-radius: 8px;
  background-color: #ffffff;

  height: 40px;
  margin: 4px 0px;
}

.row .phone-input .active-input {
  border: 1px solid #0040DB;
}

.row .phone-submit {
  height: 40px;
  color: #ffffff;
  border: none;
  width: 100%;

  background: #0040DB;
  border-radius: 8px;
}

.mfa-register-header .subtitle {
  font-size: 14px !important;
  line-height: 16px !important;
  margin-top: 12px !important;
  font-weight: 400 !important;

  color: rgba(0, 0, 0, 0.6);
}

.mfa-register-header .empty-box {
  height: 8px;
  background: #FFFFFF;
  order: 3;
  margin: 0px 24px;
}

.mfa-registration-content-wrapper .token-submit-error {
  height: 16px;

  display:none;
  text-align: left !important;
  padding-left:8px;
  font-size: 10px;
  line-height: 16px;
  margin: 0px;
  color: #E02500 !important;
}

.modal-title .verify-auth-modal-title {
  position: absolute !important;
  top: 16px !important;
  left: 56px !important;
  height: 24px;
  margin-left: 24px;
  font-family: Sul Sans;
  font-size: 20px;
  line-height: 24px;

  color: rgba(0, 0, 0, 0.825);
}

.close-modal {
  position: absolute;
  top: 20px;
  left: 20px;
}

.sms-validate .line-divide-modal {
  top: 56px;
}

.row .empty-box {
  height: 8px;
}

.modal-content .sms-verify-dialog {
  background-color: #ffffff;
  border-radius: 8px !important;
}

.modal-content {
  background-color: #ffffff;
}
.modal-body .modal-message {
  font-family: Sul Sans;
  font-size: 24px;
  line-height: 28px;

  text-align: center;
  color: rgba(0, 0, 0, 0.825);
}

.sms-provided-phone-number {

  font-family: Sul Sans;
  font-size: 16px;
  line-height: 24px;

  text-align: center;

  color: #000000;
}

.sms-verify-dialog {
  background-color: #ffffff !important;
}

.sms-verify-dialog .close-modal {
  float: left !important;
  margin-right: 20px !important;
  cursor: pointer !important;
}

.sms-verify-form {
  width:100%;
  font-family: Sul Sans;
}

.sms-verify-title {
  text-align: center;

  height: 24px;

  font-size: 20px;
  line-height: 24px;

  color: rgba(0, 0, 0, 0.825);
}

.sms-verify-input {
  text-align: center;
}

.verify-sms-info {
  text-align: center !important;
  margin:0px !important;;
}

.send-new-code-label {
  height: 16px;

  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;

  color: #0040DB;

  cursor: pointer;

  text-align: center;
}

.sms-verify-input .input-wrapper {
  text-align: center;
}

.row .token-error-code {
  height: 16px;

  display:none;
  text-align: left !important;
  padding-left:8px;
  font-size: 10px;
  line-height: 16px;
  margin: 0px;
  color: #E02500 !important;
}

.row .resend-code-error-code {
  height: 16px;

  display:none;

  font-size: 10px;
  line-height: 16px;
  margin: 0px !important;
  color: #E02500 !important;
}

.sms-verify-form .form-group {
  margin: 0px !important;
}
@media screen and (min-width: 767px) and (max-width: 991px){
  .promo-google-login {
    width: 224px;
    height: 48px;
    left: 0px;
    font-weight: 400;
    color: #000000 !important;
    background: transparent;
    border-radius: 24px;
    padding-top: 1rem;
    border: 0.2rem solid #000000 !important;
    position: absolute;
    top: 0px;
    pointer-events: all;
    display: inline;
    box-sizing: border-box;
  }

  .google-login-button{
    height: 50px;
    position: relative;
  }

  .google-login-button-no-marketing{
    height: 50px;
    width: 224px;
    top: 6px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 10px;
  }

  .google-new-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 185px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-button-no-marketing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 185px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-text {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .google-new-text-no-marketing {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  /*tooltip */
  .google-tooltip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    position: relative;
    width: 216px;
    height: 128px;
    left: calc(50% - 216px/2 + 4px);
    top: 0px;
    background: #FFFFFF;
    border-radius: 12px;
    flex: none;
    order: 1;
    flex-grow: 1;
    margin: 0px 0px;
    visibility: hidden;
    z-index: 10;
    /*Shadow for tooltip*/
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12));
  }

  /* tooltip  after*/
  .google-tooltip::after {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    left: 40%;
    filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12));
  }

  .google-login-button:hover .google-tooltip{
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
  }

  .google-login-button-no-marketing:hover .google-tooltip{
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
  }

  .right .google-tooltip
  {
    top: -45%;
    left: 81%;
    position: relative;
  }

  .right .google-tooltip-no-marketing{
    left: 106%;
  }

  .right .google-tooltip::after{
    top:40%;
    left:-8%;
    transform: rotate(90deg);
  }

}

/*for Google signin button*/
@media screen and (min-width: 540px) and (max-width: 600px){
  .google-login-button {
    height: 50px;
    left: 11%;
  }

  .google-login-button-no-marketing {
    height: 50px;
    width: 224px;
    top: 6px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    pointer-events: none;
  }

  .google-new-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-button-no-marketing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .GoogleRed {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }

  .GoogleRed-no-marketing {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }
  .GoogleYellow {
    width: 40%;
    height: 40%;
    position: absolute;
    z-index: 3;
    background-color: #ffc107;
    left: -15%;
    bottom: 32%;
    margin: auto;
    transform: rotateZ(-50deg);
  }
  .GoogleGreen {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }

  .GoogleGreen-no-marketing {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }

  .GoogleBlue {
    width: 35%;
    height: 32%;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    background-color: #4285f4;
    transform: rotateZ(45deg);
  }
  .GoogleGline {
    width: 50%;
    height: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #4285f4;
    z-index: 5;
  }

  .promo-google-login {
    width: 224px;
    height: 48px;
    left: 0px;
    font-weight: 400;
    color: #000000 !important;
    background: transparent;
    border-radius: 24px;
    padding-top: 1rem;
    border: 0.2rem solid #000000 !important;
    position: absolute;
    top: 0px;
    pointer-events: all;
    display: inline;
    box-sizing: border-box;
  }

  /*tooltip */
  .google-tooltip {
    display: none;
  }

  /* tooltip  after*/
  .google-tooltip::after {
    display: none;
  }

  .google-login-button:hover .google-tooltip{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-tooltip{
    display: none;
  }

  .google-login-button:hover .google-new-button{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-new-button-no-marketing{
    display: none;
  }

  .right .google-tooltip
  {
    display: none;
  }

  .right .google-tooltip::after{
    display: none;
  }

  .google-signin-text {
    font-family: Sul Sans;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    float: right;
    height: 24px;
    width: 178px;
    left: 54px;
    top: 13px;
  }

}

/*for smaller tablets and phones in landscape mode*/
@media screen and (min-width: 601px) and (max-width: 766px){

  .two-factor-registration-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
    text-align: left;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .btn.btn-mfa-get-started {
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    width: 195px;
    height: 40px;
    margin-left: 75px;
  }

  .btn.btn-mfa-get-started:hover {
    width: 195px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    margin-left: 75px;
  }

  .btn.btn-mfa-get-started:not(:disabled):hover {
    width: 195px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    margin-left: 75px;
  }
  .btn.btn-mfa-get-started:not(:disabled):focus {
    width: 195px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    margin-left: 75px;
  }

  .text-button{
    margin-left: 25px;
  }

  .promo-google-login {
    width: 224px;
    height: 48px;
    left: 0px;
    font-weight: 400;
    color: #000000 !important;
    background: transparent;
    border-radius: 24px;
    padding-top: 1rem;
    border: 0.2rem solid #000000 !important;
    position: absolute;
    top: 0px;
    pointer-events: all;
    display: inline;
    box-sizing: border-box;
  }

  .google-login-button{
    height: 50px;
  }

  .google-login-button-no-marketing{
    height: 50px;
    width: 224px;
    top: 6px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    pointer-events: none;
  }

  .google-new-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 185px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-button-no-marketing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 185px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-text {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .google-new-text-no-marketing {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .GoogleRed {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }

  .GoogleRed-no-marketing {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }
  .GoogleYellow {
    width: 40%;
    height: 40%;
    position: absolute;
    z-index: 3;
    background-color: #ffc107;
    left: -15%;
    bottom: 32%;
    margin: auto;
    transform: rotateZ(-50deg);
  }
  .GoogleGreen {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }

  .GoogleGreen-no-marketing {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }
  .GoogleBlue {
    width: 35%;
    height: 32%;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    background-color: #4285f4;
    transform: rotateZ(45deg);
  }
  .GoogleGline {
    width: 50%;
    height: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #4285f4;
    z-index: 5;
  }


  /*tooltip */
  .google-tooltip {
    display: none;
  }

  /* tooltip  after*/
  .google-tooltip::after {
    display: none;
  }

  .google-login-button:hover .google-tooltip{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-tooltip{
    display: none;
  }

  .google-login-button:hover .google-new-button{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-new-button-no-marketing{
    display: none;
  }

  .right .google-tooltip
  {
    display: none;
  }

  .right .google-tooltip::after{
    display: none;
  }
}

/*for phones with large screen sizes such as commonly used iPhone/Galaxy plus size models*/
@media screen and (min-width: 411px) and (max-width: 539px){

  .two-factor-registration-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
    text-align: left;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .btn.btn-mfa-get-started {
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    width: 195px;
    height: 40px;
  }

  .btn.btn-mfa-get-started:hover {
    width: 195px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  .btn.btn-mfa-get-started:not(:disabled):hover {
    width: 195px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }
  .btn.btn-mfa-get-started:not(:disabled):focus {
    width: 195px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  .text-button{
    margin-left: 25px;
  }

  .promo-google-login {
    width: 224px;
    height: 48px;
    left: 0px;
    font-weight: 400;
    color: #000000 !important;
    background: transparent;
    border-radius: 24px;
    padding-top: 1rem;
    border: 0.2rem solid #000000 !important;
    position: absolute;
    top: 0px;
    pointer-events: all;
    display: inline;
    box-sizing: border-box;
  }

  .google-login-button{
    height: 50px;
    left: 11%;
  }

  .google-login-button-no-marketing{
    height: 50px;
    width: 224px;
    top: 6px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    pointer-events: none;
  }

  .google-new-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-button-no-marketing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-text {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .google-new-text-no-marketing {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .GoogleRed {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }

  .GoogleRed-no-marketing {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }
  .GoogleYellow {
    width: 40%;
    height: 40%;
    position: absolute;
    z-index: 3;
    background-color: #ffc107;
    left: -15%;
    bottom: 32%;
    margin: auto;
    transform: rotateZ(-50deg);
  }
  .GoogleGreen {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }

  .GoogleGreen-no-marketing {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }
  .GoogleBlue {
    width: 35%;
    height: 32%;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    background-color: #4285f4;
    transform: rotateZ(45deg);
  }
  .GoogleGline {
    width: 50%;
    height: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #4285f4;
    z-index: 5;
  }


  /*tooltip */
  .google-tooltip {
    display: none;
  }

  /* tooltip  after*/
  .google-tooltip::after {
    display: none;
  }

  .google-login-button:hover .google-tooltip{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-tooltip{
    display: none;
  }

  .google-login-button:hover .google-new-button{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-new-button-no-marketing{
    display: none;
  }

  .right .google-tooltip
  {
    display: none;
  }

  .right .google-tooltip::after{
    display: none;
  }

  .google-signin-text {
    font-family: Sul Sans;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    float: right;
    height: 24px;
    width: 178px;
    left: 54px;
    top: 13px;
  }

}

/*for phones with larger screen sizes such as commonly used iPhones and Androids*/
@media screen and (min-width: 360px) and (max-width: 410px){

  .two-factor-registration-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
    text-align: left;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .promo-google-login {
    width: 224px;
    height: 48px;
    left: 0px;
    font-weight: 400;
    color: #000000 !important;
    background: transparent;
    border-radius: 24px;
    padding-top: 1rem;
    border: 0.2rem solid #000000 !important;
    position: absolute;
    top: 0px;
    pointer-events: all;
    display: inline;
    box-sizing: border-box;
  }

  .google-login-button{
    height: 50px;
    left: 11%;
  }

  .google-login-button-no-marketing{
    height: 50px;
    width: 224px;
    top: 6px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    pointer-events: none;
  }

  .google-new-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-button-no-marketing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-text {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .google-new-text-no-marketing {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .GoogleRed {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }

  .GoogleRed-no-marketing {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }
  .GoogleYellow {
    width: 40%;
    height: 40%;
    position: absolute;
    z-index: 3;
    background-color: #ffc107;
    left: -15%;
    bottom: 32%;
    margin: auto;
    transform: rotateZ(-50deg);
  }
  .GoogleGreen {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }
  .GoogleGreen-no-marketing {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }
  .GoogleBlue {
    width: 35%;
    height: 32%;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    background-color: #4285f4;
    transform: rotateZ(45deg);
  }
  .GoogleGline {
    width: 50%;
    height: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #4285f4;
    z-index: 5;
  }


  /*tooltip */
  .google-tooltip {
    display: none;
  }

  /* tooltip  after*/
  .google-tooltip::after {
    display: none;
  }

  .google-login-button:hover .google-tooltip{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-tooltip{
    display: none;
  }

  .google-login-button:hover .google-new-button{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-new-button-no-marketing{
    display: none;
  }

  .right .google-tooltip
  {
    display: none;
  }

  .right .google-tooltip::after{
    display: none;
  }

  .google-signin-text {
    font-family: Sul Sans;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    float: right;
    height: 24px;
    width: 178px;
    left: 54px;
    top: 13px;
  }
}

/*for phones with small screen sizes such as iPhone SE*/
@media screen and (min-width: 320px) and (max-width: 359px){
  .row .phone-input {
    position: relative !important;
    float: right !important;
    width: 60% !important;
    padding-left: 43px !important;
    margin-left: 8px !important;
    padding-right: 0px !important;
    border: 1px solid #CCCCCC;

    box-sizing: border-box;
    border-radius: 8px;
    background-color: #ffffff;

    height: 40px;
    margin: 4px 0px;
  }

  .two-factor-registration-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
    text-align: left;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .btn.btn-mfa-get-started {
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    width: 150px;
    height: 40px;
  }

  .btn.btn-mfa-get-started:hover {
    width: 150px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  .btn.btn-mfa-get-started:not(:disabled):hover {
    width: 150px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }
  .btn.btn-mfa-get-started:not(:disabled):focus {
    width: 150px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  .promo-google-login {
    width: 224px;
    height: 48px;
    left: 0px;
    font-weight: 400;
    color: #000000 !important;
    background: transparent;
    border-radius: 24px;
    padding-top: 1rem;
    border: 0.2rem solid #000000 !important;
    position: absolute;
    top: 0px;
    pointer-events: all;
    display: inline;
    box-sizing: border-box;
  }

  .google-login-button{
    height: 50px;
    left: 11%;
  }

  .google-login-button-no-marketing{
    height: 50px;
    width: 224px;
    top: 6px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    pointer-events: none;
  }

  .google-new-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-button-no-marketing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-text {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .google-new-text-no-marketing {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .GoogleRed {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }

  .GoogleRed-no-marketing {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }
  .GoogleYellow {
    width: 40%;
    height: 40%;
    position: absolute;
    z-index: 3;
    background-color: #ffc107;
    left: -15%;
    bottom: 32%;
    margin: auto;
    transform: rotateZ(-50deg);
  }
  .GoogleGreen {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }

  .GoogleGreen-no-marketing {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }
  .GoogleBlue {
    width: 35%;
    height: 32%;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    background-color: #4285f4;
    transform: rotateZ(45deg);
  }
  .GoogleGline {
    width: 50%;
    height: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #4285f4;
    z-index: 5;
  }


  /*tooltip */
  .google-tooltip {
    display: none;
  }

  /* tooltip  after*/
  .google-tooltip::after {
    display: none;
  }

  .google-login-button:hover .google-tooltip{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-tooltip{
    display: none;
  }

  .google-login-button:hover .google-new-button{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-new-button-no-marketing{
    display: none;
  }

  .right .google-tooltip
  {
    display: none;
  }

  .right .google-tooltip::after{
    display: none;
  }

  .google-signin-text {
    font-family: Sul Sans;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    float: right;
    height: 24px;
    width: 178px;
    left: 54px;
    top: 13px;
  }
}

/*For flip phones with small screens such as Galaxy Fold*/
@media screen and (max-width: 319px) {
  .row .phone-input {
    position: relative !important;
    float: right !important;
    width: 55% !important;
    padding-left: 30px !important;
    margin-left: 8px !important;
    padding-right: 0px !important;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #ffffff;
    height: 40px;
    margin: 4px 0px;
    font-size: 11px;
  }
  .row .iti__selected-flag {
    background-color: #ffffff !important;
    color: #ffffff;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    border-radius: 8px;
    height: 40px;
    width: 81px;
    font-size: 11px;
  }
  .two-factor-registration-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
    text-align: left;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .btn.btn-mfa-get-started {
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
    width: 116px;
    height: 40px;
  }

  .btn.btn-mfa-get-started:hover {
    width: 116px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  .btn.btn-mfa-get-started:not(:disabled):hover {
    width: 116px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }
  .btn.btn-mfa-get-started:not(:disabled):focus {
    width: 116px;
    height: 40px;
    cursor: pointer;
    color: rgb(255,255,255);
    background-color: #000 !important;
    border: none;
    border-radius: 20pt;
  }

  .promo-google-login {
    width: 224px;
    height: 48px;
    left: 0px;
    font-weight: 400;
    color: #000000 !important;
    background: transparent;
    border-radius: 24px;
    padding-top: 1rem;
    border: 0.2rem solid #000000 !important;
    position: absolute;
    top: 0px;
    pointer-events: all;
    display: inline;
    box-sizing: border-box;
  }

  .google-login-button{
    height: 50px;
    left: 11%;
  }

  .google-login-button-no-marketing{
    height: 50px;
    width: 224px;
    top: 6px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    pointer-events: none;
  }

  .google-new-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-button-no-marketing {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    position: absolute;
    width: 33px;
    height: 16px;
    left: 205px;
    top: -5px;
    background: #36A635;
    border-radius: 4px;
    z-index: 4;
    visibility: hidden;
  }

  .google-new-text {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .google-new-text-no-marketing {
    position: absolute;
    width: 25px;
    height: 16px;
    left: 0px;
    top: 0px;
    font-family: Sul Sans;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
  }

  .GoogleRed {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }

  .GoogleRed-no-marketing {
    width: 78%;
    height: 42%;
    position: absolute;
    background-color: #f44336;
    transform: rotateZ(-40deg);
    left: 0px;
  }
  .GoogleYellow {
    width: 40%;
    height: 40%;
    position: absolute;
    z-index: 3;
    background-color: #ffc107;
    left: -15%;
    bottom: 32%;
    margin: auto;
    transform: rotateZ(-50deg);
  }
  .GoogleGreen {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }

  .GoogleGreen-no-marketing {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #4caf50;
    z-index: 2;
    left: 0px;
  }
  .GoogleBlue {
    width: 35%;
    height: 32%;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    background-color: #4285f4;
    transform: rotateZ(45deg);
  }
  .GoogleGline {
    width: 50%;
    height: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #4285f4;
    z-index: 5;
  }


  /*tooltip */
  .google-tooltip {
    display: none;
  }

  /* tooltip  after*/
  .google-tooltip::after {
    display: none;
  }

  .google-login-button:hover .google-tooltip{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-tooltip{
    display: none;
  }

  .google-login-button:hover .google-new-button{
    display: none;
  }

  .google-login-button-no-marketing:hover .google-new-button-no-marketing{
    display: none;
  }

  .right .google-tooltip
  {
    display: none;
  }

  .right .google-tooltip::after{
    display: none;
  }

  .google-signin-text {
    font-family: Sul Sans;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    float: right;
    height: 24px;
    width: 178px;
    left: 54px;
    top: 13px;
  }
}

.google-tooltip-text{
  font-family: Sul Sans;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
}

.google-signin-text{
  font-family: Sul Sans;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  float: right;
}

.google-login-error-background{


  position: absolute;
  width: 1400px;
  height: 900px;
  left: 0px;
  top: 0px;

  /* Ink/Ink 700 */

  background: rgba(0, 0, 0, 0.4);
}

.google-login-error-dialog{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0px;
  position: relative;
  width: 320px;
  height: 232px;
  background: #FFFFFF;
  margin: auto;
  box-shadow: 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 11px 15px -7px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.google-login-error-header{
  position: relative;
  width: 272px;
  height: 24px;
  left: 24px;
  top: -8px;
  font-family: Sul Sans;
  font-size: 20px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.825);
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  margin: 16px 0px;
}

.google-login-cancel{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  position: relative;
  width: 78px;
  height: 40px;
  left: 32px;
  top: 107px;
  border-radius: 8px;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 8px;
}

.google-login-backtologin{

  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  position: relative;
  width: 184px;
  height: 40px;
  left: 60px;
  top: -33px;
  border-radius: 8px;
  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0px 8px;
}

.google-login-error-message{
  position: relative;
  width: 272px;
  height: 96px;
  left: 24px;
  top: -26px;
  font-family: Sul Sans;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.6);
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  margin: 16px 0px;
}

.google-login-backtologin-link{
  position: static;
  width: 146px;
  height: 16px;
  left: 16px;
  top: 12px;

  /* Button - 14 Med */

  font-family: Sul Sans;
  font-size: 14px;
  line-height: 16px;
  /* identical to box height, or 114% */

  display: flex;
  align-items: center;
  text-align: center;

  /* Text/Primary (Blue 600) */

  color: #0040DB;


  /* Inside Auto Layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 0px;
}

.forgot-password {
  background: none;
  color: var(--color-primary)
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-border {
  color: #000000;
  display: none;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
  display: none;
}

.display-enabled{
  display: inline-block;
}

.display-disabled{
  display: none;
}

.login-clicked-border{
  background: none;
  color: #000000;
  border: 0.5rem solid #000000 !important;
}

.spinner-white{
  color: #ffffff;
}

a.btn.btn-primary:visited{
  background-color: var(--color-primary-darker) !important;
}

.right .google-tooltip-no-marketing{
  left: 106%;
}

.row .mail-mfa-login {
  text-align: center;
}

.mail-ott-token-input-box {
  border: 1px solid #0040DB;
  box-sizing: border-box;
  border-radius: 8px;

  margin: 4px 0px;

  text-align: center;
  line-height:24px;
  font-size: 20px;
  width:100%;
  height:40px;
}

.row mail-token-input {
  text-align: center;
  padding-right: 0px;
}

.simple-email-confirm-empty-box {
  height: 32px;
}

.resend-email-attempt-warning {
  margin-top: 8px;
  margin-bottom: 8px;

  text-align: center;
  line-height: 16px;
}

.resend-email-attempt-warning-placeholder {
  height: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.spinner-button-text {
  margin-right: 6px;
}

.spinner-button-text.hidden {
  margin-right: 0;
  display: none;
}

.spinner-button-text-hidden {
  margin-right: 0;
  display: none;
}

.spinner-button-arrow {
  height: 8px;
  width: 15px;
}

.spinner-button-arrow.hidden {
  height: 0;
  width: 0;

  display: none;
}

.spinner-button-arrow-hidden {
  height: 0;
  width: 0;

  display: none;
}

.mail-token-verify-text {
  margin-right: 6px;
}

.mail-token-verify-text-hidden {
  margin-right: 0px;
  display: none;
}

.mail-token-verify-arrow {
  height: 8px;
  width: 15px;
}

.mail-token-verify-arrow-hidden {
  height: 0;
  width: 0;

  display: none;
}

.spinner-white {
  color: #ffffff;
}

.qr-6-digit-submit-button.login-clicked-border {
  background: none;
}

.token-submit.login-clicked-border {
  background: none;
}

.mfa-register-saved-device {
  height: 40px;
  margin-right: 6px;
  width: 140px;
}

.btn.btn-primary.mfa-register-saved-device.login-clicked-border {
  background: none;
}

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

.btn.app-download-button.login-clicked-border {
  background: none;
}

.app-download-button {
  width: 180px;
  height: 40px;
  margin-right: 6px;
}

.btn.question-submit {
  background-color: var(--color-primary);
}

.btn.question-submit.login-clicked-border {
  background: none;
}