html {
  --lumo-primary-color: hsl(217, 9%, 46%);
  --color-brand: hsl(217, 9%, 46%);
  --color-brand-80pct: hsla(217, 9%, 46%, 0.8);
  --color-brand-60pct: hsla(217, 9%, 46%, 0.6);
  --color-brand-40pct: hsla(217, 9%, 46%, 0.4);
  --color-brand-20pct: hsla(217, 9%, 46%, 0.2);
  --color-brand-10pct: hsla(217, 9%, 46%, 0.1);
  --color-blue: hsl(234, 63%, 75%);
  --color-blue-80pct: hsla(234, 63%, 75%, 0.8);
  --color-blue-60pct: hsla(234, 63%, 75%, 0.6);
  --color-red: hsl(349, 81%, 65%);
  --color-red-80pct: hsla(349, 81%, 65%, 0.8);
  --color-red-60pct: hsla(349, 81%, 65%, 0.6);
  --color-yellow: rgb(230 232 56 / 63%);
  --color-green: hsl(148, 63%, 60%);
  --color-gold: hsl(25, 81%, 65%);
  --color-black: hsl(228, 19%, 15%);
  --color-black-3pct: hsla(228, 19%, 15%, 0.03);
  --color-light: hsl(240, 40%, 98%);
  --color-white: #fff;
  --white-3pct: rgba(255, 255, 255, 0.03);
  --white-80pct: rgba(255, 255, 255, 0.8);
  --black-3pct: rgba(0, 0, 0, 0.03);

  --panel-bg-color: #fff;
  --grid-cell-selected: var(--lumo-primary-color-20pct);

  --box-shadow-primary-40: 0px 0px 40px 0px var(--lumo-primary-color-10pct);

  /* Cards */
  --color-card-header-label: #5b6873;
  --color-dialog-header-label: #353c42;

  /* Chart colors */
  --vaadin-charts-color-0: var(--color-blue);
  --vaadin-charts-color-1: var(--color-brand);
  --vaadin-charts-color-2: var(--color-red);
  --vaadin-charts-color-3: var(--color-gold);
  --vaadin-charts-color-4: var(--color-black);
  --vaadin-charts-color-5: hsl(234, 53%, 65%);
  --vaadin-charts-color-6: hsl(217, 0%, 36%);
  --vaadin-charts-color-7: hsl(349, 71%, 55%);
  --vaadin-charts-color-8: hsl(25, 71%, 55%);
  --vaadin-charts-color-9: hsl(228, 29%, 25%);

  /* gradients */
  --primary-gradient-vertical: linear-gradient(
    180deg,
    var(--lumo-primary-color-20pct),
    var(--lumo-primary-color-0pct)
  );
  --primary-gradient-horizontal: linear-gradient(
    90deg,
    var(--lumo-primary-color-20pct),
    var(--lumo-primary-color-0pct)
  );

  height: 100%;
  overflow: hidden;
  width: 100%;

  --app-bar-height: 3.75rem;

  --navi-drawer-width: 16.25rem;
  --navi-drawer-bg-color: #fff;
  --navi-drawer-rail-width: 5.625rem;
  --navi-item-indentation: calc(var(--lumo-icon-size-s) + var(--lumo-space-l));

  --details-drawer-width: 22.5rem;
  --details-drawer-bg-color: #fff;
  --details-drawer-highlight-color: var(--color-light);

  --details-drawer-medium-width: 30%;

  --details-drawer-large-width: 70%;
  --details-drawer-large-bg-color: #fff;

  --details-drawer-super-large-width: 80vw;

  --header-height: var(--lumo-size-xl);

  --transition-duration-s: 160ms;
  --transition-duration-m: 240ms;
  --transition-duration-l: 320ms;

  /* Responsive sizing and spacing */
  --lumo-space-r-m: var(--lumo-space-m);
  --lumo-space-r-l: var(--lumo-space-l);
  --lumo-space-r-x: var(--lumo-space-l);
  --lumo-space-wide-r-m: var(--lumo-space-wide-m);
  --lumo-space-wide-r-l: var(--lumo-space-wide-l);

  --lumo-size-xl: 3rem;
  --lumo-size-l: 2.5rem;
  --lumo-size-m: 2rem;
  --lumo-size-s: 1.75rem;
  --lumo-size-xs: 1.5rem;
  --lumo-base-color: hsl(240, 40%, 98%);
  --lumo-primary-text-color: hsl(234, 63%, 70%);
  --lumo-primary-color-0pct: rgba(151, 159, 231, 0);
  --lumo-primary-color-3pct: rgba(151, 159, 231, 0.03);
  --lumo-primary-color-10pct: rgba(151, 159, 231, 0.1);
  --lumo-primary-color-20pct: rgba(151, 159, 231, 0.2);
  --lumo-primary-color-50pct: rgba(151, 159, 231, 0.5);
  --lumo-primary-color: hsl(234, 63%, 75%);
  --lumo-error-text-color: hsl(349, 81%, 60%);
  --lumo-error-color-50pct: rgba(238, 93, 120, 0.5);
  --lumo-error-color-10pct: rgba(238, 93, 120, 0.1);
  --lumo-error-color: hsl(349, 81%, 65%);
  --lumo-success-text-color: hsl(148, 63%, 50%);
  --lumo-success-color-50pct: rgba(89, 217, 149, 0.5);
  --lumo-success-color-10pct: rgba(89, 217, 149, 0.1);
  --lumo-success-color: hsl(148, 63%, 60%);
  --lumo-body-text-color: hsl(228, 19%, 20%);
  --lumo-secondary-text-color: hsla(228, 19%, 15%, 0.7);
  --lumo-tertiary-text-color: hsla(228, 19%, 15%, 0.5);
  --lumo-disabled-text-color: hsla(228, 19%, 15%, 0.3);
  --lumo-shade-3pct: rgba(31, 34, 46, 0.03);
  --lumo-shade-5pct: rgba(31, 34, 46, 0.05);
  --lumo-shade-10pct: rgba(31, 34, 46, 0.1);
  --lumo-shade-20pct: rgba(31, 34, 46, 0.2);
  --lumo-shade-30pct: rgba(31, 34, 46, 0.3);
  --lumo-shade-40pct: rgba(31, 34, 46, 0.4);
  --lumo-shade-50pct: rgba(31, 34, 46, 0.5);
  --lumo-shade-60pct: rgba(31, 34, 46, 0.6);
  --lumo-shade-70pct: rgba(31, 34, 46, 0.7);
  --lumo-shade-80pct: rgba(31, 34, 46, 0.8);
  --lumo-shade-90pct: rgba(31, 34, 46, 0.9);
  --lumo-shade: hsl(228, 19%, 15%);

  /* Chart variables */
  --chart-gradient-0-stop-opacity: 0.75;
  --chart-bg: transparent;
  --chart-grid-line: var(--lumo-shade-10pct);
  --chart-axis-labels: var(--lumo-shade-60pct);
  --chart-axis-title: var(--lumo-shade-60pct);
  --chart-axis-item: var(--lumo-shade-60pct);
  --chart-axis-line: var(--lumo-shade-10pct);
  --chart-tick: transparent;
  --chart-button-pressed: var(--lumo-shade-10pct);
  --chart-range-selector-buttons: var(--lumo-shade-60pct);
  --chart-button-text: var(--lumo-shade-60pct);
  --chart-button-pressed-text: var(--color-black);
  --chart-button-symbol: var(--color-brand);

  --textfield-border-color: var(--color-brand-10pct);

  /* Override Lumo-Defaults */
  /* --lumo-border-radius-m: 6px; */
  /* Override Lumo-Defaults */
  /* --lumo-border-radius-m: 10px; */
}

