:root {

  --lumo-primary-text-color: rgb(249, 165, 27);
  --lumo-primary-color-50pct: rgba(249, 165, 27, 0.5);
  --lumo-primary-color-10pct: rgba(249, 165, 27, 0.1);
  --lumo-primary-color: #f9a51b;
  --lumo-secondary-color:rgb(53, 28, 21);
  --lumo-tertiary-color:#FFA400;
  --lumo-base-light: #f3f5f7;
  --lumo-base-dark:#5D737E;
	
  --app-bar-height: 60px;
  --app-bar-height-s: 60px;
  --app-bar-wrapper-color:#2F4858;
  --login-background: url('images/login-bg.jpg');

  --navi-drawer-width: calc(var(--lumo-size-m) * 7);
  --navi-drawer-rail-width: calc(var(--lumo-size-m) * 1.75);
  --navi-item-indentation: calc(var(--lumo-icon-size-s) + var(--lumo-space-l));

  --details-drawer-width: calc(var(--lumo-size-m) * 11);

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

@media (max-width: 479px) {
  :root {
    --lumo-space-r-x: 0;
  }
}

@media (min-width: 480px) and (max-width: 1023px) {
  :root {
    --lumo-space-r-x: var(--lumo-space-m);
  }
}

@media (max-width: 1023px) {
  :root {
    --lumo-space-r-m: var(--lumo-space-s);
    --lumo-space-r-l: var(--lumo-space-m);
    --lumo-space-wide-r-m: var(--lumo-space-wide-s);
    --lumo-space-wide-r-l: var(--lumo-space-wide-m);
  }
}

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

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

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

vaadin-app-layout::part(navbar) {
  box-shadow: var(--lumo-box-shadow-s);
  align-items: center;
  justify-content: center;
  height: var(--app-bar-height);
  box-sizing: border-box;
  margin-left: auto;
}
vaadin-app-layout > [slot="navbar"]:first-child {
  flex: 0.4 0 auto;
}


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

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

vaadin-tab {
  font-size: var(--lumo-font-size-s);
  /*height: var(--lumo-size-l);*/
  font-weight: 600;
  color: rgba(24, 54, 80, 0.7);
}

vaadin-tab:hover {
  color: rgba(24, 54, 80, 1);
}

vaadin-tab[selected] {
  color: rgba(24, 54, 80, 1);
}
vaadin-tab[selected]::before, vaadin-tab[selected]::after {
  transform: translateX(-50%) scale(1.5);
}