@import "theme-editor.css";
@import url('components/calendar.css');
@import url('components/card.css');
@import url('components/card-capture.css');
@import url('components/carousel.css');
@import url('components/dashboard.css');
@import url('components/layout.css');
@import url('components/messages-view.css');
@import url('components/top-menu-div.css');
@import url('components/vaadin-accordion.css');
@import url('components/vaadin-accordion-heading.css');
@import url('components/vaadin-accordion-panel.css');
@import url('components/vaadin-button.css');
@import url('components/vaadin-card.css');
@import url('components/vaadin-combo-box.css');
@import url('components/vaadin-date-picker.css');
@import url('components/vaadin-date-time-picker.css');
@import url('components/vaadin-dialog-overlay.css');
@import url('components/vaadin-email-field.css');
@import url('components/vaadin-full-calendar.css');
@import url('components/vaadin-grid.css');
@import url('components/vaadin-icon.css');
@import url('components/vaadin-integer-field.css');
@import url('components/vaadin-login-overlay-wrapper.css');
@import url('components/vaadin-multi-select-combo-box.css');
@import url('components/vaadin-number-field.css');
@import url('components/vaadin-password-field.css');
@import url('components/vaadin-scroller.css');
@import url('components/vaadin-select.css');
@import url('components/vaadin-side-nav-item.css');
@import url('components/vaadin-text-area.css');
@import url('components/vaadin-text-field.css');
@import url('components/vaadin-time-picker.css');
@import url('components/vaadin-upload.css');
@import url('components/vaadin-vertical-layout.css');
@import url('components/vertical-menu-bar.css');
@import url('components/horizontal-menu-bar.css');

.brand-background {
  background-color: var(--background-color-faded);
  background-image: var(--background-image-xxsmall);
}

.blank-background {
  background: var(--lumo-base-color);
}

.app-header {
  max-width: 115px;
  justify-content: center;
  align-items: center;
}

.app-footer {
  justify-content: start;
  align-items: center;
  background-color: var(--lumo-base-color);
}

.app-name {
  font-size: var(--lumo-font-size-m);
}

.app-header-max {
  justify-content: center;
  align-items: center;
}

.app-header-image {
  content: url("/images/app_logo.png");
  width: 100px;
}

.app-home-image {
  content: url("/images/app_logo.png");
  width: 300px;
}

.main-logo {
  width: 75px;
}

[slot="drawer"] {
  background-color: var(--background-color-faded);
}

[slot="drawer"]:is(header, footer) {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-s);
  padding: var(--lumo-space-s) var(--lumo-space-m);
  min-height: var(--lumo-size-xl);
  box-sizing: border-box;
}

[slot="drawer"]:is(header, footer):is(:empty) {
  display: none;
}

.main-menu-item {
  color: var(--menu-button-color);
}

.sub-menu-item {
  color: var(--menu-button-color);
}

.info-primary-title {
  font-size: var(--lumo-font-size-m);
  margin: 0;
  color: var(--lumo-primary-color);
}

.info-secondary-title {
  font-size: var(--lumo-font-size-m);
  margin: 0;
}

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

.clickable-span {
  display: flex;
  gap: var(--lumo-space-xs);
  justify-content: start;
  align-items: center;
  flex-direction: column;
  border: 2px var(--lumo-alternate-primary-color-40pct) solid;
  border-radius: var(--lumo-border-radius-l);
  box-shadow: 5px 5px 0 0 var(--box-shadow-color);
  padding: 0.5em;
  margin: 0.5em 0 0.25em 0.5em;
  background-color: var(--lumo-base-color);
}

.clickable-span p {
  font-size: 1.0rem;
}

.clickable-span:hover,
.clickable-span:active {
  background-color: var(--lumo-primary-color);
}

.clickable-span:hover p {
  color: var(--lumo-primary-text-color);
}

.span-icon {
  border-radius: var(--lumo-border-radius-l);
  font-size: var(--lumo-icon-size-l);
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.span-icon-medium {
  border-radius: var(--lumo-border-radius-m);
  font-size: var(--lumo-icon-size-m);
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.span-icon-counter {
    font-size: small;
    margin-top: -3em;
    margin-left: -1em;
}

.span-icon.primary {
  color: var(--lumo-primary-color);
}

.clickable-span-badge {
  color: red;
  font-size: var(--lumo-font-size-l);
}

.small-clickable-span {
  width: 70px;
}

.small-clickable-span .span-icon {
  width: 40px;
  height: 40px;
}

.small-clickable-span p {
  font-size: var(--lumo-font-size-s);
}

.medium-clickable-span {
  width: 100px;
}

.medium-clickable-span .span-icon {
  width: 50px;
  height: 50px;
}

.medium-clickable-span p {
  font-size: var(--lumo-font-size-m);
}

.large-clickable-span {
  width: 120px;
  height: 150px;
}

.radio-boxed-layout.selected {
  border: 2px var(--lumo-primary-color) solid;
}

.radio-boxed-layout.unselected {
  border: 2px var(--lumo-alternate-primary-color-40pct) solid;
}

.text-wrap-center {
  max-width: 90%;
  text-align: center;
}

hr {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--lumo-primary-color), rgba(0, 0, 0, 0));
  width: 80%;
  align-self: center;
}