[theme~="dark"] {
  --lumo-base-color: #161821;
  --chart-bg: transparent;
  --panel-bg-color: #1f222e;
  --navi-drawer-bg-color: #2f354e;
  --details-drawer-bg-color: #2f354e;
  --details-drawer-highlight-color: #3a4160;

  --box-shadow-primary-40: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);

  --color-black: #f2f2fa;
  --color-blue: #949de7;
  --color-brand: #9593aa;

  --lumo-primary-color: hsl(245, 32%, 85%);
  --lumo-primary-color-50pct: hsla(245, 32%, 85%, 0.5);
  --lumo-primary-color-10pct: hsla(245, 32%, 85%, 0.1);
  --lumo-primary-color-3pct: hsla(245, 32%, 85%, 0.3);
  --lumo-primary-color-2pct: hsla(245, 32%, 85%, 0.2);
  --lumo-primary-color-0pct: hsla(245, 32%, 85%, 0);

  /* Cards */
  --color-card-header-label: white;
  --color-dialog-header-label: white;

  --primary-gradient-horizontal: linear-gradient(
    90deg,
    var(--lumo-primary-color-3pct),
    var(--lumo-primary-color-0pct)
  );

  --lumo-primary-contrast-color: #fcfcfc;
  --lumo-tint-5pct: rgba(175, 191, 253, 0.05);
  --lumo-tint-10pct: rgba(175, 191, 253, 0.1);
  --lumo-tint-20pct: rgba(175, 191, 253, 0.2);
  --lumo-tint-30pct: rgba(175, 191, 253, 0.3);
  --lumo-tint-40pct: rgba(175, 191, 253, 0.4);
  --lumo-tint-50pct: rgba(175, 191, 253, 0.5);
  --lumo-tint-60pct: rgba(175, 191, 253, 0.6);
  --lumo-tint-70pct: rgba(175, 191, 253, 0.7);
  --lumo-tint-80pct: rgba(175, 191, 253, 0.8);
  --lumo-tint-90pct: rgba(175, 191, 253, 0.9);
  --lumo-tint: hsl(228, 95%, 84%);

  --lumo-shade-5pct: rgba(171, 181, 199, 0.05);
  --lumo-shade-10pct: rgba(171, 181, 199, 0.1);
  --lumo-shade-20pct: rgba(171, 181, 199, 0.2);
  --lumo-shade-30pct: rgba(171, 181, 199, 0.3);
  --lumo-shade-40pct: rgba(171, 181, 199, 0.4);
  --lumo-shade-50pct: rgba(171, 181, 199, 0.5);
  --lumo-shade-60pct: rgba(171, 181, 199, 0.6);
  --lumo-shade-70pct: rgba(171, 181, 199, 0.7);
  --lumo-shade-80pct: rgba(171, 181, 199, 0.8);
  --lumo-shade-90pct: rgba(171, 181, 199, 0.9);
  --lumo-shade: rgba(171, 181, 199);
  --lumo-primary-text-color: hsl(234, 80%, 70%);
  --lumo-error-text-color: rgb(235, 71, 101);
  --lumo-error-color-50pct: rgba(235, 71, 101, 0.5);
  --lumo-error-color-10pct: rgba(235, 71, 101, 0.1);
  --lumo-error-color: hsl(349, 80%, 60%);
  --lumo-success-text-color: hsl(148, 63%, 65%);
  --lumo-success-color-50pct: rgba(89, 217, 149, 0.5);
  --lumo-success-color-10pct: rgba(89, 217, 149, 0.1);
  --lumo-success-color: hsl(148, 63%, 60%);
  --lumo-header-text-color: hsl(228, 88%, 97%);
  --lumo-body-text-color: hsla(228, 79%, 93%, 0.85);
  --lumo-secondary-text-color: hsla(228, 80%, 90%, 0.7);
  --lumo-tertiary-text-color: hsla(228, 80%, 90%, 0.5);
  --lumo-disabled-text-color: hsla(228, 80%, 90%, 0.3);

  /* Chart variables */
  --chart-gradient-0-stop-opacity: 0.25;
  --chart-grid-line: var(--lumo-primary-color-10pct);
  --chart-axis-labels: var(--color-brand);
  --chart-axis-title: var(--color-brand);
  --chart-axis-item: var(--color-brand);
  --chart-axis-line: var(--lumo-primary-color-10pct);
  --chart-tick: transparent;
  --chart-button-pressed: var(--lumo-primary-color-10pct);
  --chart-range-selector-buttons: var(--color-brand);
  --chart-button-pressed-text: var(--color-white);
  --chart-button-text: var(--color-brand);
  --chart-button-symbol: var(--color-brand);
}

