div.general-error {
  position: absolute;
  bottom: 0;
  background-color: var(--primitives-colors-error-600);
  padding: var(--padding-5xs);
  width: 100%;
  text-align: center;
  color: white;
  font-weight: bold;
  border-top: 1px solid var(--color-black);
}

div.button {
  position: relative;
  z-index: 0;
  transition: all 0.25s ease-in-out;
}

.coolButton {
  align-items: center;
  appearance: none;
  border-radius: 12px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 1px -2px,rgba(0, 0, 0, .14) 0 2px 2px 0,rgba(0, 0, 0, .12) 0 1px 5px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: Roboto,sans-serif;
  font-size: .875rem;
  font-weight: 500;
  height: 36px;
  justify-content: center;
  letter-spacing: .0892857em;
  line-height: normal;
  min-width: 64px;
  outline: none;
  overflow: visible;
  padding: 0 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  will-change: transform,opacity;
}

.feedback-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /
}

.feedback-spinner {
  border: 8px solid #f3f3f3; 
  border-top: 8px solid #3498db; 
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: feedback-spin 1s linear infinite;
}

@keyframes feedback-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1.2em;
  color: #666;
  text-align: center;
  margin-top: 20px;
}
.feedback-container {
  max-width: 100%;
  padding: 20px;
  margin: auto;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.feedback-button {
  padding: 12px 20px;
  background-color: #d92d20;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
  font-size: 1.1em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, transform 0.2s;
}

.feedback-button:hover {
  background-color: #b81b15;
  transform: scale(1.05);
}

.feedback-card {
  padding: 20px;
  background-color: #ffffff;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feedback-card h4 {
  margin-top: 0;
  font-size: 1.6em;
  color: #707070;
  font-weight: bold;
  text-align: center;
}

.feedback-list-container {
  max-height: 700px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #f9f9f9;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feedback-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.feedback-table th, .feedback-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}

.feedback-table th {
  background-color: #f4f4f4;
  font-weight: bold;
  color: #333;
}

.feedback-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.feedback-table tr:hover {
  background-color: #f1f1f1;
}

.no-feedback {
  font-size: 1.2em;
  color: #333;
  text-align: center;
}



.coolButton:hover {
  box-shadow: rgba(0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
}

.coolButton:disabled {
  background-color: rgba(0, 0, 0, .12);
  box-shadow: rgba(0, 0, 0, .2) 0 0 0 0, rgba(0, 0, 0, .14) 0 0 0 0, rgba(0, 0, 0, .12) 0 0 0 0;
  color: rgba(0, 0, 0, .37);
  cursor: default;
  pointer-events: none;
}

.coolButton:not(:disabled) {
  background-color: #C00145;
}

.coolButton:focus {
  box-shadow: rgba(0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
}

.coolButton:active {
  box-shadow: rgba(0, 0, 0, .2) 0 5px 5px -3px, rgba(0, 0, 0, .14) 0 8px 10px 1px, rgba(0, 0, 0, .12) 0 3px 14px 2px;
  background: #99133E;
}

div.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  bottom: 0;
  right: 0;
  z-index: -1;
  filter: brightness(100%);
  transition: all 0.25s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  div.button.color:hover::before {
    filter: brightness(85%);
    background-color: var(--main-dark);
  }
}

.persona-list-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  border-radius: 15px;
}

.persona-list-card {
  background: linear-gradient(145deg, #ffffff, #f7f9fc);
  border-radius: 15px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  cursor: pointer;
}

.persona-list-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.persona-list-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #ff7a18, #af002d, #319197);
}

.persona-list-avatar {
  width: 100%;
  height: 250px; 
  border-bottom: 2px solid #e0e0e0;
  overflow: hidden;
  position: relative;
}

.persona-list-avatar img {
  width: auto;
  height: 100%; 
  object-fit: contain; 
  filter: grayscale(20%);
  transition: filter 0.4s ease;
}

.persona-list-card:hover .persona-list-avatar img {
  filter: grayscale(0%);
}

.persona-list-details {
  padding: 20px;
  text-align: center;
  background: #ffffff;
}

.persona-list-name {
  font-size: 1.4em;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}

.persona-list-gender-status {
  font-size: 1em;
  color: #7b7b7b;
  margin-bottom: 15px;
  font-family: 'Roboto', sans-serif;
}

.persona-list-difficulty {
  margin-top: 15px;
  margin-bottom: 20px;
}

.persona-list-difficulty-bar {
  width: 100%;
  height: 12px;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.persona-list-difficulty-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff7a18, #af002d, #af002d);
  transition: width 0.4s ease;
  border-radius: 6px;
}


.persona-list-select-button {
  display: flex;
  justify-content: center;
  padding: 15px 0;
  background-color: #f7f9fc;
  border-top: 1px solid #e0e0e0;
}

.persona-list-select-button img {
  width: 24px;
  height: 24px;
  transition: transform 0.4s ease;
}

.persona-list-card:hover .persona-list-select-button img {
  transform: scale(1.1);
}


.persona-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; 
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.persona-card {
  display: flex;
  flex-direction: column;
  align-items: center; 
  width: calc(33.333% - 20px); 
  margin: 10px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: transform 0.2s;
  cursor: pointer;
  box-sizing: border-box; 
}

.persona-card:hover {
  transform: scale(1.05);
}

.persona-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.persona-details {
  text-align: center;
  margin-top: 10px;
}

.persona-name {
  font-size: 1.2em;
  font-weight: bold;
}

.persona-gender-status {
  font-size: 0.9em;
  color: #666;
}

.persona-difficulty {
  margin-top: 5px;
  font-size: 0.9em;
  color: #666;
}

.persona-select-button img {
  margin-top: 10px;
  width: 24px;
  height: 24px;
}

@media (max-width: 1200px) {
  .persona-card {
    width: calc(50% - 20px); 
  }
}

@media (max-width: 600px) {
  .persona-card {
    width: 100%; 
    margin: 10px 10px 10px 10px; 
  }
}




.ag-format-container {
  width: 100%; 
  max-width: 1142px; 
  margin: 0 auto; 
}

.ag-courses_box {
  display: flex; 
  align-items: flex-start; 
  flex-wrap: nowrap; 
  padding: 0; 
}

.ag-courses_item {
  flex-basis: 100%;
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  position: relative;
  border-radius: 28px; 
}

.ag-courses-item_link {
  display: block;
  padding: 30px 20px;
  background-color: #c0baba;
  overflow: hidden;
  position: relative;
  height: 100%;
  border-radius: inherit;
  width: 100%;
}

.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
  text-decoration: none;
  color: #FFF;
}

.ag-courses-item_link:hover .ag-courses-item_bg {
  transform: scale(10);
}

.ag-courses-item_title {
  font-weight: bold;
  font-size: 30px;
  color: #FFF;
  z-index: 2;
  position: relative;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 100%; 
  width: 100%; 
  padding: 0; 
  margin: 0; 
}

.ag-courses-item_date-box {
  font-size: 18px;
  color: #FFF;
  z-index: 2;
  position: relative;
}


.ag-courses-item_bg {
  height: 128px;
  width: 128px;
  background-color: #B80543;
  z-index: 1;
  position: absolute;
  top: -75px;
  right: -75px;
  border-radius: 50%;
  transition: all 0.5s ease;
}

@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }
}

@media only screen and (max-width: 639px) {
  .ag-courses_item {
    flex-basis: 100%;
    height: 100px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    position: relative;
  }
  .ag-courses-item_title {
    min-height: 72px;
    line-height: 1;
    font-size: 24px;
    font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 3;
  }
  .ag-courses-item_link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    padding-right:30px
  }
}




.hide {
  display: none !important;
}

div {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
@media (pointer: coarse) {
  div::-webkit-scrollbar-thumb {
    display: none !important;
  }
  div::-webkit-scrollbar {
    display: none !important;
  }
}
@media (pointer: fine) {
  div {
    scrollbar-width: initial !important;
    -ms-overflow-style: unset !important;
  }
}

img {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

div.button,
a {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

div.content {
  position: relative;
  border-radius: var(--br-base);
  height: 100%;
  overflow-y: auto;
  background-color: whitesmoke;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  text-align: left;
  font-size: var(--h3-size);
  color: var(--normal-text);
  font-family: var(--label-text-1);
}
@media (min-width: 800px) {
  div.content {
    border-radius: initial;
    max-width: 100%; /* Currently used for desktop testing */
    width: 100%;
    background-color: white;
  }
}
div.content div.user-add {
  display: flex;
  padding: var(--padding-13xl);
  justify-content: center;
  gap: 60px;
}
div.content div.user-overview {
  display: flex;
  flex-direction: column;
  padding: var(--padding-13xl);
  justify-content: center;
}
div.content div.user-overview div.buttons {
  padding: var(--padding-11xs);
}
div.content.sign-in div.sign-in-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-21xl);
  box-sizing: border-box;
  gap: var(--gap-xl);
  font-size: var(--h3-size);
  color: var(--normal-text);
  font-family: var(--label-text-1);
  font-weight: 600;
}
@media (min-width: 800px) {
  div.content.sign-in div.sign-in-content {
    width: 80%;
    max-width: 1024px;
    min-width: 750px;
    margin: auto;
    align-self: center;
    text-align: center;
  }
}
div.content.sign-in div.sign-in-content div.title {
  align-self: stretch;
  margin: 0;
  letter-spacing: -0.02em;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content.sign-in div.sign-in-content div.text {
  margin: 0;
  align-self: stretch;
  font-size: var(--h2-size);
  letter-spacing: -0.01em;
  color: var(--main-light);
}
@media (min-width: 800px) {
  div.content.sign-in form {
    width: 80%;
    max-width: 1024px;
    min-width: 750px;
    margin: auto;
  }
}
div.content.sign-in form div.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--label-text-1-size);
  padding: var(--padding-2xl);
  gap: var(--gap-xl);
}
@media (min-width: 800px) {
  div.content.sign-in form div.form {
    max-width: 400px;
    margin: auto;
  }
}
div.content.sign-in form div.form div.input-field {
  border-radius: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}
