* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f5f7fa;
  color: #202b3c;
  font-family: Arial, sans-serif;
}

.page {
  width: min(100% - 32px, 520px);
  margin: 48px auto;
}

h1 {
  margin-bottom: 24px;
}

.dvWidget {
  min-height: 300px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgb(0 0 0 / 10%);
}

.footerLogo {
  /* Ping Logo */
  content: url("https://authenticator.pingone.com/pingid/assets/images/ping-logo.sm.2x.png");
  width: 105px !important;
  height: auto;
}
:root {
  /******************************************************** * COMPANY LOGO *********************************************************/
  --company-logo-img-url: url("https://uploads.pingone.com/environments/a59917da-0f7a-44d3-a070-5da6f652fed6/images/5d13ecd5-4932-4506-b03d-e686007848b5_f1855de6-5b3a-4c48-94f6-21c5bb1b64e9_original.png");
  --company-logo-max-height: 55px;
  --company-logo2-img-url: none;
  --company-logo2-max-height: 40px;
  /******************************************************** * PAGE BACKGROUND VARIABLES *********************************************************/
  --background-image-url: none;
  /******************************************************** * CARD BODY *********************************************************/
  --card-background-color: rgb(255, 255, 255);
  --card-border-color: rgb(202, 206, 211);
  --card-border-width: 0px;
  --card-shadow-color: rgba(121, 128, 135, 0.35);
  /******************************************************** * BODY *********************************************************/
  --body-font-family: "Helvetica Neue", Helvetica, sans-serif;
  --body-font-size: 0.935rem;
  /******************************************************** * TEXT FONT COLORS *********************************************************/
  /* PRIMARY FONT COLOR (RGB) */
  --text-color-primary: 104, 111, 119;
  /* HEADING FONT COLR (RBG) */
  --heading-text-color: 104, 111, 119;
  /* MUTED TEXT ALPHA */
  --text-color-muted-apha: 0.75;
  /* ERROR FONT COLOR */
  --text-color-error: rgb(163, 19, 0);
  /******************************************************** * BUTTON ATTRIBUTES *********************************************************/
  /* BUTTON FONT COLOR */
  --button-primary-text-color: rgb(255, 255, 255);
  --button-primary-hover-text-color: rgb(255, 255, 255);
  /* BUTTON BACKGROUND COLOR (RGB) */
  --button-primary-background-color: 237, 28, 36;
  --button-primary-border-color: 0, 0, 0;
  --button-primary-hover-background-color: 201, 38, 38;
  --button-primary-hover-border-color: 0, 0, 0;
  --button-primary-border-width: 1px;
  --button-primary-text-size: 16px;
  --button-primary-text-weight: 400;
  /* LINK BUTTON FONT COLOR (RGB) */
  --link-button-primary-color: 0, 97, 186;
  /* BUTTON BORDER RADIUS */
  --button-primary-border-radius: 15px;
  /* BUTTON HOVER ALPHA */
  --button-hover-alpha: 0.7;
  /* BUTTON ACTIVE ALPHA */
  --button-active-alpha: 0.8;
  /* BUTTON DISABLED ALPHA */
  --button-disabled-alpha: 0.65;
  /******************************************************** * FORM CONTROLS *********************************************************/
  --form-control-border-radius: 15px;
  --form-control-border-color: 201, 38, 38;
  --form-control-border-width: 1px;
  --form-control-text-color: rgb(121, 128, 135);
  --form-control-text-size: 15px;
  --form-control-text-weight: 600;
  --form-control-label-color: rgb(121, 128, 135);
  --form-control-label-size: 15px;
  --form-control-label-weight: 600;
  --card-body-border-radius: 15px;
  --focus-highlight-color: 198, 217, 255;
  --background-color: 237, 237, 237;
  --application-background-color: 248, 248, 248;
  /******************************************************** * ACTIVITY INDICATOR & BUTTON SPINNER COLOR *********************************************************/
  --activity-indicator-color: rgb(104, 111, 119);
  --polling-indicator-color: rgb(104, 111, 119);
  /******************************************************** * APPLYING TEXT COLOR - DO NOT CHANGE *********************************************************/
  /* H1,H2, H3, Body text color */
  --bs-body-color: rgb(var(--text-color-primary)) !important;
  --bs-danger-rgb: var(--text-color-error);
}
/******************************************************** * FOUNDATION: BOOTSTRAP THEME VARIABLES *********************************************************/
.end-user-nano {
  /* active step / primary action color */
  --bs-primary-rgb: 237, 28, 36;
  /* inactive borders / lines */
  --bs-secondary-rgb: 104, 111, 119;
  /* muted text */
  --bs-secondary-color: rgba(104, 111, 119, 0.75);
  /* link color */
  --bs-link-color-rgb: 0, 97, 186;
  --bs-link-color: rgb(0, 97, 186);
  /* link hover color */
  --bs-link-hover-color: rgb(0, 74, 186);
}
/******************************************************** * COMPONENT STYLES * Organized by layout, typography, form controls, buttons, * branding, cards, and activity indicators. *********************************************************/
/* PAGE BACKGROUND */
.end-user-nano,
.end-user-nano div.bg-light {
  background-image: var(--background-image-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgb(var(--application-background-color)) !important;
}
.end-user-nano div.bg-light {
  background-color: rgb(var(--background-color)) !important;
}
/* BRANDING */
.card-body.p-5.d-flex.flex-column > img:first-child,
.companyLogo {
  content: var(--company-logo-img-url) !important;
  height: var(--company-logo-max-height) !important;
  width: auto !important;
}
.companyLogo2 {
  content: var(--company-logo2-img-url) !important;
  height: var(--company-logo2-max-height) !important;
  width: auto !important;
}
/* TYPOGRAPHY */
h1,
h2,
h3,
h4 {
  color: rgb(var(--heading-text-color)) !important;
}
/* BODY FONT & COLOR */
.card-body {
  /* font family */
  font-family: var(--body-font-family) !important;
  /* font size */
  font-size: var(--body-font-size) !important;
  /* font color */
  color: rgb(var(--text-color-primary)) !important;
  /* background color */
  background-color: var(--card-background-color) !important;
}
/* MUTED PARAGRAPH */
p.text-muted {
  color: rgba(
    var(--text-color-primary),
    var(--text-color-muted-apha)
  ) !important;
}
/* ERROR MESSAGE PARAGRAPH */
.card .text-danger {
  color: var(--text-color-error) !important;
}
/* FORM CONTROLS */
/* FORM CONTROL FONT COLOR */
.form-control,
.form-control:focus {
  color: var(--form-control-text-color) !important;
  font-size: var(--form-control-text-size) !important;
  font-weight: var(--form-control-text-weight) !important;
  border-color: var(--form-control-border-color) !important;
  border-width: var(--form-control-border-width) !important;
  border-radius: var(--form-control-border-radius) !important;
}
.form-floating input + label,
.form-floating label {
  font-size: var(--form-control-label-size) !important;
  font-weight: var(--form-control-label-weight) !important;
  color: var(--form-control-label-color) !important;
}
/* FORM CONTROL PLACEHOLDER FONT COLOR */
.form-floating input::placeholder {
  color: rgba(
    var(--text-color-primary),
    var(--text-color-muted-apha)
  ) !important;
}
/* FORM CONTROL HIGHLIGHT */
.form-control:focus {
  border-color: rgba(var(--focus-highlight-color), 0.5) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--focus-highlight-color), 0.25) !important;
}
/* FORM CONTROL HIGHLIGHT */
.form-select {
  border-radius: var(--form-control-border-radius) !important;
}
/* BUTTONS */
/* PRIMARY BUTTON */
.btn-primary {
  /* font color */
  --bs-btn-color: var(--button-primary-text-color) !important;
  /* font color when hovering */
  --bs-btn-hover-color: var(--button-primary-text-color) !important;
  /* border color */
  --bs-btn-border-color: var(--button-primary-background-color) !important;
  /* background color */
  --bs-btn-bg: rgb(var(--button-primary-background-color)) !important;
  /* background color when hovering */
  --bs-btn-hover-bg: rgba(
    var(--button-primary-background-color),
    var(--button-hover-alpha)
  ) !important;
  /* background color when active */
  --bs-btn-active-bg: rgba(
    var(--button-primary-background-color),
    var(--button-active-alpha)
  ) !important;
  /* background color when disabled */
  --bs-btn-disabled-bg: rgba(
    var(--button-primary-background-color),
    var(--button-disabled-alpha)
  ) !important;
  background-color: rgb(var(--button-primary-background-color)) !important;
  border-color: rgb(var(--button-primary-background-color)) !important;
  border-width: var(--button-primary-border-width) !important;
  color: var(--button-primary-text-color) !important;
  font-size: var(--button-primary-text-size) !important;
  font-weight: var(--button-primary-text-weight) !important;
  border-radius: var(--button-primary-border-radius) !important;
}
/* OUTLINE PRIMARY BUTTON */
.btn-outline-primary {
  --bs-btn-color: rgb(var(--button-primary-border-color)) !important;
  --bs-btn-border-color: rgb(var(--button-primary-border-color)) !important;
  --bs-btn-hover-color: var(--button-primary-hover-text-color) !important;
  --bs-btn-hover-bg: rgb(
    var(--button-primary-hover-background-color)
  ) !important;
  --bs-btn-hover-border-color: rgb(
    var(--button-primary-hover-border-color)
  ) !important;
  --bs-btn-active-color: var(--button-primary-hover-text-color) !important;
  --bs-btn-active-bg: rgb(
    var(--button-primary-hover-background-color)
  ) !important;
  --bs-btn-active-border-color: rgb(
    var(--button-primary-hover-border-color)
  ) !important;
  --bs-btn-disabled-color: rgba(
    var(--button-primary-border-color),
    var(--button-disabled-alpha)
  ) !important;
  --bs-btn-disabled-border-color: rgba(
    var(--button-primary-border-color),
    var(--button-disabled-alpha)
  ) !important;
  color: rgb(var(--button-primary-border-color)) !important;
  background-color: transparent !important;
  border-color: rgb(var(--button-primary-border-color)) !important;
  border-width: var(--button-primary-border-width) !important;
  font-size: var(--button-primary-text-size) !important;
  font-weight: var(--button-primary-text-weight) !important;
  border-radius: var(--button-primary-border-radius) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  color: var(--button-primary-hover-text-color) !important;
  background-color: rgb(
    var(--button-primary-hover-background-color)
  ) !important;
  border-color: rgb(var(--button-primary-hover-border-color)) !important;
}
.btn-outline-primary:active {
  color: var(--button-primary-hover-text-color) !important;
  background-color: rgba(
    var(--button-primary-hover-background-color),
    var(--button-active-alpha)
  ) !important;
  border-color: rgb(var(--button-primary-hover-border-color)) !important;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: rgba(
    var(--button-primary-border-color),
    var(--button-disabled-alpha)
  ) !important;
  background-color: transparent !important;
  border-color: rgba(
    var(--button-primary-border-color),
    var(--button-disabled-alpha)
  ) !important;
}
.btn-primary:hover {
  background-color: rgba(
    var(--button-primary-background-color),
    var(--button-hover-alpha)
  ) !important;
  border-color: rgba(
    var(--button-primary-background-color),
    var(--button-hover-alpha)
  ) !important;
  color: var(--button-primary-text-color) !important;
}
/* LINK BUTTON */
.btn-link {
  /* button font color */
  --bs-btn-color: rgb(var(--link-button-primary-color)) !important;
  /* button font color when active */
  --bs-btn-active-color: rgba(
    var(--link-button-primary-color),
    var(--button-active-alpha)
  ) !important;
  /* button font color when hovering */
  --bs-btn-hover-color: rgba(
    var(--link-button-primary-color),
    var(--button-hover-alpha)
  ) !important;
  /* button font color when disabled */
  --bs-btn-disabled-color: rgba(
    var(--link-button-primary-color),
    var(--button-disabled-alpha)
  ) !important;
  color: rgb(var(--link-button-primary-color)) !important;
}
/* ACTIVITY INDICATORS */
/* POLLING INDICATORS */
.css-11k6vsm,
.css-17zi2ag,
.css-139roxj {
  /* width: 20px; */
  /* height: 20px; */
  /* animation-duration: 0.75s; */
  /* circle background color */
  background-color: var(--polling-indicator-color) !important;
}
/* BUTTON ACTIVITY INDICATOR, PROGRESS SPINNER */
.css-sw2ho0 {
  /* spinning circle color */
  --primary-color: var(--activity-indicator-color) !important;
}
/* PROGRESS SPINNER */
.spinner-color {
  color: var(--polling-indicator-color) !important;
}
/* CARDS */
.card-body.p-5.d-flex.flex-column {
  border-radius: var(--card-body-border-radius);
}
.card.shadow.mb-5 {
  border-radius: var(--card-body-border-radius);
  border-color: var(--card-border-color) !important;
  border-width: var(--card-border-width) !important;
  box-shadow: 1px 1px 3px 1px var(--card-shadow-color) !important;
}