[theme~="dark"] ::-webkit-scrollbar {
  background-color: transparent;
}

[theme~="dark"] ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
}

[theme~="dark"] ::-webkit-scrollbar-thumb {
  background-color: #2f354e;
  border: 1px solid #232941;
  border-radius: 10px;
}

[role="grid"] {
  min-height: 200px !important;
}

table#table {
  min-height: 200px !important;
}

:host([height-by-rows]) #scroller {
  min-height: 200px !important;
}

body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.root {
  background-color: var(--lumo-contrast-5pct);
}

.app-header-outer,
.app-footer-outer {
  z-index: 3;
}

vaadin-grid-cell-content {
  text-overflow: ellipsis;
}

/* vaadin-text-field {
    align-self: auto;
} */

label.textfield-label {
  color: var(--lumo-secondary-text-color);
  font-weight: 400;
  font-size: var(--lumo-font-size-s);
  margin-left: calc(var(--lumo-border-radius-m) / 4);
  transition: color 0.2s;
  line-height: 1;
  padding-bottom: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

/* Für nutzung außerhalb von forms & textfeldern */
label.textfield-label-light {
  color: var(--lumo-secondary-text-color);
  font-weight: 400;
  font-size: var(--lumo-font-size-s);
  margin-left: calc(var(--lumo-border-radius-m) / 4);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
}

.app-view {
  flex-direction: column;
  align-items: center;
}

.app-bar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--lumo-base-color);
  box-sizing: border-box;
  height: var(--app-bar-height);
  padding: 0 2rem;
  z-index: 0;
  position: relative;
  flex-shrink: 0;
}

