:root {
  --gotham: "Gotham", helvetica, arial, sans-serif;
  --gotham-cond: "Gotham Cond", helvetica, sans-serif;
  --gotham-narrow: "Gotham Narrow", helvetica, sans-serif;
  --secondary-gray: #e5e5ec;
  --core-dark: #051727;
  --core-red: #b3282d;
  --coreneutral-101: #fbfbfc;
  --coreneutral-103: #eff0f1;
  --coreneutral-108: #828b93;
}

/* fonts */

@font-face {
  font-family: "Gotham Narrow";
  src: url("https://download.pingidentity.com/public/fonts-gotham/woff2/GothamNarrow-Black_Web.woff2")
      format("woff2"),
    url("https://download.pingidentity.com/public/fonts-gotham/woff/GothamNarrow-Black_Web.woff")
      format("woff");
  font-weight: 800;
  font-style: normal;
  unicode-range: U+00-7F;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("https://download.pingidentity.com/public/fonts-gotham/woff2/Gotham-Book_Web.woff2")
      format("woff2"),
    url("https://download.pingidentity.com/public/fonts-gotham/woff2/Gotham-Book_Web.woff")
      format("woff");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+00-7F;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("https://download.pingidentity.com/public/fonts-gotham/woff2/Gotham-Medium_Web.woff2")
      format("woff2"),
    url("https://download.pingidentity.com/public/fonts-gotham/woff/Gotham-Medium_Web.woff")
      format("woff");
  font-weight: 500;
  font-style: normal;
  unicode-range: U+00-7F;
  font-display: swap;
}

@font-face {
  font-family: "Gotham Narrow";
  src: url("https://download.pingidentity.com/public/fonts-gotham/woff2/Gotham-Bold_Web.woff2")
      format("woff2"),
    url("https://download.pingidentity.com/public/fonts-gotham/woff/Gotham-Bold_Web.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
  unicode-range: U+00-7F;
  font-display: swap;
}

/* typography */

.body-101--medium {
  font-family: var(--gotham);
  color: var(--core-dark);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

/* layout */

.p1-sign-on__container {
  background: #fbfbfc;
  width: 100vw;
  height: 93vh;
  min-height: 600px;
  display: grid;
  place-content: center;
  text-align: center;
}

footer {
  background: #fbfbfc;
  height: 7vh;
  width: 100vw;
  display: flex !important;
  justify-content: center;
}

#powered-by-davinci-logo {
  height: 28px;
  margin-bottom: 8px;
}

.logo-ping-branding {
  height: 34.8px;
  width: auto;
}

.p1-sign-on__card {
  width: 440px;
}

.p1-sign-on__card--wide {
  text-align: start;
  width: 525px;
}

/* utility classes */

.mr--8 {
  margin-right: 8px;
}

.ml--8 {
  margin-left: 8px;
}

.mt--16 {
  margin-top: 16px;
}

.mb--16 {
  margin-bottom: 16px;
}

.mr--16 {
  margin-right: 16px;
}

.mb--24 {
  margin-bottom: 24px;
}

.mt--24 {
  margin-top: 24px;
}

.mt--40 {
  margin-top: 40px;
}

/* loading spinner */

.reactSingularKey_idsLoading {
  width: 40px;
  height: 40px;
  --primary-color: var(--core-red) !important;
  background: transparent;

  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

div[class*="styles_idsLoading__"] {
  display: grid !important;
  place-content: center;
  width: 100% !important;
  margin-bottom: 10px !important;
  background: transparent;
}

div[class*="styles_idsLoading__"] div {
  border-radius: unset !important;
  border-color: var(--core-red);
  animation: unset !important;
  margin: 5px 25.5px !important;
  border: 20px solid var(--core-red) !important;
  background: transparent;
}

.reactSingularKey_CC_main_generic > div > div {
  display: grid !important;
  place-content: center !important;
  content: "Loading..." !important;
}

.reactSingularKey_CC_main_generic {
  font-family: var(--gotham) !important;
  background: transparent;
}

div[class*="styles_CC_main_generic__"] {
  background: #fff !important;
}

/* responsiveness */

@media only screen and (max-width: 600px) {
  .p1-sign-on__card,
  .p1-sign-on__card--wide {
    width: 335px;
  }
}