@charset "UTF-8";
/**
* Description: CSS framework and Design system for Optilon Collaboration
* Author: Luka Ivas
* Last update: Wed, November 13 2025
* Version: 25.11
*/

/* Reset margins, padding and borders */

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[v-cloak] {
  display: none;
}

:root {
  /* NOTES: font-size/line-height font-style -- element

	75px/75px bold -- kpi_value *needs rework for longer content & responsivness
	32px/32px bold -- kpi_value *needs rework for longer content & responsivness

	46px/60px bold -- page_title / 
	46px/60px regular -- homepage_title 
	34px/45px bold -- H2

24/24 page subtitle

	18px/24px bold -- current-app_title / toastie_text / card_title
	18px/24px regular -- toastie_text

	16px/21px bold -- labels / table_pivot head / button-text / accordion-title / modal_title / calendar_title / calendar_day-selected /graph axis_title
	16px/21px regular -- accordion-title / kpi_description / pagination_text / modal_title
	16px/21px italic -- accordion-title / modal_title
	
	14px/19px bold -- main_navbar / sub_navbar / breadcrumb-selected / legend-title / status_chip / overrides-chip / card text-selected / card button-text / footer button-text
	14px/19px regular -- table_pivot cell / breadcrumb / modal_text / modal_label / dropdown / calendar_day / footer button-text
	
	14px/16px bold -- table head accordion row / table head modal
	14px/16px regular -- chips (ie. 3 selected)
	
	12px/16px bold -- table_basic details / stepper / pagination_value / toastie button-text / card_text / notification_bubble / footer
	12px/16px regular -- inputs / select boxes / legend / graph axis_label / error messages / graph_current_month / info_messages / card_helper_text / footer

*/
  /* PRIMITIVES */

  /* Spacing sizes (margins, paddings, gaps etc.) */
  --spacing-100: 0.25rem; /* 4px */
  --spacing-200: 0.5rem; /* 8px */
  --spacing-250: 0.75rem; /* 12px */
  --spacing-300: 1rem; /* 16px */
  --spacing-350: 1.25rem;
  --spacing-400: 1.5rem; /* 24px */
  --spacing-500: 2rem; /* 32px */
  --spacing-600: 3rem; /* 48px */
  --spacing-700: 4rem; /* 64px */
  --spacing-800: 8rem; /* 128px */

  /* Font sizes */
  --text-size-100: 0.75rem; /* 12px */
  --text-size-200: 0.875rem; /* 14px */
  --text-size-300: 1rem; /* 16px */
  --text-size-400: 1.125rem; /* 18px */
  --text-size-450: 1.5rem; /* 24px 500 */
  --text-size-500: 2rem; /* 32px  600 */
  --text-size-700: 2.125rem; /* 34px */
  --text-size-800: 2.875rem; /* 46px */
  --text-size-900: 4.6875rem; /* 75px */

  /*
--text-size-600: 2.125rem; /* 34px *
--text-size-700: 2.875rem; /* 46px *
--text-size-800: 4.6875rem; /* 75px */

  /* Line-height sizes */
  --line-height-100: 1rem; /* 16px */
  --line-height-200: 1.1875rem; /* 19px */
  --line-height-300: 1.3125rem; /* 21px */
  --line-height-400: 1.5rem; /* 24px */
  --line-height-500: 2rem; /* 32px */
  --line-height-600: 2.8125rem; /* 45px */
  --line-height-700: 3.75rem; /* 60px */
  --line-height-800: 4.6875rem; /* 75px */

  /* Colors */
  --brand-100: #f9eeda;
  --brand-300: #ff9a83;
  --brand-500: #e85425;
  --brand-700: #9bc8b9;
  --brand-800: #005446;
  --brand-900: #18444c;

  --neutral-100: white;
  --neutral-200: #f2f2f2;
  --neutral-250: #f8f8f8;
  --neutral-300: #d5dcda;
  --neutral-350: #dbdbdb;
  --neutral-380: #e6e7e7;
  --neutral-390: #e5e9e8;
  --neutral-400: #cbd4d1;
  --neutral-410: #c7d3d2;
  --neutral-420: #b9c4c3;
  --neutral-500: #808080;
  --neutral-600: #707070;
  --neutral-900: #352e29;
  --neutral-950: #2e2e2e;
  --neutral-1000: #171717;

  /* #991f23 */
  --red-100: #f9f0f1;
  --red-200: #eed3d4;
  --red-300: #e2b6b8;
  --red-400: #d08a8d;
  --red-500: #c56d70;
  --red-600: #b95053;
  --red-700: #993d40;
  --red-800: #833437;
  --red-900: #66292b;
  --red-1000: #491d1f;

  /* #fad5a2 */
  --yellow-100: #fdf7ec;
  --yellow-200: #fae8c6;
  --yellow-300: #f7d9a1;
  --yellow-400: #f2bf61;
  --yellow-500: #f0b342;
  --yellow-600: #eda41d;
  --yellow-700: #d08d11;
  --yellow-800: #aa730e;
  --yellow-900: #845a0b;
  --yellow-1000: #5e4008;

  /* #005446 */
  --green-100: #f1f9f8;
  --green-200: #d4ede9;
  --green-300: #b7e1da;
  --green-400: #8bd0c4;
  --green-500: #6ec4b6;
  --green-600: #51b8a7;
  --green-700: #419f90;
  --green-800: #358276;
  --green-900: #29655b;
  --green-1000: #1e4841;

  /* #004e78 */
  --blue-100: #f0f6f9;
  --blue-200: #d3e4ee;
  --blue-300: #b6d3e2;
  --blue-400: #8ab8d0;
  --blue-500: #6da6c5;
  --blue-600: #5094b9;
  --blue-700: #407fa0;
  --blue-800: #305f78;
  --blue-900: #295166;
  --blue-1000: #1d3a49;

  /* TOKENS */

  /* Fonts */
  --font-family-code: "Roboto Mono", monospace;
  --font-family-default: "Roboto", sans-serif;
  --font-family-headings: "Roboto", sans-serif;

  /* Margins, paddings, gaps */
  --gap-XS: var(--spacing-100);
  --gap-S: var(--spacing-200);
  --gap-M: var(--spacing-300);
  --gap-ML: var(--spacing-400);
  --gap-L: var(--spacing-500);
  --gap-XL: var(--spacing-600);
  --gap-XXL: var(--spacing-700);

  /* Text size */
  --text-XS: var(--text-size-100);
  --text-S: var(--text-size-200);
  --text-M: var(--text-size-300);
  --text-ML: var(--text-size-400);
  --text-L: var(--text-size-500);
  --text-XL: var(--text-size-700);
  --text-XXL: var(--text-size-800);
  --text-XXXL: var(--text-size-900);
  --text-XXXXL: var(--text-size-900);
  /*
--text-XXL: var(--text-size-700);
--text-XXXL: var(--text-size-800);
*/

  /* Line height */
  --line-height-XS: var(--line-height-100);
  --line-height-S: var(--line-height-200);
  --line-height-M: var(--line-height-300);
  --line-height-ML: var(--line-height-400);
  --line-height-L: var(--line-height-500);
  --line-height-XL: var(--line-height-600);
  --line-height-XXL: var(--line-height-700);
  --line-height-XXXL: var(--line-height-800);

  /* Colors */
  --error: #bf2e33;
  --information: var(--blue-400);
  --success: #9bcabb;
  --warning: #ffe6cb;

  --surface-1: var(--neutral-100);
  --surface-2: var(--neutral-200);
  --surface-3: var(--neutral-300);
  --surface-4: var(--neutral-400);
  --surface-9: var(--neutral-900);

  --stroke-1: var(--neutral-350);
  --stroke-2: var(--neutral-600);

  --accent-1: var(--brand-500); /* token for surface and text color */
  --accent-2: var(--brand-900); /* token for surface and text color */
  --accent-3: var(--brand-100); /* token for surface and text color */

  --body-text-color: var(--neutral-1000);
  --body-text-color-primary: var(--neutral-1000); /* general text color */
  --body-text-color-secondary: ; /* alternative text color */
  --footer-text-color: var(--neutral-200);

  --placeholder-text: var(--neutral-600);

  --nav-text: var(--neutral-500);
  --nav-text--active: var(--accent-2);
  --nav-text--hover: var(--neutral-950);

  --app-card_column-width: 320px;

  --graph-budget-line: var(--brand-500);
  --graph-end-of-fiscal-year-line: var(--neutral-600);
  --graph-previous-months-area: var(--neutral-380);

  --table_head-background: var(--neutral-100);
  --table_cell-background-1: var(--neutral-390); /* table_basic rows 1-3-5 etc. */
  --table_cell-background-2: var(--neutral-250); /* table_basic even 2-4-6 etc. */
  --table_cell-editable: var(--brand-100);
  --table_cell-editable--active: var(--neutral-100);
  --table_cell-edited-color: var(--accent-1);
  --table_total-background-1: var(--neutral-390); /* table_pivot total columns */
  --table_total-background-2: #d8dbda; /* table_pivot total sum column */
  --table_border-1: 1px solid var(--stroke-1);
  --table_border-2: 1px solid var(--stroke-2);

  --action_button-background: transparent;
  --action_button-border: transparent;
  --action_button-color: var(--body-text-color);
  --action_button-background--hover: transparent;
  --action_button-border--hover: var(--blue-800);
  --action_button-color--hover: var(--blue-800);
  --action_button-background--active: var(--blue-900);
  --action_button-border--active: var(--blue-900);
  --action_button-color--active: var(--surface-1);
  --action-button-height: 20px;

  --form_action_button-color: var(--neutral-600);
  --form_action_button-color--hover: var(--neutral-1000);
  --form_action_button-color--active: var(--blue-800);

  --header-popup_container-width: 16rem;

  --chart_controls-width: 10.625rem; /* 170px */
  --chart_text-color: var(--neutral-900);

  --process_is-locked-background: var(--neutral-200);
  --process_is-locked-color: var(--body-text-color);
  --process_is-locked-icon: var(--neutral-420);
  --process_is-unlocked-background: var(--brand-900);
  --process_is-unlocked-color: var(--neutral-100);

  --form_field-background: var(--neutral-100);
  --form_field-border: var(--neutral-600);
  --form_field-border-radius: 0;
  --form_field-color: var(--body-text-color);
  --form_field-arrow-color: var(--body-text-color);
  --form_message-color: var(--brand-900);

  --common_background--hover: var(--accent-3);
  --common_background--active: var(--blue-200);
  --common_background--selected: var(--blue-900);
  --common_color--selected: var(--neutral-100);

  --calendar_titlebar-background: var(--neutral-200);
  --calendar_weekdays: var(--accent-2);
  --calendar_days-background: var(--action_button-background);
  --calendar_days-border: 1px solid transparent;
  --calendar_days-color: var(--action_button-color);
  --calendar_days-blocked: var(--neutral-420);
  --calendar_days-today: var(--neutral-200);
  --calendar_days-background--selected: var(--action_button-background--active);
  --calendar_days-border--selected: 1px solid transparent;
  --calendar_days-color--selected: var(--action_button-color--active);
  --calendar_days-background--hover: var(--common_background--hover);
  --calendar_days-border--hover: 1px solid transparent;
  --calendar_days-color--hover: var(--action_button-color);
  --calendar_days-background--active: var(--common_background--active);
  --calendar_days-border--active: 1px solid transparent;
  --calendar_days-color--active: var(--action_button-color);
  --calendar_cell-empty: #b0b0b0;
  --calendar_cell-empty-border--selected: 1px solid transparent;

  --modal_title-background: var(--surface-4);
  --modal_title-color: var(--body-text-color);

  /* Responsive */
  --large-screens-viewport-width: 100%;
  --desktop-viewport-width: 100%; /* 1440px */
  --tablet-viewport-width: 100%; /* 768px */
  --H1-fluid-text: clamp(var(--text-ML), 3vw, var(--text-ML) * 1.33);
  --H2-fluid-text: clamp(var(--text-S) * 1.33, 4vw, calc(var(--text-M) * 1.33));

  --fluid-title-vertical-spacing: clamp(var(--gap-S), 4vw, var(--gap-M));
  --fluid-title-vertical-spacing-2: clamp(var(--gap-XS), 4vw, var(--gap-S));

  /* Shadows */
  --shadow-1: 0 12px 24px rgb(23 23 23 / 26%); /* modals, toastie */
  --shadow-2: 0 2px 2px rgb(0 0 0 / 25%); /* accordion, sub_navbar inset */
  --shadow-3: 4px 8px 32px 0 rgb(5 24 33 / 25%); /* cards */

  /* Animations */
  --animation-300: 0.3s ease; /* default */
}