.image-span {
  display: flex;
  gap: var(--lumo-space-s);
  justify-content: start;
  align-items: start;
  flex-direction: row;
  padding: 25px;
  max-width: 150px;
}

.image-span img {
  border-radius: var(--lumo-border-radius-m);
  box-shadow: 5px 5px 15px var(--box-shadow-color);
  max-width: 150px;
}

.image-span-expanded {
  display: flex;
  gap: var(--lumo-space-s);
  justify-content: start;
  align-items: start;
  flex-direction: row;
  padding: 25px;
  width: 300px;
}

.image-span-expanded img {
  border-radius: var(--lumo-border-radius-m);
  box-shadow: 5px 5px 15px var(--box-shadow-color);
  max-width: 300px;
}

.delete-image-button {
  margin: 30px 0 0 -54px;
  border-radius: var(--lumo-border-radius-l);
  visibility: hidden;
}

.image-span:hover img,
.image-span:active img {
  border: 4px var(--lumo-primary-color) solid;
}

.image-span-expanded:hover img {
  border: 4px var(--lumo-primary-color) solid;
}

.file-span {
  display: flex;
  gap: var(--lumo-space-s);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1em;
  border-radius: var(--lumo-border-radius-m);
  box-shadow: 5px 5px 15px var(--box-shadow-color);
  width: 12em;
  height: 100%;
  margin: 0 1em 1em 0;
}

.file-span-active {
  background-color: var(--lumo-base-color);
}

.file-span-inactive {
  background-color: grey;
  color: lightgrey;
}

.file-span:hover,
.file-span:active {
  background-color: var(--lumo-primary-color);
}

.file-span span {
  word-break: break-word;
}

.download-file-icon {
  font-size: 48px;
}

.menu-item-reorder {
  height: 11.5em;
  max-width: 30em;
}

.sorting-button {
  margin: unset;
  padding: unset;
  color: var(--lumo-base-color);
}

.message-button-menu {
  display: inline-block;
  color: var(--menu-button-color);
}

.message-button-menu-selected {
  display: inline-block;
  color: var(--lumo-primary-color);
  font-weight: 600;
}

.message-select-button-menu {
  display: none;
  width: 100%;
}

.message-select-menu {
  display: none;
  width: 100%;
}

.grid-group {
  width: 100%;
  white-space: wrap;
}

.grid-group-column-one {
  width: 68%;
  float: left;
}

.grid-group-column-two {
  margin-left: 70%;
}

.wide-field {
  width: 40%;
}

.view-only {
  user-select: none;
}

.self-align-center {
  align-self: center;
}

.anonymous-section {
  width: calc(var(--lumo-size-m) * 10);
  background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
  border-radius: var(--lumo-border-radius-l);
  box-shadow: 5px 5px 15px var(--box-shadow-color);
  margin: var(--lumo-space-s);
  max-width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}

.anonymous-section-no-border {
  width: calc(var(--lumo-size-m) * 10);
  margin: var(--lumo-space-s);
  max-width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}

.anonymous-title {
  margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
  color: var(--lumo-header-text-color);
  font-size: var(--lumo-font-size-xxl);
  font-weight: 600;
  line-height: var(--lumo-line-height-xs);
  margin-block: 0;
}

.anonymous-form {
  display: flex;
  box-sizing: border-box;
  flex-shrink: 1;
  flex-direction: column;
}

.anonymous-paragraph {
  margin-inline: 0;
  margin-block: 1em;
  line-height: var(--lumo-line-height-s);
  margin-bottom: 0.75em;
  display: block;
  margin-top: 1em;
}

.themed-link {
  margin-block: 1em;
  line-height: var(--lumo-line-height-s);
  font-weight: 600;
  display: block;
  color: var(--lumo-primary-color);
}

.password-requirements {
  font-size: var(--text-size-xs);
  display: flex;
  flex-wrap: wrap;
}

