/* Hero background styles for branded invitation flows */
.authentication-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex-grow: 1;
  width: 100%;
}
.authentication-heroBackground {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transition: opacity 200ms 0s, visibility 0s 0s;
  opacity: 1;
  visibility: hidden;
  z-index: 100;
  z-index: var(--cx-zIndex-1);
}
.authentication-heroBackground.is-loaded {
    opacity: 1;
    visibility: visible;
  }
.authentication-heroBackgroundImage {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.authentication-hero,
.authentication-heroBackground {
  background-color: #333333;
  background-color: var(--cx-color-grey100);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
main.authentication {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  min-height: 710px;
}
main.authentication.branded {
  justify-content: flex-start;
  position: relative;
  padding-top: 64px;
  padding-top: 64px;
  padding-top: var(--cx-spacing-8x, 64px);
  z-index: 200;
  z-index: var(--cx-zIndex-2);
}
main.authentication.branded .authentication-form {
    min-width: 430px;
  }
main.authentication.branded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  /* Height is 144px to cover the space from the top of the page to the beginning of the form
     (64px padding-top + 48px logo height + 32px logo margin = 144px total vertical space before form) */
  height: 144px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  pointer-events: none;
}
.branded-auth-header {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  margin-bottom: 32px;
  margin-bottom: var(--cx-spacing-4x, 32px);
}
.authentication-form {
  width: 100%;
  max-width: 430px;
}
.authentication-form .uc-authentication {
  border: 1px solid #DADADA;
  border: 1px solid var(--cx-color-border);
  width: 100%;
  background-color: #FFFFFF;
  background-color: var(--cx-color-background);
}
/* media related css for mobile formatting */
@media (max-width: 511px) {
.verification-form {
    flex-direction: column-reverse
}
  }
.verification-form .input {
  width: 33%;
  min-width: 320px;
}
@media (max-width: 511px) {
.verification-form .input {
    align-content: center;
    width: 100%;
    height: 50%
}
  }
.verification-form .image {
  width: 67%;
  height: 100%;
}
@media (max-width: 511px) {
.verification-form .image {
    width: 100%;
    height: 50%
}
  }
.factor--button-hover > .fill {
  fill: #0064E5;
  fill: var(--cx-color-interactive);
}
.factor--button-hover:hover > .fill {
  fill: #FFFFFF;
  fill: var(--cx-color-background);
}
.factor--button-hover:hover {
  background-color: #0064E5;
  background-color: var(--cx-color-interactive);
  color: #FFFFFF;
  color: var(--cx-color-background);
}
.factor--button-hover:hover:active {
  background-color: #003375;
  background-color: var(--cx-color-darkInteractive);
}
body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  font-family: "Compass Sans", Helvetica, Arial, sans-serif;

  font-family: var(--font-familySans, "Compass Sans", Helvetica, Arial, sans-serif);

  font-weight: 400;

  font-weight: var(--font-weightRegular, 400);

  font-style: normal;
}
main {
  flex-grow: 1; /* Ensure that the footer is always being pushed down to the bottom. */
}
/* Override ng-cloak on main; even if all the elements are being hidden during Angular rendering,
   * we want to ensure that the main element pushes content to the bottom of the page. */
main [ng\:cloak],
  main [ng-cloak],
  main [data-ng-cloak],
  main [x-ng-cloak],
  main .ng-cloak,
  main .x-ng-cloak,
  main .ng-hide:not(.ng-hide-animate) {
    display: none !important;
  }
/* Holdovers from htmlSelectors.less. We should investigate whether these can be deprecated. */
img {
  vertical-align: middle;
}
a {
  text-decoration: none;
}
a:focus {
    outline: none;
  }
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}