div.content.sign-in form div.form div.input-field div.inner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}
div.content.sign-in form div.form div.input-field div.inner label.label {
  position: relative;
  line-height: 20px;
  font-weight: 500;
}
div.content.sign-in form div.form div.input-field div.inner label.label.inline {
  display: inline-flex;
}
div.content.sign-in form div.form div.input-field div.inner input.input {
  align-self: stretch;
  border-radius: var(--radius-md);
  background-color: var(--white);
  box-shadow: var(--shadows-shadow-xs);
  border: 1px solid var(--normal-text);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs) var(--padding-sm);
  gap: var(--spacing-md);
  font-size: var(--body-text-size);
}
div.content.sign-in form div.form div.input-field div.inner input.input:focus-visible {
  outline: none !important;
}
div.content.sign-in form div.form div.buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
  font-size: 15.65px;
  color: var(--white);
  align-self: stretch;
}
div.content.sign-in form div.form div.buttons div.button {
  border-radius: var(--br-6xs-7);
  background-color: var(--main-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white) !important;
  cursor: pointer;
}
div.content.sign-in form div.form div.buttons div.button div:not(.text) {
  padding: var(--padding-sm-4);
}
div.content.sign-in form div.form div.buttons div.button div,
div.content.sign-in form div.form div.buttons div.button button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8.69px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  font-size: 15.65px;
}
div.content.sign-in form div.form div.buttons div.button div:not(.text),
div.content.sign-in form div.form div.buttons div.button button:not(.text) {
  width: 100%;
  height: 100%;
}
div.content.sign-in form div.form div.buttons div.button div img,
div.content.sign-in form div.form div.buttons div.button button img {
  position: relative;
  width: 22.9px;
  height: 22.9px;
}
div.content.sign-in form div.form div.buttons div.button div div,
div.content.sign-in form div.form div.buttons div.button button div {
  position: relative;
  line-height: 24.34px;
  font-weight: 600;
}
div.content.sign-in form div.form div.buttons div.button {
  padding: var(--padding-2xs-2);
}
div.content.sign-in form div.form div.forgot {
  position: relative;
  font-weight: 300;
  text-align: center;
  display: inline-block;
  width: 353px;
  height: 27px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--secondary-color);
}
div.content.sign-in form div.form div.forgot span {
  color: var(--color-black);
}
div.content.sign-in div.link {
  text-align: center;
}
div.content.training-details, div.content.scenario-details {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--gap-xl);
  text-align: left;
  font-size: var(--body-text-size);
  color: var(--normal-text);
  font-family: var(--label-text-1);
  padding: var(--padding-2xl);
}
@media (min-width: 800px) {
  div.content.training-details, div.content.scenario-details {
    padding: initial;
    padding-bottom: var(--padding-2xl);
  }
}
div.content.training-details div.top-bar, div.content.scenario-details div.top-bar {
  display: none;
}
@media (min-width: 800px) {
  div.content.training-details div.top-bar, div.content.scenario-details div.top-bar {
    display: initial;
  }
}
div.content.training-details div.details, div.content.scenario-details div.details {
  gap: var(--gap-xl);
  display: flex;
  flex-direction: column;
}
@media (min-width: 800px) {
  div.content.training-details div.details, div.content.scenario-details div.details {
    width: 80%;
    max-width: 1024px;
    min-width: 750px;
    margin: auto;
  }
}
div.content.training-details div.details img.banner, div.content.scenario-details div.details img.banner {
  position: relative;
  border-radius: var(--br-base);
  width: 100%;
  max-height: 250px;
  flex-shrink: 0;
  object-fit: cover;
}
div.content.training-details div.details div.badges-and-duration, div.content.scenario-details div.details div.badges-and-duration {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: center;
  font-size: var(--label-text-2-size);
  color: var(--color-royalblue-100);
}
div.content.training-details div.details div.badges-and-duration div.badges, div.content.scenario-details div.details div.badges-and-duration div.badges {
  width: 240px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
div.content.training-details div.details div.badges-and-duration div.badges div.inner, div.content.scenario-details div.details div.badges-and-duration div.badges div.inner {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
div.content.training-details div.details div.badges-and-duration div.badges div.inner div.badge, div.content.scenario-details div.details div.badges-and-duration div.badges div.inner div.badge {
  border-radius: var(--br-9980xl);
  background-color: var(--component-colors-utility-blue-utility-blue-50);
  border: 1px solid var(--color-lightskyblue);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--spacing-xxs) var(--padding-3xs) var(--spacing-xxs) var(--spacing-md);
  gap: var(--spacing-sm);
  opacity: 0.8;
}
div.content.training-details div.details div.badges-and-duration div.badges div.inner div.badge img.icon, div.content.scenario-details div.details div.badges-and-duration div.badges div.inner div.badge img.icon {
  position: relative;
  width: 8px;
  height: 8px;
}
div.content.training-details div.details div.badges-and-duration div.badges div.inner div.badge div.text, div.content.scenario-details div.details div.badges-and-duration div.badges div.inner div.badge div.text {
  position: relative;
  font-weight: 300;
}
div.content.training-details div.details div.badges-and-duration div.duration, div.content.scenario-details div.details div.badges-and-duration div.duration {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
  text-align: left;
  font-size: var(--label-text-1-size);
  color: var(--secondary-color);
}
div.content.training-details div.details div.badges-and-duration div.duration div, div.content.scenario-details div.details div.badges-and-duration div.duration div {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: var(--spacing-md);
  font-weight: 300;
}
div.content.training-details div.details div.badges-and-duration div.duration div img, div.content.scenario-details div.details div.badges-and-duration div.duration div img {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
div.content.training-details div.details div.description, div.content.scenario-details div.details div.description {
  align-self: stretch;
  position: relative;
  line-height: 24px;
  font-weight: 300;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content.training-details div.details div.subtitle{
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-xl) 0 var(--padding-3xs);
  gap: var(--gap-xl);
}

div.content.training-details div.details div.subtitle b.title, div.content.scenario-details div.details div.subtitle b.title {
  position: relative;
  line-height: 24px;
  text-transform: uppercase;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content.training-details div.details ul.objectives, div.content.scenario-details div.details ul.objectives {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  color: var(--gray-600);
  padding-left: var(--padding-13xl);
  padding-right: var(--padding-13xl);
}
div.content.training-details div.details ul.objectives li.objective, div.content.scenario-details div.details ul.objectives li.objective {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-end;
  gap: var(--gap-xl);
}
div.content.training-details div.details ul.objectives li.objective div.icon-container, div.content.scenario-details div.details ul.objectives li.objective div.icon-container {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
}
div.content.training-details div.details ul.objectives li.objective div.icon-container img.icon, div.content.scenario-details div.details ul.objectives li.objective div.icon-container img.icon {
  position: relative;
  width: 18.7px;
  height: 18.7px;
}
div.content.training-details div.details ul.objectives li.objective div.text, div.content.scenario-details div.details ul.objectives li.objective div.text {
  position: relative;
  line-height: 24px;
  display: inline-block;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}
div.content.training-details div.details ul.objectives li.objective div.text ul.sub-objectives, div.content.scenario-details div.details ul.objectives li.objective div.text ul.sub-objectives {
  list-style: circle;
  padding-left: var(--padding-base);
}
div.content.training-details div.details div.personas, div.content.scenario-details div.details div.personas {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-xl);
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}
div.content.training-details div.details div.personas div.role-selector, div.content.scenario-details div.details div.personas div.role-selector {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  height: fit-content;
}
div.content.training-details div.details div.personas div.role-selector div.role, div.content.scenario-details div.details div.personas div.role-selector div.role {
  flex: 1;
  background-color: var(--white);
  border: 1.1px solid var(--interface-secondary-color);
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  font-size: var(--font-size-sm-5);
}
div.content.training-details div.details div.personas div.role-selector div.role.disabled, div.content.scenario-details div.details div.personas div.role-selector div.role.disabled {
  background-color: var(--gray-200);
  color: var(--interface-secondary-color);
}
div.content.training-details div.details div.personas div.role-selector div.role.right, div.content.scenario-details div.details div.personas div.role-selector div.role.right {
  border-radius: 0 9px 9px 0;
}
div.content.training-details div.details div.personas div.role-selector div.role.left, div.content.scenario-details div.details div.personas div.role-selector div.role.left {
  border-radius: 9px 0 0 9px;
}
div.content.training-details div.details div.personas div.role-selector div.role div, div.content.scenario-details div.details div.personas div.role-selector div.role div {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
div.content.training-details div.details div.personas div.role-selector div.role div div, div.content.scenario-details div.details div.personas div.role-selector div.role div div {
  position: relative;
  line-height: 24px;
  container-type: inline-size;
}
@container (max-width: 185px) {
  div.content.training-details div.details div.personas div.role-selector div.role div div label.text-20, div.content.scenario-details div.details div.personas div.role-selector div.role div div label.text-20 {
    font-size: var(--font-size-xs-6);
  }
}
@container (max-width: 155px) {
  div.content.training-details div.details div.personas div.role-selector div.role div div label.text-25, div.content.scenario-details div.details div.personas div.role-selector div.role div div label.text-25 {
    font-size: var(--font-size-xs-6);
  }
}
div.content.training-details div.details div.personas div.role-selector div.role div div label, div.content.scenario-details div.details div.personas div.role-selector div.role div div label {
  cursor: pointer;
  display: inline-flex;
  align-content: center;
  align-items: center;
  gap: var(--gap-8xs);
  align-self: stretch;
  width: 100%;
  height: 100%;
  padding: var(--padding-3xs-6);
}
div.content.training-details div.details div.personas div.role-selector div.role div div label img, div.content.scenario-details div.details div.personas div.role-selector div.role div div label img {
  position: relative;
  width: 13.5px;
  height: 13.5px;
}
div.content.training-details div.details div.personas div.role-selector div.role div div.selected, div.content.scenario-details div.details div.personas div.role-selector div.role div div.selected {
  font-weight: 600;
}
div.content.training-details div.details div.personas div.as-customer, div.content.scenario-details div.details div.personas div.as-customer {
  display: inline-flex;
  flex-direction: column;
  gap: var(--gap-3xs);
}
div.content.training-details div.details div.personas div.as-customer div.text, div.content.scenario-details div.details div.personas div.as-customer div.text {
  position: relative;
  line-height: 24px;
  color: var(--gray-600);
  display: inline-block;
}
div.content.training-details div.details div.personas div.as-customer div.button, div.content.scenario-details div.details div.personas div.as-customer div.button {
  border-radius: var(--br-6xs-7);
  background-color: var(--main-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white) !important;
  cursor: pointer;
}
div.content.training-details div.details div.personas div.as-customer div.button div:not(.text), div.content.scenario-details div.details div.personas div.as-customer div.button div:not(.text) {
  padding: var(--padding-sm-4);
}
div.content.training-details div.details div.personas div.as-customer div.button div,
div.content.training-details div.details div.personas div.as-customer div.button button, div.content.scenario-details div.details div.personas div.as-customer div.button div,
div.content.scenario-details div.details div.personas div.as-customer div.button button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8.69px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  font-size: 15.65px;
}
div.content.training-details div.details div.personas div.as-customer div.button div:not(.text),
div.content.training-details div.details div.personas div.as-customer div.button button:not(.text), div.content.scenario-details div.details div.personas div.as-customer div.button div:not(.text),
div.content.scenario-details div.details div.personas div.as-customer div.button button:not(.text) {
  width: 100%;
  height: 100%;
}
div.content.training-details div.details div.personas div.as-customer div.button div img,
div.content.training-details div.details div.personas div.as-customer div.button button img, div.content.scenario-details div.details div.personas div.as-customer div.button div img,
div.content.scenario-details div.details div.personas div.as-customer div.button button img {
  position: relative;
  width: 22.9px;
  height: 22.9px;
}
div.content.training-details div.details div.personas div.as-customer div.button div div,
div.content.training-details div.details div.personas div.as-customer div.button button div, div.content.scenario-details div.details div.personas div.as-customer div.button div div,
div.content.scenario-details div.details div.personas div.as-customer div.button button div {
  position: relative;
  line-height: 24.34px;
  font-weight: 600;
}
div.content.training-details div.details div.personas div.persona-intro, div.content.scenario-details div.details div.personas div.persona-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--gray-600);
}
div.content.training-details div.details div.personas div.persona-intro div.text, div.content.scenario-details div.details div.personas div.persona-intro div.text {
  position: relative;
  line-height: 24px;
  display: inline-block;
}
div.content.training-details div.details div.personas div.list, div.content.scenario-details div.details div.personas div.list {
  width: 100%;
  box-sizing: border-box;
  height: 568px;
  border-top-right-radius: var(--br-base);
  border-top-left-radius: var(--br-base);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: var(--font-size-xs-6);
  color: var(--main-light);
}
div.content.training-details div.details div.personas div.list div.header, div.content.scenario-details div.details div.personas div.list div.header {
  position: relative;
  background-color: var(--main-light);
  border-top-right-radius: var(--br-base);
  border-top-left-radius: var(--br-base);
  width: 100%;
  height: 60px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  container-type: inline-size;
  container-name: persona-header;
}
@container (max-width: 370px) {
  div.content.training-details div.details div.personas div.list div.header div.buttons, div.content.scenario-details div.details div.personas div.list div.header div.buttons {
    gap: var(--gap-9xs);
  }
  div.content.training-details div.details div.personas div.list div.header div.buttons div, div.content.scenario-details div.details div.personas div.list div.header div.buttons div {
    padding: var(--padding-3xs) var(--padding-3xs-6);
  }
}
@container (min-width: 371px) {
  div.content.training-details div.details div.personas div.list div.header div.buttons, div.content.scenario-details div.details div.personas div.list div.header div.buttons {
    gap: var(--gap-3xs);
  }
  div.content.training-details div.details div.personas div.list div.header div.buttons div, div.content.scenario-details div.details div.personas div.list div.header div.buttons div {
    padding: var(--padding-3xs) var(--padding-3xs-6);
  }
}
div.content.training-details div.details div.personas div.list div.header div.buttons, div.content.scenario-details div.details div.personas div.list div.header div.buttons {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: flex-start;
  bottom: -2px;
}
div.content.training-details div.details div.personas div.list div.header div.buttons div, div.content.scenario-details div.details div.personas div.list div.header div.buttons div {
  position: relative;
  font-weight: 600;
  border-top-left-radius: var(--br-7xs-1);
  border-top-right-radius: var(--br-7xs-1);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
div.content.training-details div.details div.personas div.list div.header div.buttons div.create, div.content.scenario-details div.details div.personas div.list div.header div.buttons div.create {
  background-color: var(--white);
  border: 1.5px solid var(--main-light);
  max-width: 175px;
  width: fit-content;
}
div.content.training-details div.details div.personas div.list div.header div.buttons div.custom, div.content.scenario-details div.details div.personas div.list div.header div.buttons div.custom {
  background-color: var(--contrast-tab);
  max-width: 127px;
  width: fit-content;
  color: var(--white);
}
div.content.training-details div.details div.personas div.list div.header div.buttons div button, div.content.scenario-details div.details div.personas div.list div.header div.buttons div button {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6.38px;
}
div.content.training-details div.details div.personas div.list div.header div.buttons div button img, div.content.scenario-details div.details div.personas div.list div.header div.buttons div button img {
  position: relative;
  width: 17.3px;
  height: 17.3px;
}
div.content.training-details div.details div.personas div.list div.header div.buttons div button img.add, div.content.scenario-details div.details div.personas div.list div.header div.buttons div button img.add {
  filter: var(--filter-main-light);
}
div.content.training-details div.details div.personas div.list div.header div.buttons div div, div.content.scenario-details div.details div.personas div.list div.header div.buttons div div {
  padding: initial;
}
div.content.training-details div.details div.personas div.list div.subheader, div.content.scenario-details div.details div.personas div.list div.subheader {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--grey-light);
  width: 100%;
  height: 28px;
  overflow: hidden;
  flex-shrink: 0;
  font-size: var(--label-text-2-size);
  color: var(--normal-text);
  justify-content: flex-start;
}
div.content.training-details div.details div.personas div.list div.subheader div.filters, div.content.scenario-details div.details div.personas div.list div.subheader div.filters {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  /* !TODO: find better way to do this */
  margin-left: 73px;
  margin-right: 30px;
}
div.content.training-details div.details div.personas div.list div.subheader div.filters div.filter, div.content.scenario-details div.details div.personas div.list div.subheader div.filters div.filter {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  min-width: fit-content;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}
div.content.training-details div.details div.personas div.list div.subheader div.filters div.filter.end, div.content.scenario-details div.details div.personas div.list div.subheader div.filters div.filter.end {
  justify-content: end;
}
div.content.training-details div.details div.personas div.list div.subheader div.filters div.filter.pointer, div.content.scenario-details div.details div.personas div.list div.subheader div.filters div.filter.pointer {
  cursor: pointer;
}
div.content.training-details div.details div.personas div.list div.subheader div.filters div.filter div.text, div.content.scenario-details div.details div.personas div.list div.subheader div.filters div.filter div.text {
  position: relative;
  line-height: 18px;
  font-weight: 500;
}
div.content.training-details div.details div.personas div.list div.subheader div.filters div.filter img, div.content.scenario-details div.details div.personas div.list div.subheader div.filters div.filter img {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
div.content.training-details div.details div.personas div.list div.tbl, div.content.scenario-details div.details div.personas div.list div.tbl {
  position: relative;
  flex-shrink: 0;
  font-size: var(--label-text-1-size);
  color: var(--color-black);
  max-height: 560px;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona {
  border-radius: var(--br-base);
  background-color: var(--white);
  width: 100%;
  max-width: 500px;
  margin: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-xl);
  padding-bottom: var(--padding-21xl);
  container-type: inline-size;
  container-name: selected-persona;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.picture, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.picture {
  align-self: stretch;
  background: linear-gradient(180deg, rgba(178, 221, 255, 0.2), rgba(255, 255, 255, 0.2)), #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-xl) 0;
  gap: var(--gap-xl);
  font-size: var(--h2-size);
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.picture div.avatar, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.picture div.avatar {
  position: relative;
  width: 100px;
  height: 100px;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.picture div.avatar img, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.picture div.avatar img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  border-radius: var(--br-9980xl);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.picture div.name, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.picture div.name {
  /*align-self: stretch;*/
  position: relative;
  letter-spacing: -0.01em;
  font-weight: 600;
  display: inline-block;
  height: 31px;
  flex-shrink: 0;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.difficulty, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.difficulty {
  /*align-self: stretch;*/
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.difficulty div.bold, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.difficulty div.bold {
  align-self: center;
  position: relative;
  line-height: 16px;
  display: inline-block;
  height: 19px;
  flex-shrink: 0;
  font-weight: 600;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.difficulty div, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.difficulty div {
  align-self: center;
  position: relative;
  line-height: 24px;
  font-weight: 300;
  display: inline-block;
  height: 19px;
  flex-shrink: 0;
}
@container selected-persona (max-width: 350px) {
  div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu {
    padding-left: var(--padding-11xs);
    padding-right: var(--padding-11xs);
  }
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu {
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-xl);
  flex: 1 1 0;
  height: 100%;
  width: 100%;
  max-width: 500px;
  padding: 0 var(--padding-13xl);
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item {
  flex: 1 1 0;
  border-radius: var(--br-5xs);
  background-color: var(--grey-light);
  border: 1px solid var(--interface-secondary-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-3xs);
  cursor: pointer;
  position: relative;
  line-height: 24px;
  font-weight: 300;
  height: 100%;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item div, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item div {
  position: relative;
  line-height: 24px;
  text-align: center;
  align-content: center;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item.selected, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item.selected {
  background-color: var(--white);
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item.selected div, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.persona-menu div.persona-menu-item.selected div {
  font-weight: 600;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.-context, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.persona-context {
  position: relative;
  font-size: var(--label-text-1-size);
  line-height: 24px;
  color: var(--gray-600);
  text-align: left;
  display: inline-block;
  width: 100%;
  max-width: 500px;
  padding: 0 var(--padding-13xl);
  flex-shrink: 0;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.buttons, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.buttons {
  display: flex;
  width: 100%;
  max-width: 500px;
  padding: 0 var(--padding-13xl);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9.64px;
  text-align: left;
  font-size: 15.08px;
  color: var(--white);
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button {
  align-self: stretch;
  border-radius: var(--br-6xs-7);
  box-sizing: border-box;
  height: 51.1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13.4037857056px 26.8075714111px;
  cursor: pointer;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button.engage, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button.engage {
  background-color: var(--main-light);
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button.cancel, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button.cancel {
  background-color: var(--white);
  border: 1.7px solid var(--main-light);
  color: var(--main-light);
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button div, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button div {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8.38px;
  text-align: center;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button div img, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button div img {
  position: relative;
  width: 20.1px;
  height: 20.1px;
}
div.content.training-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button div div, div.content.scenario-details div.details div.personas div.list div.tbl div.selected-persona div.buttons div.button div div {
  position: relative;
  line-height: 23.46px;
  font-weight: 600;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card {
  background-color: var(--white);
  border-top: 1px solid var(--interface-secondary-color);
  box-sizing: border-box;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl);
  cursor: pointer;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-mini);
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.avatar, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.avatar {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 40px;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.avatar img, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.avatar img {
  height: 100%;
  width: 100%;
  border-radius: var(--br-9980xl);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-xl);
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.text, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.text {
  align-self: stretch;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-8xs);
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.text div.name, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.text div.name {
  align-self: stretch;
  position: relative;
  font-weight: 600;
  display: inline-block;
  min-height: 13px;
  flex-shrink: 0;
  height: fit-content;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.text div.gender-status, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.text div.gender-status {
  align-self: stretch;
  position: relative;
  font-weight: 300;
  color: var(--normal-text);
  display: inline-block;
  height: 13px;
  flex-shrink: 0;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.difficulty, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details div.difficulty {
  position: relative;
  font-weight: 300;
  color: var(--normal-text);
  display: inline-block;
  width: 48px;
  height: 18px;
  flex-shrink: 0;
}
div.content.training-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details img, div.content.scenario-details div.details div.personas div.list div.tbl ul.cards li.card div.persona div.inner-details img {
  position: relative;
  width: 8px;
  height: 14px;
  cursor: pointer;
}
div.content.training {
  box-sizing: border-box;
  font-size: var(--label-text-1-size);
  height: 100%;
  width: 100%;
}
div.content.training:not(.no-gap) {
  gap: var(--gap-xl);
}
div.content.training div.simulation {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  height: 100%;
}
@media (min-width: 800px) {
  div.content.training div.simulation {
    width: 80%;
    max-width: 1024px;
    min-width: 750px;
    margin: auto;
    max-height: 100%;
  }
}
div.content.training div.simulation div.breadcrumb {
  padding: var(--padding-2xl);
}
div.content.training div.simulation div.training-details {
  padding: var(--padding-2xl);
}
div.content.training div.simulation div.message-warning {
  background-color: var(--tertiary-color);
  color: var(--white);
  text-align: center;
  padding: var(--padding-8xs);
}
div.content.training div.simulation div.message-error {
  background-color: var(--red-dark);
  color: var(--white);
  text-align: center;
  padding: var(--padding-8xs);
}
div.content.training div.simulation div.message-input {
  display: block;
  color: var(--interface-secondary-color);
  /*padding: var(--padding-3xs);*/
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  margin-top: auto;
  padding-top: var(--padding-2xl);
  padding-bottom: var(--padding-2xl);
}
div.content.training div.simulation div.message-input.paused {
  /* Find a better approach for the following 3 lines */
  position: relative;
  bottom: 0;
  font-size: var(--body-text-size);
  flex-direction: column;
  display: flex;
  padding: var(--padding-2xl);
  margin-top: var(--padding-11xs);
}
div.content.training div.simulation div.message-input.paused div.simulation-paused {
  text-align: center;
  line-height: 24px;
}
div.content.training div.simulation div.message-input.paused div.simulation-paused p.paused-title {
  font-weight: bold;
}

div.content.training div.simulation div.message-input div.actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  justify-content: center;
  flex-wrap: wrap-reverse;
}
div.content.training div.simulation div.message-input div.actions div.visibility-toggle {
  visibility: visible;
  opacity: 1;
  -o-transition: visibility 0.5s, opacity 0.5s linear;
  -webkit-transition: visibility 0.5s, opacity 0.5s linear;
  -moz-transition: visibility 0.5s, opacity 0.5s linear;
  transition: visibility 0.5s, opacity 0.5s linear;
}
div.content.training div.simulation div.message-input div.actions div.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-8xs);
  color: var(--interface-secondary-color);
  height: 80px;
}
div.content.training div.simulation div.message-input .invisible {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}
div.content.training div.simulation div.message-input .visible {
  visibility: visible;
  opacity: 1;
  display: initial;
}
div.content.training div.simulation div.message-input div.button {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}
div.content.training div.simulation div.message-input div.button.round {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
div.content.training div.simulation div.message-input div.button.round.mic {
  background-color: var(--red-dark);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 30%;
}
div.content.training div.simulation div.message-input div.button.round.mic.paused {
  width: 60px;
  height: 60px;
}
div.content.training div.simulation div.message-input div.button.round.mic img {
  width: 35px;
  content: url("./img/icon-mic.svg");
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(88deg) brightness(107%) contrast(101%);
}
@media (hover: hover) and (pointer: fine) {
  div.content.training div.simulation div.message-input div.button.round.mic:hover {
    background-color: var(--white);
    transition: background 0.3s;
  }
  div.content.training div.simulation div.message-input div.button.round.mic:hover img {
    width: 30px;
    content: url("./img/icon-stop.svg");
    filter: brightness(0) saturate(100%) invert(28%) sepia(84%) saturate(7022%) hue-rotate(355deg) brightness(89%) contrast(129%);
  }
}
div.content.training div.simulation div.message-input div.button.round.mic.recording {
  background-color: var(--white);
  transition: background 0.3s;
}
div.content.training div.simulation div.message-input div.button.round.mic.recording img {
  width: 30px;
  content: url("./img/icon-stop.svg");
  filter: brightness(0) saturate(100%) invert(28%) sepia(84%) saturate(7022%) hue-rotate(355deg) brightness(89%) contrast(129%);
}
div.content.training div.simulation div.message-input div.button:not(.mic) {
  border-radius: var(--br-5xs);
  background-color: var(--secondary-color);
  width: fit-content;
  min-width: 60px;
  height: 45px;
  text-align: center;
}
div.content.training div.simulation div.message-input div.button:not(.mic).feedback {
  background-color: var(--white);
  border: 2px solid var(--secondary-color);
  line-height: 24px;
  color: var(--secondary-color);
  font-weight: bold;
  padding: var(--padding-base);
  display: flex;
  flex-direction: revert;
  gap: var(--gap-3xs-6);
  width: initial;
}
div.content.training div.simulation div.message-input div.button:not(.mic).feedback img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(78%) saturate(3026%) hue-rotate(200deg) brightness(97%) contrast(96%);
}
div.content.training div.simulation div.message-input div.button.pause {
  display: flex;
  flex-direction: row;
  width: fit-content;
  gap: var(--gap-6xs-4);
  padding: 0 var(--padding-5xs);
}
div.content.training div.simulation div.message-input div.button.type:not(.pause) {
  padding: 0 var(--padding-11xs);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  font-size: var(--font-size-4xl-2);
}
div.content.training div.simulation div.message-input div.button.pause, div.content.training div.simulation div.message-input div.button.type {
  background-color: var(--white);
  border: 2px solid var(--secondary-color);
  line-height: 24px;
  color: var(--secondary-color);
  font-weight: bold;
}
div.content.training div.simulation div.message-input div.input-field {
  position: relative;
  border-radius: var(--br-5xs);
  background-color: var(--white);
  border: 1px solid var(--interface-secondary-color);
  box-sizing: border-box;
  height: 50px;
  overflow: hidden;
  flex-shrink: 0;
  justify-content: center;
  align-content: center;
  display: flex;
}
div.content.training div.simulation div.message-input div.input-field div.field-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
div.content.training div.simulation div.message-input div.input-field div.field-container .input {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: var(--normal-text);
  overflow-y: scroll;
  resize: none;
  padding: var(--padding-3xs-6);
  font-size: var(--font-size-sm-5);
}
@media (min-width: 800px) {
  div.content.training div.simulation div.message-input div.input-field div.field-container .input {
    min-width: 400px;
  }
}
div.content.training div.simulation div.message-input div.input-field div.field-container .input:focus-visible {
  outline: none !important;
}
div.content.training div.simulation div.message-input div.input-field div.field-container div.button {
  border-radius: 0 var(--br-5xs) var(--br-5xs) 0;
  border: 2px solid var(--tertiary-color);
  background-color: var(--tertiary-color);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 0;
  height: 100%;
}
div.content.training div.simulation div.message-input div.input-field div.field-container img {
  position: relative;
  padding: var(--padding-5xs);
}
div.content div.top-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-21xl);
  padding-bottom: var(--padding-3xs);
  box-sizing: border-box;
  gap: var(--gap-xl);
}
@media (min-width: 800px) {
  div.content div.top-bar {
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    gap: 0;
  }
}

div.content div.top-bar div.top-bar-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--grey-light);
  padding: var(--padding-xl-4);
  color: var(--white);
}

div.content div.top-bar div.top-bar-logos div.language-selection {
  display: flex;
  align-items: center;
  grid-column: 2;
}

div.content div.top-bar div.top-bar-logos div.language-selection a {
  margin: 0 5px;
  color: grey;
  cursor: pointer;
  font-size: small;
}

div.content div.top-bar div.top-bar-logos div.language-selection a.disabled {
  color: #0676EF;
  pointer-events: none;
  cursor: default;
}

div.content div.top-bar div.top-bar-logos div.language-selection span {
  margin: 0 5px;
  color: var(--white);
}

div.content div.top-bar div.top-bar-title {
  display: grid;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  width: 100%;
  font-size: 1.4rem; 
  font-weight: 600;
  background-color: var(--grey-light); 
  border-radius: var(--border-radius-sm);
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}

@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-title {
    background-color: white;
    padding-left: 20px;
    margin-top: 30px;
    font-size: 1.5rem; 
    border-bottom: 1px solid #B0B0B0;
    font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  }
}

div.content div.top-bar div.top-bar-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  color: var(--white);
  width: 100%;
}
@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-logos {
    background-color: var(--grey-light);
    padding: var(--padding-xl-4);
    grid-column: 1/3;
  }
}
div.content div.top-bar div.top-bar-logos div.menu {
  display: flex;
  width: 85%;
  flex-direction: column;
  position: relative;
  top: 0px;
  z-index: 3;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-logos div.menu {
    display: none;
  }
}
div.content div.top-bar div.top-bar-logos div.menu input {
  display: flex;
  width: 40px;
  height: 100%;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}
@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-logos div.menu input.hamburger {
    display: none;
  }
}
div.content div.top-bar div.top-bar-logos div.menu input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #4c5667;
}
div.content div.top-bar div.top-bar-logos div.menu input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
div.content div.top-bar div.top-bar-logos div.menu input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}
div.content div.top-bar div.top-bar-logos div.menu input:checked ~ ul {
  transform: none;
}
div.content div.top-bar div.top-bar-logos div.menu span {
  display: flex;
  width: 40px;
  height: 4px;
  margin-bottom: 6px;
  position: relative;
  background: var(--main-light);
  border-radius: 10px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
div.content div.top-bar div.top-bar-logos div.menu span:first-child {
  transform-origin: 0% 0%;
}
div.content div.top-bar div.top-bar-logos div.menu span:nth-last-child(2) {
  transform-origin: 0% 100%;
}
@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-logos div.menu span.hamburger {
    display: none;
  }
}
div.content div.top-bar div.top-bar-logos div.menu ul {
  text-align: center;
}
@media (max-width: 800px) {
  div.content div.top-bar div.top-bar-logos div.menu ul {
    position: fixed;
    height: 120%;
    width: 120%;
    margin: -80px 0 0 -70px;
    padding: 150px 80px 0 60px;
    background-color: white;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
}
@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-logos div.menu ul {
    display: flex;
    flex-direction: row;
  }
}
div.content div.top-bar div.top-bar-logos div.menu ul li {
  transition-delay: 2s;
  background-color: #B80543;
  margin-bottom: 10px;
  border-radius: 10px;
}
div.content div.top-bar div.top-bar-logos div.logo {
  display: none;
}
@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-logos div.logo {
    display: flex;
    font-size: var(--font-size-13xl-6);
    font-family: var(--label-text-1);
    grid-column: 1;
  }
}
div.content div.top-bar div.top-bar-logos div.profile-avatar {
  position: relative;
  border-radius: var(--br-9980xl);
  background-color: var(--main-light);
  width: 40px;
  height: 40px;
  cursor: pointer;
  justify-self: end;
  grid-column: 4;
}
@media (min-width: 800px) {
  div.content div.top-bar div.top-bar-logos div.profile-avatar {
    grid-column: 4;
  }
}
div.content div.top-bar div.top-bar-logos div.profile-avatar div.icon {
  position: relative;
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: 50% 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  border: 1px solid --border-color;
  border-radius: 20px;
}
div.content div.top-bar div.top-bar-logos div.profile-avatar div.icon input {
  display: flex;
  width: 40px;
  height: 100%;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}
div.content div.top-bar div.top-bar-logos div.profile-avatar div.icon input:checked ~ ul {
  display: flex;
  flex-direction: column;
  z-index: 2;
  padding: var(--padding-7xs);
  background-color: var(--white);
  color: var(--gray-700);
  border-radius: var(--br-4xs);
  border: 1px solid var(--gray-700);
  /* Temporary style because no time */
  width: 200px;
}
div.content div.top-bar div.top-bar-logos div.profile-avatar div.icon input:checked ~ ul li select {
  width: 100%;
}
div.content div.top-bar div.top-bar-logos div.profile-avatar div.icon ul {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
}
div.content div.top-bar div.profile {
  grid-column: 3;
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--gap-xl);
  color: var(--color-black);
  font-size: var(--h3-size);
}
@media (min-width: 800px) {
  div.content div.top-bar div.profile {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    color: var(--white);
  }
}
div.content div.top-bar div.profile div.welcome {
  flex: 1;
  position: relative;
  font-weight: 500;
  color: var(--main-light);
}
div.content div.top-bar div.title {
  align-self: stretch;
  position: relative;
  font-size: var(--h1-size);
  letter-spacing: -0.02em;
  font-weight: 600;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
@media (min-width: 800px) {
  div.content div.top-bar div.title {
    background-color: var(--white);
    padding: var(--padding-xl);
    grid-row: 2;
    grid-column: 1/3;
    font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
  }
}
div.content div.top-bar div.title p {
  margin: 0;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content div.top-bar div.link-and-description {
  gap: var(--gap-xl);
  display: flex;
  flex-direction: column;
}
@media (min-width: 800px) {
  div.content div.top-bar div.link-and-description {
    width: 80%;
    max-width: 1024px;
    min-width: 750px;
    margin: auto;
    padding-top: var(--padding-2xl);
  }
}
div.content div.top-bar div.link-and-description div.link {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  font-size: var(--body-text-size);
  color: var(--secondary-color);
}
div.content div.top-bar div.link-and-description div.link a {
  position: relative;
  line-height: 20px;
  cursor: pointer;
  font-weight: 600;
}
div.content div.top-bar div.link-and-description div.description {
  position: relative;
  font-size: var(--body-text-size);
  line-height: 24px;
  font-weight: 300;
  display: inline-block;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content div.modal-backdrop {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  backdrop-filter: blur(3px);
}
div.content div.modal-backdrop div.modal {
  background: var(--white);
  overflow: auto;
  text-align: left;
  font-size: var(--h3-size);
  color: white;
  font-family: var(--label-text-1);
  border-radius: var(--br-base);
  background-color: #B80543;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--interface-secondary-color);
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-xl);
  gap: var(--gap-xl);
  z-index: 10;
  width: 95%;
  height: fit-content;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 800px) {
  div.content div.modal-backdrop div.modal {
    width: fit-content;
    max-width: 45%;
  }
}
div.content div.modal-backdrop div.modal div.banner {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
}
div.content div.modal-backdrop div.modal div.banner div.title {
  font-weight: 500;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content div.modal-backdrop div.modal div.banner img {
  content: url("./img/close.svg");
  cursor: pointer;
  background-color: white;
  border-radius: 50%;
  margin-left: 10px;
}
div.content div.modal-backdrop div.modal div.intro {
  font-size: var(--body-text-size);
  line-height: 24px;
  font-weight: 300;
  color: white;
  display: inline-block;
  width: inherit;
}
div.content div.modal-backdrop div.modal div.rating {
  display: flex;
  align-self: stretch;
  flex-grow: initial;
  justify-content: space-around;
}
div.content div.modal-backdrop div.modal div.rating img {
  width: 50px;
  cursor: pointer;
}
div.content div.modal-backdrop div.modal div.rating img.selected:nth-child(1), div.content div.modal-backdrop div.modal div.rating img:hover:nth-child(1) {
  filter: brightness(0) saturate(100%) invert(28%) sepia(84%) saturate(7022%) hue-rotate(355deg) brightness(89%) contrast(129%);
}
div.content div.modal-backdrop div.modal div.rating img.selected:nth-child(2), div.content div.modal-backdrop div.modal div.rating img:hover:nth-child(2) {
  filter: brightness(0) saturate(100%) invert(67%) sepia(97%) saturate(1654%) hue-rotate(4deg) brightness(106%) contrast(109%);
}
div.content div.modal-backdrop div.modal div.rating img.selected:nth-child(3), div.content div.modal-backdrop div.modal div.rating img:hover:nth-child(3) {
  filter: brightness(0) saturate(100%) invert(33%) sepia(6%) saturate(1277%) hue-rotate(179deg) brightness(95%) contrast(87%);
}
div.content div.modal-backdrop div.modal div.rating img.selected:nth-child(4), div.content div.modal-backdrop div.modal div.rating img:hover:nth-child(4) {
  filter: brightness(0) saturate(100%) invert(59%) sepia(75%) saturate(376%) hue-rotate(102deg) brightness(95%) contrast(92%);
}
div.content div.modal-backdrop div.modal div.rating img.selected:nth-child(5), div.content div.modal-backdrop div.modal div.rating img:hover:nth-child(5) {
  filter: brightness(0) saturate(100%) invert(79%) sepia(39%) saturate(2943%) hue-rotate(87deg) brightness(96%) contrast(99%);
}
div.content div.modal-backdrop div.modal div.form {
  align-self: stretch;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
  font-size: var(--label-text-1-size);
  color: var(--gray-700);
}
div.content div.modal-backdrop div.modal div.form div.field {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-7xs);
}
div.content div.modal-backdrop div.modal div.form div.field textarea,
div.content div.modal-backdrop div.modal div.form div.field input,
div.content div.modal-backdrop div.modal div.form div.field select {
  align-self: stretch;
  border-radius: var(--br-5xs);
  background-color: var(--white);
  box-shadow: var(--shadows-shadow-xs);
  border: 1px solid var(--gray-300);
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs) var(--padding-sm);
  gap: var(--gap-5xs);
  font-size: var(--body-text-size);
  color: var(--gray-500);
  outline: none !important;
}
div.content div.modal-backdrop div.modal div.buttons {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  font-size: var(--font-size-base-4);
  color: var(--white);
}
div.content div.modal-backdrop div.modal div.buttons div.button {
  align-self: stretch;
  border-radius: 6.95px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-sm);
  cursor: pointer;
  gap: var(--gap-xs);
}
div.content div.modal-backdrop div.modal div.buttons div.button.add, div.content div.modal-backdrop div.modal div.buttons div.button.send, div.content div.modal-backdrop div.modal div.buttons div.button.engage, div.content div.modal-backdrop div.modal div.buttons div.button.ok {
  background-color: #ff0018;
}
div.content div.modal-backdrop div.modal div.buttons div.button.add img {
  content: url("./img/add.svg");
  filter: var(--filter-main-light);
}
div.content div.modal-backdrop div.modal div.buttons div.button.engage img {
  content: url("./img/engage.svg");
}
div.content div.modal-backdrop div.modal div.buttons div.button.cancel, div.content div.modal-backdrop div.modal div.buttons div.button.no {
  background-color: var(--white);
  border: 1px solid var(--main-light);
  color: var(--main-light);
}
div.content div.chat {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-2xl) 0;
  font-size: var(--label-text-1-size);
}
div.content div.chat div.messages-list {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  overflow-y: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
  padding: var(--padding-5xs);
}
div.content div.chat div.messages-list div.message {
  align-self: stretch;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
div.content div.chat div.messages-list div.message.ai {
  color: var(--white);
}
div.content div.chat div.messages-list div.message ul {
  list-style: inside;
}
div.content div.chat div.messages-list div.message strong {
  font-weight: 700;
}
div.content div.chat div.messages-list div.message ol {
  list-style: decimal-leading-zero;
  list-style-position: inside;
}
div.content div.chat div.messages-list div.message p {
  display: initial;
}
div.content div.chat div.messages-list div.message div.message-details {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--gap-xl);
}
div.content div.chat div.messages-list div.message div.message-details.ai {
  justify-content: flex-start;
}
div.content div.chat div.messages-list div.message div.message-details.debug {
  color: var(--gray-700);
  background-color: var(--gray-300);
}
div.content div.chat div.messages-list div.message div.message-details div.avatar {
  position: relative;
  height: 40px;
  min-width: 40px;
  width: 40px;
}
div.content div.chat div.messages-list div.message div.message-details div.avatar img {
  height: 100%;
  width: 100%;
  border-radius: var(--br-9980xl);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
div.content div.chat div.messages-list div.message div.message-details div.avatar::after {
  content: "";
  position: absolute;
  color: white;
  height: 50%;
  border-radius: 50%;
  background-color: var(--secondary-color);
  border: 2px solid var(--white);
  width: 50%;
  bottom: -5px;
  right: -5px;
  line-height: 15px;
}
div.content div.chat div.messages-list div.message div.message-details div.message-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  max-width: 50%;
  min-width: 250px;
}
div.content div.chat div.messages-list div.message div.message-details div.message-container.typing {
  min-width: unset;
  max-width: unset;
  width: 50px;
  margin-left: 60px;
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-metadata {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  font-size: var(--label-text-1-size);
  color: var(--normal-text);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-metadata div.name {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 140px;
  max-width: 160px;
  height: fit-content;
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-metadata div.date {
  flex: 1;
  position: relative;
  font-size: var(--label-text-2-size);
  font-weight: 300;
  text-align: right;
  display: flex;
  align-items: flex-end;
  min-height: 16px;
  height: fit-content;
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content:not(.typing) {
  width: 100%;
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content.ai {
  border-radius: 0 var(--br-5xs) var(--br-5xs) var(--br-5xs);
  box-sizing: border-box;
  color: var(--normal-text);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble {
  align-self: stretch;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-mini);
  box-sizing: border-box;
  font-size: var(--font-inherit);
  font-family: var(--font-inherit);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble.user {
  color: var(--white);
  border-radius: var(--br-5xs) 0px var(--br-5xs) var(--br-5xs);
  background-color: var(--main-light);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble.user.coaching {
  background-color: var(--coaching-user-background);
  color: var(--coaching-text-user);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble.ai {
  background-color: var(--grey-light);
  border-radius: 0px var(--br-5xs) var(--br-5xs) var(--br-5xs);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble.ai.coaching {
  color: var(--coaching-text-coach);
  background-color: var(--secondary-color);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble div.message {
  position: relative;
  line-height: 24px;
  font-weight: 300;
  display: inline-block;
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble div.message img.typing {
  filter: brightness(0) saturate(100%) invert(0%) sepia(40%) saturate(0%) hue-rotate(136deg) brightness(95%) contrast(102%);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble div.message img.typing.coaching {
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(88deg) brightness(107%) contrast(101%);
}
div.content div.chat div.messages-list div.message div.message-details div.message-container div.message-content div.bubble img {
  position: relative;
  width: 24px;
  height: 10px;
}
div.content div.breadcrumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8xs);
}


div.content div.breadcrumb div.navigation {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
}

.breadcrumb-fixed-navigation{
  position: fixed;
  margin-top: 5px;
  z-index: 2;
}
div.content div.breadcrumb div.navigation div.back-to-library {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  z-index: 3;
}
div.content div.breadcrumb div.navigation div.back-to-library img {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
div.content div.breadcrumb div.navigation div.back-to-library div.text {
  position: relative;
  line-height: 20px;
  font-weight: 600;
}
div.content div.breadcrumb div.navigation div.actions {
  width: 170px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
div.content div.breadcrumb div.navigation div.actions div {
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-11xs);
  box-sizing: border-box;
  border-radius: var(--br-5xs);
  cursor: pointer;
}
div.content div.breadcrumb div.navigation div.actions div img {
  position: relative;
  width: 26px;
  height: 16.6px;
}
div.content div.breadcrumb div.navigation div.actions div.mute {
  background: initial;
}
div.content div.breadcrumb div.navigation div.actions div.mute img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(40%) saturate(0%) hue-rotate(136deg) brightness(95%) contrast(102%);
  content: url("./img/mute.svg");
}
div.content div.breadcrumb div.navigation div.actions div.unmute {
  background-color: var(--secondary-color);
}
div.content div.breadcrumb div.navigation div.actions div.unmute img {
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(88deg) brightness(107%) contrast(101%);
  content: url("./img/unmute.svg");
}
div.content div.breadcrumb div.title {
  position: relative;
  font-size: var(--h1-size);
  letter-spacing: -0.02em;
  font-weight: 600;
  display: inline-block;
  height: fit-content;
  flex-shrink: 0;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content div.breadcrumb div.description {
  font-size: var(--font-size-base-7);
  border: 2px solid var(--secondary-color);
  border-radius: var(--br-base);
  padding: var(--padding-8xs);
  background-color: #ececec;
  color: #677580;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
  font-size: var(--h2-size);
  color: var(--normal-text);
  font-family: var(--label-text-1);
  padding: var(--padding-2xl);
}

@media (min-width: 800px) {
  div.content section.frame {
    width: 80%;
    max-width: 1024px;
    min-width: 750px;
    margin: auto;
  }
}

div.content section.frame div.simulations {
  align-self: stretch;
  overflow-x: auto; 
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 600px) {
  div.content section.frame div.simulations div.cards {
    align-self: stretch;
    overflow-x: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    padding: var(--padding-21xl) 0;
    gap: var(--gap-xl);
  }
}
@media (min-width: 600px) {
  div.content section.frame div.simulations div.cards {
    align-self: stretch;
    overflow-x: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    padding: var(--padding-21xl) 0;
    gap: var(--gap-xl);
  }
}

div.content section.frame div.simulations div.cards div.card {
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
  border: none;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 280px; 
  height: 340px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 800px) {
  div.content section.frame div.simulations div.cards div.card {
    width: 400px;
    height: 500px;
  }
}
div.content section.frame div.simulations div.cards div.card:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
}
div.content section.frame div.simulations div.cards div.card.coming-soon {
  opacity: 0.5;
  cursor: initial;
}
div.content section.frame div.simulations div.cards div.card div.img {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
div.content section.frame div.simulations div.cards div.card div.img img.banner {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
  gap: 20px;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text div.title-and-badges {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text div.title-and-badges div.title {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-size: 1.2rem;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text div.title-and-badges div.badges {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-size: 0.875rem;
  color: #495057;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text div.title-and-badges div.badges div.badge {
  border-radius: 50px;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 8px;
  gap: 4px;
  opacity: 0.9;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text div.title-and-badges div.badges div.badge img.icon {
  position: relative;
  width: 12px;
  height: 12px;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text div.title-and-badges div.badges div.badge div.text {
  position: relative;
  font-weight: 400;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame div.simulations div.cards div.card div.scenario-content div.supporting-text div.description {
  align-self: stretch;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
  font-family: "Belfius Alternative", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
div.content section.frame div.simulations div.cards div.card div.scenario-details {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  font-size: 0.875rem;
  color: #6c757d;
  padding: 0 20px 20px;
  margin-top: auto;
  margin-bottom: 0;
}
div.content section.frame div.simulations div.cards div.card div.scenario-details div.duration {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
div.content section.frame div.simulations div.cards div.card div.scenario-details div.duration img.clock {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
div.content section.frame div.simulations div.cards div.card div.scenario-details div.duration div.text {
  position: relative;
  font-weight: 300;
}
div.content section.frame div.history {
  align-self: stretch;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  border-radius: var(--br-base);
  border: 1px solid var(--interface-secondary-color);
  font-size: var(--h3-size);
}
div.content section.frame div.history div.header {
  background-color: var(--main-light);
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 500;
  align-self: stretch;
  padding: var(--padding-2xl);
  color: var(--white);
}
div.content section.frame div.history ul.cards {
  overflow-y: auto;
  flex-shrink: 0;
  font-size: var(--label-text-2-size);
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 500px;
}
div.content section.frame div.history ul.cards li.card {
  background-color: var(--white);
  border-top: 1px solid var(--interface-secondary-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-xl);
  gap: var(--gap-3xs);
  cursor: pointer;
}
div.content section.frame div.history ul.cards li.card div.scenario {
  font-size: var(--h3-size);
  font-weight: 500;
}
div.content div.persona-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  text-align: left;
  width: 100%;
  max-width: 500px;
  padding: 0 var(--padding-13xl);
}
div.content div.persona-details div.criteria {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  container-type: inline-size;
}
@media (max-width: 500px) {
  div.content div.persona-details div.criteria div.row {
    flex-direction: column;
  }
}
@media (min-width: 501px) {
  div.content div.persona-details div.criteria div.row {
    flex-direction: row;
    gap: var(--gap-21xl);
    align-items: center;
  }
}
div.content div.persona-details div.criteria div.row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-size: var(--label-text-1-size);
}
div.content div.persona-details div.criteria div.row b {
  position: relative;
  line-height: 16px;
  display: inline-block;
  width: 110px;
  flex-shrink: 0;
}
div.content div.persona-details div.criteria div.row div {
  flex: 1 0 35%;
  position: relative;
  line-height: 24px;
}
div.content div.persona-details div.criteria div.row div:not(.bold) {
  font-weight: 300;
}
div.content div.persona-details div.criteria div.row div.bold {
  font-weight: 500;
}
div.content div.training-details {
  font-size: var(--label-text-2-size);
}
div.content div.training-details div.details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
div.content div.training-details div.details div.status {
  border-radius: var(--br-base);
  padding: var(--padding-8xs);
}
div.content div.training-details div.details div.status.success {
  border: 1px solid var(--color-seagreen-100);
  color: var(--color-seagreen-100);
}
div.content div.training-details div.details div.status.failed {
  border: 1px solid var(--red-dark);
  color: var(--red-dark);
}
div.content div.training-details div.details div.status.incomplete {
  border: 1px solid var(--orange-dark);
  color: var(--orange-dark);
}
div.content div.training-details div.details div.date {
  color: var(--interface-secondary-color-basic);
}
div.content div.training-details div.role-details {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0 0;
  gap: var(--gap-8xs);
  color: var(--normal-text);
}
div.content div.training-details div.role-details div.role {
  display: flex;
  gap: var(--gap-3xs);
}
div.content div.training-details div.role-details div.role span {
  font-weight: bold;
  display: block;
  width: max-content;
  min-width: max-content;
}
div.content div.training-details div.role-details div.persona {
  display: flex;
  height: 20px;
  justify-content: end;
  align-items: center;
  align-self: stretch;
  width: 100%;
  gap: var(--gap-8xs);
}
div.content div.training-details div.role-details div.persona div.name {
  font-weight: bold;
  color: var(--color-black);
}
div.content div.training-details div.role-details div.persona div.avatar {
  height: 20px;
}
div.content div.training-details div.role-details div.persona div.avatar img {
  height: 20px;
  width: 20px;
  min-width: 20px;
  border-radius: var(--br-9980xl);
}

ul.selectable-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-9xs);
  width: 100%;
  align-self: stretch;
  border-radius: var(--br-5xs);
  background-color: var(--white);
  box-shadow: var(--shadows-shadow-xs);
  border: 1px solid var(--gray-300);
  overflow: hidden;
  justify-content: flex-start;
  font-size: var(--body-text-size);
  color: var(--gray-500);
  outline: none !important;
  padding: var(--padding-5xs);
}
ul.selectable-list li {
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid var(--main-light);
  flex: 1 0 35%;
  text-align: center;
  align-items: center;
  display: flex;
}
ul.selectable-list li.selected {
  color: var(--white);
  background-color: var(--main-light);
}
@media (hover: hover) and (pointer: fine) {
  ul.selectable-list li:hover {
    color: var(--white);
    background-color: var(--main-light);
  }
}
ul.selectable-list li label {
  display: inline-block;
  cursor: pointer;
  width: 100%;
  padding: var(--padding-7xs);
  user-select: none;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-self: stretch;
  border-radius: var(--br-5xs);
  background-color: var(--white);
  box-shadow: var(--shadows-shadow-xs);
  border: 1px solid var(--gray-300);
  overflow: hidden;
  justify-content: flex-start;
  font-size: var(--body-text-size);
  color: var(--gray-500);
  outline: none !important;
}
.checkbox-list label.expand {
  cursor: pointer;
  min-width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  line-height: 24px;
  padding: var(--padding-3xs);
  padding-right: var(--padding-11xs);
}
.checkbox-list label.expand span {
  width: -moz-available;
  min-height: 22px;
}
.checkbox-list label.expand img {
  content: url("./img/expand.svg");
  max-width: 15px;
}
.checkbox-list input.expand:checked ~ ul {
  height: 200px;
  /*padding: var(--padding-2xs-2) 0;*/
  overflow-y: auto;
}
.checkbox-list input.expand:checked ~ label.expand img {
  content: url("./img/collapse.svg");
}
.checkbox-list input.expand:checked ~ hr {
  visibility: visible;
  opacity: 1;
  display: initial;
}
.checkbox-list hr {
  visibility: hidden;
  opacity: 0;
  display: none;
  -o-transition: visibility 0.2s, opacity 0.2s linear;
  -webkit-transition: visibility 0.2s, opacity 0.2s linear;
  -moz-transition: visibility 0.2s, opacity 0.2s linear;
  transition: visibility 0.2s, opacity 0.2s linear;
}
.checkbox-list ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 0;
  transition: height 0.2s linear, padding 0.2s linear;
  -o-transition: height 0.2s linear, padding 0.2s linear;
  -webkit-transition: height 0.2s linear, padding 0.2s linear;
  -moz-transition: height 0.2s linear, padding 0.2s linear;
  /*gap: var(--gap-5xs);*/
}
.checkbox-list ul li {
  padding: var(--padding-8xs) var(--padding-sm);
  cursor: pointer;
}
.checkbox-list ul li.selected {
  background-color: var(--interface-secondary-color);
}
@media (hover: hover) and (pointer: fine) {
  .checkbox-list ul li:hover {
    background-color: var(--color-whitesmoke-100);
  }
}
.checkbox-list ul li label {
  display: inline-block;
  cursor: pointer;
  width: 100%;
}

.popup-overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
}

.popup-message {
  position: fixed;
  bottom: 200px;
  right: 20px;
  left: 20px;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

li select {
  background-color: #B80543;
}

.app-logo {
  height: 60px;
  padding-right: 200px;
}

.app-logo-opco {
  height: 60px;
}

:root {
  /* fonts */
  --label-text-1: Inter;
  --font-inherit: inherit;
  --font-sf-pro-text: "SF Pro Text";
  --font-roboto: Roboto;
  /* font sizes */
  --font-size-base-7: 15.7px;
  --body-text-size: 16px;
  --h3-size: 20px;
  --label-text-1-size: 14px;
  --h1-size: 32px;
  --label-text-2-size: 12px;
  --h2-size: 24px;
  --font-size-xs-5: 11.5px;
  --font-size-base-1: 15.1px;
  --font-size-7xl-4: 26.4px;
  --font-size-lg-3: 18.3px;
  --font-size-base-2: 16.2px;
  --font-size-3xl-8: 22.8px;
  --text-lg-medium-size: 18px;
  --font-size-29xl: 48px;
  --font-size-base-4: 15.4px;
  --font-size-sm-5: 13.5px;
  --font-size-xs-6: 11.6px;
  --font-size-4xl-2: 23.2px;
  --font-size-13xl-6: 32.6px;
  /* Colors */
  --white: #fff;
  --brand-600: #7e56d9;
  --red-medium: #e45449;
  --red-dark: #d92d20;
  --color-dimgray-100: #707070;
  --color-royalblue-100: #175cd3;
  --color-gray-100: #fefefe;
  --gray-25: #fcfcfd;
  --color-gray-200: #fbfbfb;
  --colors-text-text-primary-900: #101828;
  --color-black: #000;
  --green-light: #9efad1;
  --success-200: #abefc6;
  --color-seagreen-100: #079455;
  --success-700: #067647;
  --component-colors-utility-gray-utility-gray-50: #f9fafb;
  --grey-light: #f2f4f7;
  --color-whitesmoke-100: #ebedf0;
  --gray-200: #eaecf0;
  --interface-secondary-color-basic: #98a2b3;
  --orange-dark: #ffbf00;
  --gray-600: #475467;
  --color-darkslategray-100: #4b4b4b;
  --gray-700: #344154;
  --gray-300: #d0d5dd;
  --gray-500: #667085;
  --red-light: #f8d1ce;
  --component-colors-utility-blue-utility-blue-50: #eff8ff;
  --color-lightskyblue: #b2ddff;
  --purple-light: #f9f5ff;
  --brand-200: #e9d7fe;
  --pink-light: #fad1e6;
  --pink-medium: #f48bc1;
  --brand-700: #6941c6;
  --brand-300: #d6bbfb;
  --success-50: #ecfdf3;
  /* Flavor colors */
  --main-light: #B80543;
  --main-dark: #B80543;
  --secondary-color: #d1184d;
  --hover-color: #1e1e23;
  --normal-text: #4c5667;
  --contrast-tab: #ea2e8f;
  --tertiary-color: #60aafb;
  --interface-secondary-color: #d3dae4;
  --coaching-user-background: #09c370;
  --coaching-text-coach: #fff;
  --coaching-text-user: #fff;
  --border-color: #8788fd;
  --background-image: url("/img/background/background-belfius.png");
  --background-image-short: url("/img/background/background-belfius.png");
  --menu-background: url("img/menu-color.png") lightgray 50% / cover no-repeat;
  --filter-main-light: brightness(0) saturate(100%) invert(44%) sepia(54%) saturate(5320%) hue-rotate(239deg) brightness(90%) contrast(88%);
  /* Spacing */
  --spacing-sm: 6px;
  --spacing-2xl: 20px;
  --spacing-md: 8px;
  --spacing-xxs: 2px;
  --radius-2xl: 16px;
  --spacing-xl: 16px;
  --spacing-3xl: 24px;
  --spacing-lg: 12px;
  --radius-md: 8px;
  /* Gaps */
  --gap-xl: 20px;
  --gap-3xs: 10px;
  --gap-8xs: 5px;
  --gap-7xs: 6px;
  --gap-21xl: 40px;
  --gap-5xs: 8px;
  --gap-4xs-7: 8.7px;
  --gap-3xs-6: 9.6px;
  --gap-4xs-4: 8.4px;
  --gap-81xl: 100px;
  --gap-6xs-4: 6.4px;
  --gap-xs-3: 11.3px;
  --gap-31xl: 50px;
  --gap-lgi-3: 19.3px;
  --gap-mini: 15px;
  --gap-5xl: 24px;
  --gap-base: 16px;
  --gap-4xl-2: 23.2px;
  --gap-5xs-7: 7.7px;
  --gap-base-4: 15.4px;
  --gap-7xs-8: 5.8px;
  --gap-xs: 12px;
  --gap-9xs: 4px;
  /* Paddings */
  --padding-xl: 20px;
  --padding-sm-9: 13.9px;
  --padding-8xl-8: 27.8px;
  --padding-3xs: 10px;
  --padding-mini: 15px;
  --padding-2xl: 21px;
  --padding-8xs: 5px;
  --padding-11xs: 2px;
  --padding-5xs: 8px;
  --padding-21xl: 40px;
  --padding-sm: 14px;
  --padding-sm-4: 13.4px;
  --padding-7xl-8: 26.8px;
  --padding-2xs-2: 10.2px;
  --padding-xl-4: 20.4px;
  --padding-xs-3: 11.3px;
  --padding-5xl: 24px;
  --padding-19xl-6: 38.6px;
  --padding-lgi-3: 19.3px;
  --padding-4xl-1: 23.1px;
  --padding-11xs-9: 1.9px;
  --padding-5xs-7: 7.7px;
  --padding-3xs-6: 9.6px;
  --padding-13xl: 32px;
  --padding-base: 16px;
  --padding-xs: 12px;
  --padding-7xs: 6px;
  /* Border radiuses */
  --br-base: 16px;
  --br-6xs: 7px;
  --br-5xs: 8px;
  --br-9980xl: 9999px;
  --br-7xs: 6px;
  --br-6xs-7: 6.7px;
  --br-7xs-1: 5.1px;
  --br-4xs: 9px;
  --br-8xs-1: 4.1px;
  --br-69xl-5: 88.5px;
  --br-xs: 12px;
  --br-base-4: 15.4px;
  --br-5xs-7: 7.7px;
  --br-9624xl-5: 9643.5px;
  --br-181xl: 200px;
  /* Effects */
  --shadows-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

/*# sourceMappingURL=style.css.map */