.error-section {
  background-color: var(--lumo-error-color-10pct);
  padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-l);
  border-radius: var(--lumo-border-radius-m);
  margin-top: var(--lumo-space-m);
  margin-bottom: var(--lumo-space-s);
  color: var(--lumo-error-text-color);
  position: relative;
}

.error-section::before {
  margin-left: calc(var(--lumo-size-m) * -0.75);
  content: var(--lumo-icons-error);
  font-family: lumo-icons, sans-serif;
  font-size: var(--lumo-icon-size-m);
  position: absolute;
  width: var(--lumo-size-m);
  height: 1em;
  line-height: 1;
  text-align: center;
}

.error-section h5,
.error-section p {
  margin: 0 0 0 0.25rem;
  color: inherit;
}

.user-name {
  display: none;
}

.text-xl {
  font-size: var(--lumo-font-size-m);
}

.message-group-person {
  width: 68%;
}

.message-group-date {
  margin-left: 70%;
}

.themed-message-primary-large {
  max-width: 80%;
  align-self: center;
  text-align: center;
  color: var(--lumo-primary-color);
  font-size: var(--lumo-font-size-xl);
}

.themed-message-secondary-xsmall {
  color: var(--lumo-alternate-primary-color);
  font-size: var(--lumo-font-size-xs);
}

.notification-badge {
  animation: pulse 2s infinite;
}

/*≥568px*/
@media (orientation: portrait) and (min-width: 35.5em) {
  .brand-background {
    background-image: var(--background-image-xsmall);
  }

  .app-header {
    max-width: 165px;
  }

  .app-header-image {
    width: 150px;
  }

  .large-clickable-span {
    width: 150px;
    height: 180px;
  }

  .message-group-person {
    width: 100%;
  }

  .message-group-date {
    margin-left: 100%;
  }

  .grid-group-column-one {
    width: 78%;
  }

  .grid-group-column-two {
    margin-left: 80%;
  }

  .themed-message-primary-large {
    font-size: var(--lumo-font-size-xxl);
  }
}

/*≥768px*/
@media (orientation: portrait) and (min-width: 48em) {
  .brand-background {
    background-image: var(--background-image-small);
  }

  .app-header {
    max-width: 215px;
  }

  .app-header-image {
    width: 200px;
  }

  .app-name {
    font-size: var(--lumo-font-size-l);
  }

  .image-span {
    max-width: 200px;
  }

  .image-span img {
    max-width: 200px;
  }

  .image-span-expanded {
    width: 400px;
  }

  .image-span-expanded img {
    max-width: 400px;
  }

  .message-button-menu {
    display: none;
  }

  .message-select-menu {
    display: flex;
  }

  .info-primary-title {
    font-size: var(--lumo-font-size-l);
  }
}

/*≥768px not portrait*/
@media screen and (min-width: 48em) {
  .info-primary-title {
    font-size: var(--lumo-font-size-l);
  }

  .themed-message-primary-large {
    font-size: var(--lumo-font-size-xxl);
  }
}

/*≥1024px*/
@media (orientation: portrait) and (min-width: 64em) {
  .brand-background {
    background-image: var(--background-image-medium);
  }

  .app-header {
    max-width: 325px;
  }

  .app-header-image {
    width: 300px;
  }

  .image-span {
    max-width: 300px;
  }

  .image-span img {
    max-width: 300px;
  }

  .image-span-expanded {
    width: 600px;
  }

  .image-span-expanded img {
    width: 600px;
  }

  .user-name {
    display: unset;
  }
}

/*≥1024px not portrait*/
@media screen and (min-width: 64em) {
  .app-header {
    max-width: 325px;
  }

  .app-header-image {
    width: 300px;
  }

  .user-name {
    display: unset;
  }
}

/*≥1280px*/
@media screen and (min-width: 80em) {
  .brand-background {
    background-image: var(--background-image-large);
  }

  .app-header {
    max-width: 325px;
  }

  .app-header-image {
    width: 300px;
  }

  .image-span {
    max-width: 300px;
  }

  .image-span img {
    max-width: 300px;
  }

  .image-span-expanded {
    width: 600px;
  }

  .image-span-expanded img {
    width: 600px;
  }

  .text-xl {
    font-size: var(--lumo-font-size-xl);
  }

  .limit-dialog-width {
    width: 70%;
  }
}

/*≥1920px*/
@media screen and (min-width: 120em) {
  .brand-background {
    background-image: var(--background-image-xlarge);
  }
}

/*≥2560px*/
@media screen and (min-width: 160em) {
  .brand-background {
    background-image: var(--background-image-xxlarge);
  }
}

/*4K ≥3840px*/
@media screen and (min-width: 240em) {
  .brand-background {
    background-image: var(--background-image-xxlarge);
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}