@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --bs-font-sans-serif: "Roboto",
    system-ui,
    -apple-system,
    "Segoe UI",
    "Helvetica Neue",
    "Noto Sans",
    "Liberation Sans",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji" !important;
    --bs-primary: #4471B7 !important;
    --bs-primary-rgb: 68,113,183 !important;
    --bs-primary-alternate: #0F52A5 !important; 
    --bs-secondary-button-color: #BDC9DB !important;
    --bs-secondary-button-rgb: 189,201,219 !important;
    --bs-body-font-weight-override: 400 !important;
    --bs-body-font-size-override: 1.0rem !important;
    --bs-button-font-weight-override: 500 !important;
    --bs-button-font-size-override: .844rem !important;
    --bs-button-disabled-opacity-override: 1.0 !important;
    --bs-button-radius-override: 1.25rem !important;
    --bs-button-light-radius-override: 0.25rem !important;
    --bs-link-color: var(--bs-primary) !important;
    --bs-link-hover-color: var(--bs-primary-alternate) !important;
    --bs-nav-link-color: var(--bs-primary) !important;
    --bs-nav-link-hover-color: var(--bs-primary-alternate) !important;
    --bs-body-line-height: 1.2rem !important;
    --bs-spinner-background: var(--bs-primary) !important;
    --bs-spinner-color: var(--bs-white) !important;
    --bs-box-shadow-depth: 0.25rem !important;
    --bs-box-shadow-opacity: 0.25 !important;
    --bs-box-shadow-override: rgba(var(--bs-primary-rgb), var(--bs-box-shadow-opacity)) !important;
    --bs-form-control-radius-override: .25rem !important;
    --margin-0: var(--margin-0);
    --margin-1: 2.5px;
    --margin-2: 5px;
    --margin-3: 10px;
    --margin-4: 15px;
    --margin-5: 32px;
    --padding-0: 0px;
    --padding-1: 2.5px;
    --padding-2: 5px;
    --padding-3: 10px;
    --padding-4: 15px;
    --padding-5: 32px;
    --gap-0: 0px;
    --gap-1: 2.5px;
    --gap-2: 5px;
    --gap-3: 10px;
    --gap-4: 15px;
    --gap-5: 32px;
    --bs-error-background: #fffafa !important;
    --bs-info-background: #F0F8FF !important;
    --bs-info: #4471B7 !important;
    --bs-info-rgb: 68,113,183 !important;
}

body {
    font-family: var(--bs-body-font-family) !important;
    font-weight: var(--bs-body-font-weight-override) !important;
    font-size: var(--bs-body-font-size-override);
}

.btn-primary {
    border-radius: var(--bs-button-radius-override) !important;
    font-weight: var(--bs-button-font-weight-override) !important;
    font-size: var(--bs-button-font-size-override) !important;
    --bs-btn-color: var(--bs-white) !important;
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: var(--bs-white) !important;
    --bs-btn-hover-bg: var(--bs-primary-alternate) !important;
    --bs-btn-hover-border-color: var(--bs-primary-alternate) !important;
    --bs-btn-active-color: var(--bs-white) !important;
    --bs-btn-active-bg: var(--bs-primary-alternate) !important;
    --bs-btn-active-border-color: var(--bs-primary-alternate) !important;
    --bs-btn-disabled-color: var(--bs-white) !important;
    --bs-btn-disabled-bg: var(--bs-primary-alternate) !important;
    --bs-btn-disabled-border-color: var(--bs-primary-alternate) !important;
    --bs-btn-disabled-opacity: var(--bs-button-disabled-opacity-override) !important;
}

.btn-outline-secondary {
    border-radius: var(--bs-button-radius-override) !important;
    font-weight: var(--bs-button-font-weight-override) !important;
    font-size: var(--bs-button-font-size-override) !important;
    --bs-btn-color: var(--bs-primary) !important;
    --bs-btn-bg: var(--bs-white) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-secondary-button-color) !important;
    --bs-btn-hover-border-color: var(--bs-primary-alternate) !important;
    --bs-btn-active-color: var(--bs-white) !important;
    --bs-btn-active-bg:  var(--bs-secondary-button-color) !important;
    --bs-btn-active-border-color:  var(--bs-primary-alternate) !important;
    --bs-btn-disabled-color: var(--bs-white) !important;
    --bs-btn-disabled-bg: var(--bs-secondary-button-color) !important;
    --bs-btn-disabled-border-color: var(--bs-primary-alternate) !important;
    --bs-btn-disabled-opacity: var(--bs-button-disabled-opacity-override) !important;
}

