@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
  /* Colors*/
  --bs-blue: #0050ff;
  --bs-red: #cd0000;
  --bs-yellow: #F2940E;
  --bs-green: #007B5E;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #484a4e;
  --bs-gray-dark: #3b3c3e;
  --bs-gray-light: #f2f3f3;

  /* Shades */
  --bs-blue-50: #edf7ff;
  --bs-blue-100: #d6ebff;
  --bs-blue-200: #b5deff;
  --bs-blue-300: #83caff;
  --bs-blue-400: #48acff;
  --bs-blue-500: #1e87ff;
  --bs-blue-600: #0665ff;
  --bs-blue-700: #0050ff;
  --bs-blue-800: #083ec5;
  --bs-blue-900: #0d399b;
  --bs-blue-950: #0e245d;
  --bs-red-50: #fff0f0;
  --bs-red-100: #ffdddd;
  --bs-red-200: #ffc1c1;
  --bs-red-300: #ff9595;
  --bs-red-400: #ff5959;
  --bs-red-500: #ff2626;
  --bs-red-600: #fc0606;
  --bs-red-700: #cd0000;
  --bs-red-800: #af0505;
  --bs-red-900: #900c0c;
  --bs-red-950: #500000;
  --bs-green-50: #EBFEF6;
  --bs-green-100: #D0FBE7;
  --bs-green-200: #A4F6D4;
  --bs-green-300: #6AEBBE;
  --bs-green-400: #2FD8A2;
  --bs-green-500: #0ABF8C;
  --bs-green-600: #009B73;
  --bs-green-700: #007B5E;
  --bs-green-800: #03624C;
  --bs-green-900: #045040;
  --bs-green-950: #012D25;
  --bs-yellow-50: #fffaeb;
  --bs-yellow-100: #fdf1c8;
  --bs-yellow-200: #fce18b;
  --bs-yellow-300: #facb4f;
  --bs-yellow-400: #f8b119;
  --bs-yellow-500: #f2940e;
  --bs-yellow-600: #d66f09;
  --bs-yellow-700: #b24c0b;
  --bs-yellow-800: #903b10;
  --bs-yellow-900: #773110;
  --bs-yellow-950: #441704;
  --bs-gray-50: #f5f6f6;
  --bs-gray-100: #e5e6e8;
  --bs-gray-200: #ced0d3;
  --bs-gray-300: #acafb4;
  --bs-gray-400: #83878d;
  --bs-gray-500: #686c72;
  --bs-gray-600: #595c61;
  --bs-gray-700: #484a4e;
  --bs-gray-800: #434447;
  --bs-gray-900: #3b3c3e;
  --bs-gray-950: #252627;

  /* Color tokens */
  --bs-primary: var(--bs-blue);
  /* Wipfli Blue */
  --bs-primary-light: var(--bs-blue-50);
  --bs-primary-subtle: var(--bs-blue-200);
  --bs-primary-accent: var(--bs-blue-500);
  --bs-primary-dark: var(--bs-blue-800);
  --bs-primary-darker: var(--bs-blue-950);

  --bs-secondary: var(--bs-gray);
  /* Wipfli Gray */
  --bs-secondary-light: var(--bs-gray-50);
  --bs-secondary-subtle: var(--bs-gray-200);
  --bs-secondary-accent: var(--bs-gray-500);
  --bs-secondary-dark: var(--bs-gray-800);
  --bs-secondary-darker: var(--bs-gray-950);

  --bs-success: var(--bs-green);
  /* Wipfli Success*/
  --bs-success-light: var(--bs-green-50);
  --bs-success-subtle: var(--bs-green-200);
  --bs-success-accent: var(--bs-green-500);
  --bs-success-dark: var(--bs-green-800);
  --bs-success-darker: var(--bs-green-950);

  --bs-warning: var(--bs-yellow);
  /* Wipfli Warning */
  --bs-warning-light: var(--bs-yellow-50);
  --bs-warning-subtle: var(--bs-yellow-200);
  --bs-warning-accent: var(--bs-yellow-400);
  --bs-warning-dark: var(--bs-yellow-600);
  --bs-warning-darker: var(--bs-yellow-950);

  --bs-danger: var(--bs-red);
  /* Wipfli Danger */
  --bs-danger-light: var(--bs-red-50);
  --bs-danger-subtle: var(--bs-red-200);
  --bs-danger-accent: var(--bs-red-500);
  --bs-danger-dark: var(--bs-red-800);
  --bs-danger-darker: var(--bs-red-950);

  --bs-body-bg-rgb: 255, 255, 255;
  --bs-primary-rgb: 0, 80, 255;
  --bs-secondary-rgb: 72, 74, 78;
  --bs-success-rgb: 0, 138, 0;
  --bs-warning-rgb: 242, 148, 14;
  --bs-danger-rgb: 205, 0, 0;

  /* Color utilities */
  --bs-disabled: #bfbfbf;

  /* Typography */
  --bs-font-sans-serif: "Roboto Flex", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--bs-secondary);

  --bs-body-font-size: 1rem;
  /* Base font size */
  --bs-font-size-h1: 2.5rem;
  --bs-font-size-h2: 2rem;
  --bs-font-size-h3: 1.75rem;
  --bs-font-size-h4: 1.5rem;
  --bs-font-size-h5: 1.25rem;
  --bs-font-size-h6: 1.125rem;
  --bs-font-size-label: 0.875rem;
  --bs-font-size-label-sm: 0.75rem;

  /*borders & Radius*/
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.25rem;
  /* rounded & rounded-2 */
  --bs-border-radius-sm: 0.125rem;
  /* rounded-1 */
  --bs-border-radius-lg: 0.5rem;
  /* rounded-3 */
  --bs-border-radius-xl: 1rem;
  /* rounded-4 */
  --bs-border-radius-2xl: 2rem;
  /* rounded-5 */

  /*Layout & Spacing*/
  --horizontalFormColumnSpacing: 1rem;
  --verticalFormColumnSpacing: 1rem;
}

