html,
body,
#sapper {
  height: 100%;
  width: 100%;
}

body {
  --font-size: 14px;
  --font-family: "Suisse Int'l", Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

  --space: 10px;
  --space-small: calc(var(--space) / 2);
  --space-xsmall: calc(var(--space-small) / 2);
  --space-large: calc(var(--space) * 2);
  --space-xlarge: calc(var(--space-large) * 2);

  /* this is particularly important for the carousels */
  --space-body-horizontal: var(--space-xlarge);

  --color-primary: #FDD54F;
  --color-primary-rgb: 253, 213, 79;
  --color-primary-contrast: #26293d;
  --color-primary-content-rgb: 38, 41, 61;
  /* --color-primary: #3880ff; */
  /* --color-primary-rgb: 56, 128, 255; */
  --color-primary-shade: #ffba49;
  /* --color-primary-tint: #4c8dff; */
  --color-secondary: #D2E5F7;
  --color-secondary-rgb: 210, 229, 247;
  --color-secondary-contrast: #26293d;
  --color-secondary-contrast-rgb: 38, 41, 61;
  --color-secondary-shade: #b9cad9;
	--color-secondary-tint: #d7e8f8;
  --color-tertiary: #FFFD48;
  --color-tertiary-rgb: 255, 253, 72;
  --color-tertiary-contrast: #26293d;
  --color-tertiary-contrast-rgb: 38, 41, 61;
  /* --color-tertiary-shade: #633ce0; */
  /* --color-tertiary-tint: #7e57ff; */
  --color-quaternary: #4068AF;
  --color-quaternary-rgb: 64,104,175;
  --color-quaternary-contrast: #ffffff;
  --color-quaternary-contrast-rgb: 255, 255, 255;
  --color-success: #10dc60;
  --color-success-rgb: 16, 220, 96;
  --color-success-contrast: #ffffff;
  --color-success-contrast-rgb: 255, 255, 255;
  --color-success-shade: #0ec254;
  --color-success-tint: #28e070;
  --color-warning: #ffce00;
  --color-warning-rgb: 255, 206, 0;
  --color-warning-contrast: #ffffff;
  --color-warning-contrast-rgb: 255, 255, 255;
  --color-warning-shade: #e0b500;
  --color-warning-tint: #ffd31a;
  --color-danger: #f04141;
  --color-danger-rgb: 245, 61, 61;
  --color-danger-contrast: #ffffff;
  --color-danger-contrast-rgb: 255, 255, 255;
  --color-danger-shade: #d33939;
  --color-danger-tint: #f25454;
  --color-dark: #26293d;
  --color-dark-rgb: 38, 41, 61;
  --color-dark-contrast: #ffffff;
  --color-dark-contrast-rgb: 255, 255, 255;
  --color-dark-shade: #1e2023;
  --color-dark-tint: #494c52;
  --color-medium: #656877;
  --color-medium-rgb: 101, 104, 119;
  --color-medium-contrast: #ffffff;
  --color-medium-contrast-rgb: 255, 255, 255;
  --color-medium-shade: #86888f;
  --color-medium-tint: #a2a4ab;
  --color-light: #ffffff;
  --color-light-rgb: 255, 255, 255;
  --color-light-contrast: #000000;
  --color-light-contrast-rgb: 0, 0, 0;
  --color-light-shade: #d7d8da;
  --color-light-shade-rgb: 215, 216, 218;
  --color-light-tint: #f5f6f9;
  --color-facebook: #4267B2;
  --color-google: #4285F4;
  --color-apple: #000000;
  --color-outlook: #2372C5;
  /* --color-background: #2b2d42;
  --color-background-secondary: #4b4e6d;
  --color-text: #fff;
  --color-text-secondary: #a2a4ab; */
  --color-virtual: #D2E5F3;
  --color-virtual-tint: #EDF6FD;
  --color-irl: #F8EABE;
  --color-irl-tint: #FFF7DC;
  --color-private: #E0C8E7;
  --color-private-tint: #E8DEFD;
  --color-past: #A4A5AB;
  --color-past-rgb: 164, 165, 171;

  --border-radius: 5px;

  --header-height: 55px;
  --content-height: calc(100% - var(--header-height));

  --button-space: var(--space);
  --input-border-color: rgba(var(--color-light-rgb), 0.25);
  --input-border: 1px solid var(--input-border-color);
  --input-placeholder-color: rgba(var(--color-light-rgb), 0.5);

  /* Redefine default SMUI variables with base values */
  --mdc-ripple-focus-opacity: 0;

  --mdc-theme-primary: var(--color-primary);
  --mdc-theme-secondary: var(--color-secondary);
  --mdc-theme-background: var(--color-background);
  --mdc-theme-surface: var(--color-background);
  --mdc-theme-error: var(--color-danger);
  --mdc-theme-on-primary: var(--color-primary-contrast);
  --mdc-theme-on-secondary: var(--color-secondary-contrast);
  --mdc-theme-on-surface: var(--color-text);
  --mdc-theme-on-error: var(--color-light);

  --mdc-theme-text-primary-on-background: var(--color-text);
  --mdc-theme-text-secondary-on-background: var(--color-text-secondary);
  --mdc-theme-text-hint-on-background: var(--color-light-shade);
  --mdc-theme-text-disabled-on-background: var(--color-light-shade);
  --mdc-theme-text-icon-on-background: var(--color-light-shade);
  --mdc-theme-text-primary-on-light: var(--color-dark);
  --mdc-theme-text-secondary-on-light: var(--color-dark-shade);
  --mdc-theme-text-hint-on-light: var(--color-dark-tint);
  --mdc-theme-text-disabled-on-light: rgba(var(--color-text-rgb), 0.4);
  --mdc-theme-text-icon-on-light: var(--color-dark-tint);

  --mdc-theme-text-primary-on-dark: var(--color-light);
  --mdc-theme-text-secondary-on-dark: var(--color-light);
  --mdc-theme-text-hint-on-dark: var(--color-light);
  --mdc-theme-text-disabled-on-dark: rgba(var(--color-text-rgb), 0.4);
  --mdc-theme-text-icon-on-dark: var(--color-light);

  --mdc-typography-font-family: var(--font-family);
}