.form-control {
    border-radius: var(--bs-form-control-radius-override) !important;
}

.form-control:focus, .form-select:focus, .form-check-input:focus, .btn-close:focus {
    box-shadow: 0 0 0 var(--bs-box-shadow-depth) var(--bs-box-shadow-override) !important;
    border-color: var(--bs-primary-alternate) !important;
}

.btn-outline-primary {
    border-radius: var(--bs-button-radius-override) !important;
}

.btn-secondary {
    border-radius: var(--bs-button-radius-override) !important;
}

.btn-outline-light {
    border-radius: var(--bs-button-light-radius-override) !important;
}

.css-sw2ho0 {
    --primary-color: var(--bs-spinner-color) !important;
}

.css-11k6vsm {
    background-color: var(--bs-spinner-background) !important;
}

.css-17zi2ag {
    background-color: var(--bs-spinner-background) !important;
}

.css-139roxj {
    background-color: var(--bs-spinner-background) !important;
}

.p-5 {
    padding: var(--padding-5) !important;
}

.form-label {
    text-transform: none !important;
}

.text-secondary {
    line-height: var(--bs-body-line-height) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
    line-height: var(--bs-body-line-height) !important;
}

.text-muted {
    line-height: var(--bs-body-line-height) !important;
}

.feedback-container {
    width: 100%;
    text-align: center;
}

.info-message-container {
    width: 100%;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-info-rgb), var(--bs-text-opacity));
    text-align: center;
    margin-bottom: var(--margin-4);
}

.info-message-container p {
    background: var(--bs-info-background) !important;
    --bs-border-opacity: 1 !important;
    border: var(--bs-border-width) var(--bs-border-style);
    border-radius: var(--bs-form-control-radius-override) !important;
    border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
    padding: var(--padding-3);
    color: rgba(var(--bs-info-rgb), var(--bs-text-opacity));
    text-align: center;
    margin: var(--margin-0);
}

.error-message-container {
    width: 100%;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
    text-align: center;
    margin-bottom: var(--margin-4);
}

.error-message-container p {
    background: var(--bs-error-background) !important;
    --bs-border-opacity: 1 !important;
    border: var(--bs-border-width) var(--bs-border-style);
    border-radius: var(--bs-form-control-radius-override) !important;
    border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;    
    padding: var(--padding-3);
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
    text-align: center;
    margin: var(--margin-0);
}

.heading-container {
    text-align: center;
    width: 100%;
    margin-bottom: var(--margin-4);
    --bs-text-opacity: 1;
}

.heading-icon {
    display: flex !important;
    flex-direction: column !important;
    width: 96px;
    height: auto;
    text-align: center;
}

.icon-svg {
    stroke: var(--bs-secondary-button-color);
    fill: var(--bs-secondary-button-color);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round
}

.error-heading-container {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
  border-bottom: var(--bs-border-width) var(--bs-border-style);
  text-align: center;
}

.info-heading-container {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
  border-bottom: var(--bs-border-width) var(--bs-border-style);
  text-align: center;
}

.split-button-container {
    display: flex !important;
    flex-grow: 1 !important;
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
    width: 80%;
    gap: var(--gap-4);
    align-self: center;
}

.button-container {
    display: flex !important;
    flex-direction: column !important;
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
    width: 100%;
    gap: var(--gap-3);
}

.icon-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    margin-bottom: var(--margin-4);
    align-items: center;
    text-align: center;
}

.main-body {
    width: 100%;
    margin-top: var(--margin-0);
    margin-bottom: var(--margin-4);
    --bs-text-opacity: 1;
    text-align: center;
}

