/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.user-avatar[data-v-fc6f1160] {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.username[data-v-fc6f1160] {
  margin-left: var(--Spacing-spacing-1);
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 160px;
  white-space: nowrap;
}
.username--hide-on-mobile[data-v-fc6f1160] {
  display: none;
}
@media screen and (min-width: 1280px) {
.username--hide-on-mobile[data-v-fc6f1160] {
    display: inline;
}
}
.img-holder[data-v-fc6f1160] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ava[data-v-fc6f1160] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.drawer-on-mobile[data-v-82deb35c] {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 320px;
  z-index: 5;
}
.drawer-on-mobile[data-v-82deb35c]:before {
  opacity: 0;
  content: "";
  transition: opacity 0.2s;
}
.drawer-on-mobile[data-v-82deb35c]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--Neutral-UI-neutral-ui-10);
}
.drawer-on-mobile--open[data-v-82deb35c]:before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}
.drawer-on-mobile--align-left[data-v-82deb35c] {
  left: -320px;
  transition: left 0.2s ease-out;
}
.drawer-on-mobile--align-left.drawer-on-mobile--open[data-v-82deb35c] {
  left: 0px;
}
.drawer-on-mobile--align-right[data-v-82deb35c] {
  right: -320px;
  transition: right 0.2s ease-out;
}
.drawer-on-mobile--align-right.drawer-on-mobile--open[data-v-82deb35c] {
  right: 0px;
}
.drawer-on-mobile--closed[data-v-82deb35c] {
  pointer-events: none;
}
@media screen and (min-width: 1280px) {
.drawer-on-mobile[data-v-82deb35c] {
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
}
.drawer-on-mobile[data-v-82deb35c]:before {
    content: none;
}
.drawer-on-mobile[data-v-82deb35c]:after {
    content: none;
}
}
.drawer-content[data-v-82deb35c] {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.active[data-v-9ebc128f] {
  background-color: var(--Secondary-secondary-color-1);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.language-selector[data-v-d40a0a51]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.language-selector[data-v-d40a0a51] {
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-4);
  border-radius: var(--button-border-radius);
}
.language-selector.list-item[data-v-d40a0a51] {
  width: 100%;
  padding: var(--Spacing-spacing-4);
  border-radius: 0;
  justify-content: flex-start;
}
@media screen and (min-width: 768px) {
.language-selector.list-item[data-v-d40a0a51] {
    padding: var(--Spacing-spacing-2);
}
}
.language-selector.list-item[data-v-d40a0a51] .q-btn-dropdown__arrow {
  margin-left: auto;
}
.language-selector.list-item[data-v-d40a0a51] .q-btn__content {
  width: 100%;
  justify-content: flex-start;
}
.selected-language[data-v-d40a0a51] {
  display: flex;
  gap: var(--Spacing-spacing-2);
}
.flag[data-v-d40a0a51] {
  width: 20px;
  height: auto;
}
.label[data-v-d40a0a51] {
  font-weight: var(--Typography-weight-bold);
}
.selected-option[data-v-d40a0a51] {
  background-color: var(--Secondary-secondary-color-1);
  color: var(--Neutral-UI-neutral-ui-100);
}
[data-v-d40a0a51] .q-item__section--avatar {
  min-width: auto;
  padding-right: var(--Spacing-spacing-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.theme-selector[data-v-9d8e099a]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.theme-selector[data-v-9d8e099a] {
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-4);
  border-radius: var(--button-border-radius);
}
.theme-selector.list-item[data-v-9d8e099a] {
  width: 100%;
  padding: var(--Spacing-spacing-4);
  border-radius: 0;
  justify-content: flex-start;
}
@media screen and (min-width: 768px) {
.theme-selector.list-item[data-v-9d8e099a] {
    padding: var(--Spacing-spacing-2);
}
}
.theme-selector.list-item[data-v-9d8e099a] .q-btn-dropdown__arrow {
  margin-left: auto;
}
.theme-selector.list-item[data-v-9d8e099a] .q-btn__content {
  width: 100%;
  justify-content: flex-start;
}
.selected-theme[data-v-9d8e099a] {
  display: flex;
  align-items: center;
}
.label[data-v-9d8e099a] {
  font-weight: var(--Typography-weight-bold);
}
.selected-option[data-v-9d8e099a] {
  background-color: var(--Secondary-secondary-color-1);
  color: var(--Neutral-UI-neutral-ui-100);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.modal-inner[data-v-32a2366a] {
  display: flex;
  flex-direction: column;
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-4);
  border-radius: var(--card-border-radius);
  min-width: 300px;
}
.message[data-v-32a2366a] {
  margin-bottom: var(--Spacing-spacing-4);
}
.buttons[data-v-32a2366a] {
  display: flex;
  gap: var(--Spacing-spacing-3);
  flex-direction: column-reverse;
}
@media screen and (min-width: 640px) {
.buttons[data-v-32a2366a] {
    flex-direction: row;
    justify-content: center;
}
}
.button[data-v-32a2366a] {
  width: 100%;
}
@media screen and (min-width: 640px) {
.button[data-v-32a2366a] {
    width: auto;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.menu[data-v-1005a6e5] {
  position: relative;
  z-index: 1;
}
.menu--is-closed[data-v-1005a6e5] {
  display: none;
}
@media screen and (min-width: 1280px) {
.menu--is-closed[data-v-1005a6e5] {
    display: block;
}
}
.mobile-only-drawer-header[data-v-1005a6e5] {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
  padding: 0 var(--Spacing-spacing-3);
  margin-bottom: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.mobile-only-drawer-header[data-v-1005a6e5] {
    display: none;
}
}
.list-item[data-v-1005a6e5] {
  align-items: center;
}
.list-item[data-v-1005a6e5]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
@media screen and (min-width: 1280px) {
.list-item[data-v-1005a6e5]:focus-visible {
    outline-offset: -4px;
}
}
.list-item-switcher-wrapper[data-v-1005a6e5] .q-btn {
  padding-left: var(--Spacing-spacing-5);
  padding-right: var(--Spacing-spacing-5);
}
@media screen and (min-width: 768px) {
.list-item-switcher-wrapper[data-v-1005a6e5] .q-btn {
    padding-left: var(--Spacing-spacing-4);
    padding-right: var(--Spacing-spacing-4);
}
}
@media screen and (min-width: 1280px) {
.list-item-switcher-wrapper[data-v-1005a6e5] .q-btn {
    padding-left: var(--Spacing-spacing-3);
    padding-right: var(--Spacing-spacing-3);
}
}
.separator[data-v-1005a6e5] {
  position: relative;
  margin: var(--Spacing-spacing-4) 0;
  height: 1px;
}
@media screen and (min-width: 1280px) {
.separator[data-v-1005a6e5] {
    display: none;
}
}
.separator[data-v-1005a6e5]:after {
  content: "";
  border-top: 1px solid var(--Neutral-UI-neutral-ui-30);
  top: 0;
  left: var(--Spacing-spacing-3);
  right: var(--Spacing-spacing-3);
  position: absolute;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.user-menu[data-v-a9fd3c98] {
  display: flex;
}
.btn[data-v-a9fd3c98]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.btn[data-v-a9fd3c98] {
  border-radius: var(--button-border-radius);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.header-logo[data-v-7da694e0] {
  position: relative;
  height: 22px;
}
@media screen and (min-width: 1280px) {
.header-logo[data-v-7da694e0] {
    height: 22px;
}
}
.logo[data-v-7da694e0] {
  height: 22px;
}
.git-hash[data-v-7da694e0] {
  position: absolute;
  top: 17px;
  left: 0px;
  font-size: 10px;
  color: var(--Neutral-UI-neutral-ui-80);
  width: 200px;
  padding-top: 4px;
}
@container light-mode (min-width: 0) {
.logo-for-dark-mode[data-v-7da694e0] {
    display: none;
}
}
@container dark-mode (min-width: 0) {
.logo-for-light-mode[data-v-7da694e0] {
    display: none;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.withdraw-btn[data-v-e872ebc2] {
  align-items: center;
}
.withdraw-btn[data-v-e872ebc2]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
@media screen and (min-width: 1280px) {
.withdraw-btn[data-v-e872ebc2] {
    border-radius: var(--button-border-radius);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.nav-list[data-v-8d608f63] {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1280px) {
.nav-list[data-v-8d608f63] {
    flex-direction: row;
}
}
.nav-item[data-v-8d608f63] {
  align-items: center;
}
.nav-item[data-v-8d608f63]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
@media screen and (min-width: 1280px) {
.nav-item[data-v-8d608f63] {
    border-radius: var(--button-border-radius);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.list[data-v-afba675a] {
  margin-top: var(--Spacing-spacing-3);
  padding-top: var(--Spacing-spacing-3);
  position: relative;
}
.list[data-v-afba675a]:after {
  content: "";
  border-top: 1px solid var(--Neutral-UI-neutral-ui-30);
  top: 0;
  left: var(--Spacing-spacing-3);
  right: var(--Spacing-spacing-3);
  position: absolute;
}
.list-item[data-v-afba675a] {
  align-items: center;
}
.list-item[data-v-afba675a]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.menu[data-v-5f093b9f] {
  position: relative;
  z-index: 1;
}
.menu--drawer-closed[data-v-5f093b9f] {
  display: none;
}
@media screen and (min-width: 1280px) {
.menu[data-v-5f093b9f] {
    display: flex;
    align-items: center;
    gap: 20px;
}
}
.menu-header[data-v-5f093b9f] {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
  gap: var(--Spacing-spacing-2);
  height: 50px;
  align-items: center;
  padding: 0 var(--Spacing-spacing-1);
  margin-bottom: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.balm-header[data-v-cd5d3188] {
  background-color: var(--Neutral-UI-neutral-ui-20);
  display: flex;
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  padding-left: 16px;
  padding-right: 16px;
}
.balm-header[data-v-cd5d3188]:before, .balm-header[data-v-cd5d3188]:after {
  content: "";
  position: absolute;
  bottom: -12px;
  width: 13px;
  height: 13px;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
  background-color: var(--Neutral-UI-neutral-ui-20);
}
@media screen and (min-width: 1280px) {
.balm-header[data-v-cd5d3188]:before, .balm-header[data-v-cd5d3188]:after {
    content: none;
}
}
.balm-header[data-v-cd5d3188]:before {
  left: 0;
  mask: radial-gradient(circle 13px at bottom right, rgba(0, 0, 0, 0) 95%, #000) top left;
}
.balm-header[data-v-cd5d3188]:after {
  right: 0;
  mask: radial-gradient(circle 13px at bottom left, rgba(0, 0, 0, 0) 95%, #000) top right;
}
@media screen and (min-width: 1280px) {
.balm-header[data-v-cd5d3188] {
    background-color: var(--body-background-color);
    padding: var(--Spacing-spacing-4) var(--Spacing-spacing-5);
}
}
.balm-header--oopsie-page[data-v-cd5d3188] {
  background-color: var(--oopsie-page-background);
}
.balm-header--oopsie-page[data-v-cd5d3188]:before, .balm-header--oopsie-page[data-v-cd5d3188]:after {
  content: none;
}
.logo-order[data-v-cd5d3188] {
  order: 2;
}
@media screen and (min-width: 1280px) {
.logo-order[data-v-cd5d3188] {
    order: 1;
}
}
.hamburger-btn-order[data-v-cd5d3188] {
  order: 1;
}
@media screen and (min-width: 1280px) {
.hamburger-btn-order[data-v-cd5d3188] {
    order: 2;
}
}
.menus-container-order[data-v-cd5d3188] {
  order: 3;
}
.menus-container[data-v-cd5d3188] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-9);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.sidebar-name[data-v-73ed4c21] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-top: var(--Spacing-spacing-5);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.section[data-v-1fe2ede2] {
  margin: var(--Spacing-spacing-6) 0;
}
.section-category[data-v-1fe2ede2] {
  padding-bottom: var(--Spacing-spacing-3);
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.section-item[data-v-1fe2ede2] {
  margin-bottom: var(--Spacing-spacing-2);
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
}
.section-item[data-v-1fe2ede2] .q-item {
  padding: var(--Spacing-spacing-3);
  min-height: 0;
  border-radius: var(--card-border-radius);
}
@media screen and (min-width: 768px) {
.section-item[data-v-1fe2ede2] .q-item {
    padding: var(--Spacing-spacing-4) var(--Spacing-spacing-5);
}
}
.section-item[data-v-1fe2ede2] .q-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--Primary-primary-color-1);
}
.section-item[data-v-1fe2ede2] .section-question {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.section-item.q-expansion-item--expanded[data-v-1fe2ede2] {
  background-color: var(--Secondary-secondary-color-1);
  transition: background-color 0.3s;
}
.section-answer[data-v-1fe2ede2] {
  padding: var(--Spacing-spacing-3);
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
.section-answer[data-v-1fe2ede2] {
    padding: var(--Spacing-spacing-4) var(--Spacing-spacing-5);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.glossary[data-v-16419b3b] {
  margin: var(--Spacing-spacing-6) 0;
}
.glossary-category[data-v-16419b3b] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.glossary-item[data-v-16419b3b] {
  padding: var(--Spacing-spacing-4) 0;
  border-bottom: 1px solid var(--Neutral-UI-neutral-ui-30, #CCCAC1);
}
@media screen and (min-width: 768px) {
.glossary-item[data-v-16419b3b] {
    display: grid;
    grid-template-columns: 200px auto;
}
}
.glossary-term[data-v-16419b3b] {
  padding-bottom: var(--Spacing-spacing-1);
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
.glossary-term[data-v-16419b3b] {
    padding-bottom: 0;
    grid-column: 1;
}
}
.glossary-definition[data-v-16419b3b] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
.glossary-definition[data-v-16419b3b] {
    grid-column: 2;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.read-only-non-collapsable[data-v-b967940c] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-3);
}
@media screen and (min-width: 768px) {
.read-only-non-collapsable[data-v-b967940c] {
    padding: var(--Spacing-spacing-5) var(--Spacing-spacing-7);
}
}
.read-only-non-collapsable.info[data-v-b967940c] {
  border-left: 6px solid var(--Neutral-UI-neutral-ui-30);
}
.read-only-non-collapsable.user-answer[data-v-b967940c] {
  border-left: 6px solid var(--Primary-primary-color-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.ro-non-coll-title[data-v-1d3c566f] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.audio[data-v-faf56c1d] {
  max-width: 100%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.player[data-v-d3b805d5] {
  margin-top: var(--Spacing-spacing-5);
  display: block;
  width: 100%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
ul[data-v-40f7e785] {
  padding-left: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.feeling-chip[data-v-808862c9] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
  background-color: var(--Neutral-UI-neutral-ui-10);
  border-radius: var(--button-border-radius);
  display: flex;
  gap: var(--Spacing-spacing-1);
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--Spacing-spacing-1) 0 var(--Spacing-spacing-3);
  height: 30px;
  min-width: 65px;
}
@media screen and (min-width: 1280px) {
.feeling-chip[data-v-808862c9] {
    height: 40px;
    gap: var(--Spacing-spacing-2);
    padding: 0 var(--Spacing-spacing-2) 0 var(--Spacing-spacing-3);
}
}
.feeling-chip--is-selected[data-v-808862c9] {
  color: var(--Neutral-UI-neutral-ui-10);
  background-color: var(--Neutral-UI-neutral-ui-80);
}
.feeling-chip--disable-remove[data-v-808862c9] {
  padding: 0 var(--Spacing-spacing-3);
  justify-content: center;
}
.feeling-chip .chip-name[data-v-808862c9] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  display: flex;
  align-items: center;
  line-height: 1;
}
.remove-btn[data-v-808862c9] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
@media screen and (min-width: 1280px) {
.remove-btn[data-v-808862c9] {
    width: 32px;
    height: 32px;
}
}
.remove-btn[data-v-808862c9] .svg-wrapper {
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 1280px) {
.remove-btn[data-v-808862c9] .svg-wrapper {
    width: 20px;
    height: 20px;
}
}
.remove-btn[data-v-808862c9]:focus-visible {
  outline-offset: -2px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.read-only-chips-body[data-v-3e392eec] {
  display: flex;
  gap: var(--Spacing-spacing-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.chip[data-v-39e5f099] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.chip[data-v-39e5f099] .q-btn__content {
  display: flex;
  gap: var(--Spacing-spacing-2);
}
.chip[data-v-39e5f099]:not(.active) {
  background: var(--Neutral-UI-neutral-ui-10) !important;
  border: none;
}
.chip.active[data-v-39e5f099] {
  background-color: var(--Secondary-secondary-color-5);
  color: var(--Neutral-UI-neutral-ui-100);
  border: none;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.read-only-traps-body[data-v-5ea3e66d] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.loading[data-v-fe7ba285], .error[data-v-fe7ba285] {
  width: 100%;
  height: 100%;
}
.error[data-v-fe7ba285] {
  background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--color-primary) 10px, var(--color-primary) 20px);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.multichoice-answers[data-v-7dc2bdec] {
  display: grid;
  grid-template-columns: repeat(auto-fill, 205px);
  gap: var(--Spacing-spacing-3);
  justify-content: start;
}
@media screen and (min-width: 768px) {
.multichoice-answers[data-v-7dc2bdec] {
    grid-template-columns: repeat(auto-fill, 220px);
}
}
@media screen and (min-width: 1280px) {
.multichoice-answers[data-v-7dc2bdec] {
    grid-template-columns: repeat(auto-fill, 320px);
}
}
.image-option-container[data-v-7dc2bdec] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--Spacing-spacing-5);
  border-radius: var(--border-radius);
  color: var(--Neutral-UI-neutral-ui-100);
  background: var(--Neutral-UI-neutral-ui-20);
  min-height: 104px;
}
@media screen and (min-width: 768px) {
.image-option-container[data-v-7dc2bdec] {
    min-height: 130px;
}
}
@media screen and (min-width: 1280px) {
.image-option-container[data-v-7dc2bdec] {
    min-height: 166px;
}
}
.option-image[data-v-7dc2bdec] {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.option-text[data-v-7dc2bdec] {
  text-align: center;
  padding-top: var(--Spacing-spacing-3);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.icon .no-click-btn-title[data-v-88361713] {
  margin-left: var(--Spacing-spacing-1);
}
.p3-7[data-v-88361713] {
  padding: var(--Spacing-spacing-3) var(--Spacing-spacing-7);
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.p1-3[data-v-88361713] {
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-3);
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  width: fit-content;
}
.no-click-btn[data-v-88361713] {
  display: flex;
  justify-content: center;
  border-radius: var(--button-border-radius);
  background-color: var(--Secondary-secondary-color-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.ro-grid-answer[data-v-4f608147] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-3);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.dropdown-answer[data-v-bcbfff00] {
  display: flex;
  flex-direction: column;
}
.selected-option[data-v-bcbfff00] {
  padding: var(--Spacing-spacing-2) var(--Spacing-spacing-3);
  background-color: var(--Neutral-UI-neutral-ui-20);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--Neutral-UI-neutral-ui-40);
  font-weight: 500;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.weight-loss-calculation[data-v-1305a2a6] {
  padding: var(--Spacing-spacing-4);
  background-color: var(--Neutral-UI-neutral-ui-5);
  border-radius: var(--Radius-radius-2);
}
.calculation-title[data-v-1305a2a6] {
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Text-Primary-text-primary);
}
.calculation-content[data-v-1305a2a6] {
  color: var(--Text-Primary-text-primary);
}
.calculation-list[data-v-1305a2a6] {
  margin-top: var(--Spacing-spacing-1);
  padding-left: var(--Spacing-spacing-5);
}
.calculation-list li[data-v-1305a2a6] {
  margin-bottom: var(--Spacing-spacing-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.read-only-question[data-v-e6aa535d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-3);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.read-only-collapsable[data-v-4b0f9e2b] .read-only-collapsable-header {
  background: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-3);
  border-radius: var(--card-border-radius);
}
@media screen and (min-width: 768px) {
.read-only-collapsable[data-v-4b0f9e2b] .read-only-collapsable-header {
    padding: var(--Spacing-spacing-5) var(--Spacing-spacing-7);
}
}
.read-only-collapsable.info[data-v-4b0f9e2b] .read-only-collapsable-header {
  border-left: 6px solid var(--Neutral-UI-neutral-ui-30);
}
.read-only-collapsable.user-answer[data-v-4b0f9e2b] .read-only-collapsable-header {
  border-left: 6px solid var(--Primary-primary-color-2);
}
.read-only-collapsable-body[data-v-4b0f9e2b] {
  margin: var(--Spacing-spacing-1) 0 0 var(--Spacing-spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
}
@media screen and (min-width: 768px) {
.read-only-collapsable-body[data-v-4b0f9e2b] {
    margin: var(--Spacing-spacing-1) 0 0 var(--Spacing-spacing-7);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.ro-questionnaire-header[data-v-1e7772a8] {
  flex: 1;
}
.ro-questionnaire-title[data-v-1e7772a8] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-3);
}
.result-text[data-v-1e7772a8] {
  margin-top: var(--Spacing-spacing-4);
  display: block;
}
.res-body[data-v-1e7772a8] {
  background-color: var(--Neutral-UI-neutral-ui-20);
  border-radius: var(--button-border-radius);
  color: var(--Neutral-UI-neutral-ui-100);
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: var(--Spacing-spacing-3) 0;
  padding: var(--Spacing-spacing-2);
  width: fit-content;
  height: fit-content;
}
@media screen and (min-width: 768px) {
.res-body[data-v-1e7772a8] {
    padding: var(--Spacing-spacing-3) var(--Spacing-spacing-7);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.quest-head[data-v-5cabc1b4] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.quest-body[data-v-5cabc1b4] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.read-only-grid-card[data-v-5cabc1b4] {
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-7);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-3);
}
.read-only-grid-card.active[data-v-5cabc1b4] {
  background-color: var(--Secondary-secondary-color-5);
}
.read-only-grid-card[data-v-5cabc1b4]:not(.active) {
  background-color: var(--Neutral-UI-neutral-ui-0);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.read-only-questionnaire-grid-body[data-v-8b787021] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--Spacing-spacing-4);
}
.description[data-v-8b787021] {
  margin-bottom: var(--Spacing-spacing-5);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.table-component[data-v-dc3be1b4] {
  container-type: inline-size;
  container-name: table-component;
}
.table-component--card[data-v-dc3be1b4] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.table-component--card[data-v-dc3be1b4] {
    padding: var(--Spacing-spacing-7);
}
}
.table[data-v-dc3be1b4] {
  --columns-desktop: 1;
  display: grid;
  grid-template-columns: 100%;
}
@container table-component (min-width: 700px) {
.table[data-v-dc3be1b4] {
    grid-template-columns: repeat(var(--columns-desktop), 1fr);
}
}
@container table-component (min-width: 700px) {
.table--two-columns-no-header[data-v-dc3be1b4] {
    grid-template-columns: 1fr 2fr;
}
}
.cell[data-v-dc3be1b4] {
  position: relative;
  padding: var(--Spacing-spacing-1) 0;
}
@container table-component (min-width: 700px) {
.cell[data-v-dc3be1b4] {
    padding: var(--Spacing-spacing-4);
    border-bottom: 2px solid var(--Neutral-UI-neutral-ui-10);
}
}
@container table-component (min-width: 700px) {
.cell--first-in-row[data-v-dc3be1b4] {
    /* Body/Body - Bold */
    font-family: var(--Font-Primary-Font);
    font-size: var(--Typography-Body);
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    padding-left: 0;
}
}
@media screen and (min-width: 1920px) {
.cell--first-in-row[data-v-dc3be1b4] {
    padding-right: var(--Spacing-spacing-7);
}
}
@container table-component (max-width: 699px) {
.cell--last-in-row[data-v-dc3be1b4] {
    border-bottom: 2px solid var(--Neutral-UI-neutral-ui-10);
    padding-bottom: var(--Spacing-spacing-4);
    margin-bottom: var(--Spacing-spacing-4);
}
}
@container table-component (min-width: 700px) {
.cell--last-in-row[data-v-dc3be1b4] {
    padding-right: 0;
    margin-bottom: 0;
}
}
@container table-component (max-width: 699px) {
.cell--empty[data-v-dc3be1b4] {
    padding-bottom: 0;
}
}
.cell--header-row[data-v-dc3be1b4] {
  display: none;
}
@container table-component (min-width: 700px) {
.cell--header-row[data-v-dc3be1b4] {
    display: block;
    /* Body/Body - Bold */
    font-family: var(--Font-Primary-Font);
    font-size: var(--Typography-Body);
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
}
}
@container table-component (max-width: 699px) {
.cell-headline-mobile-and-a11y[data-v-dc3be1b4] {
    /* Body/Body - Bold */
    font-family: var(--Font-Primary-Font);
    font-size: var(--Typography-Body);
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    color: var(--Neutral-UI-neutral-ui-70);
    display: block;
}
}
@container table-component (min-width: 700px) {
.cell-headline-mobile-and-a11y[data-v-dc3be1b4] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
}
.contains-cms-markup[data-v-dc3be1b4] ul {
  padding: 0 0 0 var(--Spacing-spacing-3);
  margin: 0;
}
.contains-cms-markup[data-v-dc3be1b4] p:last-child {
  margin-bottom: 0;
}
.arrow[data-v-dc3be1b4] {
  display: none;
}
@media screen and (min-width: 1920px) {
.arrow[data-v-dc3be1b4] {
    display: flex;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    align-items: center;
    color: var(--Neutral-UI-neutral-ui-40);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.table[data-v-17a03527] {
  margin: calc(-1 * var(--Spacing-spacing-3)) 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.solution-number[data-v-83e1af5b] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.solution-name[data-v-83e1af5b] {
  margin-top: var(--Spacing-spacing-3);
}
.solution-things-about[data-v-83e1af5b] {
  margin-top: var(--Spacing-spacing-4);
  margin-bottom: var(--Spacing-spacing-1);
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  font-weight: bold;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.possible-solutions-title b[data-v-09c3ca5d] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  display: block;
  margin-bottom: var(--Spacing-spacing-3);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.image-grid-component[data-v-b4017167] {
  width: 100%;
  margin: var(--Spacing-spacing-6) 0;
}
.image-grid-header[data-v-b4017167] {
  margin-bottom: var(--Spacing-spacing-4);
}
.image-grid-name[data-v-b4017167] {
  /* Heading/H2 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin: 0 0 var(--Spacing-spacing-2) 0;
  color: var(--Text-text-primary);
}
.image-grid-description[data-v-b4017167] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin: 0;
  color: var(--Text-text-primary);
}
.image-grid-description[data-v-b4017167] strong {
  font-weight: 600;
}
.image-grid-description[data-v-b4017167] em {
  font-style: italic;
}
.image-grid[data-v-b4017167] {
  width: 100%;
}
.image-grid.mobile-stack[data-v-b4017167] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Spacing-spacing-4);
}
.image-grid.desktop-columns[data-v-b4017167] {
  display: grid;
  gap: var(--Spacing-spacing-4);
}
.image-grid.desktop-columns.cols-1[data-v-b4017167] {
  grid-template-columns: repeat(1, 1fr);
}
.image-grid.desktop-columns.cols-2[data-v-b4017167] {
  grid-template-columns: repeat(2, 1fr);
}
.image-grid.desktop-columns.cols-3[data-v-b4017167] {
  grid-template-columns: repeat(3, 1fr);
}
.image-grid.desktop-columns.cols-4[data-v-b4017167] {
  grid-template-columns: repeat(4, 1fr);
}
.image-grid.desktop-columns.cols-5[data-v-b4017167] {
  grid-template-columns: repeat(5, 1fr);
}
.image-grid.desktop-columns.cols-6[data-v-b4017167] {
  grid-template-columns: repeat(6, 1fr);
}
.grid-item[data-v-b4017167] {
  position: relative;
}
.grid-item.is-placeholder[data-v-b4017167] {
  pointer-events: none;
}
.image-container[data-v-b4017167] {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--Border-radius-border-radius-m);
  background-color: var(--Neutral-UI-neutral-ui-10);
}
.image-container.portrait-tall[data-v-b4017167] {
  aspect-ratio: 1/1.4;
}
.image-container.landscape-wide[data-v-b4017167] {
  aspect-ratio: 1.4/1;
}
.image-container.square[data-v-b4017167] {
  aspect-ratio: 1/1;
}
.image-container.landscape[data-v-b4017167] {
  aspect-ratio: 1.3/1;
}
.image-container.portrait[data-v-b4017167] {
  aspect-ratio: 1/1.3;
}
.grid-image[data-v-b4017167] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-placeholder[data-v-b4017167] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--Neutral-UI-neutral-ui-20);
  border-radius: var(--Border-radius-border-radius-m);
}
.placeholder-text[data-v-b4017167] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Text-text-secondary);
}
.image-title[data-v-b4017167] {
  /* Heading/H3 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-top: var(--Spacing-spacing-3);
  margin-bottom: var(--Spacing-spacing-1);
  color: var(--Text-text-primary);
}
.image-description[data-v-b4017167] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-top: var(--Spacing-spacing-2);
  color: var(--Text-text-primary);
}
@media screen and (min-width: 768px) {
.image-grid-component[data-v-b4017167] {
    margin: var(--Spacing-spacing-8) 0;
}
.image-description[data-v-b4017167] {
    /* Body/Body */
    font-family: var(--Font-Primary-Font);
    font-size: var(--Typography-Body);
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.page-read-only[data-v-10073a70] {
  display: flex;
  width: 100%;
  padding: var(--Spacing-spacing-4) var(--Spacing-spacing-5);
  align-items: center;
  gap: var(--Spacing-spacing-5);
  align-self: stretch;
}
h6[data-v-10073a70] {
  color: var(--Neutral-UI-neutral-ui-60);
}
.read-only-page-body[data-v-10073a70] {
  padding: var(--Spacing-spacing-4) var(--Spacing-spacing-4) var(--Spacing-spacing-6) var(--Spacing-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
}
@media screen and (min-width: 768px) {
.read-only-page-body[data-v-10073a70] {
    padding: var(--Spacing-spacing-1) var(--Spacing-spacing-8) calc(var(--Spacing-spacing-5) + var(--Spacing-spacing-5)) var(--Spacing-spacing-8);
}
}
.panel[data-v-10073a70] {
  padding: 0;
  border-bottom: 1px solid var(--Neutral-UI-neutral-ui-30);
}
.panel[data-v-10073a70] > .q-expansion-item__container > .q-item {
  padding: 0;
  border-radius: 0;
}
.panel[data-v-10073a70] > .q-expansion-item__container > .q-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--Primary-primary-color-1);
}
.panel[data-v-10073a70]:first-child > .q-expansion-item__container > .q-item {
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}
.panel[data-v-10073a70]:last-child > .q-expansion-item__container > .q-item {
  border-bottom-left-radius: var(--card-border-radius);
  border-bottom-right-radius: var(--card-border-radius);
}
.page-name[data-v-10073a70] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.read-only-view[data-v-9725c433] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recap[data-v-74c4962f] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-3);
}
@media screen and (min-width: 768px) {
.recap[data-v-74c4962f] {
    gap: var(--Spacing-spacing-7);
}
}
.recap-header[data-v-74c4962f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--Spacing-spacing-3);
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.recap-header[data-v-74c4962f] {
    flex-wrap: nowrap;
}
}
.session-select[data-v-74c4962f] {
  flex: 1;
  min-width: 0;
}
.session-select[data-v-74c4962f] .q-field__native {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 24px;
}
.session-select[data-v-74c4962f] .q-field__control {
  min-height: 56px;
  height: auto;
}
.session-select[data-v-74c4962f] .q-field__native span {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.show-only-checkbox[data-v-74c4962f] {
  flex-shrink: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recap[data-v-934f7b76] {
  padding-top: var(--Spacing-spacing-4);
}
.intervention-selector[data-v-934f7b76] {
  margin-bottom: var(--Spacing-spacing-2);
}
.intervention-select[data-v-934f7b76] {
  width: 100%;
}
.no-interventions[data-v-934f7b76] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  text-align: center;
  padding: var(--Spacing-spacing-4);
}
.recap-skeleton-select[data-v-934f7b76] {
  margin-top: var(--Spacing-spacing-3);
  height: 60px;
  margin-bottom: var(--Spacing-spacing-7);
}
.recap-skeleton-session[data-v-934f7b76] {
  height: 300px;
  border-radius: var(--card-border-radius);
}
@media screen and (min-width: 768px) {
.recap-skeleton-session[data-v-934f7b76] {
    height: 500px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.html-formatted[data-v-37e28d35] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.html-formatted[data-v-37e28d35] b,
.html-formatted[data-v-37e28d35] strong {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.html-formatted[data-v-37e28d35] p {
  margin: var(--Spacing-spacing-1) 0;
}
.html-formatted[data-v-37e28d35] ul {
  list-style-position: inside;
  padding-left: 0;
}
.html-formatted[data-v-37e28d35] li {
  padding-left: var(--Spacing-spacing-1);
}
.html-formatted[data-v-37e28d35] a {
  overflow-wrap: break-word;
}
.html-formatted[data-v-37e28d35] table {
  border-collapse: collapse;
}
.html-formatted[data-v-37e28d35] table th {
  padding: var(--Spacing-spacing-1);
}
.html-formatted[data-v-37e28d35] table td {
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-1) var(--Spacing-spacing-2) var(--Spacing-spacing-1);
}
.html-formatted[data-v-37e28d35] .grey-card,
.html-formatted[data-v-37e28d35] .white-card {
  padding: var(--Spacing-spacing-4);
  margin: var(--Spacing-spacing-5) 0;
  border-radius: var(--card-border-radius);
  overflow-y: auto;
}
@media screen and (min-width: 768px) {
.html-formatted[data-v-37e28d35] .grey-card,
  .html-formatted[data-v-37e28d35] .white-card {
    padding: var(--Spacing-spacing-6);
}
}
.html-formatted[data-v-37e28d35] .grey-card table,
.html-formatted[data-v-37e28d35] .white-card table {
  margin: calc(var(--Spacing-spacing-4) * -1);
  border: none;
}
@media screen and (min-width: 768px) {
.html-formatted[data-v-37e28d35] .grey-card table,
  .html-formatted[data-v-37e28d35] .white-card table {
    margin: calc(var(--Spacing-spacing-6) * -1);
}
}
.html-formatted[data-v-37e28d35] .grey-card table tr:not(:last-child),
.html-formatted[data-v-37e28d35] .white-card table tr:not(:last-child) {
  border-bottom: 1px solid var(--Neutral-UI-neutral-ui-50);
}
.html-formatted[data-v-37e28d35] .grey-card table th,
.html-formatted[data-v-37e28d35] .grey-card table td,
.html-formatted[data-v-37e28d35] .white-card table th,
.html-formatted[data-v-37e28d35] .white-card table td {
  border: none;
}
.html-formatted[data-v-37e28d35] .grey-card table th:not(:first-child):not(:last-child),
.html-formatted[data-v-37e28d35] .grey-card table td:not(:first-child):not(:last-child),
.html-formatted[data-v-37e28d35] .white-card table th:not(:first-child):not(:last-child),
.html-formatted[data-v-37e28d35] .white-card table td:not(:first-child):not(:last-child) {
  border-left: 1px solid var(--Neutral-UI-neutral-ui-50);
  border-right: 1px solid var(--Neutral-UI-neutral-ui-50);
}
.html-formatted[data-v-37e28d35] .hover-display-parent:hover .hover-display-content {
  display: block !important;
}
.html-formatted.neutral-0[data-v-37e28d35] .white-card {
  border: 2px solid var(--Neutral-UI-neutral-ui-50);
  background-color: var(--color-white);
}
.html-formatted.neutral-0[data-v-37e28d35] .grey-card {
  background-color: var(--Neutral-UI-neutral-ui-10);
}
.html-formatted.neutral-10[data-v-37e28d35] .white-card {
  border: 2px solid var(--Neutral-UI-neutral-ui-50);
  background-color: var(--Neutral-UI-neutral-ui-0);
}
.html-formatted.neutral-10[data-v-37e28d35] .grey-card {
  background-color: var(--Neutral-UI-neutral-ui-20);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.sidebar-panel[data-v-e4f0381b] {
  background-color: inherit;
}
.sidebar-panel[data-v-e4f0381b] .q-tab-panel {
  padding: var(--Spacing-spacing-4) 0;
}
.tabs[data-v-e4f0381b] {
  margin: 0 var(--Spacing-spacing-3) 0 0;
}
@media screen and (min-width: 768px) {
.tabs[data-v-e4f0381b] {
    margin: 0;
}
}
.tabs[data-v-e4f0381b] .q-tabs__arrow {
  display: none !important;
}
.legaldocs-skeleton[data-v-e4f0381b] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.skeleton-tabs[data-v-e4f0381b] {
  display: flex;
  justify-content: center;
  gap: var(--Spacing-spacing-3);
  margin-top: var(--Spacing-spacing-2);
}
.skeleton-tab[data-v-e4f0381b] {
  height: 36px;
  width: 100px;
  border-radius: var(--Border-Radius-2);
}
.skeleton-text-content[data-v-e4f0381b] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-2);
}
.skeleton-paragraph-break[data-v-e4f0381b] {
  margin-top: var(--Spacing-spacing-3);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.sidebar-tooltip[data-v-3e8c24c7] {
  position: fixed;
  z-index: 100000;
  background: var(--Neutral-UI-neutral-ui-100);
  color: var(--Neutral-UI-neutral-ui-0);
  border-radius: var(--border-radius);
  padding: var(--Spacing-spacing-3) var(--Spacing-spacing-4);
  white-space: nowrap;
  transform: translateX(-100%);
  pointer-events: auto;
}
.sidebar-tooltip[data-v-3e8c24c7]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid var(--Neutral-UI-neutral-ui-100);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.tooltip-enter-active[data-v-3e8c24c7], .tooltip-leave-active[data-v-3e8c24c7] {
  transition: all 0.8s ease-in-out;
}
.tooltip-enter-from[data-v-3e8c24c7], .tooltip-leave-to[data-v-3e8c24c7] {
  opacity: 0;
}
.tooltip-enter-to[data-v-3e8c24c7], .tooltip-leave-from[data-v-3e8c24c7] {
  opacity: 1;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.balm-sidebar-toolbar[data-v-bb072ede] {
  padding: var(--Spacing-spacing-5) 0 var(--Spacing-spacing-1);
  display: flex;
  flex-shrink: 0;
  height: 100%;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.balm-sidebar-toolbar__items[data-v-bb072ede] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-spacing-5);
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-bottom: var(--Spacing-spacing-5);
}
.tour-icon-btn[data-v-bb072ede] {
  margin-top: auto;
  padding: var(--Spacing-spacing-2);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.tour-icon-btn[data-v-bb072ede]:hover {
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.tour-icon-btn[data-v-bb072ede]:focus-visible {
  outline: 2px solid var(--Color-Primary-surface);
  outline-offset: 2px;
}
.tour-icon-btn[data-v-bb072ede] svg path {
  stroke: var(--Neutral-UI-neutral-ui-100);
}
.tour-badge[data-v-bb072ede] {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background-color: var(--Light-Scheme-Primary-primary-color-3);
  border-radius: 50%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.media-type-and-duration[data-v-4a1b007b] {
  opacity: 0.6;
  color: var(--neutral-UI-neutral-60);
}
.media-type-label[data-v-4a1b007b] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.router-link[data-v-e81fbf33] {
  display: block;
  border-radius: var(--card-border-radius);
}
.bookmarks-list[data-v-e81fbf33] {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--Spacing-spacing-4);
  list-style: none;
  padding: 0;
}
.bookmark-item[data-v-e81fbf33] {
  gap: var(--Spacing-spacing-4);
  background: var(--Color-neutral-10);
  border-radius: var(--Border-radius-medium);
  width: 100%;
  min-width: 150px;
  max-width: 215px;
}
.image-container[data-v-e81fbf33] {
  position: relative;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.play-button[data-v-e81fbf33] {
  position: absolute;
  top: var(--Spacing-spacing-3);
  left: var(--Spacing-spacing-3);
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.play-icon[data-v-e81fbf33] {
  width: 100%;
  height: 100%;
  margin-left: 1px;
}
.bookmark-content[data-v-e81fbf33] {
  padding: var(--Spacing-spacing-3) 0 var(--Spacing-spacing-4);
  display: flex;
  flex-direction: column;
}
.bookmark-title[data-v-e81fbf33] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.empty[data-v-e81fbf33] {
  text-align: center;
  padding: 16px;
}
.skeleton-image[data-v-e81fbf33] {
  aspect-ratio: var(--e81fbf33-imageAspectRatio);
  border-radius: var(--card-border-radius);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.right-bar-spacer[data-v-d3add3de] {
  position: relative;
}
@media screen and (min-width: 1280px) {
.right-bar-spacer[data-v-d3add3de] {
    width: 72px;
    flex-shrink: 0;
    margin-left: auto;
}
}
.balm-sidebar-toolbar[data-v-d3add3de] {
  display: none;
}
@media screen and (min-width: 1280px) {
.balm-sidebar-toolbar[data-v-d3add3de] {
    display: flex;
    width: 72px;
}
}
.right-bar-tab[data-v-d3add3de] {
  width: 100vw;
  max-height: 100%;
  padding: 0 var(--Spacing-spacing-4);
  overflow: auto;
}
@media screen and (min-width: 768px) {
.right-bar-tab[data-v-d3add3de] {
    width: 60vw;
    max-width: 90vw;
    padding: 0 var(--Spacing-spacing-5);
}
}
.close-sidebar[data-v-d3add3de] {
  position: absolute;
  top: var(--Spacing-spacing-4);
  right: var(--Spacing-spacing-6);
  z-index: 10;
  background-color: var(--Neutral-UI-neutral-ui-10);
  border-radius: 50%;
}
@media screen and (min-width: 768px) {
.close-sidebar[data-v-d3add3de] {
    top: var(--Spacing-spacing-5);
}
}
.right-bar-holder[data-v-d3add3de] {
  right: 0px;
  top: 0;
  bottom: 0;
  height: 100%;
  background-color: var(--Neutral-UI-neutral-ui-10);
  width: 0;
  flex-shrink: 0;
  position: absolute;
  transition: width 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  overflow: hidden;
}
@media screen and (min-width: 1280px) {
.right-bar-holder[data-v-d3add3de] {
    width: 72px;
}
}
.right-bar-holder.right-bard-opened[data-v-d3add3de] {
  width: 100vw;
  z-index: 2;
  box-shadow: 0px 200px 60px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
.right-bar-holder.right-bard-opened[data-v-d3add3de] {
    max-width: 60vw;
    width: 60vw;
}
}
.right-bar-content[data-v-d3add3de] {
  display: flex;
  height: 100%;
  position: relative;
  max-height: 100%;
  flex-direction: row;
  width: 100vw;
}
@media screen and (min-width: 768px) {
.right-bar-content[data-v-d3add3de] {
    max-width: 60vw;
    width: 60vw;
}
}
.fade-slide-enter-from[data-v-d3add3de], .fade-slide-leave-to[data-v-d3add3de] {
  opacity: 0;
}
.fade-slide-enter-to[data-v-d3add3de], .fade-slide-leave-from[data-v-d3add3de] {
  opacity: 1;
}
.fade-slide-enter-active[data-v-d3add3de], .fade-slide-leave-active[data-v-d3add3de] {
  transition: opacity 0.4s ease-in-out;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.allianz-branding-footer[data-v-a17f9a0a] {
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  color: var(--Allianz-branding);
  margin-top: auto;
  margin-bottom: var(--Spacing-spacing-5);
  padding-right: var(--Spacing-spacing-5);
  padding-top: var(--Spacing-spacing-6);
  width: 100%;
}
@media screen and (min-width: 768px) {
.allianz-branding-footer--public[data-v-a17f9a0a] {
    padding-right: var(--Spacing-spacing-10);
}
}
.branding-content[data-v-a17f9a0a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
}
@media screen and (min-width: 768px) {
.branding-content[data-v-a17f9a0a] {
    gap: 6px;
}
}
.branding-text[data-v-a17f9a0a] {
  font-family: "Allianz", serif;
  font-size: 10px;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}
@media screen and (min-width: 768px) {
.branding-text[data-v-a17f9a0a] {
    font-size: 14px;
}
}
.allianz-logo[data-v-a17f9a0a] {
  width: 97px;
  height: auto;
}
@media screen and (min-width: 768px) {
.allianz-logo[data-v-a17f9a0a] {
    width: 161px;
}
}
.allianz-logo[data-v-a17f9a0a] svg {
  color: inherit;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.global-page-template[data-v-3a830325] {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.main[data-v-3a830325] {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: row;
}
@media screen and (min-width: 1280px) {
.main[data-v-3a830325] {
    height: calc(100% - 80px);
}
}
.content[data-v-3a830325] {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content[data-v-3a830325]:not(.content--no-scroll) {
  overflow: auto;
}
.screen-size[data-v-3a830325] {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: var(--Neutral-UI-neutral-ui-60);
  font-size: 10px;
  padding: 0 5px;
  z-index: 2;
  line-height: 16px;
  color: white;
  border-top-right-radius: 6px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.x-close-wrapper[data-v-bdad698c] {
  position: absolute;
  right: var(--Spacing-spacing-6);
  top: var(--Spacing-spacing-6);
  background-color: inherit;
  border-radius: 50%;
}
.modal-scroll[data-v-bdad698c] {
  overflow-y: scroll;
  overflow-x: hidden;
  padding: var(--Spacing-spacing-4);
  min-height: 100%;
}

/* eslint-disable-next-line vue-scoped-css/no-unused-selector */
.modal-card[data-v-bdad698c] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1800px;
  overflow: hidden;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}
.modal-card.grey-10[data-v-bdad698c] {
  background-color: var(--Neutral-UI-neutral-ui-10);
}
.modal-card.grey-20[data-v-bdad698c] {
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.modal-card.neutral-0[data-v-bdad698c] {
  background-color: var(--Neutral-UI-neutral-ui-0);
}
.modal-card.h900[data-v-bdad698c] {
  height: 100%;
  max-height: min(90vh, 1100px) !important;
}
@media screen and (min-width: 1280px) {
.modal-card.h900[data-v-bdad698c] {
    max-height: min(100vh, 1100px) !important;
}
}
.modal-card.fit-content[data-v-bdad698c] {
  height: fit-content;
}
@media screen and (min-width: 1280px) {
.modal-card[data-v-bdad698c] {
    border-bottom-left-radius: var(--card-border-radius);
    border-bottom-right-radius: var(--card-border-radius);
}
.modal-card.fit-content[data-v-bdad698c] {
    width: fit-content;
    height: fit-content;
}
.modal-card.fh[data-v-bdad698c] {
    height: 100%;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.balm-dialog .q-dialog__inner {
  height: 90vh;
}
@media screen and (min-width: 768px) {
.balm-dialog .q-dialog__inner {
    height: 90vh;
}
}
@media screen and (min-width: 1280px) {
.balm-dialog .q-dialog__inner {
    height: 100vh;
}
}
.balm-dialog .q-dialog__inner--minimized {
  padding: 0;
}
@media screen and (min-width: 1280px) {
.balm-dialog .q-dialog__inner--minimized {
    padding: var(--Spacing-spacing-7);
}
}
.balm-dialog .q-dialog__inner > div {
  max-height: 100vh !important;
}
@media screen and (min-width: 768px) {
.balm-dialog .q-dialog__inner > div {
    max-height: 100vh !important;
}
}
@media screen and (min-width: 1280px) {
.balm-dialog .q-dialog__inner > div {
    max-height: 100% !important;
}
}
.balm-dialog--fit-content .q-dialog__inner {
  height: auto;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.terms-change-modal[data-v-b618d7d7] {
  padding: var(--Spacing-spacing-4);
  max-height: 90vh;
  overflow-y: auto;
}
@media screen and (min-width: 1280px) {
.terms-change-modal[data-v-b618d7d7] {
    min-width: 500px;
    max-width: 700px;
}
}
.modal-header[data-v-b618d7d7] {
  text-align: center;
}
.modal-title[data-v-b618d7d7] {
  margin-bottom: var(--Spacing-spacing-4);
}
.consent-subtitle[data-v-b618d7d7] {
  margin-bottom: var(--Spacing-spacing-4);
}
.consent-checkbox-container[data-v-b618d7d7] {
  margin-bottom: var(--Spacing-spacing-4);
}
.agreement-title[data-v-b618d7d7] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-3);
}
.agreement-check[data-v-b618d7d7] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.agreement-check[data-v-b618d7d7] .q-field__control {
  color: var(--Neutral-UI-neutral-ui-100);
}
.agreement-check[data-v-b618d7d7] .q-checkbox__label {
  padding-left: var(--Spacing-spacing-4);
}
.link-text[data-v-b618d7d7]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.link-text[data-v-b618d7d7] {
  text-decoration: underline;
  cursor: pointer;
}
.buttons[data-v-b618d7d7] {
  display: flex;
  gap: var(--Spacing-spacing-3);
  justify-content: center;
  margin-top: var(--Spacing-spacing-6);
  margin-bottom: var(--Spacing-spacing-6);
}
@media (max-width: 480px) {
.buttons[data-v-b618d7d7] {
    flex-direction: column;
}
.buttons[data-v-b618d7d7] .q-btn {
    width: 100%;
}
}.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.onboarding-tour[data-v-7ae2852b] {
  display: none;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.back-link[data-v-e4e688e0] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--Spacing-spacing-2);
}
@media screen and (min-width: 1280px) {
.back-link[data-v-e4e688e0] {
    margin-bottom: var(--Spacing-spacing-4);
}
}
.link[data-v-e4e688e0] {
  display: flex;
  color: var(--Neutral-UI-neutral-ui-50);
  align-items: flex-start;
  margin-right: var(--Spacing-spacing-2);
  border-radius: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.link[data-v-e4e688e0]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.link:hover .label[data-v-e4e688e0] {
  text-decoration: underline;
}
.label[data-v-e4e688e0] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  text-align: left;
}
.back-arrow[data-v-e4e688e0] {
  position: relative;
  left: -6px;
  flex-shrink: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.current[data-v-c6fcc943] {
  border-radius: var(--button-border-radius);
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.current[data-v-c6fcc943] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.current[data-v-c6fcc943] {
    letter-spacing: 1.5px;
}
}
.current[data-v-c6fcc943] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  height: fit-content;
  width: fit-content;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  align-self: center;
}
.current.white[data-v-c6fcc943] {
  color: var(--Neutral-UI-neutral-ui-100);
  background-color: var(--Neutral-UI-neutral-ui-0);
}
.current.blue[data-v-c6fcc943] {
  color: var(--Functional-fw-enrolled-text);
  background-color: var(--Functional-fw-enrolled-surface);
}
.current.green[data-v-c6fcc943] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Functional-wl-completed-surface);
}
.current.red[data-v-c6fcc943] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Primary-primary-color-3);
}
.current.forced-dark-blue[data-v-c6fcc943] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Dark-Scheme-Functional-wl-current-surface);
}
.current.teal[data-v-c6fcc943] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Data-Visualization-13);
}
.current.light[data-v-c6fcc943] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-90);
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-20);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.tabs[data-v-790218cb] .q-tab {
  min-height: 0;
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}
.tabs[data-v-790218cb] .q-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--Primary-primary-color-1);
}
.tabs[data-v-790218cb] .q-tab--in--active {
  text-transform: none;
  color: var(--Neutral-UI-neutral-ui-100);
}
.tabs[data-v-790218cb] .q-tab--inactive {
  color: var(--Neutral-UI-neutral-ui-70);
}
.tabs[data-v-790218cb] .q-tab__indicator {
  background-color: var(--Neutral-UI-neutral-ui-30);
}
.tabs[data-v-790218cb] .q-tab__content {
  padding: 0;
}
.tabs[data-v-790218cb] .q-tabs__arrow {
  display: none;
}
.tabs[data-v-790218cb] .q-tab__label {
  text-transform: none;
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.intervention-details-page[data-v-790218cb] {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "menu" "header" "main";
}
@media screen and (min-width: 768px) {
.intervention-details-page[data-v-790218cb] {
    grid-template-columns: 354px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "menu header" "menu main";
}
}
.intervention-details-page > .menu[data-v-790218cb] {
  height: 100%;
  grid-area: menu;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media screen and (min-width: 768px) {
.intervention-details-page > .menu[data-v-790218cb] {
    overflow-y: auto;
    padding: var(--Spacing-spacing-6) var(--Spacing-spacing-6) var(--Spacing-spacing-6) var(--Spacing-spacing-5);
}
}
.intervention-details-page > .header[data-v-790218cb] {
  grid-area: header;
  padding: var(--Spacing-spacing-6) 0 var(--Spacing-spacing-2) 0;
  display: flex;
}
@media screen and (min-width: 768px) {
.intervention-details-page > .header[data-v-790218cb] {
    padding: var(--Spacing-spacing-4);
}
}
.intervention-details-page > .main[data-v-790218cb] {
  grid-area: main;
  padding: var(--Spacing-spacing-2) 0;
}
@media screen and (min-width: 768px) {
.intervention-details-page > .main[data-v-790218cb] {
    overflow-y: auto;
    padding: var(--Spacing-spacing-6) var(--Spacing-spacing-7) var(--Spacing-spacing-7) var(--Spacing-spacing-4);
}
}
.enroll-btn[data-v-790218cb] {
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.enroll-btn[data-v-790218cb] {
    width: 100%;
}
}
@media screen and (min-width: 768px) {
.registered[data-v-790218cb] {
    margin: 0 auto;
    width: 100%;
}
}
.menu[data-v-790218cb] {
  gap: var(--Spacing-spacing-2);
}
@media screen and (min-width: 768px) {
.menu[data-v-790218cb] {
    gap: var(--Spacing-spacing-6);
}
}
.header[data-v-790218cb] {
  gap: var(--Spacing-spacing-4);
  justify-content: space-between;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.goal[data-v-542d76e2] {
  width: 240px;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-7) var(--Spacing-spacing-9) var(--Spacing-spacing-6);
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
}
@media screen and (min-width: 768px) {
.goal[data-v-542d76e2] {
    min-width: 240px;
}
}
@media screen and (min-width: 1280px) {
.goal[data-v-542d76e2] {
    min-width: 260px;
    min-height: 400px;
    align-items: stretch;
}
}
.goal.finished[data-v-542d76e2] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Functional-wl-complete-surface);
}
.goal-heading[data-v-542d76e2] {
  /* Metric/Metric LG */
  font-family: var(--Font-Metric-Font);
  font-size: var(--Typography-Metric---LG);
  font-style: italic;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-100);
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--Spacing-spacing-2);
}
@media screen and (min-width: 768px) {
.goal-heading[data-v-542d76e2] {
    padding-bottom: var(--Spacing-spacing-3);
}
}
.headgoal[data-v-542d76e2] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  padding-bottom: var(--Spacing-spacing-2);
}
@media screen and (min-width: 768px) {
.headgoal[data-v-542d76e2] {
    padding-bottom: var(--Spacing-spacing-3);
}
}
.body[data-v-542d76e2] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.image[data-v-f76d8307] {
  height: 400px;
  border-radius: var(--card-border-radius);
}
h2[data-v-f76d8307] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-4);
}
.summary[data-v-f76d8307], .goals-card[data-v-f76d8307] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-0);
  gap: var(--Spacing-spacing-6);
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.summary[data-v-f76d8307], .goals-card[data-v-f76d8307] {
    padding: var(--Spacing-spacing-7);
}
}
.goals[data-v-f76d8307] {
  display: flex;
  flex-direction: row;
  gap: var(--Spacing-spacing-4);
  container-type: inline-size;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--Spacing-spacing-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.goals[data-v-f76d8307]::-webkit-scrollbar {
  display: none;
}
.goals[data-v-f76d8307] .goal {
  scroll-snap-align: start;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.goals[data-v-f76d8307] {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
}
.goals[data-v-f76d8307] .goal {
    flex-shrink: 1;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.continue-button[data-v-4b2c3459] {
  margin-top: var(--Spacing-spacing-5);
  margin-left: auto;
  display: block;
}
.page[data-v-4b2c3459] {
  margin: 0 auto;
  max-width: 1920px;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.page[data-v-8d2cda09] {
  margin: 0 auto;
  max-width: 1920px;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.progress-bar[data-v-1d9d5bc3] {
  height: 12px;
  color: var(--Light-Scheme-Primary-primary-color-2);
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  border-radius: 100px;
}
.progress-bar[data-v-1d9d5bc3] .q-linear-progress__track {
  opacity: 0;
}
.progress-bar[data-v-1d9d5bc3] .q-linear-progress__model {
  border-radius: 100px !important;
}
.completed-progress[data-v-1d9d5bc3] {
  width: 100%;
  padding-top: var(--Spacing-spacing-4);
}
.text[data-v-1d9d5bc3] {
  margin-bottom: var(--Spacing-spacing-2);
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.top-row[data-v-fae75dfd] {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--Spacing-spacing-5);
}
.progress[data-v-fae75dfd] {
  margin-bottom: var(--Spacing-spacing-6);
}
h5[data-v-fae75dfd] {
  font-size: 20px;
}
.body[data-v-fae75dfd] {
  margin: var(--Spacing-spacing-4) 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 6;
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
.body[data-v-fae75dfd] {
    margin: var(--Spacing-spacing-2) 0 0 0;
    -webkit-line-clamp: 2;
}
}
@media screen and (min-width: 768px) and (min-height: 920px) {
.body[data-v-fae75dfd] {
    margin: var(--Spacing-spacing-4) 0;
    -webkit-line-clamp: 4;
}
}
.btn[data-v-fae75dfd] {
  width: 100%;
}
.img[data-v-fae75dfd] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.session[data-v-fae75dfd] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--Spacing-spacing-6) var(--Spacing-spacing-4);
  font-size: 16px;
  max-height: 800px;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
.session[data-v-fae75dfd] {
    padding: var(--Spacing-spacing-7);
    max-width: 367px;
}
}
.session .complete[data-v-fae75dfd] {
  display: none;
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  gap: var(--Spacing-spacing-2);
}
.session.future[data-v-fae75dfd] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.session.current[data-v-fae75dfd] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-1);
}
.session.past[data-v-fae75dfd] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Functional-wl-complete-surface);
}
.session.past .complete[data-v-fae75dfd] {
  display: flex;
}
.session.past .progress[data-v-fae75dfd] {
  display: none;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-sessions-page[data-v-42198a2b] {
  width: 100%;
  height: 100%;
}
.scrollable[data-v-42198a2b] {
  display: flex;
  height: 100%;
  gap: var(--Spacing-spacing-4);
  padding: 4px 4px var(--Spacing-spacing-3) 4px;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
.scrollable[data-v-42198a2b] {
    flex-direction: row;
    cursor: grab;
    user-select: none;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.continue-btn[data-v-e88db4e7] {
  width: 100%;
}
.label[data-v-e88db4e7] {
  display: flex;
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.label.completed > span[data-v-e88db4e7] {
  margin-left: var(--Spacing-spacing-2);
}
.intervention-footer[data-v-e88db4e7] {
  margin-top: var(--Spacing-spacing-5);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.progress[data-v-8db77e2d] {
  margin: var(--Spacing-spacing-3) 0;
}
.intervention[data-v-8db77e2d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-20);
  width: 100%;
  flex-direction: column;
  max-height: 800px;
  display: flex;
  border-radius: var(--card-border-radius);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
@media screen and (min-width: 768px) {
.intervention[data-v-8db77e2d] {
    min-height: 520px;
}
}
@media screen and (min-width: 1280px) {
.intervention[data-v-8db77e2d] {
    min-height: 670px;
}
}
.intervention.active[data-v-8db77e2d], .intervention.withdrew[data-v-8db77e2d], .intervention.published[data-v-8db77e2d], .intervention.new[data-v-8db77e2d] {
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-20);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
}
.intervention.in-progress[data-v-8db77e2d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Dark-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Light-Scheme-Functional-wl-current-surface);
}
.intervention.completed[data-v-8db77e2d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Dark-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Light-Scheme-Functional-wl-complete-surface);
}
.intervention.maintenance[data-v-8db77e2d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-3);
}
.intervention.preview[data-v-8db77e2d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-30);
}
.title[data-v-8db77e2d] {
  /* Display/D5 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D5);
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
  letter-spacing: -0.96px;
}
.description[data-v-8db77e2d] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin: var(--Spacing-spacing-3) 0;
}
@media screen and (min-width: 1280px) {
.description[data-v-8db77e2d] {
    /* Body/Body SM */
    font-family: var(--Font-Primary-Font);
    font-size: var(--Typography-Body-SM);
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
}
}
.indication-citation[data-v-8db77e2d] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin: var(--Spacing-spacing-3) 0;
  padding-left: var(--Spacing-spacing-4);
  border-left: 4px solid var(--Primary-primary-color-1);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.indication-citation[data-v-8db77e2d]:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}
.indication-citation:hover .citation-link[data-v-8db77e2d] {
  text-decoration: underline;
}
.citation-link[data-v-8db77e2d] {
  color: var(--Functional-wl-current-text);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.citation-link[data-v-8db77e2d]:visited {
  color: var(--Functional-wl-current-text);
}
.section[data-v-8db77e2d] {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--Spacing-spacing-4);
  font-size: 16px;
}
@media screen and (min-width: 1280px) {
.section[data-v-8db77e2d] {
    padding: var(--Spacing-spacing-6);
}
}
.label[data-v-8db77e2d] {
  position: absolute;
  right: var(--Spacing-spacing-4);
  top: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.label[data-v-8db77e2d] {
    right: var(--Spacing-spacing-6);
    top: var(--Spacing-spacing-5);
}
}
.top-row[data-v-8db77e2d] {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: var(--Spacing-spacing-6);
}
.img[data-v-8db77e2d] {
  max-height: 200px;
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}
.img[data-v-8db77e2d] .q-img__image {
  object-fit: contain !important;
}
.recap-link[data-v-8db77e2d] {
  text-decoration: underline;
  cursor: pointer;
  padding-top: var(--Spacing-spacing-3);
  padding-bottom: var(--Spacing-spacing-3);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.medical-device-consent-modal[data-v-14e02f65] {
  padding: var(--Spacing-spacing-4);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1280px) {
.medical-device-consent-modal[data-v-14e02f65] {
    min-width: 500px;
    max-width: 700px;
}
}
.modal-header[data-v-14e02f65] {
  text-align: center;
  flex-shrink: 0;
  position: relative;
  padding-right: var(--Spacing-spacing-8);
}
.dismiss-btn[data-v-14e02f65] {
  position: absolute;
  top: calc(-1 * var(--Spacing-spacing-2));
  right: calc(-1 * var(--Spacing-spacing-2));
}
.modal-title[data-v-14e02f65] {
  /* Heading/H2 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin-bottom: var(--Spacing-spacing-4);
}
.modal-content[data-v-14e02f65] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.scroll-container[data-v-14e02f65] {
  overflow-y: auto;
  scrollbar-gutter: stable;
  max-height: 50vh;
  position: relative;
}
@media screen and (min-width: 1280px) {
.scroll-container[data-v-14e02f65] {
    max-height: 400px;
}
}
.consent-body[data-v-14e02f65] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.consent-body p[data-v-14e02f65] {
  margin-bottom: var(--Spacing-spacing-4);
}
.consent-body p[data-v-14e02f65]:last-child {
  margin-bottom: 0;
}
.scroll-hint[data-v-14e02f65] {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--Neutral-UI-neutral-ui-0) 80%, transparent) 0%, color-mix(in srgb, var(--Neutral-UI-neutral-ui-0) 100%, transparent) 100%);
  padding: var(--Spacing-spacing-3) 0 var(--Spacing-spacing-1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-spacing-1);
}
.scroll-hint--hidden[data-v-14e02f65] {
  display: none;
}
.scroll-hint-text[data-v-14e02f65] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.scroll-hint-arrow[data-v-14e02f65] {
  font-size: 1.5rem;
  color: var(--Neutral-UI-neutral-ui-60);
  animation: bounce-14e02f65 1.5s infinite;
}
@keyframes bounce-14e02f65 {
0%, 100% {
    transform: translateY(0);
}
50% {
    transform: translateY(5px);
}
}
.checkbox-container[data-v-14e02f65] {
  margin-top: var(--Spacing-spacing-4);
  padding-top: var(--Spacing-spacing-4);
  border-top: 1px solid var(--Neutral-UI-neutral-ui-20);
}
.checkbox-label[data-v-14e02f65] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-3);
  cursor: pointer;
}
.checkbox-input[data-v-14e02f65] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox-input[data-v-14e02f65]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.checkbox-text[data-v-14e02f65] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.checkbox-text--disabled[data-v-14e02f65] {
  color: var(--Neutral-UI-neutral-ui-60);
}
.buttons[data-v-14e02f65] {
  display: flex;
  justify-content: center;
  margin-top: var(--Spacing-spacing-6);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.list[data-v-b1ac05f4] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--Spacing-spacing-4);
  height: 100%;
}
@media screen and (min-width: 768px) {
.list[data-v-b1ac05f4] {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
}
@media screen and (min-width: 1280px) {
.list[data-v-b1ac05f4] {
    grid-template-columns: repeat(auto-fit, minmax(367px, 1fr));
}
}
.paths-header[data-v-b1ac05f4] {
  display: flex;
  align-items: center;
  padding-bottom: var(--Spacing-spacing-4);
  gap: var(--Spacing-spacing-2);
}
.title[data-v-b1ac05f4] {
  /* Heading/H1 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
.page[data-v-b1ac05f4] {
  max-width: 1920px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  margin-bottom: var(--Spacing-spacing-10);
}
.medical-disclaimer[data-v-b1ac05f4] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
  text-align: center;
  margin-bottom: var(--Spacing-spacing-4);
  padding: var(--Spacing-spacing-3);
}
.skeleton-card[data-v-b1ac05f4] {
  background-color: var(--Neutral-UI-neutral-ui-20);
  border-radius: var(--card-border-radius);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
.skeleton-card[data-v-b1ac05f4] {
    min-height: 520px;
}
}
@media screen and (min-width: 1280px) {
.skeleton-card[data-v-b1ac05f4] {
    min-height: 700px;
}
}
.skeleton-image-space[data-v-b1ac05f4] {
  height: 200px;
}
.skeleton-content[data-v-b1ac05f4] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-2);
  padding: var(--Spacing-spacing-6) var(--Spacing-spacing-4) var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.skeleton-content[data-v-b1ac05f4] {
    padding: var(--Spacing-spacing-8) var(--Spacing-spacing-6) var(--Spacing-spacing-6);
}
}
.skeleton-footer[data-v-b1ac05f4] {
  margin-top: auto;
  padding: 0 var(--Spacing-spacing-4) var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.skeleton-footer[data-v-b1ac05f4] {
    padding: 0 var(--Spacing-spacing-6) var(--Spacing-spacing-6);
}
}
.skeleton-footer[data-v-b1ac05f4] .q-skeleton {
  width: 100%;
  border-radius: var(--button-border-radius);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.session-toc-item[data-v-e4460f48] {
  list-style: none;
  position: relative;
}
.link[data-v-e4460f48] {
  width: 100%;
  display: flex;
  padding: var(--Spacing-spacing-3);
  position: relative;
  gap: var(--Spacing-spacing-2);
}
.not-started[data-v-e4460f48] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
}
.current[data-v-e4460f48] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-1);
  flex-direction: row;
}
.in-progress[data-v-e4460f48] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-1);
  flex-direction: row;
}
.completed[data-v-e4460f48] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Dark-Scheme-Functional-wl-completed-surface);
  flex-direction: row;
}
.current-completed[data-v-e4460f48] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Dark-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Light-Scheme-Functional-wl-complete-surface);
  flex-direction: row;
}
.label[data-v-e4460f48] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
  align-items: flex-start;
  text-align: left;
}
.icon[data-v-e4460f48] {
  align-self: end;
  margin-left: auto;
  position: relative;
  top: 1px;
  flex-shrink: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.nav-session-pages[data-v-23964b05] {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--Spacing-spacing-2);
}
.nav-session-pages[data-v-23964b05] > :not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%; /* Adjust this to align with your design */
  top: 100%;
  height: var(--Spacing-spacing-2);
  bottom: 0;
  border-left: 2px dashed var(--Neutral-UI-neutral-ui-40); /* Adjust the color and style as needed */
}
.nav-session-pages[data-v-23964b05] {
  width: 100%;
  margin: 0;
  padding: 0;
}
.nav-boundary[data-v-23964b05] {
  transition: height 0.3s linear;
  margin: var(--Spacing-spacing-5) -5px 0 -5px;
  padding: 5px;
}
.nav-boundary--scaled-down[data-v-23964b05] {
  position: relative;
}
.session-index[data-v-23964b05] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  justify-self: flex-end;
}
.progress[data-v-23964b05] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.btn-show-all[data-v-23964b05]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.btn-show-all[data-v-23964b05] {
  display: block;
  margin: var(--Spacing-spacing-3) auto 0 auto;
}
@media screen and (min-width: 1280px) {
.btn-show-all[data-v-23964b05] {
    display: none;
}
}
.btn-show-less[data-v-23964b05]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.btn-show-less[data-v-23964b05] {
  display: block;
  margin: var(--Spacing-spacing-3) auto 0 auto;
}
@media screen and (min-width: 1280px) {
.btn-show-less[data-v-23964b05] {
    display: none;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.badge-zeppelin[data-v-0dfe820f] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.badge-zeppelin[data-v-0dfe820f] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.badge-zeppelin[data-v-0dfe820f] {
    letter-spacing: 1.5px;
}
}
.badge-zeppelin[data-v-0dfe820f] {
  width: fit-content;
  color: var(--Neutral-UI-neutral-ui-100);
  height: fit-content;
  display: flex;
  align-items: center;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.content-title-header[data-v-8d0f32cd] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-20);
  padding: 0 var(--Spacing-spacing-5) var(--Spacing-spacing-5) var(--Spacing-spacing-5);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 250px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
.content-title-header[data-v-8d0f32cd] {
    min-height: 300px;
    padding: 0 var(--Spacing-spacing-5) var(--Spacing-spacing-6) var(--Spacing-spacing-5);
}
}
@media screen and (min-width: 1280px) {
.content-title-header[data-v-8d0f32cd] {
    min-height: 400px;
    padding: 0 var(--Spacing-spacing-5) var(--Spacing-spacing-6) var(--Spacing-spacing-5);
}
}
.content-title-header--down-sized[data-v-8d0f32cd] {
  min-height: 170px;
}
@media screen and (min-width: 768px) {
.content-title-header--down-sized[data-v-8d0f32cd] {
    min-height: 300px;
}
}
@media screen and (min-width: 1280px) {
.content-title-header--down-sized[data-v-8d0f32cd] {
    min-height: 400px;
}
}
.title-row[data-v-8d0f32cd] {
  display: flex;
  justify-content: space-between;
}
.title[data-v-8d0f32cd] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.top[data-v-8d0f32cd] {
  position: absolute;
  top: var(--Spacing-spacing-6);
  right: var(--Spacing-spacing-5);
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 768px) {
.top[data-v-8d0f32cd] {
    top: var(--Spacing-spacing-6);
    right: var(--Spacing-spacing-5);
}
}
@media screen and (min-width: 1280px) {
.top[data-v-8d0f32cd] {
    top: var(--Spacing-spacing-6);
    right: var(--Spacing-spacing-5);
}
}
.image-container[data-v-8d0f32cd] {
  flex-shrink: 0;
}
.image[data-v-8d0f32cd] {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--Border-Radius-2);
  background-color: var(--Neutral-UI-neutral-ui-20);
}
@media screen and (min-width: 768px) {
.image[data-v-8d0f32cd] {
    height: 450px;
}
}
.content-title-header--down-sized .image[data-v-8d0f32cd] {
  height: 250px;
  object-fit: contain;
}
@media screen and (min-width: 768px) {
.content-title-header--down-sized .image[data-v-8d0f32cd] {
    object-fit: contain;
    height: 300px;
}
}
@media screen and (min-width: 1280px) {
.content-title-header--down-sized .image[data-v-8d0f32cd] {
    height: 400px;
}
}
.content[data-v-8d0f32cd] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
  margin-top: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.lightbox-image-container[data-v-8506c87a] {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}
.lightbox-image-container.lightbox-enabled[data-v-8506c87a] {
  cursor: pointer;
}
.lightbox-image-container.lightbox-enabled:hover .lightbox-indicator[data-v-8506c87a] {
  opacity: 1;
}
.lightbox-image-container.lightbox-enabled[data-v-8506c87a]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
  border-radius: var(--border-radius);
}
.lightbox-image[data-v-8506c87a] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}
.lightbox-indicator[data-v-8506c87a] {
  position: absolute;
  top: var(--Spacing-spacing-2);
  right: var(--Spacing-spacing-2);
  width: 32px;
  height: 32px;
  background-color: var(--Neutral-UI-neutral-ui-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Neutral-UI-neutral-ui-0);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.lightbox-indicator[data-v-8506c87a] .lightbox-icon {
  width: 18px;
  height: 18px;
}
@media screen and (min-width: 768px) {
.lightbox-indicator[data-v-8506c87a] {
    width: 40px;
    height: 40px;
}
.lightbox-indicator[data-v-8506c87a] .lightbox-icon {
    width: 20px;
    height: 20px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.simple-video-player[data-v-d668d160] {
  width: 100%;
  height: 100%;
}
.video-container[data-v-d668d160] {
  position: relative;
  width: 100%;
  height: 100%;
}
.video-element[data-v-d668d160] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.video-poster-overlay[data-v-d668d160] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
  background-color: var(--Neutral-UI-neutral-ui-20);
  /* Allow tab navigation through to video controls */
  pointer-events: none;
}
.video-poster-overlay[data-v-d668d160] > * {
  pointer-events: auto;
}
.poster-image[data-v-d668d160] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.top-left-container[data-v-d668d160] {
  position: absolute;
  top: var(--Spacing-spacing-5);
  left: var(--Spacing-spacing-5);
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-3);
}
@media screen and (min-width: 768px) {
.top-left-container[data-v-d668d160] {
    top: var(--Spacing-spacing-4);
    left: var(--Spacing-spacing-4);
}
}
.play-button-small[data-v-d668d160] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
  cursor: pointer;
}
.play-button-small[data-v-d668d160]:hover {
  transform: scale(1.05);
}
.play-button-small[data-v-d668d160]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
.play-button-overlay[data-v-d668d160] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.play-button-overlay[data-v-d668d160]:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.play-button-overlay[data-v-d668d160]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
.play-icon[data-v-d668d160] {
  width: 100%;
  height: 100%;
  margin-left: 2px;
}
.text-overlay[data-v-d668d160] {
  position: absolute;
  pointer-events: none;
}
.text-overlay.position-bottom-right[data-v-d668d160] {
  display: none;
  bottom: var(--Spacing-spacing-6);
  right: var(--Spacing-spacing-7);
}
@media screen and (min-width: 768px) {
.text-overlay.position-bottom-right[data-v-d668d160] {
    display: block;
    bottom: var(--Spacing-spacing-7);
    right: var(--Spacing-spacing-6);
}
}
@media screen and (min-width: 1280px) {
.text-overlay.position-bottom-right[data-v-d668d160] {
    display: block;
    bottom: var(--Spacing-spacing-7);
    right: var(--Spacing-spacing-7);
}
}
.overlay-title[data-v-d668d160] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  margin: 0;
}
.overlay-title-pill[data-v-d668d160] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  display: inline-block;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0 var(--Spacing-spacing-2);
  border-radius: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fade-out-leave-active[data-v-d668d160] {
  transition: opacity 0.4s ease-out;
}
.fade-out-leave-to[data-v-d668d160] {
  opacity: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.lightbox-video-container[data-v-482a1da8] {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: var(--card-border-radius);
  overflow: hidden;
}
.lightbox-video-container.lightbox-enabled[data-v-482a1da8] {
  cursor: pointer;
}
.lightbox-video-container.lightbox-enabled:hover .lightbox-indicator[data-v-482a1da8] {
  opacity: 1;
}
.lightbox-video-container.lightbox-enabled[data-v-482a1da8]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
  border-radius: var(--border-radius);
}
.lightbox-video[data-v-482a1da8] {
  width: 100%;
  height: 100%;
  display: block;
}
.lightbox-video.pointer-events-none[data-v-482a1da8] {
  pointer-events: none;
}
.lightbox-indicator[data-v-482a1da8] {
  position: absolute;
  top: var(--Spacing-spacing-2);
  right: var(--Spacing-spacing-2);
  width: 32px;
  height: 32px;
  background-color: var(--Neutral-UI-neutral-ui-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Neutral-UI-neutral-ui-0);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10;
}
.lightbox-indicator[data-v-482a1da8] .lightbox-icon {
  width: 18px;
  height: 18px;
}
@media screen and (min-width: 768px) {
.lightbox-indicator[data-v-482a1da8] {
    width: 40px;
    height: 40px;
}
.lightbox-indicator[data-v-482a1da8] .lightbox-icon {
    width: 20px;
    height: 20px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.card .image[data-v-48cd6aa9], .raw .image[data-v-48cd6aa9] {
  grid-area: media;
  border-radius: var(--card-border-radius);
  max-height: 400px;
}
.raw .video[data-v-48cd6aa9] {
  grid-area: media;
  border-radius: var(--card-border-radius);
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 400px;
}
.card .video[data-v-48cd6aa9] {
  grid-area: media;
  border-radius: var(--card-border-radius);
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 400px;
}
.title[data-v-48cd6aa9] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  grid-area: title;
  text-align: left;
}
.audio[data-v-48cd6aa9] {
  grid-area: media;
  width: 100%;
  margin: var(--Spacing-spacing-2) 0;
}
.content[data-v-48cd6aa9] {
  text-align: start;
  grid-area: content;
  overflow-wrap: break-word;
  word-break: break-word;
}
.content[data-v-48cd6aa9] pre {
  white-space: pre-wrap;
}
.content[data-v-48cd6aa9] ul {
  margin: 0;
}
.content[data-v-48cd6aa9] a {
  overflow-wrap: break-word;
  word-break: break-word;
}
.content-block[data-v-48cd6aa9] {
  gap: var(--Spacing-spacing-4);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
.content-block[data-v-48cd6aa9] {
    column-gap: var(--Spacing-spacing-9);
    row-gap: var(--Spacing-spacing-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title media" "content media";
}
}
.name-only[data-v-48cd6aa9] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  column-gap: 0;
  row-gap: 0;
}
.content-block[data-v-48cd6aa9]:not(.no-text) {
  grid-template-rows: auto 1fr;
}
.text-left[data-v-48cd6aa9] {
  grid-template-areas: "title media" "content media";
}
.audio-below[data-v-48cd6aa9] {
  grid-template-areas: "title media" "content media" "audio audio";
}
.audio-below .audio[data-v-48cd6aa9] {
  grid-area: audio;
}
.content-block.no-text[data-v-48cd6aa9] {
  grid-template-areas: "media";
  grid-template-columns: 1fr;
}
.content-block.no-text .image[data-v-48cd6aa9] {
  margin: 0;
}
.content-block.no-text[data-v-48cd6aa9] {
  padding: 0;
}
.content-block.no-text .audio[data-v-48cd6aa9], .content-block.no-text .content[data-v-48cd6aa9], .content-block.no-text .title[data-v-48cd6aa9] {
  display: none;
}
.text-right[data-v-48cd6aa9] {
  grid-template-areas: "media title" "media content";
}
.text-top[data-v-48cd6aa9] {
  grid-template-areas: "title title" "content content" "media media";
}
.text-bottom[data-v-48cd6aa9] {
  grid-template-areas: "title title" "media media" "content content";
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.content-component-card[data-v-697ed943] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.content-component-card[data-v-697ed943] {
    padding: var(--Spacing-spacing-7);
}
}
.content-component-raw[data-v-697ed943] {
  padding: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.example[data-v-6647c3b4] {
  padding: var(--Spacing-spacing-4);
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
}
.example > .example-body[data-v-6647c3b4] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.example-title[data-v-6647c3b4] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-2) !important;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.example-single-input.card[data-v-df0431e0] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.example-single-input.card[data-v-df0431e0] {
    padding: var(--Spacing-spacing-7);
}
}
.example-single-input[data-v-df0431e0] {
  display: grid;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.example-single-input[data-v-df0431e0] {
    grid-template-columns: 1fr 1fr;
}
}
.title[data-v-df0431e0] {
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.instructions[data-v-df0431e0] {
    grid-column: 1;
    grid-row: 1;
}
}
.example[data-v-df0431e0] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
}
@media screen and (min-width: 1280px) {
.example[data-v-df0431e0] {
    grid-column: 2;
    grid-row: span 2;
    height: fit-content;
}
}
.input[data-v-df0431e0] textarea {
  min-height: 200px;
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-4);
  background-color: var(--Neutral-UI-neutral-ui-20);
  color: var(--Neutral-UI-neutral-ui-100);
}
@media screen and (min-width: 1280px) {
.input[data-v-df0431e0] {
    grid-column: span 2;
    grid-row: 3;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.session-two-blocks.card[data-v-efc5cd32] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
}
.card .content[data-v-efc5cd32] {
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.card .content[data-v-efc5cd32] {
    padding: var(--Spacing-spacing-7);
}
}
.content[data-v-efc5cd32] {
  display: flex;
  background-color: var(--color-netural-ui-10);
  flex-direction: column;
  width: 100%;
  gap: var(--Spacing-spacing-4);
}
.right[data-v-efc5cd32] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
h5[data-v-efc5cd32] {
  color: var(--Neutral-UI-neutral-ui-100);
}
.btn[data-v-efc5cd32] {
  margin-top: var(--Spacing-spacing-4);
  margin-left: auto;
  text-transform: none;
}
.left[data-v-efc5cd32] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.hidden-require[data-v-2b9e4857] {
  opacity: 0;
  padding: 0;
  height: 0;
  width: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.listbox[data-v-b5847abf] {
  outline: none;
}
:focus-visible .listbox__option--active[data-v-b5847abf]:not(.focus-visible-disabled) {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.answer-option-chip[data-v-a836bf50] {
  display: flex;
  gap: var(--Spacing-spacing-2);
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-2);
  color: var(--Neutral-UI-neutral-ui-100);
  background-color: var(--Neutral-UI-neutral-ui-10);
  border-radius: 21px;
  min-width: 75px;
  justify-content: center;
  user-select: none;
}
.answer-option-chip[data-v-a836bf50]:not(.answer-option-chip--no-hover) {
  cursor: pointer;
}
.answer-option-chip--super-neutral[data-v-a836bf50] {
  background-color: var(--Neutral-UI-neutral-ui-30);
}
.answer-option-chip--selected[data-v-a836bf50] {
  background-color: var(--Neutral-UI-neutral-ui-80);
  color: var(--Neutral-UI-neutral-ui-10);
}
.answer-option-chip--positive.answer-option-chip--selected[data-v-a836bf50] {
  background-color: var(--Secondary-secondary-color-2);
  color: var(--Neutral-UI-neutral-ui-100);
}
.answer-option-chip--negative.answer-option-chip--selected[data-v-a836bf50] {
  background-color: var(--Secondary-secondary-color-5);
  color: var(--Neutral-UI-neutral-ui-100);
}
.answer-option-chip[data-v-a836bf50]:not(.answer-option-chip--selected):not(.answer-option-chip--no-hover):hover {
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.answer-option-chip--super-neutral[data-v-a836bf50]:not(.answer-option-chip--selected):not(.answer-option-chip--no-hover):hover {
  background-color: var(--Neutral-UI-neutral-ui-40);
}
:focus-visible .answer-option-chip--active[data-v-a836bf50] {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
:focus-visible .answer-option-chip--active[data-v-a836bf50]:not(.answer-option-chip--selected) {
  background-color: var(--Neutral-UI-neutral-ui-20);
}
:focus-visible .answer-option-chip--active.answer-option-chip--positive[data-v-a836bf50] {
  outline-color: var(--Primary-primary-color-2) !important;
}
:focus-visible .answer-option-chip--active.answer-option-chip--negative[data-v-a836bf50] {
  outline-color: var(--Primary-primary-color-3) !important;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.list-container[data-v-af40cdfd] {
  container-type: inline-size;
  container-name: thinking-traps-list;
}
.listbox[data-v-af40cdfd] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-1);
}
@container thinking-traps-list (max-width: 450px) {
.listbox[data-v-af40cdfd] {
    flex-direction: column;
}
.listbox .answer-option-chip[data-v-af40cdfd] {
    justify-content: left;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.feeling-selection[data-v-ef3b3f31] {
  position: relative;
}
.feeling-option--focus[data-v-ef3b3f31] {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
  border-radius: var(--button-border-radius);
}
.feeling-options[data-v-ef3b3f31] {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: var(--Spacing-spacing-2);
  transition: opacity 0.8s linear, max-height 0.4s ease-out;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  margin: 0;
  cursor: pointer;
  padding: var(--Spacing-spacing-3) var(--Spacing-spacing-6);
}
.feeling-options--expanded[data-v-ef3b3f31] {
  opacity: 1;
  max-height: 100px; /* Set to a value large enough for your content */
}
.query-input-container[data-v-ef3b3f31] {
  padding: var(--Spacing-spacing-6);
  border-bottom: 2px solid var(--body-background-color);
}
.query-input[data-v-ef3b3f31] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.query-input[data-v-ef3b3f31]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.query-input[data-v-ef3b3f31] {
  width: 100%;
  border-radius: var(--border-radius);
  color: var(--Neutral-UI-neutral-ui-60);
  background: transparent;
  border: none;
  padding: var(--Spacing-spacing-2);
}
.query-input[data-v-ef3b3f31]::placeholder {
  color: var(--Neutral-UI-neutral-ui-60);
  opacity: 1; /* Firefox */
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.headline[data-v-7c020adf] {
  margin-top: var(--Spacing-spacing-5);
  margin-bottom: var(--Spacing-spacing-4);
  padding-right: var(--Spacing-spacing-8);
}
@media screen and (min-width: 1280px) {
.headline[data-v-7c020adf] {
    margin-top: var(--Spacing-spacing-4);
}
}
@media screen and (min-width: 1280px) {
.dialog-content[data-v-7c020adf] {
    width: 340px;
}
}
[data-v-7c020adf] .listbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-2);
  margin-bottom: var(--Spacing-spacing-6);
}
[data-v-7c020adf] .listbox__option {
  cursor: pointer;
  border-radius: var(--button-border-radius);
}
.btn[data-v-7c020adf] {
  width: 100%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.headline[data-v-45f7fda3] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-2);
}
.card[data-v-45f7fda3] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.description[data-v-ab185930] {
  padding: var(--Spacing-spacing-4) var(--Spacing-spacing-6);
  padding-bottom: 0;
}
.feelings[data-v-ab185930] {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-2);
  align-items: center;
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-6);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.example-multiple-input[data-v-068055c3] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-4);
  display: grid;
  gap: var(--Spacing-spacing-3);
}
@media screen and (min-width: 1280px) {
.example-multiple-input[data-v-068055c3] {
    padding: var(--Spacing-spacing-7);
    grid-template-columns: 2fr 1fr;
}
}
.title[data-v-068055c3] {
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-3);
}
@media screen and (min-width: 1280px) {
.instructions[data-v-068055c3] {
    grid-column: 1;
    grid-row: 1;
}
}
@media screen and (min-width: 1280px) {
.example[data-v-068055c3] {
    grid-column: 2;
    grid-row: span 2;
    height: fit-content;
}
}
.trash[data-v-068055c3] {
  position: absolute;
  width: 20px;
  z-index: 2;
  top: var(--Spacing-spacing-2);
  right: var(--Spacing-spacing-2);
  cursor: pointer;
}
.each-row[data-v-068055c3] {
  position: relative;
}
.inputs[data-v-068055c3] textarea {
  min-height: 200px;
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-4);
  background-color: var(--Neutral-UI-neutral-ui-20);
  color: var(--Neutral-UI-neutral-ui-100);
}
.inputs[data-v-068055c3] {
  gap: var(--Spacing-spacing-2);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1280px) {
.inputs[data-v-068055c3] {
    grid-column: span 2;
    grid-row: 3;
}
}
.btn[data-v-068055c3] {
  margin-left: auto;
}
@media screen and (min-width: 1280px) {
.btn[data-v-068055c3] {
    grid-column: 2;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.questionnaire-completed[data-v-f9574448] {
  border-radius: var(--card-border-radius);
  background: var(--Secondary-secondary-color-2);
  padding: var(--Spacing-spacing-3);
  width: 100%;
}
@media screen and (min-width: 768px) {
.questionnaire-completed[data-v-f9574448] {
    padding: var(--Spacing-spacing-5);
    gap: var(--Spacing-spacing-8);
}
}
.questionnaire-completed[data-v-f9574448] .q-btn__content {
  text-align: left;
  justify-content: flex-start;
  gap: var(--Spacing-spacing-1);
}
@media screen and (min-width: 768px) {
.questionnaire-completed[data-v-f9574448] .q-btn__content {
    display: grid;
    grid-template-areas: "title tag" "name tag";
}
}
.question-comp-tit[data-v-f9574448] {
  grid-area: title;
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.question-comp-name[data-v-f9574448] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  grid-area: name;
}
.quest-tag-span[data-v-f9574448] {
  background-color: var(--Primary-primary-color-2);
  width: var(--Spacing-spacing-3);
  display: block;
  border-radius: 50%;
  height: var(--Spacing-spacing-3);
}
.question-comp-tag[data-v-f9574448] {
  margin-left: var(--Spacing-spacing-7);
  grid-area: tag;
  border-radius: var(--button-border-radius);
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-4) var(--Spacing-spacing-1) var(--Spacing-spacing-3);
  background-color: var(--Neutral-UI-neutral-ui-10);
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-3);
}
.button[data-v-f9574448] {
  width: 100%;
}
@media screen and (min-width: 640px) {
.button[data-v-f9574448] {
    width: auto;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question-weight-input[data-v-f9d07407] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.question[data-v-f9d07407] {
  margin: var(--Spacing-spacing-2) 0;
  text-align: center;
  max-width: 700px;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.input-container[data-v-f9d07407] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.input[data-v-f9d07407] {
  min-width: 90px;
}
.input[data-v-f9d07407] input {
  text-align: center;
}
.unit-label[data-v-f9d07407] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  min-width: 25px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question-height-input[data-v-d6de6558] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.question[data-v-d6de6558] {
  margin: var(--Spacing-spacing-2) 0;
  text-align: center;
  max-width: 700px;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.input-container[data-v-d6de6558] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.input[data-v-d6de6558] {
  min-width: 90px;
}
.input[data-v-d6de6558] input {
  text-align: center;
}
.input-small[data-v-d6de6558] {
  text-align: center;
  min-width: 40px;
  max-width: 60px;
}
.unit-label[data-v-d6de6558] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  min-width: 25px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question-numeric-component[data-v-23a5889f] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.question[data-v-23a5889f] {
  margin: var(--Spacing-spacing-2) 0;
  text-align: center;
  max-width: 700px;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.input[data-v-23a5889f] {
  min-width: 100px;
}
.input[data-v-23a5889f] input {
  text-align: center;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.horizontal-axis-with-scale[data-v-37c5956b] {
  display: flex;
  justify-content: space-between;
  container-type: inline-size;
  container-name: horizontal-axis-with-scale-component;
}
.marker[data-v-37c5956b] {
  width: 1px;
  height: 10px;
  background-color: var(--Neutral-UI-neutral-ui-10);
  position: relative;
  transition: background-color 0.5s linear;
}
.marker--selected[data-v-37c5956b] {
  background-color: var(--Neutral-UI-neutral-ui-100);
}
.marker--first[data-v-37c5956b], .marker--last[data-v-37c5956b], .marker--mid[data-v-37c5956b] {
  background-color: transparent;
}
.marker[data-v-37c5956b]:before {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -10px;
  right: -10px;
}
@container horizontal-axis-with-scale-component (min-width: 500px) {
.marker[data-v-37c5956b] {
    background-color: transparent;
}
}
.marker-label[data-v-37c5956b] {
  display: none;
  position: absolute;
  left: -50%;
  top: -2px;
  transform: translateX(-50%);
  white-space: nowrap;
  user-select: none;
}
.marker--first .marker-label[data-v-37c5956b] {
  transform: translateX(-15%);
  display: inline-block;
}
.marker--last .marker-label[data-v-37c5956b] {
  transform: translateX(-85%);
  display: inline-block;
}
.marker--mid .marker-label[data-v-37c5956b] {
  display: inline-block;
}
@container horizontal-axis-with-scale-component (min-width: 500px) {
.marker-label[data-v-37c5956b] {
    display: inline-block;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.axis-scale[data-v-119a28e8] {
  margin: -5px 0 var(--Spacing-spacing-4) 0;
}
.selected-value-or-index[data-v-119a28e8]:after {
  content: " - ";
}
.slider[data-v-119a28e8] .q-slider__track {
  background-color: var(--Neutral-UI-neutral-ui-10);
}
.slider[data-v-119a28e8] .q-slider__thumb {
  color: var(--Neutral-UI-neutral-ui-100);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question[data-v-da100453] {
  margin: var(--Spacing-spacing-2) 0;
  display: block;
}
.image[data-v-da100453] {
  border-radius: var(--card-border-radius);
}
.img[data-v-da100453] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--Spacing-spacing-8) 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question[data-v-6b329d49] {
  margin: var(--Spacing-spacing-7) 0 var(--Spacing-spacing-3) 0;
  width: 100%;
  text-align: start;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.description[data-v-6b329d49] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.row[data-v-6b329d49] {
  display: flex;
  width: 100%;
  flex-direction: row;
}
.row .img[data-v-6b329d49] {
  flex: 10;
  width: 100px;
  height: 100px;
  border-radius: var(--card-border-radius);
}
.row .check[data-v-6b329d49] {
  display: none;
  margin-top: -10px;
  margin-right: -10px;
  align-self: start;
  flex: 1;
}
.check[data-v-6b329d49]:hover .q-checkbox__inner:before {
  transform: scale3d(0, 0, 1) !important;
}
.btn[data-v-6b329d49] {
  width: 100%;
  height: 100%;
  text-transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--card-border-radius);
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.btn[data-v-6b329d49] {
    padding: var(--Spacing-spacing-7) var(--Spacing-spacing-7) var(--Spacing-spacing-9) var(--Spacing-spacing-7);
}
}
.btn[data-v-6b329d49] .q-btn__content {
  text-align: left;
  justify-content: left;
  flex-direction: column;
}
.btn.active[data-v-6b329d49] {
  background: var(--Neutral-UI-neutral-ui-60);
}
.btn.active .question[data-v-6b329d49] {
  color: var(--Neutral-UI-neutral-ui-0);
}
.btn.active .description[data-v-6b329d49] {
  color: var(--Neutral-UI-neutral-ui-20);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.answer-option[data-v-bc94f77c] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  width: 100%;
  background-color: var(--btn-background-on-card);
  border-radius: var(--Spacing-spacing-1);
  padding: var(--Spacing-spacing-3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.answer-option--selected[data-v-bc94f77c] {
  color: var(--Neutral-UI-neutral-ui-100);
  background-color: var(--Secondary-secondary-color-1);
}
.answer-option[data-v-bc94f77c]:not(.answer-option--selected):hover {
  background-color: var(--Neutral-UI-neutral-ui-20);
}
:focus-visible .answer-option--active[data-v-bc94f77c] {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
:focus-visible .answer-option--active[data-v-bc94f77c]:not(.answer-option--selected) {
  background-color: var(--Neutral-UI-neutral-ui-20);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question-grid-select[data-v-c18b099a] {
  container-type: inline-size;
  container-name: question-grid-select;
}
.question[data-v-c18b099a] {
  flex: 1;
  margin-bottom: var(--Spacing-spacing-5);
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.answer[data-v-c18b099a] {
  flex: 1;
}
.list-box[data-v-c18b099a] {
  display: flex;
  gap: var(--Spacing-spacing-2);
  padding: var(--Spacing-spacing-2);
}
.list-box--chips[data-v-c18b099a] {
  flex-wrap: wrap;
}
.list-box--list[data-v-c18b099a] {
  flex-direction: column;
}
.list-question-in-col[data-v-c18b099a] {
  display: flex;
  flex-direction: column;
}
@container question-grid-select (min-width: 599px) {
.list-question-in-col[data-v-c18b099a] {
    flex-direction: row;
}
}
.list-question-in-col .question[data-v-c18b099a] {
  padding: 0 var(--Spacing-spacing-6) 0 0;
  margin-bottom: var(--Spacing-spacing-2);
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
@container question-grid-select (min-width: 599px) {
.list-question-in-col .question[data-v-c18b099a] {
    align-self: center;
    margin-bottom: var(--Spacing-spacing-5);
}
}
.list-question-in-row[data-v-c18b099a] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list-question-in-row .question[data-v-c18b099a] {
  margin: var(--Spacing-spacing-2);
  max-width: 800px;
  text-align: center;
}
.list-question-in-row .answer[data-v-c18b099a] {
  min-width: 100%;
}
@media screen and (min-width: 640px) {
.list-question-in-row .answer[data-v-c18b099a] {
    min-width: 400px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question[data-v-bfa6c239] {
  justify-content: center;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.description[data-v-bfa6c239] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-6);
  text-align: center;
  margin-bottom: var(--Spacing-spacing-3);
}
.answer[data-v-bfa6c239] {
  flex: 1;
}
.list-box--images[data-v-bfa6c239] {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  gap: var(--Spacing-spacing-3);
  padding: var(--Spacing-spacing-2) 0;
  justify-content: center;
}
@media screen and (min-width: 1280px) {
.list-box--images[data-v-bfa6c239] {
    grid-template-columns: repeat(auto-fill, 345px);
}
}
.list-question-in-col[data-v-bfa6c239],
.list-question-in-row[data-v-bfa6c239] {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.list-question-in-col .question[data-v-bfa6c239],
.list-question-in-row .question[data-v-bfa6c239] {
  display: flex;
  align-items: center;
  justify-self: center;
  margin: var(--Spacing-spacing-2) 0;
}
.list-question-in-col .list-box--images[data-v-bfa6c239],
.list-question-in-row .list-box--images[data-v-bfa6c239] {
  justify-content: center;
}
.list-question-in-col[data-v-bfa6c239] {
  align-items: center;
  gap: var(--Spacing-spacing-3);
}
.list-question-in-col .question[data-v-bfa6c239] {
  max-width: 800px;
}
.list-question-in-col .answer[data-v-bfa6c239] {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 640px) {
.list-question-in-col .answer[data-v-bfa6c239] {
    min-width: 400px;
}
}
.image-option-container[data-v-bfa6c239] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--Spacing-spacing-5);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--Neutral-UI-neutral-ui-100);
  background: var(--Neutral-UI-neutral-ui-0);
  min-height: 146px;
}
@media screen and (min-width: 1280px) {
.image-option-container[data-v-bfa6c239] {
    min-height: 266px;
}
}
.image-option-container[data-v-bfa6c239]:hover {
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.image-option-container.selected[data-v-bfa6c239] {
  background: var(--Secondary-secondary-color-1);
}
.option-image[data-v-bfa6c239] {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.option-text[data-v-bfa6c239] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  justify-content: center;
  text-align: center;
  padding-top: var(--Spacing-spacing-3);
}
.selection-indicator[data-v-bfa6c239] {
  position: absolute;
  top: var(--Spacing-spacing-5);
  right: var(--Spacing-spacing-5);
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.selection-indicator-svg[data-v-bfa6c239] {
  width: 18px;
  height: 18px;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.suggestions-container[data-v-e1539540] {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  background: var(--Neutral-UI-neutral-ui-0);
  border-top: 1px solid var(--Neutral-UI-neutral-ui-30);
  border-radius: 0 0 var(--Border-Radius-3) var(--Border-Radius-3);
  padding: 0 var(--Spacing-spacing-3);
  width: 100%;
}
.suggestions-container--visible[data-v-e1539540] {
  max-height: none;
  opacity: 1;
  padding: var(--Spacing-spacing-3);
}
.suggestions-pills[data-v-e1539540] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-2);
}
.suggestion-pill[data-v-e1539540] {
  display: inline-block;
  padding: var(--Spacing-spacing-2) var(--Spacing-spacing-3);
  background: var(--Neutral-UI-neutral-ui-10);
  color: var(--Neutral-UI-neutral-ui-80);
  border: 1px solid var(--Neutral-UI-neutral-ui-30);
  border-radius: 20px;
  cursor: pointer;
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  line-height: 1.4;
  word-wrap: break-word;
}
.suggestion-pill[data-v-e1539540]:hover {
  background: var(--Primary-primary-10);
  color: var(--Primary-primary-60);
  border-color: var(--Primary-primary-30);
  transform: translateY(-1px);
}
.suggestion-pill--selected[data-v-e1539540] {
  background-color: var(--Neutral-UI-neutral-ui-80);
  color: var(--Neutral-UI-neutral-ui-10);
  border-color: var(--Neutral-UI-neutral-ui-80);
}
.suggestion-pill--selected[data-v-e1539540]:hover {
  background-color: var(--Neutral-UI-neutral-ui-80);
  color: var(--Neutral-UI-neutral-ui-10);
  border-color: var(--Neutral-UI-neutral-ui-80);
  transform: translateY(-1px);
}
.suggestion-pill--active[data-v-e1539540] {
  background: var(--Primary-primary-10);
  color: var(--Primary-primary-60);
  border-color: var(--Primary-primary-30);
  outline: 2px solid var(--Primary-primary-40);
  outline-offset: 1px;
}
.suggestion-pill--active[data-v-e1539540]:focus {
  outline: 2px solid var(--Primary-primary-40);
  outline-offset: 1px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question-grid-select[data-v-e551b24c] {
  container-type: inline-size;
  container-name: question-grid-select;
  --spring-enter: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --spring-leave: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.question[data-v-e551b24c] {
  flex: 1;
  margin-bottom: var(--Spacing-spacing-5);
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.answer[data-v-e551b24c] {
  flex: 1;
}
.list-box[data-v-e551b24c] {
  display: flex;
  gap: var(--Spacing-spacing-2);
  padding: var(--Spacing-spacing-2) 0;
}
.list-box--chips[data-v-e551b24c] {
  flex-wrap: wrap;
}
.list-box--list[data-v-e551b24c] {
  flex-direction: column;
}
.list-question-in-col[data-v-e551b24c] {
  display: flex;
  flex-direction: column;
}
@container question-grid-select (min-width: 599px) {
.list-question-in-col[data-v-e551b24c] {
    flex-direction: row;
}
}
.list-question-in-col .question[data-v-e551b24c] {
  padding: 0 var(--Spacing-spacing-6) 0 0;
  margin-bottom: var(--Spacing-spacing-2);
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
@container question-grid-select (min-width: 599px) {
.list-question-in-col .question[data-v-e551b24c] {
    align-self: center;
    margin-bottom: var(--Spacing-spacing-5);
    /* Display/D3 */
    font-family: var(--Font-Secondary-Font);
    font-size: var(--Typography-D3);
    font-style: normal;
    font-weight: 200;
    line-height: 90%;
    letter-spacing: -1.44px;
}
}
.list-question-in-row[data-v-e551b24c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.list-question-in-row .question[data-v-e551b24c] {
  margin: var(--Spacing-spacing-2);
  max-width: 800px;
  text-align: center;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.list-question-in-row .answer[data-v-e551b24c] {
  min-width: 100%;
}
@media screen and (min-width: 640px) {
.list-question-in-row .answer[data-v-e551b24c] {
    min-width: 400px;
}
}
.custom-input-container[data-v-e551b24c] {
  margin-top: var(--Spacing-spacing-4);
  overflow: hidden;
  transform-origin: top;
  border-radius: var(--Border-Radius-3);
  border: 1px solid var(--Neutral-UI-neutral-ui-30);
  background: var(--Neutral-UI-neutral-ui-0);
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
}
.custom-input[data-v-e551b24c] textarea {
  padding: var(--Spacing-spacing-4);
  background: transparent;
  color: var(--Neutral-UI-neutral-ui-100);
  border: none;
  border-radius: var(--Border-Radius-3) var(--Border-Radius-3) 0 0;
  height: 100px;
  transition: all 0.2s ease;
  width: 100%;
  resize: none;
}
.custom-input[data-v-e551b24c] textarea:focus {
  outline: none;
}
.custom-input[data-v-e551b24c]:has(+ .custom-suggestions .suggestions-container) textarea {
  border-radius: var(--Border-Radius-3) var(--Border-Radius-3) 0 0;
}
.custom-input-enter-active[data-v-e551b24c] {
  transition: opacity 0.25s ease-out, transform 0.35s var(--spring-enter);
}
.custom-input-leave-active[data-v-e551b24c] {
  transition: opacity 0.2s ease-in, transform 0.2s var(--spring-leave);
}
.custom-input-enter-from[data-v-e551b24c] {
  opacity: 0;
  transform: translateY(-10px) scaleY(0.8);
}
.custom-input-leave-to[data-v-e551b24c] {
  opacity: 0;
  transform: translateY(-10px) scaleY(0.8);
}
.custom-input-enter-to[data-v-e551b24c],
.custom-input-leave-from[data-v-e551b24c] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.question-dropdown[data-v-6da1edf6] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.question[data-v-6da1edf6] {
  margin: var(--Spacing-spacing-2) 0;
  text-align: center;
  max-width: 700px;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
.dropdown-select[data-v-6da1edf6] {
  min-width: 250px;
  max-width: 400px;
}

/* style the dropdown options popup */
[data-v-6da1edf6] .dropdown-select-popup {
  /* small window instead of taking all screen height */
  max-height: 220px; /* tweak as you like */
  overflow-y: auto;
  /* make list width match the select component */
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.balm-progress-wrapper[data-v-972fb9e5] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--Spacing-spacing-1);
}
.balm-progress-info[data-v-972fb9e5] {
  margin-left: var(--Spacing-spacing-2);
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  white-space: nowrap;
}
.balm-progress[data-v-972fb9e5] {
  width: 12px;
  height: 6px;
  border-radius: var(--button-border-radius);
  background-color: var(--Neutral-UI-neutral-ui-100);
  transition: width 0.2s linear;
}
.balm-progress[data-v-972fb9e5]:not(.passed) {
  opacity: 0.2;
}
.balm-progress.current[data-v-972fb9e5] {
  width: 24px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
@media screen and (min-width: 768px) {
.questionnaire-score[data-v-9122a97a] {
    gap: var(--Spacing-spacing-5);
    display: grid;
    grid-template-columns: 1fr 2fr;
}
}
.results[data-v-9122a97a] {
  margin-bottom: var(--Spacing-spacing-5);
}
.label[data-v-9122a97a] {
  width: fit-content;
  margin-bottom: var(--Spacing-spacing-2);
}
@media screen and (min-width: 768px) {
.label[data-v-9122a97a] {
    margin-bottom: var(--Spacing-spacing-5);
}
}
.res-body[data-v-9122a97a] {
  background-color: var(--Primary-primary-color-2);
  border-radius: var(--button-border-radius);
  color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-3) var(--Spacing-spacing-7);
  width: fit-content;
  height: fit-content;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.right-enter-active[data-v-882f2d70], .right-leave-active[data-v-882f2d70], .left-enter-active[data-v-882f2d70], .left-leave-active[data-v-882f2d70] {
  transition: all 0.8s ease-in-out;
}
.left-leave-from[data-v-882f2d70], .left-enter-to[data-v-882f2d70] {
  transform: translateX(0);
  opacity: 1;
}
.right-enter-from[data-v-882f2d70], .left-leave-to[data-v-882f2d70] {
  transform: translateX(-100%);
  opacity: 0;
}
.right-leave-from[data-v-882f2d70], .right-enter-to[data-v-882f2d70] {
  transform: translateX(0);
  opacity: 1;
}
.right-leave-to[data-v-882f2d70], .left-enter-from[data-v-882f2d70] {
  transform: translateX(100%);
  opacity: 0;
}
.slider[data-v-882f2d70] {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.slide[data-v-882f2d70] {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.embedded-questionnaire-standard-modal[data-v-64ea02b4] {
  height: 100%;
}
.questionnaire-standard-modal[data-v-64ea02b4] {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.form[data-v-64ea02b4] {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 10fr 1fr;
  gap: var(--Spacing-spacing-3);
}
@media screen and (min-width: 768px) {
.form[data-v-64ea02b4] {
    grid-template-rows: 1fr 10fr 1fr;
    gap: var(--Spacing-spacing-3);
}
}
.headline[data-v-64ea02b4] {
  grid-area: 1/span 2;
  padding: var(--Spacing-spacing-4) var(--Spacing-spacing-8) 0 var(--Spacing-spacing-4);
  display: flex;
  gap: var(--Spacing-spacing-4);
  align-items: center;
}
.question[data-v-64ea02b4] {
  grid-area: 3/span 2;
  height: 100%;
}
@media screen and (min-width: 768px) {
.question[data-v-64ea02b4] {
    grid-area: 2/span 2;
}
}
.question-component[data-v-64ea02b4] {
  padding: 0 var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.question-component[data-v-64ea02b4] {
    padding: var(--Spacing-spacing-4);
}
}
.score[data-v-64ea02b4] {
  grid-area: 3/span 2;
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.score[data-v-64ea02b4] {
    grid-area: 2/span 2;
    padding-top: 80px;
}
}
.score .loading[data-v-64ea02b4] {
  height: 100%;
}
.progress[data-v-64ea02b4] {
  grid-area: 2/span 2;
  display: flex;
  justify-content: center;
  padding: 0 var(--Spacing-spacing-4);
  width: 100%;
}
@media screen and (min-width: 768px) {
.progress[data-v-64ea02b4] {
    grid-area: 3/1;
    display: flex;
    justify-content: flex-start;
}
}
.btns[data-v-64ea02b4] {
  grid-area: 4/span 2;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: var(--Spacing-spacing-1);
  padding: 0 var(--Spacing-spacing-4) var(--Spacing-spacing-4) var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.btns[data-v-64ea02b4] {
    grid-area: 3/2;
    gap: var(--Spacing-spacing-5);
    display: flex;
    justify-content: flex-start;
    height: fit-content;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.questionnaire-standard[data-v-0b994f01] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.questionnaire-standard[data-v-0b994f01] {
    gap: var(--Spacing-spacing-7);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.questionnaire-grid-cont[data-v-4ee13172] {
  margin-bottom: var(--Spacing-spacing-7);
}
.questionnaire-grid[data-v-4ee13172] {
  gap: var(--Spacing-spacing-4);
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 640px) {
.questionnaire-grid[data-v-4ee13172] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1536px) {
.questionnaire-grid[data-v-4ee13172] {
    grid-template-columns: repeat(3, 1fr);
}
}
.questionnaire-grid-vert[data-v-4ee13172] {
  --btn-background-on-card: var(--Neutral-UI-neutral-ui-10);
}
.questionnaire-only-questions[data-v-4ee13172] {
  display: flex;
  gap: var(--Spacing-spacing-8);
  flex-direction: column;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.content-card[data-v-6b352ea0] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  gap: var(--Spacing-spacing-4);
  padding: var(--Spacing-spacing-4) var(--Spacing-spacing-4) var(--Spacing-spacing-4) var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.content-card[data-v-6b352ea0] {
    gap: var(--Spacing-spacing-6);
    padding: var(--Spacing-spacing-7) var(--Spacing-spacing-8) var(--Spacing-spacing-7) var(--Spacing-spacing-7);
}
}
.content-raw[data-v-6b352ea0] {
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.content-raw[data-v-6b352ea0] {
    gap: var(--Spacing-spacing-6);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.wrapper[data-v-e1b78584] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.possible-solutions[data-v-3e8e5b4c] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-4);
  display: grid;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.possible-solutions[data-v-3e8e5b4c] {
    padding: var(--Spacing-spacing-7);
    grid-template-columns: 1fr 2fr;
}
}
@media screen and (min-width: 1280px) {
.instructions[data-v-3e8e5b4c] {
    grid-column: 1;
    grid-row: 1;
}
}
.title[data-v-3e8e5b4c] {
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.example[data-v-3e8e5b4c] {
    grid-column: 2;
    grid-row: span 2;
    height: fit-content;
}
}
.solutions[data-v-3e8e5b4c] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.solutions[data-v-3e8e5b4c] {
    grid-column: span 2;
    grid-row: 3;
}
}
.solution[data-v-3e8e5b4c] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.solution[data-v-3e8e5b4c] {
    grid-template-columns: repeat(3, 1fr);
}
.solution:not(:first-child) .label[data-v-3e8e5b4c] {
    display: none;
}
}
.solution:first-child .trash-icon[data-v-3e8e5b4c] {
  display: none;
}
.input[data-v-3e8e5b4c] textarea {
  min-height: 200px;
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-4);
  background-color: var(--Neutral-UI-neutral-ui-20);
  color: var(--Neutral-UI-neutral-ui-100);
}
.solution-name[data-v-3e8e5b4c] {
  position: relative;
}
.trash-icon[data-v-3e8e5b4c] {
  position: absolute;
  right: var(--Spacing-spacing-2);
  bottom: var(--Spacing-spacing-2);
}
.label[data-v-3e8e5b4c] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-2);
}
.btn[data-v-3e8e5b4c] {
  margin-left: auto;
}
@media screen and (min-width: 1280px) {
.btn[data-v-3e8e5b4c] {
    grid-column: 2;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.possible-activities[data-v-2759a0e1] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-4);
  display: grid;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.possible-activities[data-v-2759a0e1] {
    padding: var(--Spacing-spacing-7);
    grid-template-columns: 1fr 2fr;
}
}
@media screen and (min-width: 1280px) {
.instructions[data-v-2759a0e1] {
    grid-column: 1;
    grid-row: 1;
}
}
.title[data-v-2759a0e1] {
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.description[data-v-2759a0e1] {
    grid-column: 1;
    grid-row: 2;
}
}
@media screen and (min-width: 1280px) {
.example[data-v-2759a0e1] {
    grid-column: 2;
    grid-row: span 2;
    height: fit-content;
}
}
.input[data-v-2759a0e1] textarea {
  min-height: 200px;
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-4);
  background-color: var(--Neutral-UI-neutral-ui-20);
  color: var(--Neutral-UI-neutral-ui-100);
}
.trash[data-v-2759a0e1] {
  position: absolute;
  width: 20px;
  z-index: 2;
  top: var(--Spacing-spacing-2);
  right: var(--Spacing-spacing-2);
  cursor: pointer;
}
.each-row[data-v-2759a0e1] {
  position: relative;
}
.chose-solution[data-v-2759a0e1] {
  background-color: var(--color-white);
  padding: var(--Spacing-spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.inputs[data-v-2759a0e1] {
  gap: var(--Spacing-spacing-2);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1280px) {
.inputs[data-v-2759a0e1] {
    grid-column: span 2;
    grid-row: 3;
}
}
.inputs[data-v-2759a0e1] textarea {
  padding: var(--Spacing-spacing-6);
}
.btn[data-v-2759a0e1] {
  margin-left: auto;
}
@media screen and (min-width: 1280px) {
.btn[data-v-2759a0e1] {
    grid-column: 2;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.wrapper[data-v-1445bffc] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.skeleton-card[data-v-5d8cbf4c] {
  height: 400px;
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
}
.skeleton-raw[data-v-5d8cbf4c] {
  height: 400px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.layout-components[data-v-c75641af] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-0);
  gap: var(--Spacing-spacing-6);
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.layout-components[data-v-c75641af] {
    padding: var(--Spacing-spacing-7);
}
}
.layout-components[data-v-c75641af] {
  display: flex;
  gap: var(--Spacing-spacing-4);
  container-type: inline-size;
}
.layout-component-row[data-v-c75641af] {
  flex-direction: row;
  flex-wrap: wrap;
}
.layout-component-column[data-v-c75641af] {
  flex-direction: column;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.qform[data-v-74da205d] {
  gap: var(--Spacing-spacing-4);
}
.homework-form[data-v-74da205d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.continue-btn[data-v-74da205d] {
  margin-left: auto;
  margin-top: var(--Spacing-spacing-5);
  margin-bottom: var(--Spacing-spacing-1);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.sess-home-next-green[data-v-9b9d9400] {
  padding: var(--Spacing-spacing-4) var(--Spacing-spacing-4);
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
  background: var(--Secondary-secondary-color-2);
}
@media screen and (min-width: 1280px) {
.sess-home-next-green[data-v-9b9d9400] {
    padding: var(--Spacing-spacing-7) var(--Spacing-spacing-9) var(--Spacing-spacing-7) var(--Spacing-spacing-7);
}
}
.homework-descr[data-v-9b9d9400] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.homework-title[data-v-9b9d9400] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.homework-btn[data-v-9b9d9400] {
  margin-top: var(--Spacing-spacing-7);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.session-introduction[data-v-ab378558] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.session-introduction[data-v-ab378558] {
    padding-bottom: var(--Spacing-spacing-7);
}
}
.summary[data-v-ab378558] {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--Spacing-spacing-5);
  max-width: 900px;
}
@media screen and (min-width: 1280px) {
.summary[data-v-ab378558] {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0;
}
}
@media screen and (min-width: 1280px) {
.summary__text[data-v-ab378558] {
    width: 60%;
    padding: var(--Spacing-spacing-7) 0 0 var(--Spacing-spacing-3);
}
}
.summary__media[data-v-ab378558] {
  height: auto;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  max-height: 200px;
  object-fit: contain;
  object-position: center;
}
@media screen and (min-width: 1280px) {
.summary__media[data-v-ab378558] {
    width: 30%;
    padding-right: var(--Spacing-spacing-3);
}
}
.headline[data-v-ab378558] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-4);
}
.image[data-v-ab378558] {
  border-radius: var(--card-border-radius);
  overflow: hidden;
  max-height: 200px;
  object-fit: contain;
}
.image[data-v-ab378558] .q-img {
  object-fit: contain;
}
@media screen and (min-width: 1280px) {
.image[data-v-ab378558] {
    height: 100%;
}
}
.goals[data-v-ab378558] {
  display: flex;
  flex-direction: row;
  gap: var(--Spacing-spacing-4);
  container-type: inline-size;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--Spacing-spacing-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.goals[data-v-ab378558]::-webkit-scrollbar {
  display: none;
}
.goals[data-v-ab378558] .goal {
  scroll-snap-align: start;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.goals[data-v-ab378558] {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
}
.goals[data-v-ab378558] .goal {
    flex-shrink: 1;
}
}
.goal-heading[data-v-ab378558] {
  margin-bottom: var(--Spacing-spacing-3);
}
.goals-card[data-v-ab378558] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-0);
  gap: var(--Spacing-spacing-6);
  padding: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.goals-card[data-v-ab378558] {
    padding: var(--Spacing-spacing-7);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.form-inner[data-v-af8f8041] {
  margin: 0 auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
}
.continue-btn[data-v-af8f8041] {
  margin-left: auto;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.unlocks[data-v-816fe359] {
  border-radius: var(--button-border-radius);
  border: 2px solid var(--Neutral-UI-neutral-ui-70);
  display: flex;
  padding: var(--Spacing-spacing-3) var(--Spacing-spacing-7);
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-session-page[data-v-a7779972] {
  padding: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.intervention-session-page[data-v-a7779972] {
    display: flex;
    height: calc(100vh - var(--header-height, 0px));
    max-height: calc(100vh - var(--header-height, 0px));
    overflow: hidden;
}
}
.toc-container[data-v-a7779972] {
  padding-left: 4px;
  padding-top: 4px;
  margin-left: -4px;
  margin-top: -4px;
}
@media screen and (min-width: 1280px) {
.toc-container[data-v-a7779972] {
    width: 16.6666666667%;
    min-width: 250px;
    max-height: 100%;
    padding-right: var(--Spacing-spacing-1);
    padding-bottom: var(--Spacing-spacing-7);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}
}
@media screen and (min-width: 1536px) {
.toc-container[data-v-a7779972] {
    padding-right: var(--Spacing-spacing-3);
}
}
.content-container[data-v-a7779972] {
  flex: 1;
  min-width: 0;
}
@media screen and (min-width: 1280px) {
.content-container[data-v-a7779972] {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
}
.content-inner[data-v-a7779972] {
  max-width: 1032px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  margin: 0 auto;
  padding-bottom: var(--Spacing-spacing-9);
}
@media screen and (min-width: 768px) {
.content-inner[data-v-a7779972] {
    padding-bottom: var(--Spacing-spacing-7);
}
}
.title-header[data-v-a7779972] {
  margin-bottom: var(--Spacing-spacing-5);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.nav-session-pages[data-v-92479d08] {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--Spacing-spacing-2);
}
.nav-session-pages[data-v-92479d08] > :not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%; /* Adjust this to align with your design */
  top: 100%;
  height: var(--Spacing-spacing-2);
  bottom: 0;
  border-left: 2px dashed var(--Neutral-UI-neutral-ui-40); /* Adjust the color and style as needed */
}
.nav-session-pages[data-v-92479d08] {
  width: 100%;
  margin: 0;
  padding: 0;
}
.nav-boundary[data-v-92479d08] {
  margin: var(--Spacing-spacing-5) -5px 0 -5px;
  padding: 5px;
}
.session-index[data-v-92479d08] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  justify-self: flex-end;
}
.progress[data-v-92479d08] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.session-toc-item[data-v-92479d08] {
  list-style: none;
  position: relative;
}
.link[data-v-92479d08] {
  width: 100%;
  display: flex;
  padding: var(--Spacing-spacing-3);
  position: relative;
  gap: var(--Spacing-spacing-2);
  flex-direction: row;
}
.current[data-v-92479d08] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-1);
}
.completed[data-v-92479d08] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Dark-Scheme-Functional-wl-completed-surface);
}
.completed-highlighted[data-v-92479d08] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Dark-Scheme-Functional-wl-completed-surface);
}
.label[data-v-92479d08] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
  align-items: flex-start;
  text-align: left;
}
.icon[data-v-92479d08] {
  align-self: end;
  margin-left: auto;
  position: relative;
  top: 1px;
  flex-shrink: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.session-completed-content[data-v-3ccb1d38] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
  width: 100%;
}
.section-headline[data-v-3ccb1d38] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-4);
}
.overview-section[data-v-3ccb1d38] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.overview-section[data-v-3ccb1d38] {
    padding: var(--Spacing-spacing-7);
}
}
.recap-section[data-v-3ccb1d38] {
  display: flex;
  flex-direction: column;
  padding-top: var(--Spacing-spacing-4);
  gap: var(--Spacing-spacing-2);
}
.recap-header[data-v-3ccb1d38] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-3);
}
.recap-title[data-v-3ccb1d38] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: 0;
}
.show-only-checkbox[data-v-3ccb1d38] {
  flex-shrink: 0;
}
.recap-content[data-v-3ccb1d38] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
}
.next-up-card[data-v-3ccb1d38] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-1);
  padding: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.next-up-card[data-v-3ccb1d38] {
    padding: var(--Spacing-spacing-7);
}
}
.next-up-content[data-v-3ccb1d38] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--Spacing-spacing-6);
}
@media screen and (max-width: 639px) {
.next-up-content[data-v-3ccb1d38] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-spacing-4);
}
}
.next-up-text[data-v-3ccb1d38] {
  flex: 1;
}
.next-up-title[data-v-3ccb1d38] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: 0 0 var(--Spacing-spacing-2) 0;
  color: var(--Text-text-90);
}
.next-up-description[data-v-3ccb1d38] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin: 0;
  color: var(--Text-text-70);
}
.next-up-action[data-v-3ccb1d38] {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 639px) {
.next-up-action[data-v-3ccb1d38] {
    justify-content: flex-start;
}
}
.next-steps-btn[data-v-3ccb1d38] {
  color: var(--Text-text-90) !important;
}
[data-v-3ccb1d38] .goal.finished {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Dark-Scheme-Functional-wl-completed-surface);
}
[data-v-3ccb1d38] .goal.finished .goal-heading,[data-v-3ccb1d38] .goal.finished .headgoal,[data-v-3ccb1d38] .goal.finished .body {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0) !important;
}
[data-v-3ccb1d38] .goal.finished .order {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0) !important;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.animation-container[data-v-a713a7e2] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn-a713a7e2 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}
@keyframes fadeIn-a713a7e2 {
from {
    opacity: 0;
    transform: scale(0.9);
}
to {
    opacity: 1;
    transform: scale(1);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-session-completed-page[data-v-7ba28666] {
  padding: var(--Spacing-spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.intervention-session-completed-page[data-v-7ba28666] {
    flex-direction: row;
    gap: 0;
    height: calc(100vh - var(--header-height, 0px));
    max-height: calc(100vh - var(--header-height, 0px));
    overflow: hidden;
}
}
@media screen and (min-width: 1280px) {
.toc-container[data-v-7ba28666] {
    width: 16.6666666667%;
    min-width: 250px;
    max-height: 100%;
    padding-right: var(--Spacing-spacing-1);
    padding-bottom: var(--Spacing-spacing-9);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}
}
@media screen and (min-width: 1536px) {
.toc-container[data-v-7ba28666] {
    padding-right: var(--Spacing-spacing-3);
}
}
.content-container[data-v-7ba28666] {
  flex: 1;
  min-width: 0;
}
@media screen and (min-width: 1280px) {
.content-container[data-v-7ba28666] {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
}
.content-inner[data-v-7ba28666] {
  max-width: 1032px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
  padding-bottom: var(--Spacing-spacing-6);
  margin: 0 auto;
}
@media screen and (min-width: 1280px) {
.content-inner[data-v-7ba28666] {
    padding-bottom: var(--Spacing-spacing-9);
}
}
.completed-header-card[data-v-7ba28666] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  background-color: var(--Dark-Scheme-Functional-wl-completed-surface);
  padding: var(--Spacing-spacing-6);
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--Spacing-spacing-5);
}
.completion-badge[data-v-7ba28666] {
  position: absolute;
  top: var(--Spacing-spacing-6);
  right: var(--Spacing-spacing-6);
  z-index: 1;
}
.right-down-arrow-element[data-v-7ba28666] {
  position: absolute;
  bottom: var(--Spacing-spacing-6);
  right: var(--Spacing-spacing-6);
  z-index: 1;
}
.image-section[data-v-7ba28666] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1;
}
.session-info[data-v-7ba28666] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-1);
}
.success-content[data-v-7ba28666] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  max-height: 200px;
}
@media screen and (min-width: 768px) {
.success-content[data-v-7ba28666] {
    width: 250px;
    max-height: 250px;
}
}
@media screen and (min-width: 1280px) {
.success-content[data-v-7ba28666] {
    width: 300px;
    max-height: 300px;
}
}
.good-job-text[data-v-7ba28666] {
  /* Display/D1 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D1);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -0.1rem;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  margin: 0;
  text-align: center;
}
.session-completed-text[data-v-7ba28666] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.session-completed-text[data-v-7ba28666] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.session-completed-text[data-v-7ba28666] {
    letter-spacing: 1.5px;
}
}
.session-completed-text[data-v-7ba28666] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}
.session-title[data-v-7ba28666] {
  /* Display/D4 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D4);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.26px;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
  margin: 0;
  line-height: 1.1;
  word-break: break-word;
  overflow-wrap: break-word;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.tabs[data-v-3be9d82d] .q-tab {
  min-height: 0;
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}
.tabs[data-v-3be9d82d] .q-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--Primary-primary-color-1);
}
.tabs[data-v-3be9d82d] .q-tab--in--active {
  text-transform: none;
  color: var(--Neutral-UI-neutral-ui-100);
}
.tabs[data-v-3be9d82d] .q-tab--inactive {
  color: var(--Neutral-UI-neutral-ui-70);
}
.tabs[data-v-3be9d82d] .q-tab__indicator {
  background-color: var(--Neutral-UI-neutral-ui-30);
}
.tabs[data-v-3be9d82d] .q-tab__content {
  padding: 0;
}
.tabs[data-v-3be9d82d] .q-tabs__arrow {
  display: none;
}
.tabs[data-v-3be9d82d] .q-tab__label {
  text-transform: none;
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.tabs[data-v-3be9d82d] .q-tabs__content {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: var(--Spacing-spacing-3);
}
.tabs[data-v-3be9d82d] .q-tabs__content .q-tab {
  flex: 0 0 auto;
}
.page[data-v-3be9d82d] {
  max-width: 1920px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  overflow-x: hidden;
}
.header-row[data-v-3be9d82d] {
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-spacing-6);
  flex-wrap: wrap;
}
.header-row[data-v-3be9d82d] .back-link {
  margin-bottom: 0;
  flex-shrink: 0;
}
.main[data-v-3be9d82d] {
  overflow-x: hidden;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.modal-inner[data-v-f75d6cf6] {
  display: flex;
  flex-direction: column;
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-5);
  border-radius: var(--card-border-radius);
  min-width: 300px;
  max-width: 480px;
}
.dialog-title[data-v-f75d6cf6] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: 0 0 var(--Spacing-spacing-4) 0;
}
.warning-message[data-v-f75d6cf6] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
  margin: 0 0 var(--Spacing-spacing-4) 0;
  line-height: 1.5;
}
.buttons[data-v-f75d6cf6] {
  display: flex;
  gap: var(--Spacing-spacing-3);
  flex-direction: column-reverse;
}
@media screen and (min-width: 640px) {
.buttons[data-v-f75d6cf6] {
    flex-direction: row;
    justify-content: flex-end;
}
}
.button[data-v-f75d6cf6] {
  width: 100%;
}
@media screen and (min-width: 640px) {
.button[data-v-f75d6cf6] {
    width: auto;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.account-tab-page[data-v-567664b6] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-5);
  margin-top: var(--Spacing-spacing-5);
}
.profile-header[data-v-567664b6] {
  margin-top: var(--Spacing-spacing-4);
  margin-bottom: var(--Spacing-spacing-6);
}
.profile-header .avatar-container[data-v-567664b6] {
  display: flex;
  align-items: center;
}
.profile-header .avatar-container[data-v-567664b6] .user-avatar .img-holder {
  width: 80px;
  height: 80px;
}
.profile-header .avatar-container[data-v-567664b6] .user-avatar .username {
  display: none;
}
.user-info-form[data-v-567664b6] {
  margin-bottom: var(--Spacing-spacing-8);
}
.user-info-form .form-row[data-v-567664b6] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  margin-bottom: var(--Spacing-spacing-6);
}
@media screen and (min-width: 768px) {
.user-info-form .form-row[data-v-567664b6] {
    flex-direction: row;
    gap: var(--Spacing-spacing-6);
}
}
.user-info-form .form-row .form-field[data-v-567664b6] {
  flex: 1;
}
.user-info-form .form-actions[data-v-567664b6] {
  margin-top: var(--Spacing-spacing-6);
  display: flex;
  justify-content: flex-start;
}
.user-info-form .form-actions .save-btn[data-v-567664b6] {
  min-width: 140px;
}
.delete-account-container[data-v-567664b6] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-7);
  margin-top: var(--Spacing-spacing-7);
  background: var(--Neutral-UI-neutral-ui-10);
}
.delete-account-container .delete-account-content[data-v-567664b6] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
}
@media screen and (min-width: 768px) {
.delete-account-container .delete-account-content[data-v-567664b6] {
    flex-direction: row;
    gap: var(--Spacing-spacing-8);
    align-items: center;
}
}
.delete-account-container .delete-account-content .delete-text-content[data-v-567664b6] {
  flex: 1;
}
.delete-account-container .delete-account-content .delete-text-content .delete-title[data-v-567664b6] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0 0 var(--Spacing-spacing-3) 0;
}
.delete-account-container .delete-account-content .delete-text-content .delete-description[data-v-567664b6] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
  margin: 0;
  line-height: 1.5;
}
.delete-account-container .delete-account-content .delete-btn[data-v-567664b6] {
  align-self: flex-start;
}
@media screen and (min-width: 768px) {
.delete-account-container .delete-account-content .delete-btn[data-v-567664b6] {
    flex-shrink: 0;
    align-self: center;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.wrap[data-v-16709100] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.spinner[data-v-16709100] {
  width: 50px;
  height: 50px;
}
@media screen and (min-width: 768px) {
.spinner[data-v-16709100] {
    width: 80px;
    height: 80px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.payment-dialog[data-v-1d7157e7] {
  position: relative;
  overflow: hidden;
  padding: var(--Spacing-spacing-4);
  padding-top: var(--Spacing-spacing-4);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
.payment-dialog[data-v-1d7157e7] {
    min-width: 460px;
}
}
.payment-state[data-v-1d7157e7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 240px;
  transition: all 0.3s ease;
  animation: fadeInUp-1d7157e7 0.4s ease-out;
}
.state-icon[data-v-1d7157e7] {
  margin-bottom: var(--Spacing-spacing-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.state-icon.error-icon[data-v-1d7157e7] {
  width: 80px;
  height: 80px;
  background: var(--Primary-primary-color-3);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(203, 109, 82, 0.2);
  animation: errorShake-1d7157e7 0.5s ease-out;
}
.state-icon.error-icon[data-v-1d7157e7] svg {
  width: 40px;
  height: 40px;
  fill: white;
}
.state-title[data-v-1d7157e7] {
  /* Heading/H2 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Neutral-UI-neutral-ui-100);
  font-weight: 600;
}
.state-title.error-title[data-v-1d7157e7] {
  color: var(--Primary-primary-color-3);
}
.state-description[data-v-1d7157e7] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
  max-width: 360px;
  line-height: 1.6;
}
.state-description.error-description[data-v-1d7157e7] {
  color: var(--Primary-primary-color-3);
  background: rgba(203, 109, 82, 0.05);
  padding: var(--Spacing-spacing-3);
  border-radius: var(--Spacing-spacing-2);
  border: 1px solid rgba(203, 109, 82, 0.1);
}
.form-state[data-v-1d7157e7] {
  align-items: center;
  text-align: center;
  position: relative;
}
.form-header[data-v-1d7157e7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-4);
  border-bottom: 2px solid var(--Neutral-UI-neutral-ui-10);
}
.form-icon[data-v-1d7157e7] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--Spacing-spacing-4);
}
.form-title[data-v-1d7157e7] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  margin-bottom: var(--Spacing-spacing-5);
  color: var(--Neutral-UI-neutral-ui-100);
}
.product-info[data-v-1d7157e7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.product-name[data-v-1d7157e7] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
}
.product-description[data-v-1d7157e7] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
  max-width: 300px;
}
.payment-amount[data-v-1d7157e7] {
  display: flex;
  align-items: baseline;
  gap: var(--Spacing-spacing-2);
}
.payment-amount .price[data-v-1d7157e7] {
  /* Metric/Metric LG */
  font-family: var(--Font-Metric-Font);
  font-size: var(--Typography-Metric---LG);
  font-style: italic;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-100);
}
.payment-amount .period[data-v-1d7157e7] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.payment-form[data-v-1d7157e7] {
  width: 100%;
}
.card-section[data-v-1d7157e7] {
  margin-bottom: var(--Spacing-spacing-5);
  text-align: left;
  width: 100%;
}
.card-label[data-v-1d7157e7] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  display: block;
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Neutral-UI-neutral-ui-90);
  line-height: 100%;
}
.card-element[data-v-1d7157e7] {
  padding: var(--Spacing-spacing-4);
  border: 2px solid var(--Neutral-UI-neutral-ui-15);
  border-radius: var(--Spacing-spacing-3);
  background: var(--Neutral-UI-neutral-ui-0);
  min-height: 56px;
  transition: all 0.3s ease;
}
.card-element[data-v-1d7157e7]:hover {
  border-color: var(--Primary-primary-color-1);
  box-shadow: 0 4px 12px rgba(93, 131, 178, 0.08);
}
.card-element[data-v-1d7157e7]:focus-within {
  border-color: var(--Primary-primary-color-1);
  box-shadow: 0 0 0 4px rgba(93, 131, 178, 0.12);
}
.card-element.has-error[data-v-1d7157e7] {
  border-color: var(--Functional-wl-error-text);
}
.form-error-message[data-v-1d7157e7] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Functional-wl-error-text);
  margin-top: var(--Spacing-spacing-2);
  line-height: 1.4;
}
.form-actions[data-v-1d7157e7],
.error-actions[data-v-1d7157e7] {
  display: flex;
  gap: var(--Spacing-spacing-3);
  flex-direction: column;
  width: 100%;
}
.pay-button[data-v-1d7157e7],
.cancel-button[data-v-1d7157e7],
.done-button[data-v-1d7157e7],
.full-width[data-v-1d7157e7] {
  width: 100%;
}
.success-state[data-v-1d7157e7] {
  min-height: 200px;
  justify-content: center;
  padding: var(--Spacing-spacing-4);
}
.success-title[data-v-1d7157e7] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-4);
}
.success-illustration[data-v-1d7157e7] {
  margin-bottom: var(--Spacing-spacing-4);
}
.success-illustration[data-v-1d7157e7] svg {
  width: 160px;
  height: auto;
}
.success-description[data-v-1d7157e7] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
  max-width: 300px;
  text-align: center;
}
.error-state[data-v-1d7157e7] {
  min-height: 200px;
  justify-content: center;
  width: 100%;
}
.loading-title[data-v-1d7157e7] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-3);
}
.loading-description[data-v-1d7157e7] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
}
.loading-icon[data-v-1d7157e7] {
  transform: scale(0.5);
  margin: calc(-1 * var(--Spacing-spacing-4)) 0;
}
.loading-overlay[data-v-1d7157e7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 400px;
}
.processing-overlay[data-v-1d7157e7] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--Neutral-UI-neutral-ui-10);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--Border-Radius-1);
}
.loading-content[data-v-1d7157e7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--Spacing-spacing-4);
}
@keyframes fadeInUp-1d7157e7 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes errorShake-1d7157e7 {
0%, 100% {
    transform: translateX(0);
}
25% {
    transform: translateX(-5px);
}
75% {
    transform: translateX(5px);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.content-locked-dialog[data-v-159dd0d4] {
  position: relative;
  overflow: hidden;
  padding: var(--Spacing-spacing-4);
  padding-top: var(--Spacing-spacing-4);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--Neutral-UI-neutral-ui-10);
  border-radius: var(--card-border-radius);
}
@media screen and (min-width: 768px) {
.content-locked-dialog[data-v-159dd0d4] {
    min-width: 460px;
}
}
.dialog-state[data-v-159dd0d4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 240px;
  transition: all 0.3s ease;
  animation: fadeInUp-159dd0d4 0.4s ease-out;
}
.dialog-icon[data-v-159dd0d4] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--Spacing-spacing-4);
}
.dialog-title[data-v-159dd0d4] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  margin-bottom: var(--Spacing-spacing-5);
  color: var(--Neutral-UI-neutral-ui-100);
}
.dialog-subtitle[data-v-159dd0d4] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-3);
}
.dialog-description[data-v-159dd0d4] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
  max-width: 360px;
  line-height: 1.6;
}
.dialog-actions[data-v-159dd0d4] {
  display: flex;
  gap: var(--Spacing-spacing-3);
  flex-direction: column;
  width: 100%;
}
.full-width[data-v-159dd0d4] {
  width: 100%;
}
.x-close-wrapper[data-v-159dd0d4] {
  position: absolute;
  right: var(--Spacing-spacing-6);
  top: var(--Spacing-spacing-6);
  background-color: inherit;
  border-radius: 50%;
}
@keyframes fadeInUp-159dd0d4 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.update-card-dialog[data-v-ce4cd8b0] {
  position: relative;
  overflow: hidden;
  padding: var(--Spacing-spacing-4);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
.update-card-dialog[data-v-ce4cd8b0] {
    min-width: 460px;
}
}
.update-state[data-v-ce4cd8b0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 240px;
  transition: all 0.3s ease;
  animation: fadeInUp-ce4cd8b0 0.4s ease-out;
}
.state-icon[data-v-ce4cd8b0] {
  margin-bottom: var(--Spacing-spacing-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.state-icon.error-icon[data-v-ce4cd8b0] {
  width: 80px;
  height: 80px;
  background: var(--Primary-primary-color-3);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(203, 109, 82, 0.2);
  animation: errorShake-ce4cd8b0 0.5s ease-out;
}
.state-icon.error-icon[data-v-ce4cd8b0] svg {
  width: 40px;
  height: 40px;
  fill: white;
}
.state-title[data-v-ce4cd8b0] {
  /* Heading/H2 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Neutral-UI-neutral-ui-100);
  font-weight: 600;
}
.state-title.error-title[data-v-ce4cd8b0] {
  color: var(--Primary-primary-color-3);
}
.state-description[data-v-ce4cd8b0] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
  max-width: 360px;
  line-height: 1.6;
}
.state-description.error-description[data-v-ce4cd8b0] {
  color: var(--Primary-primary-color-3);
  background: rgba(203, 109, 82, 0.05);
  padding: var(--Spacing-spacing-3);
  border-radius: var(--Spacing-spacing-2);
  border: 1px solid rgba(203, 109, 82, 0.1);
}
.form-state[data-v-ce4cd8b0] {
  align-items: center;
  text-align: center;
  position: relative;
}
.form-header[data-v-ce4cd8b0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-4);
  border-bottom: 2px solid var(--Neutral-UI-neutral-ui-10);
}
.form-icon[data-v-ce4cd8b0] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--Spacing-spacing-4);
}
.form-title[data-v-ce4cd8b0] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Neutral-UI-neutral-ui-100);
}
.form-description[data-v-ce4cd8b0] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  max-width: 300px;
}
.update-form[data-v-ce4cd8b0] {
  width: 100%;
}
.card-section[data-v-ce4cd8b0] {
  margin-bottom: var(--Spacing-spacing-5);
  text-align: left;
  width: 100%;
}
.card-label[data-v-ce4cd8b0] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  display: block;
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Neutral-UI-neutral-ui-90);
  line-height: 100%;
}
.card-element[data-v-ce4cd8b0] {
  padding: var(--Spacing-spacing-4);
  border: 2px solid var(--Neutral-UI-neutral-ui-15);
  border-radius: var(--Spacing-spacing-3);
  background: var(--Neutral-UI-neutral-ui-0);
  min-height: 56px;
  transition: all 0.3s ease;
}
.card-element[data-v-ce4cd8b0]:hover {
  border-color: var(--Primary-primary-color-1);
  box-shadow: 0 4px 12px rgba(93, 131, 178, 0.08);
}
.card-element[data-v-ce4cd8b0]:focus-within {
  border-color: var(--Primary-primary-color-1);
  box-shadow: 0 0 0 4px rgba(93, 131, 178, 0.12);
}
.form-actions[data-v-ce4cd8b0],
.error-actions[data-v-ce4cd8b0] {
  display: flex;
  gap: var(--Spacing-spacing-3);
  flex-direction: column;
  width: 100%;
}
.update-button[data-v-ce4cd8b0],
.cancel-button[data-v-ce4cd8b0],
.done-button[data-v-ce4cd8b0],
.full-width[data-v-ce4cd8b0] {
  width: 100%;
}
.success-state[data-v-ce4cd8b0] {
  min-height: 200px;
  justify-content: center;
  padding: var(--Spacing-spacing-4);
}
.success-title[data-v-ce4cd8b0] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-4);
}
.success-illustration[data-v-ce4cd8b0] {
  margin-bottom: var(--Spacing-spacing-4);
}
.success-illustration[data-v-ce4cd8b0] svg {
  width: 160px;
  height: auto;
}
.success-description[data-v-ce4cd8b0] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
  max-width: 300px;
  text-align: center;
}
.error-state[data-v-ce4cd8b0] {
  min-height: 200px;
  justify-content: center;
  width: 100%;
}
.loading-title[data-v-ce4cd8b0] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-3);
}
.loading-description[data-v-ce4cd8b0] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
}
.loading-icon[data-v-ce4cd8b0] {
  transform: scale(0.5);
  margin: calc(-1 * var(--Spacing-spacing-4)) 0;
}
.loading-overlay[data-v-ce4cd8b0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 400px;
}
.processing-overlay[data-v-ce4cd8b0] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--Neutral-UI-neutral-ui-10);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--Border-Radius-1);
}
.loading-content[data-v-ce4cd8b0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--Spacing-spacing-4);
}
@keyframes fadeInUp-ce4cd8b0 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes errorShake-ce4cd8b0 {
0%, 100% {
    transform: translateX(0);
}
25% {
    transform: translateX(-5px);
}
75% {
    transform: translateX(5px);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.renew-voucher-dialog[data-v-cfc4a168] {
  position: relative;
  overflow: hidden;
  padding: var(--Spacing-spacing-4);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
.renew-voucher-dialog[data-v-cfc4a168] {
    min-width: 460px;
}
}
.renewal-state[data-v-cfc4a168] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 240px;
  transition: all 0.3s ease;
  animation: fadeInUp-cfc4a168 0.4s ease-out;
}
.state-icon[data-v-cfc4a168] {
  margin-bottom: var(--Spacing-spacing-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.state-icon.error-icon[data-v-cfc4a168] {
  width: 80px;
  height: 80px;
  background: var(--Primary-primary-color-3);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(203, 109, 82, 0.2);
  animation: errorShake-cfc4a168 0.5s ease-out;
}
.state-icon.error-icon[data-v-cfc4a168] svg {
  width: 40px;
  height: 40px;
  fill: white;
}
.state-title[data-v-cfc4a168] {
  /* Heading/H2 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Neutral-UI-neutral-ui-100);
  font-weight: 600;
}
.state-title.error-title[data-v-cfc4a168] {
  color: var(--Primary-primary-color-3);
}
.state-description[data-v-cfc4a168] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
  max-width: 360px;
  line-height: 1.6;
}
.state-description.error-description[data-v-cfc4a168] {
  color: var(--Primary-primary-color-3);
  background: rgba(203, 109, 82, 0.05);
  padding: var(--Spacing-spacing-3);
  border-radius: var(--Spacing-spacing-2);
  border: 1px solid rgba(203, 109, 82, 0.1);
}
.form-state[data-v-cfc4a168] {
  align-items: center;
  text-align: center;
  position: relative;
}
.form-header[data-v-cfc4a168] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-4);
  border-bottom: 2px solid var(--Neutral-UI-neutral-ui-10);
}
.form-icon[data-v-cfc4a168] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--Spacing-spacing-4);
}
.form-icon[data-v-cfc4a168] svg,
.form-icon[data-v-cfc4a168] img {
  max-height: 100px;
  width: auto;
}
.form-title[data-v-cfc4a168] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  margin-bottom: var(--Spacing-spacing-3);
  color: var(--Neutral-UI-neutral-ui-100);
}
.form-description[data-v-cfc4a168] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  max-width: 300px;
}
.renewal-form[data-v-cfc4a168] {
  width: 100%;
}
.voucher-input[data-v-cfc4a168] {
  margin-bottom: var(--Spacing-spacing-5);
  text-align: left;
}
.form-actions[data-v-cfc4a168],
.error-actions[data-v-cfc4a168] {
  display: flex;
  gap: var(--Spacing-spacing-3);
  flex-direction: column;
  width: 100%;
}
.renew-button[data-v-cfc4a168],
.cancel-button[data-v-cfc4a168],
.done-button[data-v-cfc4a168],
.full-width[data-v-cfc4a168] {
  width: 100%;
}
.processing-state[data-v-cfc4a168] {
  min-height: 300px;
  justify-content: center;
}
.processing-title[data-v-cfc4a168] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-3);
}
.processing-description[data-v-cfc4a168] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
}
.loading-icon[data-v-cfc4a168] {
  transform: scale(0.5);
  margin: calc(-1 * var(--Spacing-spacing-4)) 0;
}
.success-state[data-v-cfc4a168] {
  min-height: 200px;
  justify-content: center;
  padding: var(--Spacing-spacing-4);
}
.success-title[data-v-cfc4a168] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-4);
}
.success-description[data-v-cfc4a168] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin-bottom: var(--Spacing-spacing-5);
  max-width: 300px;
  text-align: center;
}
.error-state[data-v-cfc4a168] {
  min-height: 200px;
  justify-content: center;
  width: 100%;
}
@keyframes fadeInUp-cfc4a168 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes errorShake-cfc4a168 {
0%, 100% {
    transform: translateX(0);
}
25% {
    transform: translateX(-5px);
}
75% {
    transform: translateX(5px);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.account-tab-page[data-v-408dac3d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-5);
  margin-top: var(--Spacing-spacing-5);
}
.current-plan-container[data-v-408dac3d] {
  position: relative;
  margin-top: var(--Spacing-spacing-5);
  border-radius: var(--Border-Radius-1);
  background: var(--Light-Scheme-Secondary-secondary-color-1);
  padding: var(--Spacing-spacing-6);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
.current-plan-container[data-v-408dac3d] {
    padding-bottom: 0;
}
}
.current-plan-container.expired[data-v-408dac3d] {
  background: var(--Light-Scheme-Secondary-secondary-color-3);
  padding-bottom: var(--Spacing-spacing-6);
}
@media screen and (min-width: 768px) {
.current-plan-container.direct-payment[data-v-408dac3d] {
    padding-bottom: var(--Spacing-spacing-6);
}
}
@media screen and (min-width: 1280px) {
.current-plan-container.direct-payment[data-v-408dac3d] {
    min-height: 280px;
    padding-bottom: 0;
}
}
.direct-payment-actions[data-v-408dac3d] {
  display: contents;
}
@media screen and (min-width: 1280px) {
.direct-payment-actions[data-v-408dac3d] {
    display: flex;
    position: absolute;
    top: 50%;
    right: var(--Spacing-spacing-6);
    transform: translateY(-50%);
    flex-direction: row;
    align-items: center;
    gap: var(--Spacing-spacing-4);
}
}
.direct-payment-actions .direct-payment-decoration[data-v-408dac3d] {
  width: 100px;
  height: 100px;
}
@media screen and (min-width: 1280px) {
.direct-payment-actions .direct-payment-decoration[data-v-408dac3d] {
    width: 250px;
    height: 250px;
}
}
.direct-payment-actions .direct-payment-decoration[data-v-408dac3d] svg {
  width: 100%;
  height: 100%;
}
.direct-payment-actions .direct-payment-btn[data-v-408dac3d] {
  order: 1;
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-10) !important;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100) !important;
}
@media screen and (min-width: 768px) {
.direct-payment-actions .direct-payment-btn[data-v-408dac3d] {
    order: unset;
    position: absolute;
    top: 50%;
    right: var(--Spacing-spacing-6);
    transform: translateY(-50%);
}
}
@media screen and (min-width: 1280px) {
.direct-payment-actions .direct-payment-btn[data-v-408dac3d] {
    position: static;
    transform: none;
}
}
.direct-payment-btn[data-v-408dac3d] {
  width: 100%;
}
@media screen and (min-width: 768px) {
.direct-payment-btn[data-v-408dac3d] {
    width: auto;
}
}
.current-plan-content[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.current-plan-chip[data-v-408dac3d] {
  align-self: flex-start;
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-10) !important;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100) !important;
}
.current-plan-grid[data-v-408dac3d] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Spacing-spacing-4);
  grid-template-areas: "decoration" "info";
}
@media screen and (min-width: 768px) {
.current-plan-grid[data-v-408dac3d] {
    grid-template-columns: 1fr auto;
    grid-template-areas: "info decoration";
    align-items: center;
}
}
.current-plan-decoration[data-v-408dac3d] {
  grid-area: decoration;
  display: flex;
  justify-content: center;
  align-items: center;
}
.current-plan-decoration[data-v-408dac3d] svg,
.current-plan-decoration[data-v-408dac3d] img {
  max-height: 150px;
  width: auto;
}
@media screen and (min-width: 768px) {
.current-plan-decoration[data-v-408dac3d] {
    justify-content: flex-end;
    align-items: flex-end;
    margin-right: var(--Spacing-spacing-6);
}
.current-plan-decoration[data-v-408dac3d] svg,
  .current-plan-decoration[data-v-408dac3d] img {
    max-height: none;
}
}
.current-plan-info[data-v-408dac3d] {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.current-plan-info .license-name[data-v-408dac3d] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
}
.current-plan-info .subscription-renewal-info[data-v-408dac3d],
.current-plan-info .gifted-license-info[data-v-408dac3d],
.current-plan-info .voucher-license-info[data-v-408dac3d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-70);
}
.current-plan-info .subscription-renewal-info .expired-text[data-v-408dac3d],
.current-plan-info .gifted-license-info .expired-text[data-v-408dac3d],
.current-plan-info .voucher-license-info .expired-text[data-v-408dac3d] {
  color: var(--Primary-primary-color-3);
}
.current-plan-info .subscription-renewal-info .choose-plan-message[data-v-408dac3d],
.current-plan-info .gifted-license-info .choose-plan-message[data-v-408dac3d],
.current-plan-info .voucher-license-info .choose-plan-message[data-v-408dac3d] {
  display: block;
  margin-top: var(--Spacing-spacing-2);
}
.current-plan-info .expired-license-info[data-v-408dac3d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-70);
}
.current-plan-info .expired-license-info .renew-voucher-btn[data-v-408dac3d] {
  margin-top: var(--Spacing-spacing-2);
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-20);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
}
.payment-method-container[data-v-408dac3d] {
  margin-top: var(--Spacing-spacing-5);
}
.payment-method-content[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
}
.payment-method-details[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.payment-method-details[data-v-408dac3d] {
    flex-direction: row;
    gap: var(--Spacing-spacing-8);
}
}
.payment-detail[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
}
.payment-detail .payment-label[data-v-408dac3d] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.payment-detail .payment-value[data-v-408dac3d] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  border-bottom: 1px solid var(--Neutral-UI-neutral-ui-30);
  padding-bottom: var(--Spacing-spacing-2);
}
@media screen and (min-width: 768px) {
.payment-detail-number[data-v-408dac3d] {
    flex: 2;
    max-width: 400px;
}
}
@media screen and (min-width: 768px) {
.payment-detail-expires[data-v-408dac3d] {
    flex: 1;
    max-width: 150px;
}
}
.update-card-btn[data-v-408dac3d] {
  width: 100%;
}
@media screen and (min-width: 768px) {
.update-card-btn[data-v-408dac3d] {
    width: auto;
    align-self: flex-start;
}
}
.no-payment-method[data-v-408dac3d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.purchasable-licenses-section[data-v-408dac3d] {
  margin-top: var(--Spacing-spacing-5);
}
.current-plan-chip-skeleton[data-v-408dac3d] {
  border-radius: 20px;
}
.skeleton-decoration[data-v-408dac3d] {
  border-radius: var(--Border-Radius-1);
  height: 280px;
}
.skeleton-btn[data-v-408dac3d] {
  border-radius: var(--button-border-radius);
}
.no-licenses-available[data-v-408dac3d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  /* Display/D4 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D4);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.26px;
  padding: var(--Spacing-spacing-8);
  color: var(--Neutral-UI-neutral-ui-100);
  text-align: center;
}
.licenses-grid[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.licenses-grid[data-v-408dac3d] {
    flex-direction: row;
    justify-content: flex-start;
}
}
.license-card[data-v-408dac3d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--Spacing-spacing-7);
}
@media screen and (min-width: 1280px) {
.license-card[data-v-408dac3d] {
    max-width: 480px;
}
}
.license-card-content[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--Spacing-spacing-4);
  width: 100%;
}
.license-card-content .license-name[data-v-408dac3d] {
  /* Display/D4 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D4);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-100);
}
.license-card-content .license-description[data-v-408dac3d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.license-card-content .license-price-container[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.license-card-content .license-price[data-v-408dac3d] {
  /* Metric/Metric LG */
  font-family: var(--Font-Metric-Font);
  font-size: var(--Typography-Metric---LG);
  font-style: italic;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-100);
}
.license-card-content .license-period[data-v-408dac3d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.license-card-content .select-plan-btn[data-v-408dac3d] {
  width: 100%;
}
.payment-history-container[data-v-408dac3d] {
  margin-top: var(--Spacing-spacing-5);
}
.contracts-cards[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.contracts-cards[data-v-408dac3d] {
    display: none;
}
}
.contract-card[data-v-408dac3d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-5);
  border-radius: var(--Border-Radius-1);
}
.contract-card-header[data-v-408dac3d] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--Spacing-spacing-3);
  margin-bottom: var(--Spacing-spacing-4);
  padding-bottom: var(--Spacing-spacing-4);
  border-bottom: 1px solid var(--Neutral-UI-neutral-ui-20);
}
.contract-plan-name[data-v-408dac3d] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  flex: 1;
}
.contract-cost[data-v-408dac3d] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  white-space: nowrap;
}
.contract-card-dates[data-v-408dac3d] {
  display: flex;
  gap: var(--Spacing-spacing-6);
}
.date-item[data-v-408dac3d] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
}
.date-label[data-v-408dac3d] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.date-value[data-v-408dac3d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
}
.contracts-table-container[data-v-408dac3d] {
  display: none;
}
@media screen and (min-width: 768px) {
.contracts-table-container[data-v-408dac3d] {
    display: block;
    border-radius: var(--card-border-radius);
    background: var(--Neutral-UI-neutral-ui-20);
    background: var(--Neutral-UI-neutral-ui-0);
    border-radius: var(--Border-Radius-1);
    overflow: hidden;
}
}
.contracts-table[data-v-408dac3d] {
  width: 100%;
  border-collapse: collapse;
}
.contracts-table thead[data-v-408dac3d] {
  background: var(--Neutral-UI-neutral-ui-10);
}
.contracts-table thead th[data-v-408dac3d] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  padding: var(--Spacing-spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--Neutral-UI-neutral-ui-30);
}
.contracts-table thead th.plan-column[data-v-408dac3d] {
  width: auto;
  min-width: 200px;
}
.contracts-table thead th.cost-column[data-v-408dac3d], .contracts-table thead th.start-column[data-v-408dac3d], .contracts-table thead th.end-column[data-v-408dac3d] {
  width: 120px;
  text-align: center;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
.contracts-table thead th.cost-column[data-v-408dac3d], .contracts-table thead th.start-column[data-v-408dac3d], .contracts-table thead th.end-column[data-v-408dac3d] {
    width: 140px;
}
}
.contracts-table tbody .contract-row[data-v-408dac3d] {
  border-bottom: 1px solid var(--Neutral-UI-neutral-ui-20);
}
.contracts-table tbody .contract-row[data-v-408dac3d]:last-child {
  border-bottom: none;
}
.contracts-table tbody .contract-row td[data-v-408dac3d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
  padding: var(--Spacing-spacing-4);
}
.contracts-table tbody .contract-row td.plan-cell[data-v-408dac3d] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.contracts-table tbody .contract-row td.cost-cell[data-v-408dac3d], .contracts-table tbody .contract-row td.start-cell[data-v-408dac3d], .contracts-table tbody .contract-row td.end-cell[data-v-408dac3d] {
  text-align: center;
  white-space: nowrap;
}
.contracts-table tbody .contract-row td.cost-cell[data-v-408dac3d] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.no-contracts-available[data-v-408dac3d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  /* Display/D4 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D4);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.26px;
  padding: var(--Spacing-spacing-8);
  color: var(--Neutral-UI-neutral-ui-100);
  text-align: center;
}
@media screen and (min-width: 640px) {
.contracts-table thead th[data-v-408dac3d] {
    padding: var(--Spacing-spacing-5);
}
.contracts-table tbody td[data-v-408dac3d] {
    padding: var(--Spacing-spacing-5);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.account-tab-page[data-v-4a4822aa] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-5);
  margin-top: var(--Spacing-spacing-5);
}
.security-content[data-v-4a4822aa] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
  margin-top: var(--Spacing-spacing-5);
}
@media screen and (min-width: 768px) {
.security-content[data-v-4a4822aa] {
    flex-direction: row;
    gap: var(--Spacing-spacing-6);
}
}
.security-section[data-v-4a4822aa] {
  flex: 1;
}
@media screen and (min-width: 768px) {
.security-section.left-section[data-v-4a4822aa] {
    flex: 1;
}
}
@media screen and (min-width: 768px) {
.security-section.right-section[data-v-4a4822aa] {
    flex: 1;
}
}
.change-password-title[data-v-4a4822aa] {
  /* Heading/H3 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-5);
}
.change-password-form[data-v-4a4822aa] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.password-requirements-card[data-v-4a4822aa] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-20);
  display: flex;
  flex-direction: column;
  padding: var(--Spacing-spacing-4);
  margin: var(--Spacing-spacing-4) 0;
  gap: var(--Spacing-spacing-3);
  max-width: fit-content;
}
.password-requirements-card .title[data-v-4a4822aa] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.password-requirements-card .requirements-list[data-v-4a4822aa] {
  margin: 0;
  padding: 0 var(--Spacing-spacing-4);
  list-style-type: disc;
}
.password-requirements-card .requirements-list li[data-v-4a4822aa] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-2);
  line-height: 1.4;
}
.password-requirements-card .requirements-list li[data-v-4a4822aa]:last-child {
  margin-bottom: 0;
}
.change-passw-submt[data-v-4a4822aa] {
  margin-top: var(--Spacing-spacing-2);
  align-self: flex-start;
}
.consents-content[data-v-4a4822aa] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.consents-content .consent-card[data-v-4a4822aa] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-4);
}
.consents-content .consent-card .consent-header[data-v-4a4822aa] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--Spacing-spacing-3);
}
.consents-content .consent-card .consent-title[data-v-4a4822aa] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: 0;
}
.consents-content .consent-card .consent-description[data-v-4a4822aa] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
  line-height: 1.5;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.badge-card[data-v-95a0ff38] {
  display: flex;
  height: auto;
  min-height: 350px;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-6) var(--Spacing-spacing-7) var(--Spacing-spacing-6);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-5);
  flex: 1 0 0;
  border-radius: var(--card-border-radius, 12px);
  background: var(--Neutral-UI-surface, var(--Light-Scheme-Neutral-UI-neutral-ui-10));
  position: relative;
  transition: transform 0.2s ease;
}
@media screen and (min-width: 768px) {
.badge-card[data-v-95a0ff38] {
    min-height: 400px;
}
}
@media screen and (min-width: 1280px) {
.badge-card[data-v-95a0ff38] {
    min-height: 450px;
}
}
@media (prefers-reduced-motion: reduce) {
.badge-card[data-v-95a0ff38] {
    transition: none;
}
}
:root[data-theme=dark][data-v-95a0ff38] :where(.badge-card) {
  background: var(--Dark-Scheme-Neutral-UI-neutral-ui-10);
}
.badge-card-locked[data-v-95a0ff38] {
  display: flex;
  height: auto;
  min-height: 249px;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-6) var(--Spacing-spacing-7) var(--Spacing-spacing-6);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-5);
  flex: 1 0 0;
  border-radius: var(--card-border-radius, 12px);
  position: relative;
}
@media screen and (min-width: 768px) {
.badge-card-locked[data-v-95a0ff38] {
    min-height: 282px;
}
}
@media screen and (min-width: 1280px) {
.badge-card-locked[data-v-95a0ff38] {
    min-height: 316px;
}
}
.badge-card-locked .badge-image-container[data-v-95a0ff38] {
  filter: grayscale(100%);
}
.badge-top[data-v-95a0ff38] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  width: 100%;
}
.badge-header[data-v-95a0ff38] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.badge-image-container[data-v-95a0ff38] {
  width: var(--Spacing-spacing-10, 92px);
  height: var(--Spacing-spacing-10, 92px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-image-container .badge-image[data-v-95a0ff38] {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.badge-image-loading[data-v-95a0ff38] {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-20) !important;
}
.badge-earned-info[data-v-95a0ff38] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.badge-check[data-v-95a0ff38] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Functional-wl-completed-surface);
  border-radius: 50%;
  padding: 6px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.badge-check .checkmark-icon[data-v-95a0ff38] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0) !important;
  width: 16px;
  height: 16px;
}
.badge-earned-count[data-v-95a0ff38] {
  /* Metric/Metric MD */
  font-family: var(--Font-Metric-Font);
  font-size: var(--Typography-Metric---MD);
  font-style: italic;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-70) !important;
  font-size: 18px;
}
@media screen and (min-width: 768px) {
.badge-earned-count[data-v-95a0ff38] {
    font-size: 20px;
}
}
@media screen and (min-width: 1280px) {
.badge-earned-count[data-v-95a0ff38] {
    font-size: 24px;
}
}
.badge-content[data-v-95a0ff38] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  width: 100%;
}
.badge-main-content[data-v-95a0ff38] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-3);
}
.badge-content .badge-title[data-v-95a0ff38] {
  /* Display/D5 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D5);
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
  letter-spacing: -0.96px;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100) !important;
  margin: 0;
}
.badge-content .badge-description[data-v-95a0ff38] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-60) !important;
  margin: 0;
}
.badge-content .badge-metadata .first-earned[data-v-95a0ff38] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.badge-content .badge-metadata .first-earned[data-v-95a0ff38] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.badge-content .badge-metadata .first-earned[data-v-95a0ff38] {
    letter-spacing: 1.5px;
}
}
.badge-content .badge-metadata .first-earned[data-v-95a0ff38] {
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-60) !important;
}
.badge-card-locked .badge-content .badge-title[data-v-95a0ff38] {
  color: var(--Neutral-UI-neutral-ui-60) !important;
}
.badge-card-locked .badge-content .badge-description[data-v-95a0ff38] {
  color: var(--Neutral-UI-neutral-ui-60) !important;
}
.badge-card-locked .badge-earned-count[data-v-95a0ff38],
.badge-card-locked .badge-content .badge-metadata .first-earned[data-v-95a0ff38] {
  color: var(--Neutral-UI-neutral-ui-60) !important;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.badge-stats-card[data-v-91929652] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-6);
  background: var(--Neutral-UI-neutral-ui-10);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  flex: 1;
  min-width: 0;
}
.stats-content[data-v-91929652] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
}
.stats-content .stats-value[data-v-91929652] {
  /* Metric/Metric LG */
  font-family: var(--Font-Metric-Font);
  font-size: var(--Typography-Metric---LG);
  font-style: italic;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-100);
}
.stats-content .stats-title[data-v-91929652] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.account-tab-page[data-v-f762d24a] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-5);
  margin-top: var(--Spacing-spacing-5);
}
.error-container[data-v-f762d24a],
.empty-container[data-v-f762d24a] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--Spacing-spacing-10) var(--Spacing-spacing-5);
  min-height: 200px;
}
.skeleton-container[data-v-f762d24a] {
  display: flex;
  flex-direction: column;
}
.skeleton-stats-card[data-v-f762d24a] {
  height: 180px;
  border-radius: var(--card-border-radius);
}
.skeleton-select[data-v-f762d24a] {
  width: 140px;
  height: 40px;
  border-radius: var(--card-border-radius);
}
.skeleton-badge-card[data-v-f762d24a] {
  height: 120px;
  border-radius: var(--card-border-radius);
}
.error-message[data-v-f762d24a],
.empty-message[data-v-f762d24a] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-80);
  text-align: center;
  margin: 0;
}
.stats-header[data-v-f762d24a] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--Spacing-spacing-3);
  margin-top: var(--Spacing-spacing-5);
  margin-bottom: var(--Spacing-spacing-6);
}
@media screen and (min-width: 640px) {
.stats-header[data-v-f762d24a] {
    grid-template-columns: repeat(2, 1fr);
}
}
.filter-section[data-v-f762d24a] {
  display: flex;
  gap: var(--Spacing-spacing-4);
  flex-wrap: wrap;
  margin-top: var(--Spacing-spacing-6);
  margin-bottom: var(--Spacing-spacing-6);
}
.filter-section .filter-select[data-v-f762d24a],
.filter-section .sort-select[data-v-f762d24a] {
  flex: 0 0 auto;
  width: auto;
}
.badges-grid[data-v-f762d24a] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.badges-grid[data-v-f762d24a] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1280px) {
.badges-grid[data-v-f762d24a] {
    grid-template-columns: repeat(3, 1fr);
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.account-tab-page[data-v-d2829e61] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-5);
  margin-top: var(--Spacing-spacing-5);
}
.preferences-content[data-v-d2829e61] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
  margin-top: var(--Spacing-spacing-5);
}
@media screen and (min-width: 768px) {
.preferences-content[data-v-d2829e61] {
    flex-direction: row;
    gap: var(--Spacing-spacing-6);
}
}
.preferences-column[data-v-d2829e61] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
}
.preferences-section .section-title[data-v-d2829e61] {
  /* Heading/H3 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-3);
}
.card[data-v-d2829e61] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
  padding: var(--Spacing-spacing-4);
}
.card .card-label[data-v-d2829e61] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  display: block;
  margin-bottom: var(--Spacing-spacing-2);
}
.toggle-card[data-v-d2829e61] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--Spacing-spacing-4);
}
.toggle-card .description[data-v-d2829e61] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.form-actions[data-v-d2829e61] {
  margin-top: var(--Spacing-spacing-6);
  display: flex;
  justify-content: flex-start;
}
.form-actions .save-btn[data-v-d2829e61] {
  min-width: 140px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-hero[data-v-ab5bde8c] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  min-height: 300px;
  padding: 24px 32px 24px 24px;
  background-color: var(--Light-Scheme-Functional-wl-current-surface);
}
.intervention-hero.blue[data-v-ab5bde8c] {
  background-color: var(--Light-Scheme-Functional-wl-current-surface);
}
.intervention-hero.green[data-v-ab5bde8c] {
  background-color: var(--Light-Scheme-Secondary-secondary-color-2);
}
@media screen and (min-width: 768px) {
.intervention-hero[data-v-ab5bde8c] {
    min-height: 500px;
    padding: 32px 42px 32px 32px;
}
}
@media screen and (min-width: 1280px) {
.intervention-hero[data-v-ab5bde8c] {
    padding: 40px 48px 40px 40px;
}
}
.intervention-hero-back[data-v-ab5bde8c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 4px;
}
.back-btn[data-v-ab5bde8c] {
  color: var(--Functional-wl-current-text);
  border-radius: var(--Border-Radius-1);
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.grid-container[data-v-ab5bde8c] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 12px;
  grid-template-areas: "image" "info";
  align-items: flex-end;
}
@media screen and (min-width: 768px) {
.grid-container[data-v-ab5bde8c] {
    gap: 16px;
}
}
@media screen and (min-width: 1280px) {
.grid-container[data-v-ab5bde8c] {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    grid-template-areas: "info image";
    gap: 24px;
}
}
.label[data-v-ab5bde8c] {
  color: var(--Light-Scheme-Functional-wl-current-text);
  padding-right: 4px;
}
.info[data-v-ab5bde8c] {
  grid-area: info;
}
.image[data-v-ab5bde8c] {
  grid-area: image;
  object-fit: contain !important;
}
@media screen and (min-width: 768px) {
.image[data-v-ab5bde8c] {
    max-height: 500px !important;
}
}
@media screen and (min-width: 1280px) {
.image[data-v-ab5bde8c] {
    max-height: 600px !important;
}
}
.image[data-v-ab5bde8c] .q-img__image {
  object-fit: contain !important;
}
.caption[data-v-ab5bde8c] {
  color: var(--Light-Scheme-Functional-wl-current-text);
  border: 0px;
  padding: 0px;
  margin-bottom: 4px;
}
@media screen and (min-width: 768px) {
.caption[data-v-ab5bde8c] {
    margin-bottom: 8px;
}
}
@media screen and (min-width: 1280px) {
.caption[data-v-ab5bde8c] {
    margin-bottom: 12px;
}
}
.title[data-v-ab5bde8c] {
  color: var(--Light-Scheme-Functional-wl-current-text);
  margin-bottom: 16px;
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
}
@media screen and (min-width: 768px) {
.title[data-v-ab5bde8c] {
    margin-bottom: 24px;
}
}
@media screen and (min-width: 1280px) {
.title[data-v-ab5bde8c] {
    margin-bottom: 32px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-landing-description[data-v-129e510b] {
  padding: 32px 42px 42px 24px;
}
@media screen and (min-width: 768px) {
.intervention-landing-description[data-v-129e510b] {
    padding: 42px 48px 48px 32px;
}
}
@media screen and (min-width: 1280px) {
.intervention-landing-description[data-v-129e510b] {
    padding: 48px 64px 64px 40px;
}
}
.title[data-v-129e510b] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
.title[data-v-129e510b] {
    margin-bottom: 16px;
}
}
@media screen and (min-width: 1280px) {
.title[data-v-129e510b] {
    margin-bottom: 24px;
}
}
.description[data-v-129e510b] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  max-width: 900px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.router-link-with-origin[data-v-1a5170eb] {
  display: block;
  border-radius: var(--Border-Radius-3);
}
.router-link-with-origin[data-v-1a5170eb]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1);
  outline-offset: 2px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.session[data-v-6837f6e0] {
  width: 248px;
  min-height: 260px;
  border-radius: var(--Border-Radius-3);
  background-color: var(--Neutral-UI-neutral-ui-20);
  display: flex;
  flex-direction: column;
  padding: 12px 12px 16px 12px;
}
@media screen and (min-width: 768px) {
.session[data-v-6837f6e0] {
    padding: 16px 16px 24px 16px;
}
}
@media screen and (min-width: 1280px) {
.session[data-v-6837f6e0] {
    padding: 24px 24px 32px 24px;
}
}
.session.blue[data-v-6837f6e0] {
  background-color: var(--Secondary-secondary-color-1);
}
.session.green[data-v-6837f6e0] {
  background-color: var(--Light-Scheme-Functional-wl-completed-surface);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-10);
}
.img[data-v-6837f6e0] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
.img[data-v-6837f6e0] {
    width: 24px;
    height: 24px;
    margin-bottom: 12px;
}
}
@media screen and (min-width: 1280px) {
.img[data-v-6837f6e0] {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
}
}
.session-index[data-v-6837f6e0] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: 0;
}
.session-name[data-v-6837f6e0] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: 0;
}
.status[data-v-6837f6e0] {
  margin-top: auto;
}
.progress[data-v-6837f6e0] {
  width: 50%;
}
.completed[data-v-6837f6e0] {
  display: flex;
  gap: 8px;
}
.in-progress[data-v-6837f6e0] {
  display: flex;
  justify-content: space-between;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-landing-sessions[data-v-d235963b] {
  padding: 32px 0px 42px 0px;
}
@media screen and (min-width: 768px) {
.intervention-landing-sessions[data-v-d235963b] {
    padding: 42px 0px 48px 0px;
}
}
@media screen and (min-width: 1280px) {
.intervention-landing-sessions[data-v-d235963b] {
    padding: 48px 0px 64px 0px;
}
}
.title[data-v-d235963b] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: 16px;
  padding-left: 24px;
}
@media screen and (min-width: 768px) {
.title[data-v-d235963b] {
    margin-bottom: 24px;
    padding-left: 32px;
}
}
@media screen and (min-width: 1280px) {
.title[data-v-d235963b] {
    margin-bottom: 32px;
    padding-left: 40px;
}
}
.sessions[data-v-d235963b] {
  display: flex;
  gap: 8px;
  padding: 6px 24px;
}
@media screen and (min-width: 768px) {
.sessions[data-v-d235963b] {
    gap: 12px;
    padding: 6px 32px;
}
}
@media screen and (min-width: 1280px) {
.sessions[data-v-d235963b] {
    gap: 16px;
    padding: 6px 40px;
}
}
.sessions-grab[data-v-d235963b] {
  cursor: grab;
  user-select: none;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.goal[data-v-7c503df3] {
  width: 240px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-7) var(--Spacing-spacing-9) var(--Spacing-spacing-6);
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Neutral-UI-neutral-ui-10);
}
@media screen and (min-width: 768px) {
.goal[data-v-7c503df3] {
    min-width: 240px;
}
}
@media screen and (min-width: 1280px) {
.goal[data-v-7c503df3] {
    width: 320px;
}
}
.order[data-v-7c503df3] {
  /* Metric/Metric LG */
  font-family: var(--Font-Metric-Font);
  font-size: var(--Typography-Metric---LG);
  font-style: italic;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -1.26px;
}
.name[data-v-7c503df3] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-2);
}
.body[data-v-7c503df3] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  flex: 1; /* Make the body take up the remaining space */
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-landing-goals[data-v-c4d3b66a] {
  border-radius: var(--Border-Radius-1);
  background-color: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-7) 0 var(--Spacing-spacing-8) var(--Spacing-spacing-6);
}
.title[data-v-c4d3b66a] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
.title[data-v-c4d3b66a] {
    margin-bottom: 24px;
}
}
@media screen and (min-width: 1280px) {
.title[data-v-c4d3b66a] {
    margin-bottom: 32px;
}
}
.goals[data-v-c4d3b66a] {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--Spacing-spacing-2);
  padding-right: var(--Spacing-spacing-6);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.goals[data-v-c4d3b66a]::-webkit-scrollbar {
  display: none;
}
.goals .goal[data-v-c4d3b66a] {
  scroll-snap-align: start;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.goals[data-v-c4d3b66a] {
    gap: 8px;
}
}
@media screen and (min-width: 1280px) {
.goals[data-v-c4d3b66a] {
    gap: 12px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-landing-recap[data-v-bd2c4c96] {
  border-radius: var(--Border-Radius-1);
  background-color: var(--Neutral-UI-neutral-ui-0);
  padding: 32px 24px 42px 24px;
}
@media screen and (min-width: 768px) {
.intervention-landing-recap[data-v-bd2c4c96] {
    padding: 42px 32px 48px 32px;
}
}
@media screen and (min-width: 1280px) {
.intervention-landing-recap[data-v-bd2c4c96] {
    padding: 48px 40px 64px 40px;
}
}
.title[data-v-bd2c4c96] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
.title[data-v-bd2c4c96] {
    margin-bottom: 24px;
}
}
@media screen and (min-width: 1280px) {
.title[data-v-bd2c4c96] {
    margin-bottom: 32px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.intervention-landing-page[data-v-1f1d4bbf] {
  max-width: 1920px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
.intervention-landing-page[data-v-1f1d4bbf] {
    gap: 24px;
}
}
@media screen and (min-width: 1280px) {
.intervention-landing-page[data-v-1f1d4bbf] {
    gap: 32px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.company-badge[data-v-aa61ab60] {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(60px, 12%, 120px);
  height: auto;
  pointer-events: none;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.block-content-band[data-v-80079ea4] {
  width: 100%;
  margin-top: var(--Spacing-spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.band-header[data-v-80079ea4] {
  padding: 0 var(--Spacing-spacing-5);
}
@media screen and (min-width: 768px) {
.band-header[data-v-80079ea4] {
    padding: 0;
}
}
.band-title[data-v-80079ea4] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-8);
  margin: 0;
}
.content-scroll-container[data-v-80079ea4] {
  height: 310px;
  padding: 0 var(--Spacing-spacing-5) var(--Spacing-spacing-1);
}
@media screen and (min-width: 768px) {
.content-scroll-container[data-v-80079ea4] {
    height: 350px;
    padding: 0 0 var(--Spacing-spacing-1);
}
}
.content-items[data-v-80079ea4] {
  display: flex;
  gap: var(--Spacing-spacing-4);
  padding: 6px 4px var(--Spacing-spacing-2) 4px;
  /* Ensure items don't wrap and allow horizontal scrolling */
  flex-wrap: nowrap;
  cursor: grab;
  user-select: none;
}
.content-item[data-v-80079ea4] {
  /* Make items smaller on mobile, larger on desktop */
  flex: 0 0 200px;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  transition: transform 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.content-item[data-v-80079ea4]:hover {
  transform: translateY(-2px);
}
.content-item[data-v-80079ea4]:focus {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
@media screen and (min-width: 768px) {
.content-item[data-v-80079ea4] {
    flex: 0 0 var(--Grid-Responsiveness-col-2-2-2, 246px);
}
}
.content-image[data-v-80079ea4] {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: var(--Neutral-UI-neutral-ui-1);
  border-radius: var(--card-border-radius);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
.content-image[data-v-80079ea4] {
    height: var(--Spacing-spacing-12, 188px);
}
}
.item-image[data-v-80079ea4] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-button-static[data-v-80079ea4] {
  position: absolute;
  top: var(--Spacing-spacing-3);
  left: var(--Spacing-spacing-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-icon[data-v-80079ea4] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.content-info[data-v-80079ea4] {
  padding: var(--Spacing-spacing-4) 0;
}
.content-category[data-v-80079ea4] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
  margin-bottom: 0;
}
.content-title[data-v-80079ea4] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-8);
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recommendation-card-featured[data-v-681ff41d] {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
[data-v-681ff41d] .rec-link {
  width: 100%;
}
.card-content[data-v-681ff41d] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.card-content[data-v-681ff41d]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.card-content[data-v-681ff41d] {
  border-radius: var(--card-border-radius);
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.card-content[data-v-681ff41d] {
    flex-direction: row;
    gap: var(--Spacing-spacing-4);
}
}
.img-container[data-v-681ff41d] {
  position: relative;
  max-height: 350px;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  min-height: 275px;
}
@media screen and (min-width: 768px) {
.img-container[data-v-681ff41d] {
    min-height: 450px;
}
}
@media screen and (min-width: 768px) {
.img-container[data-v-681ff41d] {
    width: 70%;
}
}
.img[data-v-681ff41d] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img[data-v-681ff41d] .q-img__container {
  border-radius: var(--card-border-radius);
}
.img[data-v-681ff41d] .q-img__image {
  object-fit: cover;
}
.img[data-v-681ff41d] .q-skeleton {
  border-radius: var(--card-border-radius);
}
.card-section[data-v-681ff41d] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  min-height: 275px;
}
@media screen and (min-width: 768px) {
.card-section[data-v-681ff41d] {
    min-height: 450px;
}
}
.card-section[data-v-681ff41d] {
  max-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--Spacing-spacing-8) var(--Spacing-spacing-7) var(--Spacing-spacing-7) var(--Spacing-spacing-6);
}
@media screen and (min-width: 768px) {
.card-section[data-v-681ff41d] {
    width: 30%;
}
}
.description-content-container[data-v-681ff41d] {
  display: flex;
  flex-direction: column;
}
.media-type[data-v-681ff41d] .media-type-label {
  /* Caption/Caption */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---LG);
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}
.media-type[data-v-681ff41d] {
  padding-bottom: var(--Spacing-spacing-3);
}
.title-box[data-v-681ff41d] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: var(--Spacing-spacing-4);
}
.title[data-v-681ff41d] {
  /* Heading/H3 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.content[data-v-681ff41d] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: var(--Spacing-spacing-4);
}
.description[data-v-681ff41d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  font-weight: 500;
  color: var(--Neutral-UI-neutral-ui-70);
}
.call-to-action[data-v-681ff41d] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--Spacing-spacing-4);
}
.call-to-action-label[data-v-681ff41d] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  font-weight: 700;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recco-featured-recommendation[data-v-957946e3] {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
  width: 100%;
  min-height: 275px;
}
@media screen and (min-width: 768px) {
.recco-featured-recommendation[data-v-957946e3] {
    min-height: 450px;
}
}
.recco-featured-recommendation[data-v-957946e3] {
  margin-bottom: var(--Spacing-spacing-4);
}
.featured-recommendation-header[data-v-957946e3] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--Spacing-spacing-4);
  gap: var(--Spacing-spacing-2);
}
.title[data-v-957946e3] {
  /* Heading/H1 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recco-topic-card[data-v-41158e4b] {
  width: 100%;
  min-height: 200px;
  display: block;
}
.link[data-v-41158e4b] {
  position: relative;
  display: block;
  width: 100%;
  min-height: 200px;
  padding: var(--Spacing-spacing-4);
  gap: var(--Spacing-spacing-2);
  background-color: var(--Neutral-UI-neutral-ui-20);
  border-radius: var(--Border-Radius-3);
  overflow: hidden;
  cursor: pointer;
}
.link[data-v-41158e4b]:hover, .link[data-v-41158e4b]:focus {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: var(--Neutral-UI-neutral-ui-30);
}
.link[data-v-41158e4b]:focus {
  outline: 2px solid var(--Primary-primary-color-1);
  outline-offset: 2px;
}
.card-content[data-v-41158e4b] {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: var(--Spacing-spacing-4);
}
.headline[data-v-41158e4b] {
  color: var(--Neutral-UI-neutral-ui-100);
  margin-bottom: var(--Spacing-spacing-1);
}
.caption[data-v-41158e4b] {
  color: var(--Neutral-UI-neutral-ui-80);
}
.card-image[data-v-41158e4b] {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  min-width: 200px;
  height: 80px;
  overflow: hidden;
  border-bottom-left-radius: 100px;
  background-color: var(--Neutral-UI-neutral-ui-40);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recco-topics-preview-section[data-v-ad4f572a] {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  min-height: 376px;
  margin-bottom: var(--Spacing-spacing-8);
  width: 100%;
  min-height: 275px;
}
@media screen and (min-width: 768px) {
.recco-topics-preview-section[data-v-ad4f572a] {
    min-height: 450px;
}
}
.topics-nav[data-v-ad4f572a] {
  width: 100%;
}
.cards-container[data-v-ad4f572a] {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--Spacing-spacing-4);
  width: 100%;
}
@media screen and (min-width: 640px) {
.cards-container[data-v-ad4f572a] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1280px) {
.cards-container[data-v-ad4f572a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
}
.title[data-v-ad4f572a] {
  padding-top: var(--Spacing-spacing-2);
  padding-bottom: var(--Spacing-spacing-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.headline[data-v-38d6963e] {
  margin-bottom: var(--Spacing-spacing-2);
}
.challenges[data-v-38d6963e] {
  display: flex;
  padding: 0;
  margin: 0;
}
.challenge[data-v-38d6963e] {
  display: block;
  width: 350px;
  height: 450px;
  min-height: 400px;
  padding: var(--Spacing-spacing-2);
  border-radius: var(--border-radius);
}
@media screen and (min-width: 768px) {
.challenge[data-v-38d6963e] {
    height: 500px;
}
}
@media screen and (min-width: 1280px) {
.challenge[data-v-38d6963e] {
    height: 600px;
}
}
.item-container[data-v-38d6963e] {
  margin: 0 calc(var(--Spacing-spacing-2) * -1);
  position: relative;
}
.item-container[data-v-38d6963e]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 15px;
  width: 5px;
  z-index: 1;
  background: linear-gradient(to right, var(--body-background-color) 0%, color-mix(in srgb, var(--body-background-color), transparent 100%) 100%);
}
.item-container[data-v-38d6963e]:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 15px;
  width: 5px;
  z-index: 1;
  background: linear-gradient(to left, var(--body-background-color) 0%, color-mix(in srgb, var(--body-background-color), transparent 100%) 100%);
}
.scroll-area[data-v-38d6963e] {
  height: calc(450px + var(--Spacing-spacing-2));
}
@media screen and (min-width: 768px) {
.scroll-area[data-v-38d6963e] {
    height: calc(500px + var(--Spacing-spacing-2));
}
}
@media screen and (min-width: 1280px) {
.scroll-area[data-v-38d6963e] {
    height: calc(600px + var(--Spacing-spacing-2));
}
}
.link[data-v-38d6963e]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.link[data-v-38d6963e] {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  background: var(--Secondary-secondary-color-5);
  overflow: hidden;
  gap: var(--Spacing-spacing-4);
  padding: var(--Spacing-spacing-10) var(--Spacing-spacing-4) var(--Spacing-spacing-4) var(--Spacing-spacing-4);
}
.link[data-v-38d6963e]:hover, .link[data-v-38d6963e]:focus-visible {
  text-decoration: underline;
}
.hexagon[data-v-38d6963e] {
  width: 256px;
  height: 256px;
  background: var(--Primary-primary-color-5);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.image-small[data-v-38d6963e] {
  width: 60px;
  height: 60px;
}
.image-large[data-v-38d6963e] {
  position: absolute;
  bottom: -45px;
  right: -45px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.explore-page[data-v-fc8fdfd5] {
  max-width: 1920px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
}
.skeleton-wrapper[data-v-fc8fdfd5] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
}
.skeleton-featured-section[data-v-fc8fdfd5] {
  margin-bottom: var(--Spacing-spacing-4);
}
.skeleton-header[data-v-fc8fdfd5] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
  margin-bottom: var(--Spacing-spacing-4);
}
.skeleton-featured-card[data-v-fc8fdfd5] {
  width: 100%;
  height: 250px;
  border-radius: var(--card-border-radius);
}
@media screen and (min-width: 768px) {
.skeleton-featured-card[data-v-fc8fdfd5] {
    height: 450px;
}
}
@media screen and (min-width: 1280px) {
.skeleton-featured-card[data-v-fc8fdfd5] {
    height: 450px;
}
}
.skeleton-band-section[data-v-fc8fdfd5] {
  margin-bottom: var(--Spacing-spacing-4);
}
.skeleton-band-title[data-v-fc8fdfd5] {
  margin-bottom: var(--Spacing-spacing-4);
}
.skeleton-cards-row[data-v-fc8fdfd5] {
  display: flex;
  gap: var(--Spacing-spacing-4);
  overflow: hidden;
}
.skeleton-card[data-v-fc8fdfd5] {
  flex-shrink: 0;
  width: 280px;
  height: 320px;
  border-radius: var(--card-border-radius);
}
@media screen and (min-width: 768px) {
.skeleton-card[data-v-fc8fdfd5] {
    width: 300px;
    height: 360px;
}
}
.skeleton-topics-section[data-v-fc8fdfd5] {
  margin-bottom: var(--Spacing-spacing-8);
}
.skeleton-topics-title[data-v-fc8fdfd5] {
  margin-bottom: var(--Spacing-spacing-2);
}
.skeleton-topics-grid[data-v-fc8fdfd5] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 640px) {
.skeleton-topics-grid[data-v-fc8fdfd5] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1280px) {
.skeleton-topics-grid[data-v-fc8fdfd5] {
    grid-template-columns: repeat(3, 1fr);
}
}
.skeleton-topic-card[data-v-fc8fdfd5] {
  height: 200px;
  border-radius: var(--card-border-radius);
}
@media screen and (min-width: 768px) {
.skeleton-topic-card[data-v-fc8fdfd5] {
    height: 240px;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recommendation-content-card[data-v-c0f27aec] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.content-card[data-v-c0f27aec] {
  width: 100%;
  border-radius: var(--card-border-radius);
}
.content-card-media-section[data-v-c0f27aec] {
  width: 100%;
  aspect-ratio: 16/9;
}
.content-card-media-section .image[data-v-c0f27aec] {
  height: 100%;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}
.content-card-bottom-section[data-v-c0f27aec] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1, 8px);
  background: var(--Neutral-UI-neutral-ui-20);
  padding: var(--Spacing-spacing-6, 42px);
  align-items: flex-start;
}
.content-card-bottom-section .media-card-type[data-v-c0f27aec] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.content-card-bottom-section .media-card-type[data-v-c0f27aec] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.content-card-bottom-section .media-card-type[data-v-c0f27aec] {
    letter-spacing: 1.5px;
}
}
.content-card-bottom-section .media-card-type[data-v-c0f27aec] {
  color: var(--Neutral-UI-neutral-ui-70);
}
.content-card-bottom-section .title-row[data-v-c0f27aec] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--Spacing-spacing-2);
}
.content-card-bottom-section .title[data-v-c0f27aec] {
  /* Heading/H1 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  color: var(--Neutral-UI-neutral-ui-100);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.article-container[data-v-7c0df55d] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-4);
  padding-bottom: var(--Spacing-spacing-5);
  border-radius: var(--card-border-radius);
}
.article-text-container[data-v-7c0df55d] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-8) var(--Spacing-spacing-8) var(--Spacing-spacing-6);
  gap: var(--Spacing-spacing-4);
  flex-shrink: 0;
}
@media screen and (min-width: 1920px) {
.article-text-container[data-v-7c0df55d] {
    width: 60%;
}
}
@media screen and (min-width: 1536px) {
.article-text-container[data-v-7c0df55d] {
    width: 90%;
}
}
@media screen and (min-width: 1280px) {
.article-text-container[data-v-7c0df55d] {
    width: 80%;
}
}
@media screen and (min-width: 768px) {
.article-text-container[data-v-7c0df55d] {
    width: 80%;
}
}
.article-lead[data-v-7c0df55d] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: 0;
}
.article-body[data-v-7c0df55d] ul {
  padding-left: 20px;
  margin-bottom: var(--Spacing-spacing-6);
}
.article-body[data-v-7c0df55d] li {
  word-break: normal;
}
.article-body[data-v-7c0df55d] p {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.audio-container[data-v-e3abbda0] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-5);
}
.audio-player[data-v-e3abbda0] {
  border-radius: var(--card-border-radius);
  overflow: hidden;
}
.audio-description[data-v-e3abbda0] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-8) var(--Spacing-spacing-8) var(--Spacing-spacing-6);
  gap: var(--Spacing-spacing-4);
  flex-shrink: 0;
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
@media screen and (min-width: 1920px) {
.audio-description[data-v-e3abbda0] {
    width: 60%;
}
}
@media screen and (min-width: 1536px) {
.audio-description[data-v-e3abbda0] {
    width: 90%;
}
}
@media screen and (min-width: 1280px) {
.audio-description[data-v-e3abbda0] {
    width: 80%;
}
}
@media screen and (min-width: 768px) {
.audio-description[data-v-e3abbda0] {
    width: 80%;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.video-container[data-v-994b0696] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-5);
}
.video-player[data-v-994b0696] {
  border-radius: var(--card-border-radius);
  overflow: hidden;
}
.text[data-v-994b0696] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-8) var(--Spacing-spacing-8) var(--Spacing-spacing-6);
  gap: var(--Spacing-spacing-4);
  flex-shrink: 0;
}
@media screen and (min-width: 1920px) {
.text[data-v-994b0696] {
    width: 60%;
}
}
@media screen and (min-width: 1536px) {
.text[data-v-994b0696] {
    width: 90%;
}
}
@media screen and (min-width: 1280px) {
.text[data-v-994b0696] {
    width: 80%;
}
}
@media screen and (min-width: 768px) {
.text[data-v-994b0696] {
    width: 80%;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recommendation-page[data-v-b326fef5] {
  max-width: 1920px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
}
.back-link[data-v-b326fef5] {
  width: 100%;
  margin-bottom: 18px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.topic-page[data-v-318fd378] {
  max-width: 1920px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
}
.topic-header[data-v-318fd378] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
  margin-bottom: var(--Spacing-spacing-4);
}
.topic-title[data-v-318fd378] {
  /* Heading/H1 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.badge-earned-modal[data-v-9649c838] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--Spacing-spacing-6);
  text-align: center;
  gap: var(--Spacing-spacing-4);
  min-width: 300px;
}
@media screen and (min-width: 768px) {
.badge-earned-modal[data-v-9649c838] {
    min-width: 400px;
    padding: var(--Spacing-spacing-8) var(--Spacing-spacing-8) var(--Spacing-spacing-6);
    gap: var(--Spacing-spacing-6);
}
}
.badge-image-container[data-v-9649c838] {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
.badge-image-container[data-v-9649c838] {
    width: 150px;
    height: 150px;
}
}
.badge-image-container .badge-image[data-v-9649c838] {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.badge-image-loading[data-v-9649c838] {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.badge-content[data-v-9649c838] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-2);
}
.congratulations[data-v-9649c838] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Functional-wl-completed-surface);
  margin: 0;
}
.badge-name[data-v-9649c838] {
  /* Display/D5 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D5);
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
  letter-spacing: -0.96px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
}
.badge-description[data-v-9649c838] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
  margin: 0;
}
.badge-actions[data-v-9649c838] {
  margin-top: var(--Spacing-spacing-2);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.header[data-v-06a3285b] {
  position: relative;
  background-color: var(--Secondary-secondary-color-5);
  padding: var(--Spacing-spacing-8) var(--Spacing-spacing-4) var(--Spacing-spacing-4) var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.header[data-v-06a3285b] {
    min-height: 500px;
}
}
@media screen and (min-width: 1280px) {
.header[data-v-06a3285b] {
    min-height: 600px;
}
}
@media screen and (min-width: 1536px) {
.header[data-v-06a3285b] {
    min-height: 775px;
}
}
.session[data-v-06a3285b]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.session[data-v-06a3285b] {
  display: block;
  border-radius: var(--border-radius);
  padding: var(--Spacing-spacing-4);
  min-height: 200px;
  width: 200px;
  position: relative;
  background-color: var(--Neutral-UI-neutral-ui-20);
}
@media screen and (min-width: 768px) {
.session[data-v-06a3285b] {
    padding: var(--Spacing-spacing-2);
}
}
.session--locked[data-v-06a3285b] {
  background-color: var(--Neutral-UI-neutral-ui-20);
}
.session--in-progress[data-v-06a3285b] {
  background-color: var(--Secondary-secondary-color-1);
}
.session--in-progress[data-v-06a3285b]:hover, .session--in-progress[data-v-06a3285b]:focus-visible {
  text-decoration: underline;
}
.session--completed[data-v-06a3285b] {
  background-color: var(--Secondary-secondary-color-2);
}
.session--completed[data-v-06a3285b]:hover, .session--completed[data-v-06a3285b]:focus-visible {
  text-decoration: underline;
}
.image-container[data-v-06a3285b] {
  left: var(--Spacing-spacing-4);
  margin-top: var(--Spacing-spacing-10);
}
@media screen and (min-width: 768px) {
.image-container[data-v-06a3285b] {
    position: absolute;
    bottom: -100px;
    width: 45%;
    max-width: 770px;
    margin-top: 0;
}
}
.image-container-inner[data-v-06a3285b] {
  width: 100%;
  padding-bottom: 56%;
  background-color: var(--Primary-primary-color-5);
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius);
}
.image[data-v-06a3285b] {
  position: absolute;
}
.intro-box[data-v-06a3285b] {
  padding: var(--Spacing-spacing-4);
  margin-bottom: var(--Spacing-spacing-10);
}
@media screen and (min-width: 768px) {
.intro-box[data-v-06a3285b] {
    margin-left: 50%;
}
}
.intro-text[data-v-06a3285b] {
  margin-bottom: var(--Spacing-spacing-4);
}
.state[data-v-06a3285b] {
  margin-bottom: var(--Spacing-spacing-6);
}
.progress[data-v-06a3285b] {
  max-width: 400px;
}
.session-list[data-v-06a3285b] {
  list-style: none;
  padding: 6px 4px 6px 12px;
  display: flex;
  gap: 8px;
}
@media screen and (min-width: 768px) {
.session-list[data-v-06a3285b] {
    gap: 12px;
}
}
@media screen and (min-width: 1280px) {
.session-list[data-v-06a3285b] {
    gap: 16px;
}
}
.session-list-item[data-v-06a3285b] {
  padding: 0;
}
.link-arrow[data-v-06a3285b] {
  position: absolute;
  bottom: var(--Spacing-spacing-4);
  right: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.link-arrow[data-v-06a3285b] {
    bottom: var(--Spacing-spacing-2);
    right: var(--Spacing-spacing-2);
}
}
.check[data-v-06a3285b] {
  position: absolute;
  top: var(--Spacing-spacing-4);
  right: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.check[data-v-06a3285b] {
    bottom: var(--Spacing-spacing-2);
    right: var(--Spacing-spacing-2);
}
}
.session-label[data-v-06a3285b] {
  margin: var(--Spacing-spacing-6) 0;
  display: block;
}
.scroll-area[data-v-06a3285b] {
  height: 250px;
}
.scroll-area-container[data-v-06a3285b] {
  margin: 0 calc(var(--Spacing-spacing-2) * -1);
  position: relative;
}
.scroll-area-container[data-v-06a3285b]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 15px;
  width: 5px;
  z-index: 1;
  background: linear-gradient(to right, var(--body-background-color) 0%, color-mix(in srgb, var(--body-background-color), transparent 100%) 100%);
}
.scroll-area-container[data-v-06a3285b]:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 15px;
  width: 5px;
  z-index: 1;
  background: linear-gradient(to left, var(--body-background-color) 0%, color-mix(in srgb, var(--body-background-color), transparent 100%) 100%);
}
.wrapper-for-sessions[data-v-06a3285b] {
  margin: 0 var(--Spacing-spacing-4) var(--Spacing-spacing-10) var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.session-toc-item[data-v-42fa83f0] {
  list-style: none;
  position: relative;
}
.link[data-v-42fa83f0] {
  width: 100%;
  display: flex;
  padding: var(--Spacing-spacing-3);
  position: relative;
}
.state--locked[data-v-42fa83f0] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  cursor: not-allowed;
}
.state--current[data-v-42fa83f0] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-1);
  flex-direction: row;
}
.state--completed[data-v-42fa83f0] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Functional-wl-complete-surface);
  flex-direction: row;
}
.label[data-v-42fa83f0] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
  align-items: flex-start;
  text-align: left;
}
.icon[data-v-42fa83f0] {
  align-self: end;
  margin-left: auto;
  position: relative;
  top: 1px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.nav-session-pages[data-v-5974983d] {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--Spacing-spacing-2);
}
.nav-session-pages[data-v-5974983d] > :not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%; /* Adjust this to align with your design */
  top: 100%;
  height: var(--Spacing-spacing-2);
  bottom: 0;
  border-left: 2px dashed var(--Neutral-UI-neutral-ui-40); /* Adjust the color and style as needed */
}
.nav-session-pages[data-v-5974983d] {
  width: 100%;
  margin: 0;
  padding: 0;
}
.nav-boundary[data-v-5974983d] {
  transition: height 0.3s linear;
  margin: var(--Spacing-spacing-5) -5px 0 -5px;
  padding: 5px;
}
.nav-boundary--scaled-down[data-v-5974983d] {
  position: relative;
}
.btn-show-all[data-v-5974983d]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.btn-show-all[data-v-5974983d] {
  display: block;
  margin: var(--Spacing-spacing-3) auto 0 auto;
}
@media screen and (min-width: 1280px) {
.btn-show-all[data-v-5974983d] {
    display: none;
}
}
.btn-show-less[data-v-5974983d]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.btn-show-less[data-v-5974983d] {
  display: block;
  margin: var(--Spacing-spacing-3) auto 0 auto;
}
@media screen and (min-width: 1280px) {
.btn-show-less[data-v-5974983d] {
    display: none;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.content-wrapper[data-v-27afb4ac] {
  padding: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.content-wrapper[data-v-27afb4ac] {
    display: flex;
}
}
.header[data-v-27afb4ac] {
  margin-bottom: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.header[data-v-27afb4ac] {
    width: 16.6666666667%;
    min-width: 250px;
    padding-right: var(--Spacing-spacing-1);
}
}
@media screen and (min-width: 1536px) {
.header[data-v-27afb4ac] {
    padding-right: var(--Spacing-spacing-3);
}
}
.main-content[data-v-27afb4ac] {
  max-width: 1032px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  padding: 0;
  margin: 0 auto;
}
@media screen and (min-width: 1280px) {
.main-content[data-v-27afb4ac] {
    padding: 0 var(--Spacing-spacing-5);
}
}
.task-list[data-v-27afb4ac] {
  margin: 0;
  list-style: none;
  width: 100%;
  padding: 0;
}
.task-list-item[data-v-27afb4ac] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-4);
  margin-bottom: var(--Spacing-spacing-10);
}
.task-list-item[data-v-27afb4ac]:last-child {
  margin-bottom: var(--Spacing-spacing-4);
}
.button-bar[data-v-27afb4ac] {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.next-up-card[data-v-27afb4ac] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background-color: var(--Secondary-secondary-color-1);
  padding: var(--Spacing-spacing-5);
}
@media screen and (min-width: 1280px) {
.next-up-card[data-v-27afb4ac] {
    padding: var(--Spacing-spacing-6);
}
}
.next-up-content[data-v-27afb4ac] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--Spacing-spacing-6);
}
@media screen and (max-width: 639px) {
.next-up-content[data-v-27afb4ac] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-spacing-4);
}
}
.next-up-text[data-v-27afb4ac] {
  flex: 1;
}
.next-up-title[data-v-27afb4ac] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin: 0 0 var(--Spacing-spacing-2) 0;
  color: var(--Text-text-90);
}
.next-up-description[data-v-27afb4ac] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin: 0;
  color: var(--Text-text-70);
}
.next-up-action[data-v-27afb4ac] {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 639px) {
.next-up-action[data-v-27afb4ac] {
    justify-content: flex-start;
}
}
.next-up-footer[data-v-27afb4ac] {
  margin-top: var(--Spacing-spacing-4);
  display: flex;
  justify-content: flex-start;
}
.back-to-challenge-btn[data-v-27afb4ac] {
  color: var(--Text-text-90) !important;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.consent-required-page[data-v-d7cb5b51] {
  min-height: 100vh;
  background: var(--Background-background-primary);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.period-filter[data-v-75abf2f7]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.period-filter[data-v-75abf2f7] {
  padding: var(--Spacing-spacing-1);
  border-radius: var(--button-border-radius);
}
.selected-filter[data-v-75abf2f7] {
  display: flex;
  align-items: center;
}
.label[data-v-75abf2f7] {
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.selected-option[data-v-75abf2f7] {
  background-color: var(--Secondary-secondary-color-1);
  color: var(--Neutral-UI-neutral-ui-100);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.journal-entry-modal[data-v-66f84d6a] {
  display: flex;
  flex-direction: column;
  padding: 0 var(--Spacing-spacing-3) var(--Spacing-spacing-3);
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.journal-entry-modal[data-v-66f84d6a] {
    max-width: 800px;
}
}
@media screen and (min-width: 1280px) {
.journal-entry-modal[data-v-66f84d6a] {
    min-width: 800px;
}
}
.modal-title[data-v-66f84d6a] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
  padding-top: var(--Spacing-spacing-5);
  padding-right: var(--Spacing-spacing-8);
}
@media screen and (min-width: 1280px) {
.modal-title[data-v-66f84d6a] {
    padding-top: var(--Spacing-spacing-3);
}
}
.journal-name[data-v-66f84d6a] {
  /* Heading/H3 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
  margin: 0;
}
.journal-textarea[data-v-66f84d6a] textarea {
  min-height: 200px;
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-4);
  background-color: var(--Neutral-UI-neutral-ui-0);
  color: var(--Neutral-UI-neutral-ui-100);
}
.journal-textarea[data-v-66f84d6a] textarea {
  max-height: 200px;
  overflow-y: auto;
  overflow-wrap: break-word;
}
@media screen and (min-width: 768px) {
.journal-textarea[data-v-66f84d6a] textarea {
    max-height: 300px;
}
}
.modal-actions[data-v-66f84d6a] {
  display: flex;
  justify-content: flex-end;
  gap: var(--Spacing-spacing-3);
  margin-top: var(--Spacing-spacing-2);
}
.feelings-section[data-v-66f84d6a] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.add-feelings-trigger[data-v-66f84d6a] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-3);
  cursor: pointer;
}
.add-feelings-text[data-v-66f84d6a] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-70);
}
.selected-feelings[data-v-66f84d6a] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-2);
  align-items: center;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.journal-entry-card[data-v-2b96afae] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-10);
  border-left: 6px solid var(--Primary-primary-color-2);
  padding: var(--Spacing-spacing-6);
}
.card-content[data-v-2b96afae] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.card-content[data-v-2b96afae] {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--Spacing-spacing-5);
}
}
.left-block[data-v-2b96afae] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-2);
  flex: 1 1 60%;
  min-width: 0;
}
.entry-name[data-v-2b96afae] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
}
.entry-answer[data-v-2b96afae] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
  margin-bottom: var(--Spacing-spacing-2);
  white-space: pre-line;
  overflow-wrap: break-word;
}
.entry-meta[data-v-2b96afae] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-4);
  flex-wrap: wrap;
}
.entry-date[data-v-2b96afae] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.intervention-container[data-v-2b96afae] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.part-of-label[data-v-2b96afae] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}
.right-block[data-v-2b96afae] {
  flex: 0 1 40%;
}
.feelings-container[data-v-2b96afae] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-2);
}
@media screen and (min-width: 768px) {
.feelings-container[data-v-2b96afae] {
    justify-content: flex-end;
}
}
.feelings-container[data-v-2b96afae] .feeling-chip {
  background-color: var(--Neutral-UI-neutral-ui-20);
  color: var(--Neutral-UI-neutral-ui-90);
  /* Body/Body SM - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.summary-box[data-v-a5b25c8d] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--Spacing-spacing-4);
  background: transparent;
  border-radius: var(--card-border-radius);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}
.summary-box[data-v-a5b25c8d]:hover:not(.inactive) {
  background: var(--Neutral-UI-neutral-ui-10);
}
.summary-box.inactive[data-v-a5b25c8d] {
  cursor: default;
}
.summary-box.selected[data-v-a5b25c8d] {
  background: var(--Neutral-UI-neutral-ui-10);
}
.count[data-v-a5b25c8d] {
  /* Metric/Metric LG */
  font-family: var(--Font-Metric-Font);
  font-size: var(--Typography-Metric---LG);
  font-style: italic;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-100);
}
.bottom-row[data-v-a5b25c8d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.subtitle[data-v-a5b25c8d] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.journal-page[data-v-c89b2d35] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  padding: var(--Spacing-spacing-5);
}
.journal-header[data-v-c89b2d35] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.title[data-v-c89b2d35] {
  /* Heading/H1 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
.journal-history-card[data-v-c89b2d35] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  padding: var(--Spacing-spacing-4);
  background: var(--Neutral-UI-neutral-ui-0);
  border-radius: var(--card-border-radius);
  width: 100%;
}
@media screen and (min-width: 768px) {
.journal-history-card[data-v-c89b2d35] {
    padding: var(--Spacing-spacing-6);
}
}
.history-header[data-v-c89b2d35] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Spacing-spacing-3);
  flex-wrap: wrap;
}
.history-title[data-v-c89b2d35] {
  /* Display/D3 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D3);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.44px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
}
.filter-dropdown[data-v-c89b2d35] {
  align-self: flex-start;
}
.summary-boxes[data-v-c89b2d35] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Spacing-spacing-3);
}
@media screen and (min-width: 768px) {
.summary-boxes[data-v-c89b2d35] {
    grid-template-columns: repeat(3, 1fr);
}
}
.entries-list[data-v-c89b2d35] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-3);
}
.load-more-container[data-v-c89b2d35] {
  display: flex;
  justify-content: center;
  padding: var(--Spacing-spacing-4) 0;
  width: 100%;
  align-self: center;
}
.empty-state[data-v-c89b2d35] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--Spacing-spacing-8);
  text-align: center;
}
.empty-state p[data-v-c89b2d35] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-60);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.paths-card[data-v-67845d98] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  background-color: var(--Secondary-secondary-color-1);
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  --Neutral-UI-neutral-ui-100: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  --Secondary-secondary-color-1: var(--Light-Scheme-Secondary-secondary-color-1);
}
.paths-card[data-v-67845d98]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
.paths-card[data-v-67845d98]:hover {
  cursor: pointer;
}
.avatar-container[data-v-67845d98] {
  align-self: flex-start;
}
.img-holder[data-v-67845d98] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ava[data-v-67845d98] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.welcome-text[data-v-67845d98] {
  /* Heading/H2 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.description[data-v-67845d98] {
  /* Heading/H2 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  color: var(--Neutral-UI-neutral-ui-100);
  line-height: 1.5;
  opacity: 0.9;
}
.intervention-icons[data-v-67845d98] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-2);
}
.icon-circle[data-v-67845d98] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intervention-icon[data-v-67845d98] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.intervention-skeleton[data-v-67845d98] {
  border-radius: 50%;
}
.button-content[data-v-67845d98] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.button-text[data-v-67845d98] {
  text-align: left;
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.button-icon[data-v-67845d98] {
  font-size: 20px;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.recommended-intervention-module[data-v-20fb59f0] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  background-color: #CBCCD3;
  border-radius: var(--card-border-radius);
  padding: var(--Spacing-spacing-7);
  display: flex;
  flex-direction: column;
  --Neutral-UI-neutral-ui-5: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  --Neutral-UI-neutral-ui-7: var(--Light-Scheme-Neutral-UI-neutral-ui-70);
  --Neutral-UI-neutral-ui-8: var(--Light-Scheme-Neutral-UI-neutral-ui-80);
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.recommended-intervention-module[data-v-20fb59f0]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
@media screen and (min-width: 768px) {
.recommended-intervention-module[data-v-20fb59f0] {
    flex-direction: row;
    align-items: flex-start;
    min-height: 240px;
}
}
.content[data-v-20fb59f0] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  flex: 1;
  z-index: 2;
}
@media screen and (min-width: 768px) {
.content[data-v-20fb59f0] {
    flex: 0 0 60%;
}
}
.badge[data-v-20fb59f0] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.badge[data-v-20fb59f0] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.badge[data-v-20fb59f0] {
    letter-spacing: 1.5px;
}
}
.badge[data-v-20fb59f0] {
  color: var(--Neutral-UI-neutral-ui-5);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.intervention-title[data-v-20fb59f0] {
  /* Heading/H2 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
  margin: 0;
}
.intervention-description[data-v-20fb59f0] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-7);
  line-height: 1.5;
  margin: 0;
}
.explore-button[data-v-20fb59f0] {
  margin-top: var(--Spacing-spacing-3);
  align-self: flex-start;
}
.illustration[data-v-20fb59f0] {
  display: none;
}
@media screen and (min-width: 768px) {
.illustration[data-v-20fb59f0] {
    display: flex;
    flex: 0 0 40%;
    margin-top: 0;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: stretch;
}
}
.intervention-image[data-v-20fb59f0] {
  max-width: 150px;
  height: auto;
  object-fit: contain;
}
@media screen and (min-width: 768px) {
.intervention-image[data-v-20fb59f0] {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.featured-content-module[data-v-ff55e030] {
  width: 100%;
  border-radius: var(--card-border-radius);
  outline: none;
}
.featured-content-module[data-v-ff55e030]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
.featured-content-card[data-v-ff55e030] {
  border-radius: var(--card-border-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.content-area[data-v-ff55e030] {
  outline: none;
}
.video-container[data-v-ff55e030] {
  position: relative;
  width: 100%;
  border-radius: var(--card-border-radius);
  overflow: hidden;
}
.featured-video[data-v-ff55e030] {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 300px;
}
@supports (-webkit-appearance: none) {
.featured-video[data-v-ff55e030] {
    height: 0;
    padding-bottom: 56.25%;
    min-height: unset;
    position: relative;
}
.featured-video[data-v-ff55e030] .simple-video-player,
  .featured-video[data-v-ff55e030] .video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.inline-questionnaire-module[data-v-ce2b1347] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  padding: var(--Spacing-spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
  position: relative;
  background-color: var(--Neutral-UI-neutral-ui-0);
  border-radius: var(--card-border-radius);
}
.inline-questionnaire-module[data-v-ce2b1347]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
.questionnaire-header[data-v-ce2b1347] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-2);
}
.badge[data-v-ce2b1347] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.badge[data-v-ce2b1347] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.badge[data-v-ce2b1347] {
    letter-spacing: 1.5px;
}
}
.badge[data-v-ce2b1347] {
  color: var(--Neutral-UI-neutral-ui-5);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.question-title[data-v-ce2b1347] {
  /* Heading/H3 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H3);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-8);
  margin: 0;
}
.questionnaire-questions[data-v-ce2b1347] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.questionnaire-footer[data-v-ce2b1347] {
  display: flex;
  justify-content: flex-end;
}
.submit-button[data-v-ce2b1347] {
  align-self: flex-start;
}
.submit-button[disabled][data-v-ce2b1347] {
  opacity: 0.5;
  cursor: not-allowed;
}
.placeholder-content[data-v-ce2b1347] {
  padding: var(--Spacing-spacing-4);
  text-align: center;
}
.placeholder-text[data-v-ce2b1347] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-6);
  margin: 0;
}
.sr-only[data-v-ce2b1347] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.wizard-assessment-band[data-v-652d0bd5] {
  display: flex;
  gap: var(--Spacing-spacing-4);
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  cursor: grab;
  user-select: none;
  padding: 6px 4px;
  margin: -6px -4px;
}
.wizard-assessment-band[data-v-652d0bd5]::-webkit-scrollbar {
  display: none;
}
.wizard-assessment-band[data-v-652d0bd5] {
  scrollbar-width: none;
}
.wizard-assessment-band[data-v-652d0bd5]:active {
  cursor: grabbing;
}
.wizard-item-card[data-v-652d0bd5] {
  flex: 0 0 200px;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-3);
}
.wizard-item-card[data-v-652d0bd5]:hover {
  transform: translateY(-2px);
}
.wizard-item-card[data-v-652d0bd5]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
  border-radius: var(--card-border-radius);
}
.wizard-item-card.not-clickable[data-v-652d0bd5] {
  cursor: default;
}
.wizard-item-card.not-clickable[data-v-652d0bd5]:hover {
  transform: none;
}
@media screen and (min-width: 768px) {
.wizard-item-card[data-v-652d0bd5] {
    flex: 0 0 246px;
}
}
.wizard-item-card .card-image[data-v-652d0bd5] {
  position: relative;
  aspect-ratio: 12/9;
  overflow: hidden;
  border-radius: 18px;
}
.wizard-item-card .card-image.has-image[data-v-652d0bd5] {
  background-color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
}
.wizard-item-card .card-image[data-v-652d0bd5] .q-img {
  width: 100%;
  height: 100%;
}
.wizard-item-card .card-image[data-v-652d0bd5] .q-img__container {
  width: 100%;
  height: 100%;
}
.wizard-item-card .card-image img[data-v-652d0bd5] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wizard-item-card .card-image.completed[data-v-652d0bd5] img {
  opacity: 0.5;
}
.wizard-item-card .card-image .status-badge[data-v-652d0bd5] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-3);
  border-radius: var(--button-border-radius);
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-1);
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.wizard-item-card .card-image .status-badge[data-v-652d0bd5] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.wizard-item-card .card-image .status-badge[data-v-652d0bd5] {
    letter-spacing: 1.5px;
}
}
.wizard-item-card .card-image .status-badge[data-v-652d0bd5] {
  font-weight: 800;
  text-transform: uppercase;
  background: var(--Neutral-UI-neutral-ui-10);
  color: var(--Neutral-UI-neutral-ui-100);
}
.wizard-item-card .card-image .status-badge.completed[data-v-652d0bd5] {
  background: var(--Functional-wl-completed-surface);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
}
.wizard-item-card .card-image .status-badge .check-icon[data-v-652d0bd5] {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.wizard-item-card .card-content[data-v-652d0bd5] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1);
}
.wizard-item-card .card-category[data-v-652d0bd5] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.wizard-item-card .card-category[data-v-652d0bd5] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.wizard-item-card .card-category[data-v-652d0bd5] {
    letter-spacing: 1.5px;
}
}
.wizard-item-card .card-category[data-v-652d0bd5] {
  color: var(--Neutral-UI-neutral-ui-70);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.wizard-item-card .card-title[data-v-652d0bd5] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.wizard-module[data-v-3d21c222] {
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  background: var(--Neutral-UI-neutral-ui-0);
  border-radius: var(--card-border-radius);
  background: var(--Neutral-UI-neutral-ui-20);
  padding: var(--Spacing-spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-7);
  width: 100%;
}
@media screen and (min-width: 768px) {
.wizard-module[data-v-3d21c222] {
    padding: var(--Spacing-spacing-6);
}
}
.wizard-header[data-v-3d21c222] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
.wizard-title[data-v-3d21c222] {
  /* Display/D4 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D4);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
}
.wizard-progress[data-v-3d21c222] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-2);
  width: 100%;
}
@media screen and (min-width: 768px) {
.wizard-progress[data-v-3d21c222] {
    max-width: 40%;
}
}
.progress-text[data-v-3d21c222] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-90);
  font-weight: 600;
}
.progress-bar[data-v-3d21c222] {
  height: 8px;
  color: var(--Light-Scheme-Primary-primary-color-2);
  background-color: var(--Neutral-UI-neutral-ui-0);
  border-radius: 100px;
}
.progress-bar[data-v-3d21c222] .q-linear-progress__track {
  opacity: 1;
  background-color: var(--Neutral-UI-neutral-ui-0) !important;
}
.progress-bar[data-v-3d21c222] .q-linear-progress__model {
  border-radius: 100px !important;
}
.wizard-content[data-v-3d21c222] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 768px) {
.wizard-content[data-v-3d21c222] {
    flex-direction: row;
    gap: var(--Spacing-spacing-5);
}
}
.wizard-sections[data-v-3d21c222] {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--Spacing-spacing-3);
  overflow-x: auto;
  padding: 4px;
  margin: -4px;
}
@media screen and (min-width: 768px) {
.wizard-sections[data-v-3d21c222] {
    flex: 0 0 180px;
    flex-direction: column;
    gap: 4px;
    overflow-x: visible;
    padding: 4px;
    margin: -4px;
}
}
.wizard-sections[data-v-3d21c222]::-webkit-scrollbar {
  display: none;
}
.wizard-sections[data-v-3d21c222] {
  scrollbar-width: none;
}
.section-item-wrapper[data-v-3d21c222] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (min-width: 768px) {
.section-item-wrapper[data-v-3d21c222] {
    flex-direction: row;
    align-items: center;
    width: fit-content;
}
}
.section-item[data-v-3d21c222] {
  /* Body/Body SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body-SM);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-4);
  text-align: left;
  border-radius: 100px;
  background: var(--Neutral-UI-neutral-ui-10);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--Neutral-UI-neutral-ui-90);
  transition: all 0.2s ease;
  width: fit-content;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.section-item.in-progress[data-v-3d21c222]:not(.completed) {
  background: var(--Light-Scheme-Secondary-secondary-color-2);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-100);
}
.section-item.completed[data-v-3d21c222] {
  background: var(--Functional-wl-completed-surface);
  color: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
}
.section-item[data-v-3d21c222]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-2);
  outline-offset: 2px;
}
.section-check-icon[data-v-3d21c222] {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.section-check-icon[data-v-3d21c222] svg path {
  stroke: var(--Neutral-UI-neutral-ui-40);
}
.section-check-icon.check-completed[data-v-3d21c222] svg path {
  stroke: var(--Light-Scheme-Neutral-UI-neutral-ui-0);
}
.active-dot[data-v-3d21c222] {
  display: none;
}
@media screen and (min-width: 768px) {
.active-dot[data-v-3d21c222] {
    display: block;
    position: absolute;
    left: calc(100% + var(--Spacing-spacing-2));
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--Neutral-UI-neutral-ui-60);
}
}
.active-underline[data-v-3d21c222] {
  display: block;
  width: 20%;
  height: 2px;
  background-color: var(--Neutral-UI-neutral-ui-60);
  margin-top: var(--Spacing-spacing-2);
  align-self: center;
  border-radius: 2px;
}
@media screen and (min-width: 768px) {
.active-underline[data-v-3d21c222] {
    display: none;
}
}
.section-separator[data-v-3d21c222] {
  flex-shrink: 0;
  display: block;
  color: var(--Neutral-UI-neutral-ui-40);
  margin: 0;
}
@media screen and (min-width: 768px) {
.section-separator[data-v-3d21c222] {
    margin: 0 0 0 var(--Spacing-spacing-5);
}
}
.section-separator.completed[data-v-3d21c222] {
  color: var(--Functional-wl-completed-surface);
}
.section-separator-mobile[data-v-3d21c222] {
  display: block;
  align-self: center;
  transform: translateY(-4px);
}
@media screen and (min-width: 768px) {
.section-separator-mobile[data-v-3d21c222] {
    display: none;
}
}
.section-separator-desktop[data-v-3d21c222] {
  display: none;
}
@media screen and (min-width: 768px) {
.section-separator-desktop[data-v-3d21c222] {
    display: block;
}
}
.column-separator[data-v-3d21c222] {
  width: 2px;
  align-self: stretch;
  background-color: var(--Neutral-UI-neutral-ui-40);
  flex-shrink: 0;
  border-radius: 100px;
  margin-left: var(--Spacing-spacing-6);
  margin-right: var(--Spacing-spacing-7);
}
.wizard-items-container[data-v-3d21c222] {
  flex: 1;
  overflow-x: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: -4px;
}
.wizard-items-container[data-v-3d21c222]::-webkit-scrollbar {
  display: none;
}
.wizard-items-container[data-v-3d21c222] {
  scrollbar-width: none;
}
.wizard-inline-questionnaire[data-v-3d21c222] {
  width: 100%;
}
.wizard-completion-wrapper[data-v-3d21c222] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  width: 100%;
}
.wizard-items-wrapper[data-v-3d21c222] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-4);
  width: 100%;
}
.section-description[data-v-3d21c222] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--Neutral-UI-neutral-ui-90);
  margin: 0;
  line-height: 1.6;
  width: 100%;
}
@media screen and (min-width: 768px) {
.section-description[data-v-3d21c222] {
    max-width: 50%;
}
}
.wizard-completion-state[data-v-3d21c222] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  text-align: center;
  padding: var(--Spacing-spacing-6) 0;
  gap: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
.wizard-completion-state[data-v-3d21c222] {
    flex-direction: row;
    text-align: left;
}
}
.wizard-completion-state .completion-illustration[data-v-3d21c222] {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.wizard-completion-state .completion-illustration[data-v-3d21c222] {
    width: 150px;
    height: 150px;
}
}
.wizard-completion-state .completion-message p[data-v-3d21c222] {
  /* Display/D4 */
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-D4);
  font-style: normal;
  font-weight: 200;
  line-height: 90%;
  letter-spacing: -1.26px;
  color: var(--Neutral-UI-neutral-ui-90);
  margin: 0;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.home-page[data-v-b008a032] {
  max-width: 1920px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--Spacing-spacing-3);
  padding: var(--Spacing-spacing-5);
  background-color: var(--Neutral-UI-neutral-ui-10);
}
.page-header[data-v-b008a032] {
  display: flex;
  align-items: center;
  margin-bottom: var(--Spacing-spacing-3);
}
.page-header .title[data-v-b008a032] {
  /* Heading/H2 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H2);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin: 0;
  color: var(--Neutral-UI-neutral-ui-8);
}
.page-header .arrow-right[data-v-b008a032] {
  margin-left: var(--Spacing-spacing-3);
}
.main-content[data-v-b008a032]:focus {
  outline: none;
}
.wizard-container[data-v-b008a032] {
  width: 100%;
  margin-top: var(--Spacing-spacing-4);
  margin-bottom: var(--Spacing-spacing-4);
}
.recommended-container[data-v-b008a032] {
  width: 100%;
  max-width: 616px;
  margin-bottom: var(--Spacing-spacing-4);
}
.modules[data-v-b008a032] {
  width: 100%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.buttons[data-v-b9423073] {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-spacing-2);
  background: var(--Neutral-UI-neutral-ui-20);
  border-radius: 30px;
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-4);
}
.separator[data-v-b9423073] {
  border-right: 2px solid var(--Neutral-UI-neutral-ui-40);
  height: 15px;
}
.btn--pressed[data-v-b9423073] {
  color: var(--Primary-primary-color-1);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.block-content-page[data-v-aad9dfa1] {
  max-width: 1294px;
  padding: var(--Spacing-spacing-5);
  padding-bottom: var(--Spacing-spacing-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-4);
  padding-bottom: var(--Spacing-spacing-7);
  border-radius: var(--card-border-radius);
  margin-inline: auto;
}
.back-link[data-v-aad9dfa1] {
  width: 100%;
  margin-bottom: 18px;
}
.like-bar[data-v-aad9dfa1] {
  width: 100%;
}
.content-text-container.with-audio[data-v-aad9dfa1] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
}
@media screen and (min-width: 768px) {
.content-text-container.with-audio[data-v-aad9dfa1] {
    flex-direction: row;
    gap: var(--Spacing-spacing-8);
}
}
.audio-player-section[data-v-aad9dfa1] {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.content-card-wrapper[data-v-aad9dfa1] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.content-card[data-v-aad9dfa1] {
  width: 100%;
  border-radius: var(--card-border-radius);
}
.content-card-media-section[data-v-aad9dfa1] {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
  overflow: hidden;
}
.content-card-media-section .image[data-v-aad9dfa1] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}
.content-card-media-section[data-v-aad9dfa1] .lightbox-image {
  border-radius: 0;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}
.content-card-media-section[data-v-aad9dfa1] .q-skeleton {
  border-radius: 0;
}
.block-content-video[data-v-aad9dfa1] {
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
  overflow: hidden;
}
.audio-with-poster[data-v-aad9dfa1] {
  position: relative;
  width: 100%;
  height: 100%;
}
.audio-with-poster .poster-image[data-v-aad9dfa1] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}
.audio-with-poster .audio-controls[data-v-aad9dfa1] {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
}
.content-card-bottom-section[data-v-aad9dfa1] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-1, 8px);
  background: var(--Neutral-UI-neutral-ui-20);
  padding: var(--Spacing-spacing-6, 42px);
  align-items: flex-start;
}
.content-card-bottom-section .media-card-type[data-v-aad9dfa1] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.content-card-bottom-section .media-card-type[data-v-aad9dfa1] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.content-card-bottom-section .media-card-type[data-v-aad9dfa1] {
    letter-spacing: 1.5px;
}
}
.content-card-bottom-section .media-card-type[data-v-aad9dfa1] {
  color: var(--Neutral-UI-neutral-ui-70);
}
.content-card-bottom-section .title-row[data-v-aad9dfa1] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--Spacing-spacing-2);
}
.content-card-bottom-section .title[data-v-aad9dfa1] {
  /* Heading/H1 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  color: var(--Neutral-UI-neutral-ui-100);
}
.content-text-container[data-v-aad9dfa1] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-8) var(--Spacing-spacing-8) var(--Spacing-spacing-6);
  gap: var(--Spacing-spacing-4);
  flex-shrink: 0;
}
@media screen and (min-width: 1920px) {
.content-text-container[data-v-aad9dfa1] {
    width: 60%;
}
}
@media screen and (min-width: 1536px) {
.content-text-container[data-v-aad9dfa1] {
    width: 90%;
}
}
@media screen and (min-width: 1280px) {
.content-text-container[data-v-aad9dfa1] {
    width: 80%;
}
}
@media screen and (min-width: 768px) {
.content-text-container[data-v-aad9dfa1] {
    width: 80%;
}
}
.text-content-wrapper[data-v-aad9dfa1] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-6);
}
.content-body[data-v-aad9dfa1] ul {
  padding-left: 20px;
  margin-bottom: var(--Spacing-spacing-6);
}
.content-body[data-v-aad9dfa1] li {
  word-break: normal;
}
.content-body[data-v-aad9dfa1] p {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
h1[data-v-c7b43b05] {
  /* Heading/H1 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: var(--Spacing-spacing-3);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.headline-row[data-v-ccee3c82] {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: var(--Spacing-spacing-3);
}
@media screen and (min-width: 640px) {
.headline-row[data-v-ccee3c82] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.content[data-v-ccee3c82] {
  max-width: 550px;
}
.content[data-v-ccee3c82] a {
  text-decoration: underline;
}
.language-switcher-wrapper[data-v-ccee3c82] {
  display: flex;
  justify-content: end;
  padding: var(--Spacing-spacing-1);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.stepper-header-step[data-v-bbb37f95] {
  display: flex;
  align-items: center;
  border-radius: var(--button-border-radius);
  gap: var(--Spacing-spacing-2);
  box-shadow: 0px 32px 64px 0px rgba(0, 0, 0, 0.05);
  padding: var(--Spacing-spacing-1) var(--Spacing-spacing-4);
}
.stepper-header-step.passed[data-v-bbb37f95] {
  background: var(--Secondary-secondary-color-2);
}
.stepper-header-step.active[data-v-bbb37f95] {
  background: var(--Secondary-secondary-color-1);
}
.stepper-header-step[data-v-bbb37f95]:not(.passed) {
  background: var(--Neutral-UI-neutral-ui-10);
}
.stepper-header-step.passed[data-v-bbb37f95] {
  color: var(--Neutral-UI-neutral-ui-100);
}
.stepper-header-step[data-v-bbb37f95]:not(.passed) {
  color: var(--Neutral-UI-neutral-ui-70);
}
.stepper-header-step:not(.active) > .title[data-v-bbb37f95] {
  display: none;
}
.stepper-header-step .title[data-v-bbb37f95] {
  display: none;
}
@media screen and (min-width: 768px) {
.stepper-header-step .title[data-v-bbb37f95] {
    display: inline;
}
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.partnership-welcome-banner[data-v-96502f6f] {
  width: 100%;
  padding: var(--Spacing-spacing-8) var(--Spacing-spacing-6) 0 var(--Spacing-spacing-6);
}
.partnership-welcome-banner--usc[data-v-96502f6f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-white);
  padding: var(--Spacing-spacing-8);
  gap: var(--Spacing-spacing-4);
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
  background-image: url("https://web-dev.ip.significo.dev/img/welcome-teaser-usc-3Yo-ExqB.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--Dark-Scheme-Neutral-UI-neutral-ui-20);
}
.partnership-welcome-banner--allianz[data-v-96502f6f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-white);
  padding: var(--Spacing-spacing-8);
  gap: var(--Spacing-spacing-4);
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
  background-image: url("https://web-dev.ip.significo.dev/img/welcome-teaser-allianz-BrDXDwQT.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--Dark-Scheme-Neutral-UI-neutral-ui-20);
}
.partnership-text[data-v-96502f6f] {
  /* Caption/Caption SM */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Caption---SM);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.partnership-text[data-v-96502f6f] {
    letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1280px) {
.partnership-text[data-v-96502f6f] {
    letter-spacing: 1.5px;
}
}
.partnership-text[data-v-96502f6f] {
  color: var(--Dark-Scheme-Neutral-UI-neutral-ui-100);
  margin-top: var(--Spacing-spacing-2);
  text-align: center;
}
.balm-logo[data-v-96502f6f] {
  width: 24px;
  height: 24px;
}
@media screen and (min-width: 768px) {
.balm-logo[data-v-96502f6f] {
    width: 48px;
    height: 48px;
}
}
.partner-logo-usc[data-v-96502f6f] {
  width: 33px;
  height: 47px;
}
@media screen and (min-width: 768px) {
.partner-logo-usc[data-v-96502f6f] {
    width: 66px;
    height: 93px;
}
}
.partner-logo-allianz[data-v-96502f6f] {
  width: 97px;
  height: 24px;
  color: var(--Dark-Scheme-Allianz-branding);
}
@media screen and (min-width: 768px) {
.partner-logo-allianz[data-v-96502f6f] {
    width: 161px;
    height: 40px;
}
}
.partner-logo-allianz[data-v-96502f6f] svg {
  color: inherit;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.stepper[data-v-dcd84d1c] {
  display: flex;
  flex-direction: column;
  background-color: var(--Neutral-UI-neutral-ui-0);
  border-radius: var(--card-border-radius);
}
.q-carousel[data-v-dcd84d1c] {
  background-color: inherit;
  height: inherit;
}
.carousel-slide[data-v-dcd84d1c] {
  padding: 0;
  background-color: initial;
}
.stepper-header-step[data-v-dcd84d1c] {
  position: relative;
}
.stepper-head[data-v-dcd84d1c] {
  display: none;
  padding: var(--Spacing-spacing-6);
}
@media screen and (min-width: 1280px) {
.stepper-head[data-v-dcd84d1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
}
.stepper-head--is-initial-step[data-v-dcd84d1c] {
  display: block;
  padding: 0;
  margin-bottom: var(--Spacing-spacing-2);
  border-bottom: none;
}
.stepper-body[data-v-dcd84d1c] {
  display: flex;
  flex-direction: column;
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-7);
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.stepper-body[data-v-dcd84d1c] {
    padding: var(--Spacing-spacing-7) var(--Spacing-spacing-6) var(--Spacing-spacing-6) var(--Spacing-spacing-6);
}
}
.step-separator[data-v-dcd84d1c] {
  display: inline-block;
  flex: 1;
  margin: 0 var(--Spacing-spacing-2);
  height: 2px;
  background-color: var(--Secondary-secondary-color-1);
  width: 100%;
}
.cta-bar[data-v-dcd84d1c] {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--Spacing-spacing-4);
}
@media screen and (min-width: 640px) {
.cta-bar[data-v-dcd84d1c] {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
}
.buttons[data-v-dcd84d1c] {
  display: flex;
  gap: var(--Spacing-spacing-4);
}
.no-voucher[data-v-dcd84d1c] {
  text-decoration: underline;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
h1[data-v-c6366aef] {
  /* Heading/H1 */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: var(--Spacing-spacing-6);
}
.verification[data-v-c6366aef] {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.sign-up-header[data-v-0df84820] {
  margin-bottom: var(--Spacing-spacing-4);
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 1280px) {
.sign-up-header[data-v-0df84820] {
    padding: var(--Spacing-spacing-3) 0 0 0;
}
}
.headline[data-v-0df84820] {
  /* Heading/H1 - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
}
.have-acc-text[data-v-0df84820] {
  display: none;
}
@media screen and (min-width: 1280px) {
.have-acc-text[data-v-0df84820] {
    display: inline;
    /* Body/Body */
    font-family: var(--Font-Primary-Font);
    font-size: var(--Typography-Body);
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
}
}
.header-right[data-v-0df84820] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-4);
  color: var(--Neutral-UI-neutral-ui-100);
}
.sign-in-btn[data-v-0df84820] {
  position: relative;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.agreement-title[data-v-1302bd29] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-3);
}
.agreement-check[data-v-1302bd29] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.agreement-check[data-v-1302bd29] .q-field__control {
  color: var(--Neutral-UI-neutral-ui-100);
}
.agreement-check[data-v-1302bd29] .q-checkbox__label {
  padding-left: var(--Spacing-spacing-4);
}
.further-info[data-v-1302bd29]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.further-info[data-v-1302bd29] {
  text-decoration: underline;
  cursor: pointer;
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.h1[data-v-cadd0b55] {
  margin-bottom: var(--Spacing-spacing-3);
}
.agreement-title[data-v-cadd0b55] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-3);
}
.agreement-check[data-v-cadd0b55] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.agreement-check[data-v-cadd0b55] .q-field__control {
  color: var(--Neutral-UI-neutral-ui-100);
}
.agreement-check[data-v-cadd0b55] .q-checkbox__label {
  padding-left: var(--Spacing-spacing-4);
}
.further-info[data-v-cadd0b55]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.further-info[data-v-cadd0b55] {
  text-decoration: underline;
  cursor: pointer;
}
.consent-p[data-v-cadd0b55] {
  margin-top: var(--Spacing-spacing-4);
}
.research-consent[data-v-cadd0b55] {
  margin-top: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.h1[data-v-153a6ca4] {
  margin-bottom: var(--Spacing-spacing-3);
}
.agreement-title[data-v-153a6ca4] {
  /* Body/Body - Bold */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  margin-bottom: var(--Spacing-spacing-3);
}
.agreement-check[data-v-153a6ca4] {
  /* Body/Body */
  font-family: var(--Font-Primary-Font);
  font-size: var(--Typography-Body);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}
.agreement-check[data-v-153a6ca4] .q-field__control {
  color: var(--Neutral-UI-neutral-ui-100);
}
.agreement-check[data-v-153a6ca4] .q-checkbox__label {
  padding-left: var(--Spacing-spacing-4);
}
.further-info[data-v-153a6ca4]:focus-visible {
  outline: 2px solid var(--Primary-primary-color-1) !important;
  outline-offset: 2px;
}
.further-info[data-v-153a6ca4] {
  text-decoration: underline;
  cursor: pointer;
}
.consent-p[data-v-153a6ca4] {
  margin-top: var(--Spacing-spacing-4);
}
.research-consent[data-v-153a6ca4] {
  margin-top: var(--Spacing-spacing-4);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.voucher-wrapper[data-v-ab9517dc] {
  max-width: 420px;
  margin-bottom: var(--Spacing-spacing-8);
}
.headline[data-v-ab9517dc] {
  margin-bottom: var(--Spacing-spacing-4);
}
.text[data-v-ab9517dc] {
  margin-bottom: var(--Spacing-spacing-8);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.voucher-card[data-v-76a9727c] {
  display: flex;
  align-items: stretch;
  background-color: var(--Neutral-UI-neutral-ui-10);
  border-radius: var(--border-radius-1);
  padding: var(--Spacing-spacing-4) var(--Spacing-spacing-7) var(--Spacing-spacing-4) var(--Spacing-spacing-6);
  width: 100%;
}
@media screen and (min-width: 1280px) {
.voucher-card[data-v-76a9727c] {
    flex: 1 0 0;
}
}
.voucher-content[data-v-76a9727c] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: var(--Spacing-spacing-5);
  width: 100%;
}
.voucher-header[data-v-76a9727c] {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
.voucher-title[data-v-76a9727c] {
  font-family: var(--Font-Secondary-Font);
  font-size: var(--Typography-H1);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.72px;
  align-self: flex-start;
  color: var(--Neutral-UI-neutral-ui-100);
  margin: 0;
  text-align: left;
}
.voucher-image[data-v-76a9727c] {
  display: flex;
}
.voucher-image img[data-v-76a9727c] {
  width: var(--Spacing-spacing-10);
  height: var(--Spacing-spacing-10);
  object-fit: contain;
}
.voucher-input-section[data-v-76a9727c] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
}
.voucher-input-group[data-v-76a9727c] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
  width: 100%;
}
.voucher-success-section[data-v-76a9727c] {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-spacing-5);
  width: 100%;
}
.voucher-success-content[data-v-76a9727c] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-spacing-4);
  width: 100%;
}
.voucher-success-header[data-v-76a9727c] {
  display: flex;
  align-items: center;
  gap: var(--Spacing-spacing-2);
  justify-content: center;
  width: 100%;
}
.remove-voucher-btn[data-v-76a9727c] {
  align-self: flex-start;
  color: var(--Neutral-UI-neutral-ui-80);
  text-decoration: underline;
  width: 100%;
}
.remove-voucher-btn[data-v-76a9727c]:hover {
  color: var(--Neutral-UI-neutral-ui-100);
}/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.public-sign-up-page[data-v-a6937a58] {
  background-color: var(--Neutral-UI-neutral-ui-10);
  border-radius: var(--border-radius);
  padding: var(--Spacing-spacing-7) var(--Spacing-spacing-4) var(--Spacing-spacing-7) var(--Spacing-spacing-4);
}
@media screen and (min-width: 1280px) {
.public-sign-up-page[data-v-a6937a58] {
    background-color: var(--Neutral-UI-neutral-ui-10);
    padding: 0;
    margin: var(--Spacing-spacing-4) 0 var(--Spacing-spacing-7) 0;
}
}
.public-sign-up-page-body[data-v-a6937a58] {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
@media screen and (min-width: 1280px) {
.public-sign-up-page-body[data-v-a6937a58] {
    padding: var(--Spacing-spacing-7) var(--Spacing-spacing-7);
}
}
.user-data-step-container[data-v-a6937a58] {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
  gap: var(--Spacing-spacing-4) var(--Spacing-spacing-9);
}
@media screen and (min-width: 1280px) {
.user-data-step-container[data-v-a6937a58] {
    flex-direction: row;
    gap: var(--Spacing-spacing-8);
    align-items: flex-start;
}
}
.sign-up-form-section[data-v-a6937a58] {
  flex: 1;
}
@media screen and (min-width: 1280px) {
.sign-up-form-section[data-v-a6937a58] {
    max-width: 500px;
}
}
.voucher-section[data-v-a6937a58] {
  width: 100%;
  border-radius: var(--Border-Radius-1);
}
@media screen and (min-width: 1280px) {
.voucher-section[data-v-a6937a58] {
    max-width: 400px;
}
}
.privacy-policy-page[data-v-15c004e0] {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}
.privacy-policy-content[data-v-15c004e0] {
  white-space: pre-wrap;
}
/**
  Utility class for accessibility
  Hides content visual, but provides it for screen readers
  Inspired by https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 */
/**
 This file is used directly by Quasar.
 It's not imported anywhere in the code.
 Thus if you don't use Quasar component it's not relevant.
 */
.page-container[data-v-3cec04d6] {
  display: flex;
  max-width: 100%;
  height: 100%;
}