body {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

body, button {
  font-family: var(--font-family);
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em 0;
  font-weight: 400;
  line-height: 1.2;
}

a {
  color: inherit;
}
dd {
  margin-inline-start: 0px;
}

textarea:disabled,
input:disabled {
  cursor: not-allowed;
}

textarea,
input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="number"] {
  background-color: transparent;
  border: var(--input-border);
  border-radius: var(--border-radius);
  box-shadow: none;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size);
  margin: 0;
  outline: none;
  padding: var(--space) 15px;
  transition: border-color 200ms;
}
textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder {
  color: var(--input-placeholder-color);
}
input[type="checkbox"] {
  margin: 0;
}
textarea:focus,
input:focus {
  border-color: var(--color-primary);
}
textarea {
  font-family: inherit;
  font-size: var(--font-size);
  line-height: 1.4em;
}

img {
  max-width: 100%;
}

/* REDUNDANT STYLE */
.notice {
  color: rgba(var(--color-text-rgb),0.5);
  font-size: 0.8em;
}

/* @font-face {
  font-family: "Suisse Int'l";
  font-weight: 800;
  src: url("/fonts/SuisseIntl-Black-WebM.eot");
  src: url("/fonts/SuisseIntl-Black-WebM.eot?#iefix") format("embedded-opentype"), url("/fonts/SuisseIntl-Black-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Black-WebM.woff") format("woff"),
    url("/fonts/SuisseIntl-Black-WebM.ttf") format("truetype"),
    url("/fonts/SuisseIntl-Black-WebM.svg#svgFontName") format("svg");
} */

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 700;
  src: url("/fonts/SuisseIntl-Bold-WebM.eot"); /* IE9 Compat Modes */
  src: url("/fonts/SuisseIntl-Bold-WebM.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/fonts/SuisseIntl-Bold-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Bold-WebM.woff") format("woff"), url("/fonts/SuisseIntl-Bold-WebM.ttf") format("truetype"),
    url("/fonts/SuisseIntl-Bold-WebM.svg#svgFontName") format("svg"); /* Legacy iOS */
}

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 600;
  src: url("/fonts/SuisseIntl-SemiBold-WebM.eot"); /* IE9 Compat Modes */
  src: url("/fonts/SuisseIntl-SemiBold-WebM.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/fonts/SuisseIntl-SemiBold-WebM.woff2") format("woff2"),
    /* Super Modern Browsers */ url("/fonts/SuisseIntl-SemiBold-WebM.woff") format("woff"),
    /* Pretty Modern Browsers */ url("/fonts/SuisseIntl-SemiBold-WebM.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/fonts/SuisseIntl-SemiBold-WebM.svg#svgFontName") format("svg"); /* Legacy iOS */
}

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 500;
  src: url("/fonts/SuisseIntl-Medium-WebM.eot");
  src: url("/fonts/SuisseIntl-Medium-WebM.eot?#iefix") format("embedded-opentype"), url("/fonts/SuisseIntl-Medium-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Medium-WebM.woff") format("woff"), url("/fonts/SuisseIntl-Medium-WebM.ttf") format("truetype"),
    url("/fonts/SuisseIntl-Medium-WebM.svg#svgFontName") format("svg");
}
/*
@font-face {
  font-family: "Suisse Int'l";
  font-weight: 500;
  src: url("/fonts/SuisseIntl-Book-WebM.eot");
  src: url("/fonts/SuisseIntl-Book-WebM.eot?#iefix") format("embedded-opentype"), url("/fonts/SuisseIntl-Book-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-Book-WebM.woff") format("woff"),
    url("/fonts/SuisseIntl-Book-WebM.ttf") format("truetype"),
    url("/fonts/SuisseIntl-Book-WebM.svg#svgFontName") format("svg");
} */

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 400;
  src: url("/fonts/SuisseIntl-Regular-WebM.eot"); /* IE9 Compat Modes */
  src: url("/fonts/SuisseIntl-Regular-WebM.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/fonts/SuisseIntl-Regular-WebM.woff2") format("woff2"),
    /* Super Modern Browsers */ url("/fonts/SuisseIntl-Regular-WebM.woff") format("woff"),
    /* Pretty Modern Browsers */ url("/fonts/SuisseIntl-Regular-WebM.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/fonts/SuisseIntl-Regular-WebM.svg#svgFontName") format("svg"); /* Legacy iOS */
}