/* General */
html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--surface-1);
  color: var(--body-text-color);
  font-family: var(--font-family-default);
  font-size: 16px; /* equals 1rem */
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--animation-300);
}

button,
input,
select {
  font-family: inherit;
}

textarea {
  resize: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button:not(:disabled),
label {
  cursor: pointer;
}

:disabled,
.disabled {
  color: var(--neutral-420) !important;
  cursor: not-allowed !important;
  /* filter: saturate(0); */
  pointer-events: none;
}

::placeholder {
  color: var(--placeholder-text);
}

::-moz-selection {
  color: var(--neutral-100);
  background: var(--brand-900);
}

::selection {
  color: var(--neutral-100);
  background: var(--brand-900);
}

/* Containers and Components */
.app_container {
  container: app_container / inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  width: 100%;
}

header {
  align-items: flex-end;
  background-color: var(--surface-4);
  display: flex;
  justify-content: center;
  padding-left: var(--gap-L);
  padding-right: var(--gap-L);
  padding-top: var(--gap-S);
  transition: color var(--animation-300);
}

.header_inner {
  align-items: flex-end;
  column-gap: var(--gap-S);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--gap-S);
  max-width: var(--desktop-viewport-width);
  transition: gap var(--animation-300);
  width: 100%;
}

.logo_homepage-link {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="127" height="43"><defs><clipPath id="a"><path d="M0 0h127v43H0z"/></clipPath></defs><g style="clip-path:url(%23a)"><path d="m98.375 94.6 8.005-35.729h-5.545L92.83 94.6Zm-.881-35.729h-5.545l-1.175 5.251h5.545ZM89.525 94.6l6.389-28.679H90.37L83.98 94.6Zm-47.37-7.087 4.81-21.445v-.037l.035-.077c.808-3.929-1.946-7.454-8.262-7.454-6.353 0-10.722 3.488-11.6 7.418v.037l-4.81 21.518c-.881 4 1.909 7.564 8.225 7.564 6.388 0 10.758-3.562 11.602-7.528ZM41.274 66.8l-4.48 19.939c-.22 1.138-2.57 2.681-4.994 2.681s-4.039-1.542-3.782-2.681l4.443-19.9c.22-1.138 2.57-2.681 4.994-2.681 2.46-.037 4.076 1.506 3.819 2.644Zm27.137 6.169C69.292 69 66.538 65.4 60.185 65.4c-6.389 0-10.722 3.525-11.6 7.491L42.192 101.5h5.545l2.5-11.126s3.966 4.664 5.545 4.664a9.387 9.387 0 0 0 9.364-7.344v-.037Zm-5.692.734-2.938 13.219c-.257 1.138-2.57 2.534-4.994 2.534-2.056 0-3.856 0-4.37-.037L53.943 73.7c.22-1.138 2.57-2.681 4.994-2.681s4.039 1.545 3.782 2.681Zm5.471 13.806-.037.147c-.734 3.672 1.175 6.94 6.059 6.94h7.675l1.138-5.141H77.04c-2.313-.037-3.342-1.652-3.085-3.121L77.371 71.1h9.584l1.138-5.141h-9.584l1.065-4.774h-5.545L68.19 87.509Zm37.933-14.578-3.268 14.652v.037l-.037.22c-.7 3.856 2.093 7.271 8.3 7.271 6.389 0 10.722-3.452 11.6-7.418l3.3-14.762c.881-3.966-1.909-7.528-8.225-7.528-6.419.037-10.793 3.562-11.67 7.528Zm2.424 14.027 2.974-13.258c.257-1.138 2.57-2.644 4.994-2.644s4.039 1.542 3.819 2.681L117.4 86.922c-.257 1.138-2.607 2.644-4.994 2.644-2.427-.037-4.006-1.466-3.859-2.607Zm33.416-21.041H130.4l-6.394 28.643h5.545l5.251-23.5h4.333c2.387.037 3.452 1.726 3.085 3.231L137.666 94.6h5.545l4.847-21.7c.842-3.751-1.138-6.982-6.096-6.982Z" transform="translate(-22.167 -58.5)" style="fill:%23e85425"/></g></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  flex-shrink: 0;
  height: 30px; /* Old value: height: 32px; */
  width: 86px;
  transition: height var(--animation-300), width var(--animation-300);
}

.current-app_title {
  font-size: var(--text-XS);
  margin-bottom: var(--gap-XS);
  line-height: var(--line-height-XS);
  transition: font-size var(--animation-300);
}

.top_navbar {
  margin-left: auto; /* aligns to right edge */
}

.top_navbar ol:not(.form_message) {
  display: flex;
  gap: var(--gap-ML);
  list-style: none;
  transition: gap var(--animation-300);
}

.top_navbar li {
  position: relative;
}

.top_navbar-icon-menu {
  background-color: transparent;
  color: inherit;
  font-size: var(--text-L);
  transition: color var(--animation-300), text-shadow var(--animation-300);
}

.top_navbar-icon-menu:hover {
  color: var(--accent-1);
  text-shadow: var(--shadow-1);
}

