:root {
  /* Figma variables */
  --color-background-default: #ffffff;
  --color-background-subtle: #efefef;

  --color-border-default: #b3b3b3;

  --color-surface-subtle: #f5f5f5;
  --color-surface-feedback-neutral: #efefef;
  --color-surface-feedback-attention: #f9e7d9;
  --color-surface-feedback-critical: #f8d6cd;
  --color-surface-feedback-success: #c6e9d9;
  --color-surface-decorative-04-subtle: #f3f6e2;
  --color-surface-decorative-05-subtle: #cfd7f4;

  --color-content-subtle: #000000a3;
  --color-content-feedback-attention: #b56822;
  --color-content-feedback-critical: #d75133;
  --color-content-feedback-success: #427861;
  --color-content-disabled: rgba(0, 0, 0, 0.4);

  --color-surface-visualisation-multi-data-01: #4965aa;
  --color-surface-visualisation-multi-data-01-subtle: #b5bad0;
  --color-surface-visualisation-multi-data-02: #5dacdd;
  --color-surface-visualisation-multi-data-02-subtle: #bfdbef;

  /* ---- Grays ----- */
  --color-white: #ffffff;
  --color-gray-10: #f5f5f5;
  --color-gray-20: #e1e1e1;
  --color-gray-30: #b8b8b8;
  --color-gray-40: #919191;
  --color-gray-50: #6a6a6a;
  --color-black: #000000;

  /* ----- Primary ----- */

  --color-teal-10: #c5cddc;
  --color-teal-20: #b2becd;
  --color-teal-30: #b9c9cc;
  --color-teal-50: #77939f;
  --color-teal-60: #154a54;
  --color-teal-70: #0f353c;

  --color-primary: var(--color-teal-60);

  /* ----- Feedback ----- */

  --color-lime-60: #d3d92b;

  --color-green-10: #c6e9d9;
  --color-green-20: #84dcb4;
  --color-green-30: #33ca89;
  --color-green-50: #427861;

  --color-orange-10: #f9e7d9;
  --color-orange-20: #f3d9c2;
  --color-orange-30: #fe800b;
  --color-orange-50: #b56822;

  --color-red-10: #f8d6cd;
  --color-red-20: #f2bfb4;
  --color-red-30: #f17e64;
  --color-red-50: #d75133;
  --color-red-70: #ad3014;

  /* ----- Alphas ----- */

  --color-white-alpha-30: #ffffff29;
  --color-white-alpha-50: #ffffff8f;
  --color-white-alpha-60: #ffffffa3;
  --color-white-alpha-80: #ffffffcc;
  --color-white-alpha-90: #ffffffe0;

  --gradient-black-alpha-10-black-alpha-30: linear-gradient(-45deg, #0000000a 0%, #00000029 50% 60%, #0000000a 100%);
  --color-black-alpha-0: #00000000;
  --color-black-alpha-10: #0000000a;
  --color-black-alpha-20: #00000014;
  --color-black-alpha-30: #00000029;
  --color-black-alpha-40: #00000066;
  --color-black-alpha-50: #0000007a;
  --color-black-alpha-60: #000000a3;
  --color-black-alpha-70: #000000b8;
  --color-black-alpha-100: #000000f5;

  /* ----- Decoration ----- */

  --color-lavender-10: #cdc7e6;
  --color-lavender-20: #9287bf;
  --color-lavender-50: #5c49aa;
  --color-lavender-60: #3f2b8b;

  --color-purple-10: #d6cad5;
  --color-purple-20: #bbabba;
  --color-purple-40: #9b6297;
  --color-purple-60: #70426d;

  --color-blue-10: #dbebf6;
  --color-blue-20: #bfdbef;
  --color-blue-30: #5dacdd;
  --color-blue-60: #1b80be;

  --color-citrus-10: #f3f6e2;
  --color-citrus-20: #e4ebbd;
  --color-citrus-30: #c2d45f;
  --color-citrus-60: #97af13;

  --color-cyan-10: #d3f7f5;
  --color-cyan-20: #b1f0ec;
  --color-cyan-30: #93ebe5;
  --color-cyan-50: #24bbb2;
  --color-cyan-60: #0f9a91;

  --color-cobalt-10: #cfd7f4;
  --color-cobalt-20: #b0bded;
  --color-cobalt-60: #2a48b2;
  --color-cobalt-70: #122f94;

  --color-brown-20: #d6c1b5;
  --color-brown-50: #8e6b57;
}
/*@layer base {*/
/* remove 300ms delay*/
/* Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/normalize.scss */
a,
a div,
a span,
button,
button div,
button span,
input,
textarea {
  touch-action: manipulation;
}

/* The Turbo progress bar is replaced with the spinner ("leaving" class) */
.turbo-progress-bar {
  visibility: hidden;
}

body.leaving main {
  animation: fade-out 0.3s forwards;
  pointer-events: none;
}

body.leaving .nav-spinner {
  opacity: 1;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes slide-from-left {
  from {
    transform: translateX(-60px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

@keyframes slide-to-right {
  to {
    transform: translateX(30px);
  }
}

html[data-turbo-visit-direction="forward"]::view-transition-old(root) {
  animation: none;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

html[data-turbo-visit-direction="back"]::view-transition-old(root) {
  animation: none;
}

html[data-turbo-visit-direction="back"]::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
.capacitor .capacitor-hidden {
  display: none !important;
}

html:not(.capacitor) .capacitor-show {
  display: none !important;
}

@media all and (display-mode: standalone) {
  .desktop-only {
    display: none;
  }
}

@media not all and (display-mode: standalone) {
  .pwa-only {
    display: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */