:root {
	--buttonColor: #EF5601;
	--buttonColorOver: #F95B02;

	--headerHeight: 3.125em;
	--navigationWidth: 17em;
	--navigationHeaderFontSize: .935em;
	--navigationFontWeight: 600;
	--mainPadding: 1.250em;
	--contentPanelBorderRadius: 0.625em;
	--formContentElementBorderRadius: 4px;

	--headerBackgroundColor-light: #E0E0E0;
	--headerBackgroundColor-dark: #212121;

	--mainBackgroundColor-light: #F5F5F5;
	--mainBackgroundColor-dark: #272727;

	--headerBoxShadow-light: rgba(0, 0, 0, 0.3) 0 0 0.125em;
	--headerBoxShadow-dark: rgba(0, 0, 0, 0.4) 0 0 0.125em;

	--toolBarBackgroundColor-light: #FAFAFA;
	--toolBarBackgroundColor-dark: #424242;

	--navigationBackgroundColor-light: #FFF;
	--navigationBackgroundColor-dark: #505050;

	--navigationBackgroundColorOver-light: #FFF3E0;
	--navigationBackgroundColorOver-dark: #836E4A;

	--navigationBackgroundColorExpanded-light: #FAFAFA;
	--navigationBackgroundColorExpanded-dark: #414141;

	--navigationBorderColorActive: #FF6D00;
	--navigationBoxShadow: rgb(0 0 0 / 15%) 0 0.25em 0.625em;

	--contentPanelBackgroundColor-light: #FFF;
	--contentPanelBackgroundColor-dark: #353535;

	--contentPanelBoxShadow-light: rgba(0, 0, 0, 0.3) 0 0 0.125em;
	--contentPanelBoxShadow-dark: rgba(0, 0, 0, 0.4) 0 0 0.125em;

	--contentPanelSeparatorColor-light: #EEEEEE;
	--contentPanelSeparatorColor-dark: #757575;

	--tableHeaderSeparatorColor-light: #BCBBBB;
	--tableHeaderSeparatorColor-dark: #656565;

	--formContentElementBackgroundColor-light: #fff;
	--formContentElementBackgroundColor-dark: #404040;

	--formContentElementBorderColor-light: #C8CBD4;
	--formContentElementBorderColor-dark: #757575;

	--formContentElementFocusBorderColor: #FF6D00;
	--formContentElementFocusShadow: 0 0 0.25em #ef6c00;

	/* separate colors for read-only elements as no other light-dark-pair would fit */
	--formContentElementReadOnlyBackgroundColor-light: #f0f0f0;
	--formContentElementReadOnlyBackgroundColor-dark: #595959;
}

html {
	--headerBackgroundColor: var(--headerBackgroundColor-light);
	--mainBackgroundColor: var(--mainBackgroundColor-light);
	--headerBoxShadow: var(--headerBoxShadow-light);
	--toolBarBackgroundColor: var(--toolBarBackgroundColor-light);
	--navigationBackgroundColor: var(--navigationBackgroundColor-light);
	--navigationBackgroundColorOver: var(--navigationBackgroundColorOver-light);
	--navigationBackgroundColorExpanded: var(--navigationBackgroundColorExpanded-light);
	--contentPanelBackgroundColor: var(--contentPanelBackgroundColor-light);
	--contentPanelBoxShadow: var(--contentPanelBoxShadow-light);
	--contentPanelSeparatorColor: var(--contentPanelSeparatorColor-light);
	--tableHeaderSeparatorColor: var(--tableHeaderSeparatorColor-light);
	--formContentElementBackgroundColor: var(--formContentElementBackgroundColor-light);
	--formContentElementBorderColor: var(--formContentElementBorderColor-light);
	--formContentElementReadOnlyBackgroundColor: var(--formContentElementReadOnlyBackgroundColor-light);
}

html.dark-theme {
	--headerBackgroundColor: var(--headerBackgroundColor-dark);
	--mainBackgroundColor: var(--mainBackgroundColor-dark);
	--headerBoxShadow: var(--headerBoxShadow-dark);
	--toolBarBackgroundColor: var(--toolBarBackgroundColor-dark);
	--navigationBackgroundColor: var(--navigationBackgroundColor-dark);
	--navigationBackgroundColorOver: var(--navigationBackgroundColorOver-dark);
	--navigationBackgroundColorExpanded: var(--navigationBackgroundColorExpanded-dark);
	--contentPanelBackgroundColor: var(--contentPanelBackgroundColor-dark);
	--contentPanelBoxShadow: var(--contentPanelBoxShadow-dark);
	--contentPanelSeparatorColor: var(--contentPanelSeparatorColor-dark);
	--tableHeaderSeparatorColor: var(--tableHeaderSeparatorColor-dark);
	--formContentElementBackgroundColor: var(--formContentElementBackgroundColor-dark);
	--formContentElementBorderColor: var(--formContentElementBorderColor-dark);
	--formContentElementReadOnlyBackgroundColor: var(--formContentElementReadOnlyBackgroundColor-dark);
}

@media (prefers-color-scheme: dark) {
	html {
		--headerBackgroundColor: var(--headerBackgroundColor-dark);
		--mainBackgroundColor: var(--mainBackgroundColor-dark);
		--headerBoxShadow: var(--headerBoxShadow-dark);
		--toolBarBackgroundColor: var(--toolBarBackgroundColor-dark);
		--navigationBackgroundColor: var(--navigationBackgroundColor-dark);
		--navigationBackgroundColorOver: var(--navigationBackgroundColorOver-dark);
		--navigationBackgroundColorExpanded: var(--navigationBackgroundColorExpanded-dark);
		--contentPanelBackgroundColor: var(--contentPanelBackgroundColor-dark);
		--contentPanelBoxShadow: var(--contentPanelBoxShadow-dark);
		--contentPanelSeparatorColor: var(--contentPanelSeparatorColor-dark);
		--tableHeaderSeparatorColor: var(--tableHeaderSeparatorColor-dark);
		--formContentElementBackgroundColor: var(--formContentElementBackgroundColor-dark);
		--formContentElementBorderColor: var(--formContentElementBorderColor-dark);
		--formContentElementReadOnlyBackgroundColor: var(--formContentElementReadOnlyBackgroundColor-dark);
	}

	html.light-theme {
		--headerBackgroundColor: var(--headerBackgroundColor-light);
		--mainBackgroundColor: var(--mainBackgroundColor-light);
		--headerBoxShadow: var(--headerBoxShadow-light);
		--toolBarBackgroundColor: var(--toolBarBackgroundColor-light);
		--navigationBackgroundColor: var(--navigationBackgroundColor-light);
		--navigationBackgroundColorOver: var(--navigationBackgroundColorOver-light);
		--navigationBackgroundColorExpanded: var(--navigationBackgroundColorExpanded-light);
		--contentPanelBackgroundColor: var(--contentPanelBackgroundColor-light);
		--contentPanelBoxShadow: var(--contentPanelBoxShadow-light);
		--contentPanelSeparatorColor: var(--contentPanelSeparatorColor-light);
		--tableHeaderSeparatorColor: var(--tableHeaderSeparatorColor-light);
		--formContentElementBackgroundColor: var(--formContentElementBackgroundColor-light);
		--formContentElementBorderColor: var(--formContentElementBorderColor-light);
		--formContentElementReadOnlyBackgroundColor: var(--formContentElementReadOnlyBackgroundColor-light);
	}
}

html {
	background-color: var(--backgroundColor);
}

body {
	background-color: var(--headerBackgroundColor);
}

:focus-visible {
	outline: none;
}

.k-spinner-card {
  width: 320px;
  height: 320px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: var(--cardColor);
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  border-radius: var(--cardBorderRadius);
  box-shadow: var(--cardBoxShadow);
}

.pf-c-page__header-brand-link a,
.brand {
	width: 205px;
	height: 60px;
	background-size: 117%;
	background-position: center;
	background-repeat: no-repeat;
}

.brand {
	background-image: url('../images/logo_light.svg');
}

html.dark-theme .brand {
	background-image: url('../images/logo_dark.svg');
}

@media (prefers-color-scheme: dark) {
	html .brand {
		background-image: url('../images/logo_dark.svg');
	}

	html.light-theme .brand {
		background-image: url('../images/logo_light.svg');
	}
}

.pf-c-page__header-brand svg {
	color: var(--buttonColor);
}

.pf-c-page__sidebar {
	background-color: var(--navigationBackgroundColor);
}

@media screen and (min-width: 1200px) {
	.pf-c-page__sidebar {
	    box-shadow: var(--navigationBoxShadow);
	}
}

.pf-c-page__sidebar.pf-m-expanded {
	box-shadow: var(--navigationBoxShadow);
}

.pf-c-page__sidebar-body {
	padding-top: 0;
	padding-bottom: 0;
}

.pf-c-nav__link {
	font-size: var(--navigationHeaderFontSize);
	font-weight: var(--navigationFontWeight);
	color: var(--contentTextColor);
}

.pf-c-nav__link::before {
	border-color: transparent;
}

.pf-c-nav__link::after {
	border-color: transparent;
	border-left-width: 5px;
}

.pf-c-nav__link:focus {
	color: var(--contentTextColor);
	background-color: var(--navigationBackgroundColorOver);
}

.pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
	color: var(--contentTextColor);
	background-color: var(--navigationBackgroundColorOver);
}

.pf-c-nav__link.pf-m-current, .pf-c-nav__link.pf-m-current:hover, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link {
	color: var(--navigationBorderColorActive);
	background-color: var(--navigationBackgroundColorOver);
}

.pf-c-nav__link.pf-m-current::after {
	border-color: transparent;
}

.pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after {
	border-color: transparent;
}

.pf-c-nav__item.pf-m-expanded .pf-c-nav__link {
	background-color: var(--navigationBackgroundColorExpanded);
}

.pf-c-nav__item.pf-m-expanded .pf-c-nav__link:hover {
    background-color: var(--navigationBackgroundColorOver);
}

.pf-c-nav__item.pf-m-expanded .pf-c-nav__link::after {
	border-color: var(--navigationBorderColorActive);
	border-left-width: 5px;
}

.pf-c-nav__item.pf-m-expandable::before {
	border-bottom: transparent;
}

.pf-c-nav__subnav {
	padding-left: 0;
	padding-bottom: 0;
}

.pf-c-page__header {
	background-color: var(--headerBackgroundColor);
	color: var(--contentTextColor);
}

.pf-c-page__main-section {
	background-color: var(--mainBackgroundColor);
}

.pf-c-page__main .pf-c-page__main-section:first-child {
	background-color: var(--toolBarBackgroundColor);
	box-shadow: var(--headerBoxShadow);
	position: relative;
}

.pf-c-page__main-section.pf-m-shadow-bottom {
	box-shadow: var(--headerBoxShadow);
}

.pf-c-content h1, .pf-c-content h2, .pf-c-content h3, .pf-c-content h4, .pf-c-content h5, .pf-c-content h6 {
    font-family: 'Open Sans', sans-serif;
}

.pf-c-button {
	border-radius: 50vw;
}

.pf-c-button::after {
	border-radius: 50vw;
}

.pf-c-button.pf-m-primary {
	color: var(--buttonTextColor);
	background-color: var(--buttonColor);
}

.pf-c-button.pf-m-secondary {
	color: var(--buttonColor);
}

.pf-m-secondary.pf-c-button::after {
	border: 1px solid;
	border-color: var(--buttonColor);
}

.pf-c-button.pf-m-link {
	color: var(--buttonColor);
}

.pf-c-card {
	background-color: var(--contentPanelBackgroundColor);
	box-shadow: var(--contentPanelBoxShadow);
	border-radius: var(--contentPanelBorderRadius);
}

.pf-c-content {
	color: var(--contentTextColor);
}

.pf-c-data-list {
	background-color: var(--contentPanelBackgroundColor);
	color: var(--contentTextColor);
}

.pf-c-data-list__item {
	background-color: var(--contentPanelBackgroundColor);
	/*border-bottom: var(--contentPanelSeparatorColor);*/
}

.pf-c-data-list__expandable-content {
	border-top: 1px solid var(--contentPanelSeparatorColor);
}

.pf-m-expanded.pf-c-data-list__item::before {
	background-color: var(--navigationBorderColorActive);
}

.pf-c-form-control {
	background-color: var(--formContentElementBackgroundColor);
	color: var(--contentTextColor);
	border: 1px solid;
	border-color: var(--formContentElementBorderColor);
	border-radius: var(--formContentElementBorderRadius);
}

.pf-c-form-control:focus {
	padding-bottom: var(--pf-c-form-control--PaddingBottom);
	border-bottom-width: 1px;
	border-color: var(--formContentElementFocusBorderColor);
	box-shadow: var(--formContentElementFocusShadow);
}

.pf-c-form-control[readonly] {
	/*background-color: var(--formContentElementBackgroundColor);*/
	background-color: var(--formContentElementReadOnlyBackgroundColor);
	color: var(--labelTextColor);
}

/* fix because of interfering app.css */
:where(.pf-theme-dark) .pf-c-form-control[readonly]:not(:focus) {
	border-bottom-color: var(--formContentElementBorderColor)!important;
}

.pf-c-empty-state__body {
	color: var(--labelTextColor);
}

a {
	color: var(--buttonColor);
}

a:hover {
	color: var(--buttonColorOver);
}