.notification_bubble {
  aspect-ratio: 1 / 1;
  background-color: var(--brand-500);
  border: 2px solid var(--surface-4);
  border-radius: 50%;
  color: var(--neutral-100);
  display: block;
  height: auto;
  pointer-events: none;
  position: absolute;
  right: -0.5rem;
  top: -0.25rem;
  width: 1rem;
}

.top_navbar li:has([title="Reports"]),
.top_navbar li:has(#mobile-menu) {
  display: none;
}

header .popup_container {
  left: auto;
  max-width: var(--header-popup_container-width);
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-top: var(--gap-M);
  padding-right: var(--gap-M);
  right: 0;
}

header .popup_title {
  align-items: center;
  display: flex;
  font-size: var(--text-S);
  margin-bottom: var(--gap-S);
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.navigation-item_block {
  align-items: center;
  background-color: var(--neutral-410);
  display: flex;
  gap: var(--gap-S);
  margin-top: var(--gap-S);
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--animation-300), color var(--animation-300);
  width: 100%;
}

.navigation-item_block:hover {
  background-color: var(--common_background--hover);
}

.navigation-item_block:active {
  background-color: var(--common_background--active);
}

.navigation-item_block:has(i[class*="oi-brand"]) {
  gap: var(--gap-M);
}

.navigation-item_block i[class*="oi-brand"] {
  font-size: var(--text-L);
}

.notification_block {
  align-items: flex-start;
  flex-direction: column;
  gap: inherit;
}

.notification_title {
  display: flex;
  gap: var(--gap-S);
  justify-content: space-between;
  width: 100%;
}

.notification_badge-new {
  align-items: center;
  background-color: var(--brand-500);
  color: var(--neutral-100);
  display: flex;
  font-size: var(--text-XS);
  font-weight: bold;
  gap: var(--gap-XS);
  height: var(--gap-ML);
  margin-right: -0.5rem;
  margin-top: -0.5rem;
  padding-bottom: var(--gap-XS);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-XS);
  pointer-events: none;
}

.notification_content {
  font-size: var(--text-XS);
}

.notification_footer {
}

header .popup_menu-button {
  flex: 1 0 auto;
  justify-content: flex-start;
  padding-left: var(--gap-S);
  transition: padding var(--animation-300);
}

.popup_container :has(.oi-arrow-left) .popup_menu-button:hover {
  padding-left: var(--gap-M);
}

.profile_avatar {
  align-items: center;
  aspect-ratio: 1 / 1;
  background-color: #5e432c;
  border-radius: 2rem;
  color: var(--neutral-100);
  display: flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.profile_info {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--gap-XS);
}

.profile_name {
  font-size: var(--text-S);
}

.profile_company {
  font-size: var(--text-XS);
}

.banner {
  align-items: center;
  background-color: inherit;
  color: inherit;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--text-XS);
  font-weight: bold;
  gap: var(--gap-M);
  line-height: var(--line-height-S);
  padding-bottom: var(--gap-XS);
  padding-left: var(--gap-L);
  padding-right: var(--gap-L);
  padding-top: var(--gap-XS);
  width: 100%;
}

.banner.is-information {
  background-color: var(--information);
}

.banner.is-error {
  background-color: var(--error);
  color: var(--neutral-200);
}

.banner.is-success {
  background-color: var(--success);
}

.banner.is-warning {
  background-color: var(--warning);
}

.main_container {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  padding-bottom: var(--gap-XXL);
  padding-left: var(--gap-L);
  padding-right: var(--gap-L);
  position: relative;
}

.page_container {
  max-width: var(--desktop-viewport-width);
  width: 100%;
}

.container_block {
  background-color: transparent;
  margin-top: var(--gap-L);
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  position: relative;
}

.highlighted_block {
  background-color: var(--surface-2);
  margin-top: var(--gap-ML);
  padding-bottom: var(--gap-ML);
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  padding-top: var(--gap-ML);
  position: relative;
}

.accordion_block {
  box-shadow: none;
  margin-top: var(--gap-ML);
  position: relative;
  transition: box-shadow var(--animation-300);
}

.accordion_title {
  align-items: center;
  background-color: var(--surface-2);
  display: flex;
  gap: var(--gap-S);
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  transition: background-color var(--animation-300);
}

.accordion_title-details i::before {
  content: "\f64d";
}

.accordion_title-details {
  display: flex;
  font-size: var(--text-S);
  flex: 1 1 auto;
  gap: var(--gap-S);
  overflow: hidden;
  padding-bottom: var(--gap-M);
  padding-top: var(--gap-M);
  white-space: nowrap;
}

.accordion_block_toggle:checked + .accordion_title {
  background-color: var(--surface-4);
}

.accordion_block_toggle:checked + .accordion_title .accordion_title-details i::before {
  content: "\f63b";
}

.page-filter_selection {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pin-sticky:has(input:checked) {
  background-color: var(--action_button-background--active);
  border: 1px solid var(--action_button-border--active);
  color: var(--action_button-color--active);
}

.accordion_block:has(.pin-sticky input:checked) {
  box-shadow: var(--shadow-3);
  position: sticky;
  top: 0;
  z-index: 4;
}

.accordion_content {
  background-color: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--gap-S);
  height: 0;
  overflow: hidden;
  padding-bottom: 0;
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  padding-top: 0;
  visibility: hidden;
  transition: height var(--animation-300), padding var(--animation-300), visibility var(--animation-300);
}

.accordion_block > input:checked ~ .accordion_content {
  height: auto;
  padding-bottom: var(--gap-M);
  padding-top: var(--gap-M);
  visibility: visible;
}

.toastie {
  align-items: center;
  animation: slide-in-from-bottom var(--animation-300) both;
  bottom: 0;
  box-shadow: var(--shadow-1);
  color: inherit;
  display: flex;
  font-size: var(--text-M);
  gap: var(--gap-M);
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
  position: sticky;

  letter-spacing: 0.12;
  word-spacing: 0.16;
  z-index: 1000;
}

.toastie.is-hidden {
  display: none;
}

.toastie button {
  font-size: var(--text-XS);
  font-weight: bold;
}

.toastie.is-error {
  background-color: var(--error);
  color: var(--neutral-200);
}

.toastie.is-error button {
  color: var(--neutral-100);
}

.toastie.is-success {
  background-color: var(--success);
}

.toastie.is-warning {
  background-color: var(--warning);
}

footer {
  align-items: center;
  background-color: var(--surface-9);
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-L);
  padding-right: var(--gap-L);
  padding-top: var(--gap-S);
}

.footer_inner {
  align-items: center;
  color: var(--footer-text-color);
  display: flex;
  font-size: var(--text-XS);
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: var(--line-height-XS);
  max-width: var(--desktop-viewport-width);
  width: 100%;
}

footer .oi-brand-logo {
  font-size: var(--text-L);
}

.copyright {
  margin-top: var(--gap-XS);
}

.bottom_navbar {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap-L);
  justify-content: flex-end;
  list-style: none;
  margin-left: auto; /* aligns to right edge */
  max-width: 9.75rem;
}

.bottom_navbar-icon-menu {
  background-color: transparent;
  color: var(--neutral-100);
  cursor: pointer;
  font-size: var(--text-XL);
  transition: color var(--animation-300);
}

.bottom_navbar-icon-menu:hover {
  color: var(--accent-1);
}

.toggle-bg-video {
  color: var(--neutral-100);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--gap-XS);
  transition: color var(--animation-300);
}

.toggle-bg-video:hover {
  color: var(--accent-1);
}

@container app_container (min-width: 1600px) {
  .header_inner,
  .footer_inner,
  .page_container {
    max-width: var(--large-screens-viewport-width);
  }
}

@container app_container (max-width: 768px) {
  header,
  footer,
  .main_container {
    padding-left: var(--gap-M);
    padding-right: var(--gap-M);
  }

  /* Hamburger menu for < 768px - develop LATER
	.top_navbar-icon-menu:not(#mobile-menu) {
		display: none;
	}

	header #mobile-menu {
		display: flex;
	}

	.title_block {
		padding-bottom: var(--gap-M);
	}

		ol.main_navbar,
		ol.sub_navbar {
			display: none;
		}
*/
}

/* Homepage overrides */
[data-location="homepage"] header {
  padding-top: clamp(var(--gap-L), 5vw, var(--gap-XL));
}

[data-location="homepage"] .logo_homepage-link {
  height: 47px;
  width: 127px;
}

[data-location="homepage"] .current-app_title {
  font-size: var(--text-ML);
  margin-bottom: var(--gap-S);
  line-height: var(--line-height-ML);
}

[data-location="homepage"] .top_navbar-icon-menu {
  font-size: var(--text-XL);
}