/* Basic definitions */

html, body { height: 100%; }
body {
  min-height: 100vh;
}

main {
  flex: 1 1 auto;
}

footer, .footer {
  margin-top: auto;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* Typography */

h1,
.h1 {
  font-size: var(--bs-font-size-h1);
  font-family: var(--bs-body-font-family);
}

h2,
.h2 {
  font-size: var(--bs-font-size-h2);
  font-family: var(--bs-body-font-family);
}

h3,
.h3 {
  font-size: var(--bs-font-size-h3);
}

h4,
.h4 {
  font-size: var(--bs-font-size-h4);
}

h5,
.h5 {
  font-size: var(--bs-font-size-h5);
}

h6,
.h6 {
  font-size: var(--bs-font-size-h6);
}

body,
p,
.p {
  font-size: var(--bs-body-font-size);
}

.fs-14 {
  font-size: var(--bs-font-size-label)!important;
}

.fs-12 {
  font-size: var(--bs-font-size-label-sm)!important;
}

h1,
.h1,
h2,
.h2 {
  font-family: "Inter Tight", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 600 !important;
  font-style: normal;
  line-height: 1.2;
}

h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Inter Tight", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 600 !important;
  font-style: normal;
  line-height: 1.3;
}

.title-1 {
  font-size: var(--bs-font-size-h1);
}

.title-2 {
  font-size: var(--bs-font-size-h2);
}

.title-3 {
  font-size: var(--bs-font-size-h3);
}

.title-4 {
  font-size: var(--bs-font-size-h4);
}

.title-5 {
  font-size: var(--bs-font-size-h5);
}

.title-6 {
  font-size: var(--bs-font-size-h6);
}

body {
  font-family: var(--bs-font-sans-serif)!important;
}

body,
p,
.p,
.fs-14,
.fs-12 {
  font-family: var(--bs-font-sans-serif);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

.text-secondary { color: var(--bs-secondary);}
.text-secondary-accent { color: var(--bs-secondary-accent);}

.fw-400, .fw-regular {font-weight: 400;}
.fw-500, .fw-medium {font-weight: 500;}
.fw-600, .fw-semibold {font-weight: 600;}

/* Iconography */
.md-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 300!important;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* Spinner */
.spinner-border::before {
  content: "";
  position: absolute;
  inset: calc(var(--bs-spinner-border-width) * -1);
  border-radius: 50%;
  border: var(--bs-spinner-border-width) solid currentColor;
  opacity: 0.15;
  pointer-events: none;
}

.spinner-border-xl {
  --bs-spinner-width: 4rem;
  --bs-spinner-height: 4rem;
  --bs-spinner-border-width: 0.25em;
}

/* Cards */
.card {
  --bs-card-spacer-y: 2rem;
  --bs-card-spacer-x: 2rem;
	--bs-card-title-spacer-y: 2rem;
	width: 600px;
}

.card-body:has(.MFCapi) .card-title {
	margin-bottom: 0.5rem;
}

.card-body .intro, .card-title {
	margin-bottom: var(--bs-card-title-spacer-y);
}

.footnote {
	margin-top: 2rem;
}

.required-text {
  color: var(--bs-danger);
}


/* Sign in */
.intro, .divider, .create {
  display: none;
}

label {
  font-size: 14px;
	line-height: 1.5;
	margin-bottom: 0.25rem;
	color: var(--bs-secondary);
}

.entry-item {
  width: 100%;
  margin: 0px auto;
}

.entry-item {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 1rem;
}
  .entry-item > .error.itemLevel {
    order: 3;
  }

  .entry-item > .signInName, .entry-item > #password {
    order: 2;
  }

input[type="text"], input[type="password"], input[type="tel"], input[type="num"], select {
  display: block;
  width: 100%;
  font-size: 1rem;
	padding: 0.75rem 0.5rem;
  background-color: var(--bg-color);
  background-clip: padding-box;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


*:has(> .error.itemLevel) > input {
  margin-bottom: 0rem;
}

#forgotPassword {
  position: absolute;
  bottom: -1.5rem;
  font-size: 0.875rem;
  left: auto;
  right: 0;
  line-height: 1.25rem;
}

