@charset "UTF-8";
/**
* Description: CSS framework and Design system for Optilon Web Platform
* Author: Luka Ivas
* Last update: Tue, June 10 2025
* Version: 25.6
*/

/* 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 -- owp_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: .25rem; /* 4px */
--spacing-200: .5rem; /* 8px */
--spacing-250: .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);

--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);

--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: ; /* accordion 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: 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_menu-button:hover .oi-cog {
							animation: rotate-clockwise 2s linear infinite;
						}

						.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;
		}
*/
} 


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

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

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

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

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

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

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

	[data-owp-location="owp-homepage"] footer {
		padding-bottom: var(--gap-L);
		padding-top: var(--gap-L);
	}

		[data-owp-location="owp-homepage"] .footer_inner {
			align-items: flex-end;
		}

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

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

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

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

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

	.toolbar {
		align-items: flex-end;
		column-gap: var(--gap-ML);
		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-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;
			}

	.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-M);
					gap: 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(--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-M);
					}

				.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"] {
					border: var(--table_border-1);
				}

					.action_button[data-action="approve"] i,
					.action_button[data-action="deny"] 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 {
							background-color: var(--neutral-900);
							border-color: var(--neutral-900);
							color: var(--neutral-200);
						}

						.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);
						}

			.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);
		}

		.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);
				}

	.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;
		justify-content: space-between;
		margin-bottom: var(--gap-S);
		padding-bottom: var(--gap-S);
		padding-top: 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 {
			background-color: var(--surface-3);
			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;
			margin-left: auto; /* aligns to right edge */
			max-width: fit-content;
			padding-bottom: var(--gap-S);
			padding-left: var(--gap-L);
			padding-right: var(--gap-L);
			padding-top: var(--gap-S);
			transition: flex var(--animation-300);
			white-space: nowrap;
		}

			.main_navbar a {
				color: var(--nav-text);
				transition: color var(--animation-300);
			}

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

		.sub_navbar {
			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;
			padding-bottom: 0;
			padding-left: var(--gap-L);
			padding-right: var(--gap-L);
			padding-top: var(--gap-S);
			white-space: nowrap;
			width: 100%;
		}

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

			.sub_navbar a:hover {
				color: var(--nav-text--active);
			}
		
			a.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;
	}

		.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: 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 {
				font-size: var(--text-XL);
			}

			.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;
			overflow-y: auto; /* TODO: Revise */
			padding-left: var(--gap-M);
			padding-right: var(--gap-M);
			position: relative;
		}

			.app_card-content {
				height: 7.125rem; /* 114px */
			}

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

				.app_card-overlay {
					background-color: var(--surface-1);
					font-size: var(--text-XS);
					height: 100%;
					left: 0;
					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;
				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_container {
				display: flex;
				gap: var(--gap-S);
			}

				.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;
					}
	
	.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-S);
				font-weight: normal;
			}

			.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);
			cursor: default;
			pointer-events: none;
		}

		.button.is-success {
			background-color: var(--success);
			color: var(--body-text-color);
			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: 5;
		}
			/* 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);
					}

					.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;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding-bottom: var(--gap-S);
					padding-left: var(--gap-S);
					padding-right: var(--gap-S);
					padding-top: var(--gap-S);
				}

				.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 {
		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-owp-location="owp-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-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';
	}