[data-location="homepage"] .main_container,
[data-location="notifications"] .main_container {
  background-image: url("../img/homepage-cover.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}

[data-location="homepage"] .page_title {
  color: var(--neutral-100);
  /* font-size: clamp(var(--text-L) / 1.33, 4vw, var(--text-XL)); */
  font-weight: normal;
  text-shadow: var(--shadow-3);
}

[data-location="homepage"] .grid_auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* #6528, #6582 
	[data-location="homepage"] footer {
		padding-bottom: var(--gap-L);
		padding-top: var(--gap-L);
	}
*/
[data-location="homepage"] .footer_inner {
  align-items: flex-end;
}

[data-location="homepage"] footer .current-app_title {
  font-size: inherit;
}

.show-on-homepage {
  display: none;
}

.hide-on-homepage {
  display: block;
}

[data-location="homepage"] .show-on-homepage {
  display: block;
}

[data-location="homepage"] .hide-on-homepage {
  display: none;
}

.toolbar {
  align-items: flex-end;
  column-gap: var(--gap-M);
  container: toolbar / inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-self: flex-end;
  margin-bottom: var(--gap-M);
  row-gap: var(--gap-S);
  width: 100%;
} /* used with tables and graphs */

.toolbar_title {
  align-self: center;
  margin: 0;
  padding: 0;
}

.toolbar-element {
  align-items: flex-end;
  column-gap: var(--gap-M);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--gap-S);
}

.time-frame-selector {
  max-width: 120px;
}

.toolbar:has(.page_title) {
  align-items: center;
  margin-bottom: var(--gap-ML);
  margin-top: var(--gap-M);
} /* TODO: Homepage / NC hack, cleanup */

.highlighted_toolbar {
  align-items: center;
  background-color: var(--neutral-200);
  column-gap: var(--gap-M);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-S);
  line-height: var(--line-height-S);
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-S);
  row-gap: var(--gap-S);
  width: 100%;
}

.highlighted_toolbar .toolbar-element {
  align-items: center;
  gap: var(--gap-S);
}

.sub-title_block .toolbar,
.sub-title_block .highlighted_toolbar {
  margin-bottom: 0;
}

.popup_toolbar {
  display: flex;
  gap: var(--spacing-100);
  justify-content: flex-end;
  margin-left: var(--gap-S);
  margin-right: var(--gap-S);
}

.table_basic {
  border: var(--table_border-1);
  border-collapse: collapse;
  width: 100%;
}

.table_basic tr:nth-child(even) {
  background-color: var(--table_background-1);
}

.table_basic tr:nth-child(odd) {
  background-color: var(--table_background-2);
}

.table_basic th {
  background-color: var(--table_head-background);
  font-size: var(--text-M);
  font-weight: bold;
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  text-align: left;
  vertical-align: center;
}

.table-control {
  align-items: flex-start;
  display: flex;
  font-size: var(--text-S); /* #6539 old value: var(--text-M) */
  gap: 0; /* #6539 old value: calc(var(--gap-XS) / 2) */
  justify-content: flex-start;
}

th:last-of-type .table-control {
  justify-content: flex-end;
}

.table-control .column-title {
  margin-top: calc(
    var(--gap-XS) / 2
  ); /* TODO: uncomment after fixed columns like Action, Details, Status, have been wrapped .column-title */
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-wrap: unset;
}

.table-control button:first-of-type {
  margin-left: auto;
}

.table-control button {
  font-size: var(--text-ML);
  padding-left: 0;
  padding-right: 0;
}

.table-data-control {
  align-items: center;
  display: flex;
  font-size: inherit;
}

.table-data-control .table-data {
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-wrap: unset;
}

.table_basic td {
  font-size: var(--text-S);
  font-weight: normal;
  line-height: var(--line-height-S);
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  vertical-align: center;
}

.table_basic th:first-of-type,
.table_basic tr > td:first-of-type {
  padding-left: var(--gap-M);
}

.table_basic th:last-of-type,
.table_basic tr > td:last-of-type {
  padding-right: var(--gap-M);
  text-align: right;
}

.table_basic td:has(.action_button) {
  white-space: nowrap;
}

.action_button {
  align-items: center;
  aspect-ratio: 1 / 1;
  background-color: var(--action_button-background);
  border: 1px solid var(--action_button-border);
  border-radius: 2px;
  color: var(--action_button-color);
  display: inline-flex;
  flex-wrap: nowrap;
  height: var(--action-button-height); /* #6539 old value: var(--gap-ML) */
  justify-content: center;
  transition: background-color var(--animation-300), border var(--animation-300), color var(--animation-300);
}

.action_button:focus,
.action_button:hover {
  background-color: var(--action_button-background--hover);
  border: 1px solid var(--action_button-border--hover);
  color: var(--action_button-border--hover);
}

.action_button:active,
.action_button:checked,
.action_button.is-active {
  background-color: var(--action_button-background--active);
  border: 1px solid var(--action_button-border--active);
  color: var(--action_button-color--active);
}

.action_button i {
  font-size: var(--text-S); /* #6539 old value: var(--text-M) */
  line-height: var(--action-button-height);
}

.action_button[data-action="delete"]:focus,
.action_button[data-action="delete"]:hover {
  background-color: var(--action_button-background--hover);
  border: 1px solid var(--error);
  color: var(--error);
}

.action_button[data-action="delete"]:active {
  background-color: var(--error);
  border: 1px solid var(--error);
  color: var(--action_button-color--active);
}

.action_button[data-action="approve"],
.action_button[data-action="deny"],
.action_button[data-action="check"] {
  border: var(--table_border-1);
}

.action_button[data-action="approve"] i,
.action_button[data-action="deny"] i,
.action_button[data-action="check"] i {
  font-size: calc(var(--text-ML) / 2);
}

.action_button[data-action="approve"]:focus,
.action_button[data-action="approve"]:hover,
.action_button[data-action="deny"]:focus,
.action_button[data-action="deny"]:hover,
.action_button[data-action="check"]:focus,
.action_button[data-action="check"]:hover {
  background-color: var(--neutral-900);
  border-color: var(--neutral-900);
  color: var(--neutral-200);
}

.action_button[data-action="check"]:focus,
.action_button[data-action="check"]:hover {
  background-color: var(--neutral-900);
  border-color: var(--neutral-900);
  color: var(--neutral-100);
}

.action_button[data-action="approve"].checked {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
}

.action_button[data-action="deny"].checked {
  background-color: var(--brand-300);
  border-color: var(--brand-300);
}

.action_button[data-action="check"].checked {
  background-color: var(--brand-900);
  border-color: var(--brand-900);
  color: var(--neutral-100);
}

.table_basic .table_group-separator_left {
  border-left: var(--table_border-1);
  padding-left: var(--gap-M);
}

.table_basic .table_group-separator_right {
  border-right: var(--table_border-1);
  padding-right: var(--gap-M);
}

.table_basic .table_group-separator_right + th,
.table_basic .table_group-separator_right + td {
  padding-left: var(--gap-M);
}

.table_basic th:has(+ .table_group-separator_left),
.table_basic td:has(+ .table_group-separator_left) {
  padding-right: var(--gap-M);
}

.table_pivot {
}

.is-editable {
  background-color: var(--table_cell-editable);
}

.is-edited {
  color: var(--accent-1);
}

.grid-data-negative {
  background-color: var(--red-200);
}

.grid-data-neutral {
  background-color: var(--table_cell-background-2);
}

.grid-data-positive {
  background-color: var(--green-200);
}

.grid-summary-negative {
  background-color: var(--red-400) !important;
}

.grid-summary-neutral {
  background-color: var(--table_cell-background-2) !important;
}

.grid-summary-positive {
  background-color: var(--green-400) !important;
}

.grid-totalcol-negative {
  background-color: var(--red-300) !important;
}

.grid-totalcol-neutral {
  background-color: var(--table_cell-background-2);
}

.grid-totalcol-positive {
  background-color: var(--green-300) !important;
}

.table_pivot .dx-row {
  border-top: 0 none;
  border-bottom: 0 none;
}

.table_pivot:not(.dx-total-grid) .dx-row.is-last {
  border-bottom: 1px solid var(--stroke-2);
}

.dx-total-grid .dx-row {
  font-weight: bold;
}

.table_helper_text {
  align-items: center;
  display: flex;
  font-size: var(--text-S);
  gap: var(--gap-S);
  margin-top: var(--gap-S);
}

.table_helper_text i {
  font-size: var(--text-M);
}

.chart_container {
  container: chart_container / inline-size;
  display: flex;
  gap: var(--gap-M);
}

.chart_container .dx-visibility-change-handler {
  width: calc(100% - var(--chart_controls-width));
}

.chart_container text {
  fill: var(--chart_text-color) !important;
  font-family: var(--font-family-default) !important;
}

.chart_controls {
  display: flex;
  gap: var(--gap-M);
  flex: 1 1 auto;
  flex-direction: column;
  max-width: var(--chart_controls-width);
}

.chart_legend-title {
  font-size: var(--text-S);
  font-weight: bold;
  line-height: var(--line-height-S);
}

.chart_legend-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-S);
  list-style: none;
}

