:root {
  --bs-blue: #007bff;
  --bs-indigo: #6610f2;
  --bs-purple: #696cff;
  --bs-pink: #e83e8c;
  --bs-red: #ff3e1d;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffab00;
  --bs-green: #71dd37;
  --bs-teal: #20c997;
  --bs-cyan: #03c3ec;
  --bs-black: #22303e;
  --bs-white: #fff;
  --bs-gray: #7a838b;
  --bs-gray-dark: #4e5965;
  --bs-gray-25: #fbfbfb;
  --bs-gray-60: #f2f3f3;
  --bs-gray-80: #edeef0;
  --bs-gray-100: #e9eaec;
  --bs-gray-200: #e4e6e8;
  --bs-gray-300: #bdc1c5;
  --bs-gray-400: #a7acb2;
  --bs-gray-500: #91979f;
  --bs-gray-600: #7a838b;
  --bs-gray-700: #646e78;
  --bs-gray-800: #4e5965;
  --bs-gray-900: #384551;
  --bs-primary: #696cff;
  --bs-secondary: #8592a3;
  --bs-success: #71dd37;
  --bs-info: #03c3ec;
  --bs-warning: #ffab00;
  --bs-danger: #ff3e1d;
  --bs-light: #dbdee0;
  --bs-dark: #2b2c40;
  --bs-gray: #91979f;
  --bs-primary-rgb: 105, 108, 255;
  --bs-secondary-rgb: 133, 146, 163;
  --bs-success-rgb: 113, 221, 55;
  --bs-info-rgb: 3, 195, 236;
  --bs-warning-rgb: 255, 171, 0;
  --bs-danger-rgb: 255, 62, 29;
  --bs-light-rgb: 219, 222, 224;
  --bs-dark-rgb: 43, 44, 64;
  --bs-gray-rgb: 145, 151, 159;
  --bs-primary-text-emphasis: #2a2b66;
  --bs-secondary-text-emphasis: #353a41;
  --bs-success-text-emphasis: #2d5816;
  --bs-info-text-emphasis: #014e5e;
  --bs-warning-text-emphasis: #664400;
  --bs-danger-text-emphasis: #66190c;
  --bs-light-text-emphasis: #646e78;
  --bs-dark-text-emphasis: #646e78;
  --bs-primary-bg-subtle: #e7e7ff;
  --bs-secondary-bg-subtle: #ebeef0;
  --bs-success-bg-subtle: #e8fadf;
  --bs-info-bg-subtle: #d7f5fc;
  --bs-warning-bg-subtle: #fff2d6;
  --bs-danger-bg-subtle: #ffe0db;
  --bs-light-bg-subtle: #f4f5f6;
  --bs-dark-bg-subtle: #dddde0;
  --bs-primary-border-subtle: #d2d3ff;
  --bs-secondary-border-subtle: #dadee3;
  --bs-success-border-subtle: #d4f5c3;
  --bs-info-border-subtle: #b3edf9;
  --bs-warning-border-subtle: #ffe6b3;
  --bs-danger-border-subtle: #ffc5bb;
  --bs-light-border-subtle: #e4e6e8;
  --bs-dark-border-subtle: #bfc0c6;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 34, 48, 62;
  --bs-font-sans-serif: "Public Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --bs-font-monospace: "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-root-font-size: 16px;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.375;
  --bs-body-color: #646e78;
  --bs-body-color-rgb: 100, 110, 120;
  --bs-body-bg: #f5f5f9;
  --bs-body-bg-rgb: 245, 245, 249;
  --bs-emphasis-color: #22303e;
  --bs-emphasis-color-rgb: 34, 48, 62;
  --bs-secondary-color: #a7acb2;
  --bs-secondary-color-rgb: 167, 172, 178;
  --bs-secondary-bg: #e4e6e8;
  --bs-secondary-bg-rgb: 228, 230, 232;
  --bs-tertiary-color: rgba(100, 110, 120, 0.5);
  --bs-tertiary-color-rgb: 100, 110, 120;
  --bs-tertiary-bg: #e9eaec;
  --bs-tertiary-bg-rgb: 233, 234, 236;
  --bs-heading-color: #384551;
  --bs-link-color: #696cff;
  --bs-link-color-rgb: 105, 108, 255;
  --bs-link-decoration: none;
  --bs-link-hover-color: #5f61e6;
  --bs-link-hover-color-rgb: 95, 97, 230;
  --bs-code-color: #e83e8c;
  --bs-highlight-color: #646e78;
  --bs-highlight-bg: #ffeecc;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #e4e6e8;
  --bs-border-color-translucent: rgba(34, 48, 62, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.625rem;
  --bs-border-radius-xxl: 1rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
  --bs-box-shadow-sm: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
  --bs-box-shadow-lg: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(34, 48, 62, 0.075);
  --bs-focus-ring-width: 0.15rem;
  --bs-focus-ring-opacity: 0.75;
  --bs-focus-ring-color: rgba(100, 110, 120, 0.75);
  --bs-form-valid-color: #71dd37;
  --bs-form-valid-border-color: #71dd37;
  --bs-form-invalid-color: #ff3e1d;
  --bs-form-invalid-border-color: #ff3e1d;
  --bs-modal-color: #242424;
  --bs-body-color: #242424;
  --prefix: bs-;
  --bs-pure-black: #000;
  --bs-icon-size: 1.25rem;
  --bs-icon-size-xs: 1rem;
  --bs-icon-size-sm: 1.125rem;
  --bs-icon-size-md: 1.375rem;
  --bs-icon-size-lg: 1.5rem;
  --bs-icon-size-xl: 2rem;
  --bs-primary-contrast: var(--bs-white);
  --bs-secondary-contrast: var(--bs-white);
  --bs-success-contrast: var(--bs-white);
  --bs-info-contrast: var(--bs-white);
  --bs-warning-contrast: var(--bs-white);
  --bs-danger-contrast: var(--bs-white);
  --bs-light-contrast: var(--bs-pure-black);
  --bs-dark-contrast: var(--bs-white);
  --bs-gray-contrast: var(--bs-white);
  --bs-bg-label-tint-amount: 84%;
  --bs-border-subtle-amount: 70%;
  --bs-base-color: #22303e;
  --bs-base-color-rgb: 34, 48, 62;
  --bs-paper-bg: #fff;
  --bs-paper-bg-rgb: 255, 255, 255;
  --bs-min-contrast-ratio: 1.7;
  --bs-box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
  --bs-box-shadow-xs: 0 0.0625rem 0.3175rem 0 rgba(34, 48, 62, 0.06);
  --bs-box-shadow-sm: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
  --bs-box-shadow-lg: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
  --bs-box-shadow-xl: 0 0.3125rem 1.375rem 0 rgba(34, 48, 62, 0.18);
  --bs-floating-component-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
  --bs-custom-link-color: var(--bs-primary);
  --bs-navbar-bg: var(--bs-paper-bg);
  --bs-navbar-box-shadow: 0 0 10px #e4e6e8;
  --bs-navbar-border-width: 1px;
  --bs-navbar-border-color: var(--bs-paper-bg);
  --bs-menu-header-color: var(--bs-heading-color);
  --bs-nav-box-shadow: var(--bs-box-shadow);
  --bs-nav-border-color: var(--bs-paper-bg);
}

.card {
  --bs-card-hover-box-shadow: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
  box-shadow: var(--bs-card-box-shadow);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary-contrast);
  --bs-btn-hover-bg:
    color-mix(in sRGB, #000 10%, var(--bs-primary));
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-primary-contrast);
  --bs-btn-active-bg:
    color-mix(in sRGB, #000 10%, var(--bs-primary));
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-box-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--bs-primary-contrast);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-group-border-color:
    color-mix(in sRGB, #000 10%, var(--bs-primary));
}

.nav-link:focus,
.nav-link:hover {
  background-color: #f2f3f3;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  color: #646e78;
  background-color: #f5f5f9;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(34, 48, 62, 0);
}

html {
  height: -webkit-fill-available;
}

main {
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  color: #646e78;
  background-color: #f5f5f9;
}


.layout-menu .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #696cff;
  background-color: #696cff3b;
}

.form-label {
  margin-bottom: .25rem;
  font-size: 0.8125rem;
  color: var(--bs-heading-color);
}

.layout-body {

  flex-basis: 100%;
  flex-direction: column;
  inline-size: 1;
  max-inline-size: 100%;
  min-inline-size: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  padding: 0;
}

@media (min-width: 768px) {
  .layout-body {
    padding-inline-start: 16.25rem;
  }

  .layout-menu {
    min-height: 100vh;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    margin-inline: 0 !important;
    background: white;
    width: 16.25rem;
  }
}

.authentication-wrapper {
  max-width: 480px;
  margin: 0 auto;
}

.authentication-wrapper h1 {
  font-size: 20px;
}

.btn-google {
  color: #fff;
  background-color: #dd4b39;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-github {
  color: #fff;
  background-color: #444;
  border-color: rgba(0, 0, 0, 0.2);
}

.app-brand a {
  text-decoration: none;
}

.app-brand-text {
  font-size: 32px;
}
#paymentInstruction {
  color: #4d4b4b;
  padding: 0px 25px;
}