.app-bar:after {
  content: "";
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  background: var(--lumo-shade-10pct);
}

.app-bar .search-box {
  flex-grow: 1;
  margin: 0 2rem;
  max-width: 500px;
}

.app-bar .view-name {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.app-bar .view-name h3 {
  margin: 0;
}

.main-layout {
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.root__view-container {
  overflow: hidden;
  flex-grow: 1;
}

.root__column {
  flex-direction: column;
  overflow: hidden;
  flex-grow: 1;
}

.root__row {
  overflow: hidden;
  flex-grow: 1;
}

.cta-button {
  --lumo-border-radius: var(--lumo-font-size-xxl);
}

@media (min-width: 720px) {
  .details-drawer[open][position="right"] {
    right: 0;
  }

  .details-drawer[open][position="right"] + vaadin-vertical-layout {
    padding-right: var(--details-drawer-width);
  }

  .details-drawer[position="right"] {
    position: fixed;
    right: calc(var(--details-drawer-width) * -1);
    top: 0;
    bottom: 0;
    z-index: 100;
    margin: 0;
  }
}

.simple-tabs__container {
  flex-direction: column;
}

.no-data-available-label {
  color: var(--color-card-header-label);
  opacity: 0.7;
  font-weight: 600;
}

.grid-layout,
.grid-layout vaadin-vertical-layout {
  flex: 1;
}

.info-color-dot {
  background-color: var(--color-red);
  border-radius: 40px;
  width: 8px;
  height: 8px;
  margin: 0.5rem;
  box-shadow: var(--box-shadow-primary-40);
}

vaadin-icon {
  padding: 0.2rem;
  box-sizing: border-box;
  fill: var(--color-brand-80pct);
}

.initials {
  width: 1.75rem;
  line-height: 1.75rem;
  height: 1.75rem;
  background: var(--color-brand-80pct);
  color: var(--color-light);
  font-size: 0.6875em;
  font-weight: 500;
  display: inline-block;
  border-radius: 2.5rem;
  text-align: center;
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
  margin-right: 1rem;
  flex-shrink: 0;
}

.initials.male {
  background: var(--color-blue-80pct);
}

.initials.female {
  background: var(--color-red-80pct);
}

.initials.couple {
  background: hsla(317, 94%, 72%, 0.8);
}

.initials.company {
  background: var(--color-brand-80pct);
}

/* .initials.parent { 
    background: unset; 
    box-shadow: unset;
    font-size: 1.775rem;
    transform: translateX(-0.2em);
} */
.initials.parent {
  background: var(--color-gold);
}

.initials.undefined {
  background: var(--color-brand-80pct);
}

.investor-label {
  font-weight: 600;
  font-size: 1.05rem;
  margin-left: 5px;
  color: #4b5359;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.investor-label-large {
  width: unset;
}

.investor-label.small {
  width: calc(var(--details-drawer-width) - 8rem);
}

.investor-label-icon {
  fill: var(--color-brand);
}

vaadin-grid-cell-content div {
  display: inline-flex;
  align-items: center;
}

.trend {
  font-weight: 500;
}

.trend vaadin-icon {
  margin-right: 0.5rem;
}

.trend.down {
  fill: var(--color-red);
  color: var(--color-red);
}

.trend.down vaadin-icon {
  fill: var(--color-red);
}

.trend.up {
  fill: var(--color-green);
  color: var(--color-green);
}

.trend.up vaadin-icon {
  fill: var(--color-green);
}

.trend.neutral {
  fill: var(--color-brand);
  color: var(--color-brand);
}

.trend.neutral vaadin-icon {
  fill: var(--color-brand);
}

.highlight {
  fill: var(--color-gold);
  color: var(--color-gold);
}

.underline {
  text-decoration: underline;
}

.search-popup {
  padding: 1rem;
}

.search-popup-item {
  cursor: pointer;
}

.tool-button {
  cursor: pointer;
}

.tool-button:disabled {
  cursor: auto;
}

.label-picker {
  cursor: pointer;
}

.label-picker vaadin-icon {
  color: var(--color-brand);
  margin-right: 0.5rem;
}

.label-picker:disabled {
  cursor: auto;
}

.label-picker:hover {
  text-decoration: underline;
}

.secondary-text-label {
  color: var(--lumo-secondary-text-color);
  font-weight: 500;
  font-size: var(--lumo-font-size-s);
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  max-width: 100%;
  line-height: 1;
}

.description-text {
  color: var(--lumo-secondary-text-color);
  font-weight: 400;
  font-size: var(--lumo-font-size-s);
}

.label-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

h4.label-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.fill-available-height {
  height: -moz-available !important;
  height: -webkit-fill-available !important;
}

.fill-available-width {
  width: -moz-available !important;
  width: -webkit-fill-available !important;
}

.bold-label-small {
  font-size: small;
  font-weight: bold;
}

.bold-label-large {
  font-size: large;
  font-weight: bold;
}

.bold-label-medium {
  font-size: medium;
  font-weight: 600;
}

label.textfield-bottom-hint-label {
  color: var(--lumo-secondary-text-color);
  font-weight: 500;
  font-size: var(--lumo-font-size-s);
  margin-left: calc(var(--lumo-border-radius-m) / 4);
  transition: color 0.2s;
  line-height: 1;
  padding-bottom: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  color: var(--color-red);
}