/*
   CSS styling examples for the Vaadin app.

   This is the style entrypoint for the theme and together with css in ./components/ included
   automatically into the theme.

   Visit https://vaadin.com/docs-beta/latest/theming/application-theme/ for more information.
*/

html {
  /* Theme colors extracted based on src/main/webapp/images/logo.png */
  --lumo-font-family: Roboto;
  --lumo-primary-color: hsl(34, 100%, 48%);
  --lumo-primary-color-50pct: hsla(34, 100%, 48%, 0.5);
  --lumo-primary-color-10pct: hsla(34, 100%, 48%, 0.1);
  --lumo-primary-text-color: var(--lumo-primary-color);

  --lumo-secondary-color: hsl(138, 90%, 31%);
  --lumo-secondary-color-50pct: hsla(138, 90%, 31%, 0.5);
  --lumo-secondary-color-10pct: hsla(138, 90%, 31%, 0.1);
  --lumo-secondary-text-color: var(--lumo-secondary-color);
}

[theme~="dark"] {
  --lumo-font-family: Roboto;
  --lumo-primary-color: hsl(34, 100%, 51%);
  --lumo-primary-color-50pct: hsla(34, 100%, 51%, 0.5);
  --lumo-primary-color-10pct: hsla(34, 100%, 51%, 0.1);
  --lumo-primary-text-color: var(--lumo-primary-color);

  --lumo-secondary-color: hsl(138, 90%, 41%);
  --lumo-secondary-color-50pct: hsla(138, 90%, 41%, 0.5);
  --lumo-secondary-color-10pct: hsla(138, 90%, 41%, 0.1);
  --lumo-secondary-text-color: var(--lumo-secondary-color);
}

[theme~="dark2"] {
  --lumo-shade-5pct: rgba(26, 26, 26, 0.05);
  --lumo-shade-10pct: rgba(26, 26, 26, 0.1);
  --lumo-shade-20pct: rgba(26, 26, 26, 0.2);
  --lumo-shade-30pct: rgba(26, 26, 26, 0.3);
  --lumo-shade-40pct: rgba(26, 26, 26, 0.4);
  --lumo-shade-50pct: rgba(26, 26, 26, 0.5);
  --lumo-shade-60pct: rgba(26, 26, 26, 0.6);
  --lumo-shade-70pct: rgba(26, 26, 26, 0.7);
  --lumo-shade-80pct: rgba(26, 26, 26, 0.8);
  --lumo-shade-90pct: rgba(26, 26, 26, 0.9);
  --lumo-primary-text-color: rgb(255, 147, 5);
  --lumo-primary-color-50pct: rgba(255, 147, 5, 0.5);
  --lumo-primary-color-10pct: rgba(255, 147, 5, 0.1);
  --lumo-error-text-color: white;
  --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
  --lumo-error-color-10pct: rgba(231, 24, 24, 0.3);
  --lumo-success-text-color: rgb(62, 229, 170);
  --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
  --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
  --lumo-shade: hsl(0, 0%, 10%);
  --lumo-primary-color: hsl(34, 100%, 51%);
  --lumo-error-color: hsl(0, 81%, 50%);
  --lumo-success-color: hsl(159, 76%, 57%);
  --lumo-success-contrast-color: hsl(159, 14%, 100%);
  --lumo-base-color: hsl(214, 36%, 97%);
  --lumo-header-text-color: hsl(214, 3%, 6%);
  --lumo-body-text-color: hsla(214, 34%, 95%, 0.9);
  --lumo-secondary-text-color: white;
  --lumo-tertiary-text-color: hsla(214, 4%, 41%, 0.5);
  --lumo-disabled-text-color: hsla(214, 4%, 30%, 0.32);
  --lumo-contrast-10pct: rgba(120, 120, 120, 0.6);
  --lumo-contrast-60pct: white;
}

#logo, #portalLabel {
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

#bar {
  width: 45%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 250px;
}

#headerUserName {
  margin-left: auto;
  margin-right: 15px;
}

#logoutButton {

}

#logoLayout {
  margin-left: 30px;
  background-color: hsl(34, 100%, 51%);
  border-radius: 0px 0px 5px 5px;
  position: absolute;
  z-index: 99;
}

.content {
  padding-top: 100px;
}

.loginPage {
  background-image: url("/images/background.jpg");
  background-size: cover;
}

.portalPage {

}

.card {
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.4);
  border-radius: 5px 5px 5px 5px;
  background: white;
}

.card > div > h1 {
  margin-bottom: 0.75em;
}

.cardBlack {
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.4);
  border-radius: 5px 5px 5px 5px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}

.cardBlack > div > h1 {
  color: white;
  margin-bottom: 0.75em;
}

vaadin-app-layout::part(navbar){
  min-height: 40px;
  max-height: 40px;
}

vaadin-app-layout::part(drawer){
  background-image: var(--lumo-base-color);
}