:root {
  --appWidth: 100vw;
  --menuWidth: 240px;
  --pageWidth: 784px;
  --metaContentMaxWidth: 1004px;

  --applicationHeaderHeight: 44px;
  --levelTabFullHeight: 40px;
  --levelTabReducedHeight: 32px;

  --themeColor: hsl(196, 83%, 49%);
  --themeColorLighterOne: hsl(196, 83%, 60%);
  --themeColorLighterTwo: hsl(196, 83%, 70%);
  --themeColorDarkerOne: hsl(196, 83%, 44%);
  --themeColorDarkerOneTransparent: hsla(196, 83%, 44%, 0.5);
  --themeColorDarkerTwo: hsl(197, 82%, 33%);
  --themeColorDarkerTwoTransparent: hsla(197, 82%, 33%, 0.5);
  --themeColorDarkerThree: hsl(197, 82%, 20%);
  --backgroundGray: hsl(1, 0%, 90%);
  --backgroundGrayTransparent: hsla(1, 0%, 90%, 0);
  --backgroundLightGray: hsl(1, 0%, 96%);
  --app-background-color: var(--themeColorDarkerTwo);
  --metaContentBackgroundColor: hsl(197, 52%, 49%);
  --outskirts-background-color: var(--themeColor);

  --semiTransparentOverlayColor: hsla(197, 82%, 20%, 0.6);

  --borderColor: hsl(1, 0%, 85%);
  --borderColorLight: hsl(1, 0%, 90%);
  --borderColorOnGray: hsl(0, 0%, 80%);
  --borderColorDark: hsl(1, 0%, 60%);
  --borderColorOnBlue: hsl(196, 61%, 44%);
  --borderColorTransparent: hsla(0, 0%, 0%, 0.15);

  --text-color: hsl(0, 0%, 20%);
  --systemTextColor: hsla(0, 0%, 0%, 0.8);
  --pageHeaderColor: hsla(1, 0%, 0%, 0.8);
  --listHeaderColor: hsla(1, 0%, 0%, 0.8);
  --linkColorGray: hsla(1, 0%, 0%, 0.6);
  --linkColorGrayDisabled: hsla(1, 0%, 0%, 0.4);
  --placeholderColor: hsl(1, 0%, 60%);
  --alertColor: hsl(27, 88%, 53%);
  --alertColorDarkerOne: hsl(27, 88%, 43%);
  --approveColor: hsl(96, 100%, 29%);

  --holidayColor: hsl(1, 54%, 46%);

  --startTaskBackgroundColor: hsl(155, 24%, 80%);
  --startTaskBorderColor: hsl(177, 26%, 66%);
  --startHeaderTextColor: hsl(178, 27%, 37%);

  --inputElementBackground: var(--backgroundLightGray);
  --inputElementShadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15);
  --inputElementHeight: 30px;
  --inputElementBorderRadius: 4px;

  --small: 'Decimal A', 'Decimal B';
  --narrow: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B';
  --mainSans: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
  --mainSerif: 'Chronicle SSm A', 'Chronicle SSm B', serif;
  --main-sans-narrow: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;

  --fontSizeDefault: 15px;
  --fontSizeSmall: 13px;
  --lineHeightDefault: 140%;
  --lineHeightLoose: 160%;

  --listPaddingLeft: 34px;

  --transition: 0.5s;

  --vh: 1vh;

  --map-element-background-color: hsl(1, 0%, 94%);
  --map-element-background-color-transparent: hsla(1, 0%, 94%, 0);
  --map-element-border-color: silver;

  --risk-color-1: hsl(106, 66%, 51%);
  --risk-color-2: hsl(56, 100%, 39%);
  --risk-color-3: hsl(31, 93%, 51%);
  --risk-color-4: hsl(0, 80%, 56%);

  --emergency-background-color: hsla(0, 0%, 20%, 1);
  --emergency-background-color-transparent: hsla(0, 0%, 20%, 0);
  --emergency-accent-color: hsl(33, 100%, 59%);
  --emergency-accent-color-semi-transparent: hsla(33, 100%, 59%, 0.5);

  /* Mobile app */

  /* Space for status bar when application runs as native app */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  /* Only for simplified UI */
  --mobile-app-header-height: 60px;
  --mobile-app-footer-height: 80px;

  /* Screen module */
  /* Note: cqi-based padding values are not defined here because cqi units in
     CSS custom properties at :root evaluate to 0 in Safari (no container context).
     Each slide component defines these values directly using cqi units. */

  --screen-slide-control-line-color: hsl(0, 0%, 40%);
  --screen-slide-header-font: 'Source Sans 3', sans-serif;
  --screen-slide-text-font: 'Source Serif 4', serif;
}

html {
  -ms-content-zooming: none;
  scrollbar-gutter: stable;
  background: var(--app-background-color);
}

body {
  padding: 0;
  padding-top: var(--safe-area-inset-top);
  font-family: var(--mainSans);
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  background: var(--app-background-color);
  scroll-behavior: smooth;
  user-select: none;
  color: black;
  scrollbar-gutter: stable;
  margin: 0;
}

#tiptap-menu {
  background: white;
  padding: 12px;
  border-radius: 12px;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  filter: drop-shadow(0 2px 10px hsla(1, 0%, 0%, 0.3));
  transition: all 0.3s;
  line-height: 0;
  z-index: 99999;
}
#tiptap-menu.is-active {
  display: flex;
}
#tiptap-menu button {
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 4px;
  background-color: hsl(0, 0%, 92%);
  background-image: url(./images/formatbuttons.svg);
  background-repeat: no-repeat;
  background-size: 310px 70px;
}
#tiptap-menu button.bold {
  background-position: 0 0;
}
#tiptap-menu button.italic {
  background-position: -40px 0;
}
#tiptap-menu button.bullets {
  background-position: -80px 0;
}
#tiptap-menu button.numbers {
  background-position: -120px 0;
}
#tiptap-menu button.active {
  background-color: #696969;
  background-position-y: -40px;
}
#tiptap-menu button.align {
  background-image: url(./images/formatbuttons-align.svg);
  background-size: 90px 60px;
  background-position: 0 0;
}
#tiptap-menu button.align.center {
  background-image: url(./images/formatbuttons-align.svg);
  background-position-x: -30px;
}
#tiptap-menu button.align.right {
  background-image: url(./images/formatbuttons-align.svg);
  background-position-x: -60px;
}
#tiptap-menu button.align.active {
  background-position-y: -30px;
}

@media print {
  body {
    position: relative !important;
    height: auto;
    overflow: auto;
  }
}