.main-body p {
    color: #686f77;
    text-align: center;
    margin-top: var(--margin-0);
    margin-bottom: var(--margin-0);
}

.dialog {
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
    text-align: center;
    border-radius: var(--bs-form-control-radius-override) !important;
    --bs-border-opacity: 1 !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.dialog p {
    width: 100%;
    padding: var(--padding-3);
    margin-bottom: var(--margin-0);
    --bs-text-opacity: 1;
    text-align: center;
}

.shaded-dialog {
    background: var(--bs-gray-100) !important;
    border-color: #8b9197 !important;
    color: rgba(var(--bs-gray-700), var(--bs-text-opacity)) !important;
    text-align: center;
}

.shaded-dialog p {
    color: rgba(var(--bs-gray-700), var(--bs-text-opacity)) !important;
    text-align: center;
}

.error-dialog {
    background: var(--bs-error-background) !important;
    border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    text-align: center;
}

.error-dialog p {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    text-align: center;
}

.logo-image {
    align-self: center !important;
    margin-bottom: var(--margin-5) !important;
}

.shield-primary {
    fill: var(--bs-primary) !important;
}

.shield-danger {
    fill: var(--bs-danger) !important;
}

.shield-success {
    fill: var(--bs-success) !important;
}

.shield-muted {
    fill: var(--bs-gray) !important;
}

.shield-dark {
    fill: var(--bs-dark) !important;
}

.shield-icon-container {
    margin-bottom: 7px !important;
}

.shield-icon {
    width: 102px !important;
    margin-top: 2px !important;
    margin-left: 2px !important;
}

.mfa-device-list-container {
    display: flex !important;
    flex-direction: column !important;
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-4);
    gap: var(--gap-3);
}

.mfa-button-container {
    display: flex !important;
    align-items: center;
    margin: var(--margin-0);
    gap: var(--gap-3);
    width: 100%;
}

.mfa-device-icon-container {
    --device-icon-size: 48px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    margin-bottom: var(--margin-0);
    min-height: var(--device-icon-size);
    max-height: var(--device-icon-size);
    height: var(--device-icon-size);
    width: var(--device-icon-size);
    min-width: var(--device-icon-size);
    max-width: var(--device-icon-size);
}

.mfa-device-description-container {
    display: flex !important;
    flex-direction: column !important;
    text-align: left;
    gap: var(--gap-1);
}

.mfa-device-title {
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
    --bs-text-opacity: 1;
}

.mfa-device-title p {
    font-weight: 600 !important;
    font-size: var(--bs-body-font-size-override) !important;
    margin: var(--margin-0);
}

.mfa-device-description {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity));
}

.mfa-device-description p {
    font-size: var(--bs-button-font-size-override) !important;
    margin: var(--margin-0);
}

.validation-container {
    --bs-text-opacity: 1;   
    margin-bottom: var(--margin-0);
}

.validation-container p {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
    padding-left: var(--padding-3);
    margin-bottom: var(--margin-3);
}

.sk-form-input-error {
    box-shadow: 0 0 0 var(--bs-box-shadow-depth) rgba(var(--bs-danger-rgb), var(--bs-box-shadow-opacity)) !important;
    border-color: var(--bs-danger) !important;
}

.sk-form-input-error:focus {
    box-shadow: 0 0 0 var(--bs-box-shadow-depth) rgba(var(--bs-danger-rgb), var(--bs-box-shadow-opacity)) !important;
    border-color: var(--bs-danger) !important;
}

.polling-spinner {
    color: var(--bs-secondary-button-color);
    align-self: center;
}
.polling-spinner,
.polling-spinner div,
.polling-spinner div:after {
    box-sizing: border-box;
}
.polling-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.polling-spinner div {
    transform-origin: 40px 40px;
    animation: polling-spinner 1.2s linear infinite;
}
.polling-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 4.2px;
    left: 36.8px;
    width: 5.0px;
    height: 20px;
    border-radius: 20%;
    background: currentColor;
}
.polling-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.polling-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.polling-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.polling-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.polling-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.polling-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.polling-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.polling-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.polling-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.polling-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.polling-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.polling-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}
@keyframes polling-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}