.chart_legend-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--gap-S);
  font-size: var(--text-XS);
  line-height: var(--line-height-XS);
}

.chart_legend-item .chart_legend-icon {
  display: block;
  flex-shrink: 0;
  height: var(--gap-M);
  width: var(--gap-M);
}

.chart_legend-icon.horizontal--line,
.chart_legend-icon.horizontal--dash-line {
  height: 1px;
  width: var(--gap-M);
}

.chart_legend-icon.horizontal--line {
  border: 1.5px solid;
}

.chart_legend-icon.horizontal--dash-line {
  border: 1.5px dashed;
}

.chart_controls_tools {
  margin-top: auto;
}

.chart_controls_tools button {
  font-size: var(--text-M);
}

/* .title_block + section,  testing */
.kpi_filter {
  margin-top: 0;
}

.kpi_filter .accordion_content {
  padding-left: 0;
  padding-right: 0;
}

.kpi_box {
  background-color: var(--accent-2);
  color: var(--accent-3);
  display: flex;
  flex-direction: column;
  gap: var(--gap-S);
  height: 100%;
  justify-content: flex-end;
  padding-bottom: var(--gap-ML);
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  padding-top: var(--gap-ML);
} /* used in "Filters and KPI", and standalone */

.kpi_value {
  font-size: clamp(32px, 4vw, 75px);
  font-weight: bold;
  line-height: 1;
}

.kpi_label {
  font-size: var(--text-M);
}

.kpi_size-s .kpi-box,
.kpi_size-xs .kpi_box {
  padding-bottom: var(--gap-M);
  padding-top: var(--gap-M);
}

.kpi_size-s .kpi_value,
.grid_column .grid_column .kpi_value {
  font-size: clamp(32px / 1.33, 2vw, 75px / 1.33);
}

.kpi_size-xs .kpi_value {
  font-size: clamp(32px / 1.5, 2vw, 48px / 1.5);
}

.kpi_size-xs .kpi_label {
  font-size: var(--text-XS);
}

.title_block {
  align-items: center;
  border-bottom: 1px solid var(--neutral-600);
  container: title_block / inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-XS);
  justify-content: space-between;
  margin-bottom: var(--gap-S);
  padding-bottom: var(--gap-S);
  padding-top: var(--gap-S); /* var(--fluid-title-vertical-spacing) */
}

.page_title {
  align-items: center;
  display: flex;
  gap: clamp(var(--gap-S), 2vw, var(--gap-M));
  margin-right: auto;
  transition: font-size var(--animation-300);
}

.page_title,
.page_title i {
  font-size: var(--H1-fluid-text);
}

.main_navbar {
  column-gap: var(--gap-S);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-S);
  font-weight: bold;
  justify-content: flex-end;
  line-height: var(--line-height-S);
  list-style: none;
  margin-left: auto; /* aligns to right edge */
  max-width: fit-content;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  row-gap: 0;
  transition: flex var(--animation-300);
  white-space: nowrap;
}

.main_navbar > li {
  position: relative;
}

.main_navbar-item {
  color: var(--nav-text);
  display: flex;
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  transition: color var(--animation-300);
}

.main_navbar-item:hover {
  color: var(--nav-text--active);
}

.title_block:has(.sub_navbar) {
  border-bottom: 1px solid var(--stroke-1);
  padding-bottom: 0;
}

.sub_navbar {
  background-color: var(--surface-2);
  border-top: 1px solid var(--stroke-2);
  box-shadow: inset var(--shadow-2);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-S);
  font-weight: bold;
  gap: var(--gap-XS) var(--gap-M);
  justify-content: flex-end;
  line-height: var(--line-height-S);
  list-style: none;
  min-height: 36px;
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  white-space: nowrap;
  width: 100%;
}

.sub_navbar-item {
  color: var(--nav-text);
  transition: color var(--animation-300);
}

.sub_navbar-item:hover {
  color: var(--nav-text--active);
}

[class$="navbar-item active-page"] {
  color: var(--nav-text--active);
}

.breadcrumbs {
  column-gap: var(--gap-S);
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  white-space: nowrap;
}

.breadcrumbs li {
  align-items: center;
  display: flex;
  gap: var(--gap-S);
}

.breadcrumbs li:not(:last-child)::after {
  font-family: "Opticons" !important;
  content: "\f12f";
}

.breadcrumbs a {
  color: var(--accent-1);
  font-size: var(--text-S);
  line-height: var(--line-height-S);
  transition: color var(--animation-300);
}

.breadcrumbs .active-page {
  color: var(--nav-text);
  font-weight: bold;
}

h2 {
  font-size: var(--H2-fluid-text);
  margin-bottom: var(--gap-M);
  padding-top: var(--gap-S);
}

.sub-title_block {
  align-items: center;
  container: sub-title_block / inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-S);
  justify-content: space-between;
  margin-bottom: var(--gap-ML);
  margin-top: var(--gap-ML);
}

.page_sub-title {
  font-size: var(--text-M);
  margin-left: var(--gap-M);
}

.previous-page_link {
  align-items: center;
  color: var(--neutral-600);
  display: flex;
  font-size: var(--text-XS);
  gap: var(--gap-S);
  transition: color var(--animation-300), gap var(--animation-300);
}

.previous-page_link:hover {
  color: var(--accent-1);
  gap: var(--gap-M);
}

.app_card {
  /* animation: scale 0.8s normal ease-in-out; */
  background-color: var(--surface-1);
  box-shadow: var(--shadow-3);
  color: var(--neutral-900);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.2s ease-in-out;
  min-width: 350px;
}
/*
		.app_card:hover {
			transform: scale(1.05, 1.05);
		}
*/
.app_card::after {
  opacity: 1;
}

.visually-hidden_toggle ~ .app_card-header .show-more_toggle i {
  transform: rotate(0deg);
  transition: transform var(--animation-300);
}

.visually-hidden_toggle:checked ~ .app_card-header .show-more_toggle i {
  transform: rotate(180deg);
}

.visually-hidden_toggle ~ .app_card-header .show-more_toggle::after {
  content: attr(data-text-overlay-closed);
}

.visually-hidden_toggle:checked ~ .app_card-header .show-more_toggle::after {
  content: attr(data-text-overlay-open);
}

.visually-hidden_toggle:checked ~ .app_card-body .app_card-overlay {
  opacity: 1;
  z-index: 2;
}

.app_card-header {
  display: flex;
  gap: calc(var(--gap-XS) / 2); /* var(--gap-M) */
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
}

.app_icon {
  display: none; /* #6528 */
  font-size: var(--text-XL);
}

.app_card-title {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.show-more_toggle {
  align-items: center;
  color: var(--neutral-600);
  display: flex;
  font-size: var(--text-XS);
  gap: var(--gap-S);
  transition: color var(--animation-300), gap var(--animation-300);
}

.show-more_toggle:hover {
  color: var(--accent-1);
  gap: var(--gap-XS);
}

.app_card-body {
  height: 100%;
  /* min-height: 82px; /* Moved to app_card-content */
  /* overflow-y: auto; /* Moved to app_card-content */
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  position: relative;
}

.app_card-content {
  min-height: 7.125rem; /* 114px */
  /* max-height: 15rem; allowing cards to grow to infinite number of workflow steps */
  overflow-y: auto;
}

.app_card-content svg {
  width: 100%;
}

.app_card-overlay {
  background-color: var(--surface-1);
  font-size: var(--text-XS);
  height: 100%;
  left: 0;
  max-width: 99%; /* vertical scrollbar stays inside container */
  opacity: 0;
  overflow-y: auto;
  padding-bottom: var(--gap-XS);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-XS);
  position: absolute;
  top: 0;
  transition: opacity var(--animation-300), z-index var(--animation-300);
  width: 100%;
  z-index: -1;
}

.app_card-overlay p {
  line-height: var(--line-height-S);
}

.app_card-footer {
  display: flex;
  gap: var(--gap-M);
  margin-top: auto;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: 0;
  padding-top: var(--gap-M);
}

.app_card-footer .button {
  font-size: var(--text-S);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
}

.app_card-footer:has(.button + .button) {
  padding-left: 0;
}

.app_card-footer .primary_button {
  background-color: var(--brand-700);
  color: var(--neutral-1000);
  flex-grow: 1;
  justify-content: flex-start;
  margin-left: auto;
  max-width: calc(var(--app-card_column-width) + var(--gap-M));
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--animation-300), color var(--animation-300);
  white-space: nowrap;
}

.app_card-footer .primary_button:hover {
  background-color: var(--green-500);
  color: var(--neutral-1000);
}

.panel_container {
  height: 72vh; /* TODO: rethink */
}

.panel_sidebar {
  background-color: var(--surface-1);
  gap: var(--gap-M);
  height: 100%;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
}

.panel_sidebar-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-S);
}

