@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
* {
    box-sizing:border-box;
}

html, body, * {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

vaadin-date-picker-overlay{

}
vaadin-date-picker-month-scroller {
  margin-right: 57px;
}
vaadin-date-picker-overlay [slot="cancel-button"],
[slot="today-button"]{
  padding: 0 6px;
}
vaadin-month-calendar{
  padding: 0 4px;
}

:root {
  --vt-clr-bg-base: #0B190F;
  --vt-clr-bg-base-lt: #19271D;
  --vt-clr-bg-base-ltst: #263A2B;
  --vt-clr-primary-btn: #02852B;
  --vt-clr-secondary-btn: var(--vt-clr-bg-base-ltst);
  --vt-clr-inactive-btn: #0000001A;
  --vt-clr-text: #FFFFFF;
  --vt-clr-text-dk: #FFFFFFE5;
  --vt-clr-text-dkst: rgba(255, 255, 255, 0.4);
  --vt-clr-icon-filter: brightness(0) invert(1); /* adjust the filters to match txt color */
  --vt-clr-icon-dk-filter: brightness(0) invert(1) opacity(0.9); /* adjust the filters to match txt color */
  --vt-clr-icon-dkst-filter: brightness(0) invert(1) opacity(0.4); /* adjust the filters to match txt color */
  --vt-clr-primary-border: rgba(255, 255, 255, 0.10);
  --vt-clr-bg-input: var(--vt-clr-bg-ltst);
  --vt-logo-font: "Lobster Two";
  --vt-logo-font-color: #FDFFFF;
  --vt-content-font: "Mulish";
  /*borders */
  --vt-clr-header-border: var(--vt-clr-primary-border);
  --lumo-secondary-text-color: var(--vt-clr-text-dkst);
}

body {
  background-color: var(--vt-clr-bg-base); /* Use the custom property */
  color: var(--vt-clr-text);
  font-family: var(--vt-content-font), sans-serif;
}