.rememberMe {
	margin-top: 2rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.rememberMe > label {
	font-size: 1rem;
	line-height: 1;
	margin: 0;
	margin-left: 0.5rem;
}

.buttons {
  width: 100%;
}

a, .a {
	cursor: pointer!important;
}

button {
	background-color: var(--bs-primary);
	border: 1px solid var(--bs-primary);
	color: var(--bs-white);
	padding: 0.5rem;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	outline: 0;
	width: 100%;
	border-radius: 0.125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 3.25rem;
}

button:hover, #verifyPhone:hover , #verifyCode:hover {
	background-color: var(--bs-blue-900);
	color: var(--bs-white);
}

button:focus {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

button:active, button#button--loading {
	background-color: var(--bs-primary-dark);
}

button:disabled {
	background-color: rgb(0, 0, 0, 0.25);
	border: 1px solid transparent;
	cursor: not-allowed;
}

button#verifyCode, button#verifyPhone {
	color: var(--bs-primary);
	background-color: var(--bs-white);
	border: 1px solid var(--bs-primary);
}

button#button--loading {
	pointer-events: none;
	cursor: not-allowed;
	min-height: 3.25rem;
}

input, select {
	border: 1px solid var(--bs-gray-300);
	border-radius: 0.125rem;
	padding: 0.75rem 0.5rem;
}

input:focus, input:focus-visible, select:focus, select:focus-visible {
	outline: 2px solid var(--bs-primary);
	outline-offset: 1px;
	border: 1px solid var(--bs-primary);
	background-color: var(--bs-white);
}

input:active, select:active {
	border: 1px solid var(--bs-primary);
	background-color: var(--bs-white);
}

input[type=text]:disabled, select:disabled {
  background-color: var(--bs-gray-100);
	pointer-events: none;
	cursor: not-allowed;
}

input[type="checkbox"] {
	accent-color: var(--bs-primary);
	width: 1rem;
	height: 1rem;
}

.alert-success {
  color: var(--bs-success-darker);
  border: 1px solid var(--bs-success-accent);
  border-left-width: 4px;
  background-color: var(--bs-success-light);
}

.alert-warning {
  color: var(--bs-warning-darker);
  border: 1px solid var(--bs-warning-accent);
  border-left-width: 4px;
  background-color: var(--bs-warning-light);
}

.alert-danger {
  color: var(--bs-danger-darker);
  border: 1px solid var(--bs-danger-accent);
  border-left-width: 4px;
  background-color: var(--bs-danger-light);
}

.alert-info, .alert-primary {
  color: var(--bs-primary-darker);
  border: 1px solid var(--bs-primary-accent);
  border-left-width: 4px;
  background-color: var(--bs-primary-light);
}

.alert-primary.accordion .accordion-button{
  --bs-accordion-btn-color: var(--bs-primary-dark);
  font-weight: 600;
}

.alert#alertWrapper {
	position: absolute;
	width: 100%;
}

/* error state */
.error {
  color: var(--bs-danger-darker);
	background-color: var(--bs-danger-light);
	border: 1px solid var(--bs-danger-accent);
	border-left-width: 4px;
	padding: .5rem .75rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.error:empty, .error div:empty, .error p:empty {
	display: none;
}

/* to remove error in Change primary email when there's no error text */
.verificationErrorText.error:has(#emailUpdateControl_error_message) {
  all:unset;
}

.error.itemLevel {
	background-color: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.error.itemLevel p {
	font-size: 14px;
	color: var(--bs-danger);
	margin-top: 0.25rem;
}

.error > p {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}


footer {
	background-color: rgb(0, 0, 0, 0.5);
  color: var(--bs-white);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border-top: var(--bs-secondary);
}

ul {
  padding: 0;
  list-style-type: none;
}
/* /Sign in screen */

/* Forgot password */
input.otpInput {
  height: 64px;
	width: 64px!important;
  font-size: 32px!important;
  font-family: 'Inter Tight';
  font-weight: 600;    
}

input.otpInput:focus{
  border: 1px solid var(--bs-primary);
}

.forgotPassword {
  margin-bottom: 2rem;
}
/* /Forgot password */

/* MFA */
button:not(#button--loading)::after, button#verifyCode::before, button#verifyPhone::before {
	font-size: 24px;
  font-family: 'Material Symbols Outlined';
  z-index: 2;
	font-weight: 300;
}
button#verifyCode::before {
	content: "\e625";
}

button#verifyPhone::before {
	content: "\e0b0";
}

/* button:not(#button--loading)::after {
	content: "\e5cc";
} */

#retryCode{
	color:var(--bs-link-color);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: underline;
}

#retryCode:hover {
  color: var(--bs-primary-dark);
}
/* /MFA */

/* Media- queries */
@media (max-width: 768px) {
	.card {
		min-width: 0;
	}
}