.panel_view {
  background-color: var(--surface-1);
  container: panel_view / inline-size;
  flex: 1 1 auto;
  height: 100%;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-L);
  padding-right: var(--gap-L);
  padding-top: var(--gap-M);
}

.panel_view-header {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: var(--gap-S);
  justify-content: space-between;
}

.panel_view-title {
  flex: 1;
  font-weight: bold;
}

.panel_view-actions {
  display: flex;
  gap: var(--gap-S);
  justify-content: flex-end;
}

.panel_view-details {
  color: var(--neutral-600);
  column-gap: var(--gap-M);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-S);
  margin-bottom: var(--gap-M);
  row-gap: 0;
}

.panel_view .panel_content {
  flex-direction: column;
  height: calc(100% - 100px);
  overflow-y: auto;
}

@container panel_view (max-width: 400px) {
  .panel_view-header {
    flex-direction: column;
  }

  .panel_view-title {
    order: 2;
  }

  .panel_view-actions {
    align-self: flex-end;
  }

  .panel_view .panel_content {
    height: calc(100% - 150px);
  }
}

.panel_content {
  display: flex;
}

.panel_container {
  display: flex;
  gap: var(--gap-XL);
}

.panel_content {
}

.panel_sidebar {
  flex: 0 0 auto;
  width: 300px;
}

.panel_sidebar .panel_content {
  overflow-y: auto;
  flex-direction: column;
  height: calc(100% - 72px);
}

.tabs_block {
  background-color: transparent;
  margin-top: var(--gap-L);
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  position: relative;
}

.tabs_container {
  display: flex;
  gap: var(--gap-S);
  flex-wrap: wrap;
}

.tab_button {
  align-items: center;
  background-color: #f0eadf;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--text-S);
  font-weight: normal;
  gap: var(--gap-S);
  height: var(--gap-L);
  justify-content: center;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  transition: background-color var(--animation-300), color var(--animation-300);
  white-space: nowrap;
}

.tab_button.is-active {
  background-color: #e8d6b5;
  font-weight: bold;
}

.tabs_panel {
  background-color: var(--surface-2);
  margin-top: var(--gap-S);
  padding-bottom: var(--gap-ML);
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  padding-top: var(--gap-ML);
  position: relative;
}

.tabs_panel-content {
  display: none;
  opacity: 0;
  transition: opacity var(--animation-300);
}

.tabs_panel-content.is-active {
  display: block;
  opacity: 1;
  transition: opacity var(--animation-300);
}

.form_item {
}

.form_control {
  display: flex;
  flex-direction: column;
  gap: var(--gap-XS);
  justify-content: flex-end;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  /* width: 100%; */
}
/* TODO: Keyboard nav outline
	.form_control:active .form_field,
	.form_control:focus-within .form_field {
		outline: 3px solid var(--accent-2);
	}
*/

.form_field {
  border: 1px solid var(--form_field-border);
  border-radius: var(--form_field-border-radius);
  background-color: var(--form_field-background);
  display: flex;
  height: 2rem;
  outline: 0 none;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  width: 100%;
}

.form_field:has(textarea) {
  height: auto; /* 4rem */
}

.form_field input {
  align-items: center;
  background-color: transparent;
  display: flex;
  flex: 1 1 auto;
  font-size: var(--text-S);
  height: 100%;
  outline: 0 none;
  padding-bottom: 6px;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: 6px;
  text-overflow: ellipsis;
}

.form_field input:has(+ button) {
  padding-right: 0;
}

.form_field input + button {
  aspect-ratio: initial;
  margin-right: var(--gap-S);
}

.form_field textarea {
  background-color: transparent;
  border: 0 none;
  display: flex;
  flex: 1 1 auto;
  height: 4rem;
  outline: 0 none;
  padding-bottom: 6px;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: 6px;
  resize: none;
}

.form_option {
  align-items: center;
  display: flex;
  gap: var(--gap-S);
  /* min-height: 2rem; */
  outline: 0 none;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  width: fit-content;
  word-break: break-word;
}

.form_option input {
  align-items: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--form_field-border);
  border-radius: var(--form_field-border-radius);
  background-color: var(--form_field-background);
  color: transparent;
  cursor: pointer;
  display: flex;
  height: 1rem;
  justify-content: center;
  outline: 0 none;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  transition: all var(--animation-300);
  user-select: none;
  -webkit-appearance: none;
  width: 1rem;
}

.form_option input:hover {
  border: 1px solid var(--action_button-border--hover);
}

.form_option input:active,
.form_option input:focus {
  border: 1px solid var(--action_button-border--active);
}

.form_option input::before {
  content: "";
  background-color: transparent;
  transform: scale(0);
  transition: all var(--animation-300);
}

.form_option input:checked {
  border: 1px solid var(--action_button-border--active);
}

.form_option input:checked::before {
  color: var(--action_button-color--active);
  transform: scale(1);
}

.form_option input[type="checkbox"]:checked:not(:indeterminate):not(:disabled)::before {
  background-color: var(--action_button-background--active);
  border-radius: var(--form_field-border-radius);
  color: var(--action_button-color--active);
  content: "\f633";
  font-family: "Opticons" !important;
  font-size: var(--text-XS);
  font-weight: normal;
  text-align: center;
}

.form_option input[type="radio"] {
  border-radius: var(--gap-S);
}

.form_option input[type="radio"]:checked::before {
  content: "";
  background-color: var(--action_button-background--active);
  border-radius: var(--gap-S);
  display: block;
  height: var(--gap-S);
  width: var(--gap-S);
}

.form_option input[type="checkbox"]:indeterminate {
  background-color: var(--form_field-background);
}

.form_option input[type="checkbox"]:indeterminate::before {
  background-color: var(--action_button-background--active);
  content: "";
  display: block;
  height: var(--gap-S);
  width: var(--gap-S);
}

.form_option.is-invalid {
  color: var(--error);
}

.form_option.is-invalid input {
  border-color: var(--error);
  color: var(--error);
}

.form_option:has(input:disabled) {
  color: var(--neutral-420);
}

.form_option input:disabled {
  border-color: var(--neutral-420);
}

.form_option input:disabled::before {
  background-color: var(--neutral-420);
}

.form_option input[type="checkbox"]:indeterminate::before {
  background-color: var(--surface-4);
}

.form_option input[type="checkbox"]:indeterminate::before {
  background-color: var(--surface-4);
}

.form_option:has(.action_button) {
  align-items: flex-start;
}

.form_message {
  display: flex;
  flex-direction: column;
  gap: var(--gap-XS);
  height: 0;
  list-style: none;
  margin-top: 0;
  opacity: 0;
  transition: all var(--animation-300);
  visibility: hidden;
}

.form_message li {
  color: var(--form_message-color);
  display: flex;
  flex: 1 1 auto;
  font-size: var(--text-XS);
  font-weight: bold;
  gap: var(--gap-S);
  line-height: normal;
  text-align: left;
  text-wrap: wrap;
}

.form_message i {
  font-size: var(--text-S);
  font-weight: normal;
}

.form_field.is-invalid ~ .form_message,
.form_field.has-feedback ~ .form_message {
  height: auto;
  margin-top: var(--gap-XS);
  opacity: 1;
  visibility: visible;
}

.form_field.is-invalid {
  border: 1px solid var(--error);
  color: var(--error);
}

.form_message .is-error,
.form_field.is-invalid ~ .form_item_label,
.form_field.is-invalid > input {
  color: var(--error);
}

.form_field.has-feedback:not(.is-invalid) {
  border: 1px solid var(--form_message-color);
}

.has-feedback ~ .form_message,
.has-feedback ~ .form_item_label,
.has-feedback > input {
  color: var(--form_field-color);
}

.form_item_group {
  align-items: flex-end;
  column-gap: var(--gap-M);
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  row-gap: var(--gap-XS);
}

.form_item_label {
  font-size: var(--text-S);
  font-weight: bold;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  text-align: left;
  width: 100%;
  transition: color var(--animation-300);
}

.form_control:has(.is-invalid) label {
  color: var(--error);
}

.form_item_field {
  border-radius: 0;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  overflow: hidden;
  /* imported inline styles */
  height: 32px;
  padding: 0px;
  /*
				flex: 1 1 auto;
				font-size: var(--text-XS);
				margin-bottom: 0;
				margin-left: 0;
				margin-right: 0;
				margin-top: 0;
				padding-bottom: var(--gap-S);
				padding-left: var(--gap-S);
				padding-right: var(--gap-S);
				padding-top: var(--gap-S);
				*/
}

/* works
				.form_item_field:focus-within {
					outline: 3px solid red;
				}
				*/

.form_field .action_button,
.popup-item_block .action_button {
  align-self: center;
  background-color: var(--form_action_button-background);
  border: 0 none;
  border-radius: 0;
  color: var(--form_action_button-color);
  transition: background-color var(--animation-300), color var(--animation-300);
}