/* @font-face {
  font-family: "Suisse Int'l";
  font-weight: 300;
  src: url("/fonts/SuisseIntl-Light-WebM.eot");
  src: url("/fonts/SuisseIntl-Light-WebM.eot?#iefix") format("embedded-opentype"), url("/fonts/SuisseIntl-Light-WebM.woff2") format("woff2"),
     url("/fonts/SuisseIntl-Light-WebM.woff") format("woff"),
     url("/fonts/SuisseIntl-Light-WebM.ttf") format("truetype"),
     url("/fonts/SuisseIntl-Light-WebM.svg#svgFontName") format("svg");
}

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 200;
  src: url("/fonts/SuisseIntl-Thin-WebM.eot");
  src: url("/fonts/SuisseIntl-Thin-WebM.eot?#iefix") format("embedded-opentype"), url("/fonts/SuisseIntl-Thin-WebM.woff2") format("woff2"),
     url("/fonts/SuisseIntl-Thin-WebM.woff") format("woff"),
     url("/fonts/SuisseIntl-Thin-WebM.ttf") format("truetype"),
     url("/fonts/SuisseIntl-Thin-WebM.svg#svgFontName") format("svg");
}

@font-face {
  font-family: "Suisse Int'l";
  font-weight: 100;
  src: url("/fonts/SuisseIntl-UltraLight-WebM.eot");
  src: url("/fonts/SuisseIntl-UltraLight-WebM.eot?#iefix") format("embedded-opentype"),
    url("/fonts/SuisseIntl-UltraLight-WebM.woff2") format("woff2"),
    url("/fonts/SuisseIntl-UltraLight-WebM.woff") format("woff"),
    url("/fonts/SuisseIntl-UltraLight-WebM.ttf") format("truetype"),
    url("/fonts/SuisseIntl-UltraLight-WebM.svg#svgFontName") format("svg");
} */

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
  body {
    --space-body-horizontal: var(--space);
  }
  svg {
    height: 100% !important;
  }
  input[type="date" i] {
    font-family: Arial;
  }
  textarea,
  input[type="text"],
  input[type="date"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"] {
    /* This avoid zoom on mobile input tap */
    font-size: 16px;
  }
  /* Set a default value for svelte-select input font-size variable to fix zoom on mobile issue */
  .selectContainer > input {
    --inputFontSize: 16px;
  }
}

@media (min-width: 768px) {
  .show-only-on-mobile {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none !important;
  }
}