.form_field .action_button:focus,
.form_field .action_button:hover,
.popup-item_block .action_button:focus,
.popup-item_block .action_button:hover {
  color: var(--form_action_button-color--hover);
  background-color: var(--form_action_button-background);
}

.form_field .action_button:active,
.form_field .action_button.is-active {
  color: var(--form_action_button-color--active);
}

.form_field .action_button[data-action="delete"]:focus,
.form_field .action_button[data-action="delete"]:hover,
.popup_item_block .action_button[data-action="delete"]:focus,
.popup_item_block .action_button[data-action="delete"]:hover {
  color: var(--error);
}

.form_field .action_button[data-action="delete"]:active,
.popup_item_block .action_button[data-action="delete"]:active {
  background-color: var(--error);
  color: var(--form_action_button-color--active);
}

.button {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-weight: bold;
  gap: var(--gap-S);
  height: var(--gap-L);
  justify-content: center;
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  transition: background-color var(--animation-300), color var(--animation-300);
}

.button.is-error {
  background-color: var(--error);
  color: var(--neutral-200) !important;
  cursor: default;
  pointer-events: none;
}

.button.is-success {
  background-color: var(--success);
  color: var(--body-text-color) !important;
  cursor: default;
  pointer-events: none;
}

.button-xs {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--text-S);
  font-weight: bold;
  gap: var(--gap-S);
  height: var(--gap-L);
  justify-content: center;
  line-height: var(--line-height-S);
  padding-left: 0;
  padding-right: 0;
  transition: background-color var(--animation-300), color var(--animation-300);
}

.button-ml {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--text-M);
  font-weight: bold;
  gap: var(--gap-S);
  height: var(--gap-L);
  justify-content: center;
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  transition: background-color var(--animation-300), color var(--animation-300);
}

.has-icon-leading {
}

.has-icon-trailing {
}

.is-transparent {
  background-color: transparent !important;
}

.split_button {
  display: flex;
  position: relative;
}

.split-action_button {
  align-items: center;
  border-left: 1px solid rgb(255, 255, 255, 50%);
  display: flex;
  flex: 1 1 auto;
  font-size: 0.5rem;
  justify-content: center;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  position: relative;
  transition: background-color var(--animation-300);
}

.primary_button {
  background-color: var(--brand-900);
  color: var(--neutral-100);
}

.primary_button:hover {
  background-color: var(--green-800);
  color: var(--neutral-100);
}

.secondary_button {
  background-color: var(--brand-100);
  color: var(--neutral-900);
}

.secondary_button:hover {
  background-color: var(--yellow-300);
  color: var(--neutral-1000);
}

.tertiary_button {
  background-color: var(--neutral-410);
  color: var(--neutral-1000);
}

.tertiary_button:hover {
  background-color: var(--neutral-420);
  color: var(--neutral-1000);
}

.ghost_button {
  background-color: transparent;
}

.ghost_button:hover {
  background-color: transparent;
}

.destructive_button {
  background-color: var(--error);
  color: var(--neutral-100);
}

.destructive_button:hover {
  background-color: var(--red-800);
  color: var(--neutral-100);
}

.square_button {
  align-items: center;
  display: flex;
  font-size: var(--text-M);
  height: var(--gap-L);
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  transition: background-color var(--animation-300), color var(--animation-300);
  width: calc(var(--gap-S) + var(--gap-L));
}

.status_chip {
  align-items: center;
  column-gap: var(--gap-S);
  display: flex;
  flex: 1 1 auto;
  font-size: var(--text-S);
  font-weight: bold;
  height: var(--gap-ML);
  justify-content: center;
  min-width: calc(var(--gap-XXL) + var(--gap-S));
  padding: calc(var(--gap-XS) / 2);
  text-transform: capitalize;
}

.status_chip.is-approved {
  background-color: var(--brand-700);
}

.status_chip.is-cancelled {
  background-color: var(--brand-300);
}

.status_chip.is-created {
  background-color: var(--brand-100);
}

.status_chip.is-draft {
  background-color: var(--brand-100);
}

.status_chip.is-exported {
  background-color: var(--brand-800);
  color: var(--neutral-100);
}

.status_chip.is-information {
  background-color: var(--blue-100);
  color: var(--blue-900);
}

.status_chip.is-saved {
  background-color: var(--brand-900);
  color: var(--neutral-100);
}

.status_chip.is-warning {
  background-color: transparent;
  color: var(--brand-500);
}

.status_chip.is-future {
  background-color: var(--brand-500);
  color: var(--neutral-100);
}

.status_chip.is-current {
  background-color: #bce4e5;
  color: var(--neutral-1000);
}

.status_chip.is-historic {
  background-color: #2b8aaf;
  color: var(--neutral-100);
}

.status_chip.has-edits {
  /* background-color: var(--green-300); testing */
  color: var(--green-1000);
  flex: 0 0 auto;
  min-width: calc(var(--gap-S) + var(--gap-L));
}

/* Layouts */
.grid_container {
  display: grid;
  gap: var(--gap-ML);
  width: 100%;
}

.grid_column {
  container: grid_column / inline-size;
}

.filter_box {
  container: filter_box / inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-ML);
  padding-right: var(--gap-ML);
  padding-top: var(--gap-M);
  row-gap: var(--gap-S);
  transition: background-color var(--animation-300);
}

.filter_box_tools {
  align-items: center;
  column-gap: var(--gap-M);
  display: flex;
  min-height: var(--gap-L);
  white-space: nowrap;
}

.kpi_filter-count {
  color: var(--neutral-600);
  font-size: var(--text-XS);
}

.accordion_content .grid_container {
  counter-reset: kpifilters;
}

.accordion_content .grid_column:has(.filter_box) {
  counter-increment: kpifilters;
}

.kpi_filter-count::after {
  content: "Filter " counter(kpifilters) " of 4";
}

.cta_container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-S) var(--gap-M);
  white-space: nowrap;
}

.filter_box .cta_container > button {
  flex-grow: 1;
  /* max-width: max-content; */
} /* keeps both buttons in one line */

@container filter_box (max-width: 400px) {
  .filter_box .cta_container > button {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

.popup_container {
  background-color: var(--surface-1);
  container: popup_container;
  display: flex;
  border: 1px solid var(--stroke-1);
  box-shadow: var(--shadow-1);
  flex-direction: column;
  left: 0;
  list-style: none;
  overflow-x: hidden;
  padding-bottom: var(--gap-S);
  /* padding-left: var(--gap-S); */
  padding-top: var(--gap-XS);
  /* padding-right: var(--gap-S); */
  position: absolute;
  min-width: 250px;
  width: 250px;
  z-index: 9;
}
/* experimental HTML resize */
.is-resizable {
  resize: horizontal;
  overflow: auto;
}

.popup_content-scrollable {
  height: max-content;
  list-style: none;
  max-height: 400px;
  overflow-y: auto;
  width: 100%;
}

.popup_title {
  align-items: center;
  display: flex;
  font-size: var(--text-S);
  margin-bottom: var(--gap-S);
  padding-bottom: 0;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
}

.popup_title .form_control {
  width: 100%;
}

.popup_tools {
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--gap-S);
}

.popup_tools_title {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-S);
  justify-content: space-between;
  width: 100%;
}

.popup_menu-item {
  display: flex;
  font-size: var(--text-S);
  transition: background-color var(--animation-300), color var(--animation-300);
}

.popup-item_block {
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  font-weight: normal;
  gap: var(--gap-S);
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--animation-300), color var(--animation-300);
  white-space: wrap;
  word-break: break-word;
  width: 100%;
}

.popup-item_block:hover {
  background-color: var(--common_background--hover);
}

.popup-item_block:active,
.popup-item_block:focus {
  background-color: var(--common_background--active);
}

/* uncommented for #7042 */
.popup-item_block.is-selected,
.popup-item_block:has(.form_option input:checked) {
  background-color: var(--common_background--selected);
  color: var(--common_color--selected);
}

.popup-item_block > button {
  margin-left: auto;
}

.popup_container .status_chip {
  background-color: var(--neutral-200);
  font-size: var(--text-S);
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-S);
  width: 100%;
}

.popup_container .cta_container {
  gap: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
}

/* TODO: rewise */
.app_card .popup-item_block {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 2rem;
}

.popup-item_block .form_option {
  flex: 1 1 auto;
}
/* end of rewise */

@container popup_container (max-width: 200px) {
  .popup_container .cta_container > button {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

.popup_animated-enter-active,
.popup_animated-leave-active {
  margin-top: 0;
  transition: opacity var(--animation-300), margin-top var(--animation-300);
}

.popup_animated-enter,
.popup_animated-leave-to {
  margin-top: -0.25rem;
  opacity: 0;
}

.notification_bubble-count {
  align-items: center;
  background-color: var(--brand-500);
  border-radius: 2rem;
  color: var(--neutral-100);
  display: inline-flex;
  font-size: var(--text-XS);
  height: auto;
  justify-content: center;
  line-height: var(--text-XS);
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0.25rem;
  pointer-events: none;
}

.modal_container {
}

.modal_title {
  align-items: center;
  background-color: var(--modal_title-background);
  border: 0 none;
  color: var(--modal_title-color);
  display: flex;
  font-size: var(--text-M);
  justify-content: flex-start;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
  position: relative;
  text-overflow: ellipsis;
}

.modal_content {
  -webkit-user-drag: none;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
}

.modal_content-custom {
  display: flex;
  flex-direction: column;
  gap: var(--gap-S);
}

.filter_selection {
  background-color: var(--blue-100);
  border: 1px solid var(--blue-400);
  flex: 1 1 auto;
  min-height: fit-content;
  /* overflow: hidden; aligning to display selection in multiple lines */
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  /* text-overflow: ellipsis; aligning to display selection in multiple lines */
  white-space: normal; /* previously nowrap - aligning to display selection in multiple lines */
}

.modal_content-custom .form_item_group {
  align-items: flex-start;
}

.process_block {
  align-items: center;
  display: flex;
  gap: var(--gap-S);
  justify-content: space-between;
  margin-bottom: 1px;
  min-height: var(--gap-L);
  padding-bottom: var(--gap-XS);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-XS);
}

.process_block:last-child {
  margin-bottom: 0;
}

.process_block i {
  font-size: var(--text-ML);
}

.is-unlocked {
  background-color: var(--process_is-unlocked-background);
  color: var(--process_is-unlocked-color);
  font-size: var(--text-S);
}

.is-locked {
  background-color: var(--process_is-locked-background);
  color: var(--process_is-locked-color);
  font-size: var(--text-XS);
}

.is-locked i {
  color: var(--process_is-locked-icon);
}

.process_label {
  font-weight: bold;
}

/* Helper classes */
.alignment_to-bottom {
  margin-top: auto;
}

.align-to-left {
  margin-right: auto;
}

.align-to-right {
  margin-left: auto;
}

.fill-container {
  height: 100%;
}

.flex_column {
  flex-direction: column;
}

.flex_container {
  display: flex;
}

.flex_no-wrap {
  flex-wrap: nowrap;
}

.flex_wrap {
  flex-wrap: wrap;
}

.gap-none {
  gap: 0;
}

.gap-XS {
  gap: var(--gap-XS);
}

.gap-S {
  gap: var(--gap-S);
}

.gap-M {
  gap: var(--gap-M);
}

.gap-ML {
  gap: var(--gap-ML);
}

.gap-L {
  gap: var(--gap-L);
}

.gap-XL {
  gap: var(--gap-XL);
}

.gap-XXL {
  gap: var(--gap-XXL);
}

.highlight-text {
  color: var(--accent-2);
}

.is-hidden {
  display: none;
}

.is-fluid {
  flex: 1 1 auto;
}

.is-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.is-selected:not(:hover, :active) {
  background-color: var(--common_background--selected);
  color: var(--common_color--selected);
}

.is-sticky {
  position: sticky;
}

.screen-reader_text {
  left: -99999px;
  opacity: 0;
  position: absolute;
}

.scroll-horizontal {
  overflow-x: auto;
  position: relative;
  width: 100%;
}

.scroll-vertical {
  min-height: 100%;
  overflow-y: auto;
}

.grid_auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid_1-1 {
  grid-template-columns: repeat(2, 1fr);
}

.grid_1-3 {
  grid-template-columns: 300px 3fr;
}

@container grid_column (max-width: 400px) {
  .grid_1-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  [data-location="homepage"] .app_card-content.grid_1-1 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.visually-hidden_toggle {
  left: 0;
  opacity: 0;
  position: absolute;
  top: initial;
  z-index: -1;
}

/* might need to be adjusted based on usecase */
.skeleton {
  /* animation: skeleton-loading 1s linear infinite alternate;*/
  background-color: hsl(0, 0%, 89%);
  pointer-events: none;
  background-color: hsl(0, 0%, 89%);
}

/* TODO: double check */
table td > .skeleton {
  display: inline-flex;
  height: 12px;
  width: 100%;
}

/* TODO: double check */
.toolbar .skeleton {
  height: var(--gap-L);
  margin-top: 20px;
  flex: auto;
}

.skeleton.action_button,
.skeleton.status_chip {
  height: var(--gap-ML);
  align-items: center;
}

button.size-small {
  align-items: center;
  display: flex;
  gap: var(--gap-XS);
  height: var(--gap-ML);
  padding-bottom: var(--gap-XS);
  padding-left: var(--gap-XS);
  padding-right: var(--gap-XS);
  padding-top: var(--gap-XS);
  transition: background-color var(--animation-300), color var(--animation-300);
}

.skeleton.action_button {
  width: var(--gap-ML);
}

.rotate-animation {
  animation: rotate-clockwise 2s linear infinite;
}

/* Animations */
@keyframes scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-from-bottom {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-1rem);
  }
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

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

/* Icons */
@font-face {
  font-display: block;
  font-family: "Opticons";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/opticons.ttf") format("truetype"), url("fonts/opticons.woff") format("woff"),
    url("fonts/opticons.svg") format("svg");
}

.opticons {
  font-family: "Opticons" !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: never;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.oi-arrow-left::before {
  content: "\f12f";
}

.oi-arrow-right::before {
  content: "\f138";
}

.oi-brand-assortment-management::before {
  content: "\e903";
}

.oi-brand-automation-of-manual-processes::before {
  content: "\e904";
}

.oi-brand-curve-up::before {
  content: "\e905";
}

.oi-brand-demand-modeling-and-forecasting::before {
  content: "\e906";
}

.oi-brand-holistic-perspective::before {
  content: "\e910";
}

.oi-brand-idea::before {
  content: "\e907";
}

.oi-brand-inventory-optimization::before {
  content: "\e908";
}

.oi-brand-logo::before {
  content: "\e909";
}

.oi-brand-logo-icon::before {
  content: "\e90a";
}

.oi-brand-milestone::before {
  content: "\e901";
}

.oi-brand-operational-strategies::before {
  content: "\e90b";
}

.oi-brand-product-launch-and-phaseout::before {
  content: "\e90c";
}

.oi-brand-robotic-data-correction::before {
  content: "\e90d";
}

.oi-brand-supplier::before {
  content: "\e900";
}

.oi-brand-switch-user::before {
  content: "\e902";
}

.oi-brand-time::before {
  content: "\e90e";
}

.oi-calendar-event::before {
  content: "\f108";
}

.oi-caret-down::before {
  content: "\f229";
}

.oi-chat-bubble::before {
  content: "\f251";
}

.oi-chat-bubble-full::before {
  content: "\f24e";
}

.oi-check::before {
  content: "\f633";
}

.oi-chevron-left::before {
  content: "\f284";
}

.oi-chevron-right::before {
  content: "\f285";
}

.oi-clipboard-bars::before {
  content: "\f727";
}

.oi-clipboard-check::before {
  content: "\f724";
}

.oi-cog::before {
  content: "\f3e2";
}

.oi-download::before {
  content: "\f302";
}

.oi-duplicate::before {
  content: "\f3c2";
}

.oi-ellipsis-menu::before {
  content: "\f910";
}

.oi-ellipsis-menu-v::before {
  content: "\f911";
}

.oi-favorite::before {
  content: "\f586";
}

.oi-favorites-list::before {
  content: "\f476";
}

.oi-filter::before {
  content: "\f3ca";
}

.oi-full-screen::before {
  content: "\f3df";
}

.oi-graph-bars::before {
  content: "\f17a";
}

.oi-heart::before {
  content: "\f415";
}

.oi-home::before {
  content: "\f422";
}

.oi-i-circle::before {
  content: "\f430";
}

.oi-import::before {
  content: "\f4c2";
}

.oi-locked::before {
  content: "\f90f";
}

.oi-minus::before {
  content: "\f63b";
}

.oi-minus-square::before {
  content: "\f2e8";
}

.oi-participants::before {
  content: "\f2ed";
}

.oi-pencil::before {
  content: "\f4c9";
}

.oi-pencil-square::before {
  content: "\f4ca";
}

.oi-person-admin::before {
  content: "\f4db";
}

.oi-pin::before {
  content: "\f4ea";
}

.oi-play::before {
  content: "\f4f4";
}

.oi-plus::before {
  content: "\f64d";
}

.oi-plus-square::before {
  content: "\f4fc";
}

.oi-sort-arrows::before {
  content: "\f127";
}

.oi-sort-arrow-down::before {
  content: "\f128";
}

.oi-sort-arrow-up::before {
  content: "\f148";
}

.oi-tools::before {
  content: "\f912";
}

.oi-trash-can::before {
  content: "\f782";
}

.oi-unlocked::before {
  content: "\f902";
}

.oi-x::before {
  content: "\f659";
}

.oi-x-circle::before {
  content: "\f622";
}

.oi-warning-triangle::before {
  content: "\f33b";
}