/* Import fonts (Saira, Calibri) */

@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Calibri:400,700,400italic,700italic');


:root {
  /* Primary colors */
  --eli-color-orange: #ff6600;
  --eli-color-black: #000000;
  --eli-color-white: #ffffff;

  /* Banner color from other apps */
  --eli-banner-color: #f7f7fc;

  /* Secondary dark colors */
  --eli-color-secondary-dark-neutral: #bbbddc;
  --eli-color-secondary-dark-sky: #47a6e3;
  --eli-color-secondary-dark-navy: #000665;
  --eli-color-secondary-dark-violet: #3b0089;
  --eli-color-secondary-dark-fuchsia: #86004e;
  --eli-color-secondary-dark-red: #900022;
  --eli-color-secondary-dark-orange: #c13f00;
  --eli-color-secondary-dark-yellow: #e09f00;

  /* Secondary base colors */
  --eli-color-secondary-base-neutral: #ebedf9;
  --eli-color-secondary-base-sky: #99d8f9;
  --eli-color-secondary-base-navy: #2f0fb2;
  --eli-color-secondary-base-violet: #5939ba;
  --eli-color-secondary-base-fuchsia: #cf0049;
  --eli-color-secondary-base-red: #eb2f1e;
  --eli-color-secondary-base-orange: var(--eli-color-orange);
  --eli-color-secondary-base-yellow: #f0d123;

  /* Secondary light colors */
  --eli-color-secondary-light-neutral: var(--eli-color-white);
  --eli-color-secondary-light-sky: #d6e8fd;
  --eli-color-secondary-light-navy: #96a7fd;
  --eli-color-secondary-light-violet: #cfc4f7;
  --eli-color-secondary-light-fuchsia: #eba3c1;
  --eli-color-secondary-light-red: #ff8464;
  --eli-color-secondary-light-orange: #ffbe8a;
  --eli-color-secondary-light-yellow: #ffff78;


  /* Font families */
  --eli-font-family-heading: "Saira", sans-serif;
  --eli-font-family-text: "Calibri", sans-serif;

  /* Font weights */
  --eli-font-light: 300;
  --eli-font-regular: 400;
  --eli-font-medium: 500;
  --eli-font-semibold: 600;
  --eli-font-bold: 700;


  /* Label */
  --eli-label-font-family: var(--eli-font-family-heading);
  --eli-label-font-weight: var(--eli-font-medium);
  --eli-label-text-transform: uppercase;
  --eli-label-letter-spacing: 3px;

  /* Heading */
  --eli-heading-font-family: var(--eli-font-family-heading);
  --eli-heading-font-weight: var(--eli-font-medium);

  /* Body copy */
  --eli-body-copy-font-family:  var(--eli-font-family-text);
  --eli-body-copy-font-weight: var(--eli-font-regular);


  /* Override app variables */
  /* When changing these, also chakge in configureELIEnvironment.ts */
  --PALETTE_PRIMARY_DARK: var(--eli-color-black) !important;
  --PALETTE_PRIMARY_MAIN:  var(--eli-color-orange) !important;
  --PALETTE_PRIMARY_LIGHT: var(--eli-color-secondary-light-orange) !important;
  --PALETTE_PRIMARY_CONTRAST: var(--eli-color-white) !important;

  --PALETTE_SECONDARY_DARK: var(--eli-color-secondary-dark-neutral) !important;
  --PALETTE_SECONDARY_MAIN: var(--eli-color-secondary-base-neutral) !important;
  --PALETTE_SECONDARY_LIGHT: var(--eli-color-secondary-light-neutral) !important;
  --PALETTE_SECONDARY_CONTRAST: var(--eli-color-black) !important;
}

/* Base font styling */
* {
    font-family: var(--eli-font-family-text) !important;
    font-weight: var(--eli-font-regular);
    font-style: normal;
}

/* Label */
/* For outlined text inputs, the notched label also has to be adjusted, but only if label text is present (the span is not empty) */
/* label.MuiFormLabel-root,
.MuiOutlinedInput-notchedOutline:has(span:not(:has(> *))) {
    font-family: var(--eli-label-font-family) !important;
    font-weight: var(--eli-label-font-weight);
    text-transform: var(--eli-label-text-transform);
    letter-spacing: var(--eli-label-letter-spacing);
    font-size: 0.8rem;
} */

/* Heading */
h1.MuiTypography-root {
    font-family: var(--eli-heading-font-family) !important;
    font-weight: var(--eli-heading-font-weight) !important;
}

/* header h1.MuiTypography-root {
    margin-left: 10px;
    margin-right: 10px;
} */

h2.MuiTypography-root {
    font-weight: var(--eli-font-bold);
}

/* Body copy */
p {
    font-family: var(--eli-body-copy-font-family) !important;
    font-weight: var(--eli-body-copy-font-weight) !important;
}

/* Default main color seemed too light for checkboxes */
.MuiCheckbox-root.Mui-checked {
    color: var(--PALETTE_SECONDARY_DARK) !important;
}


/* Header styling. */

header {
    /* background-color: var(--eli-color-secondary-base-neutral) !important; */
    background-color: var(--eli-banner-color) !important;
}

header, header h1 {
    /* color: var(--eli-color-white) !important; */
}

img.header-logo {
    /* height: 32px;
    margin-left: 20px; */
    /* margin-right: 5px !important; */
}

/* Fix Stepper icon text color (fill) */
.MuiStepLabel-iconContainer text  {
    fill: var(--PALETTE_PRIMARY_CONTRAST) !important;
}

/* Fix Chip text color */
.MuiChip-colorPrimary {
    color: var(--PALETTE_PRIMARY_CONTRAST)
}

/* Button styling. For all MUI buttons, excluding the ones in the bottom navigation bar (privacy statement, faq) */

/* button.MuiButton-root:not(.MuiBottomNavigation-root > button.MuiButton-root) {
    border-radius: 14px;
    background-color: rgb(235, 237, 247);
    color: black;
    font-weight: 400;
    font-size: 14px;
    box-shadow: none;
    padding-left: 12px; 
    padding-right: 12px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    border-style: none;
}

button.MuiButton-root:not(.MuiBottomNavigation-root > button.MuiButton-root):hover {
    background-color: #c9cbd4;
    box-shadow: none;
    color: black;
    border-style: none;
} */

/* Inputs styling. */

/* div.MuiInput-root {
    border: 1px solid rgb(196, 197, 199);
    border-radius: 4px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 20px;
}

label.MuiInputLabel-root:focus {
    color: black;
}

div.MuiInput-root:hover {
    border-color: #86b7fe;
}

div.MuiInput-root:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25);
    outline: 0;
}

div.MuiInput-root::before {
    display: none;
}
    
div.MuiInput-root::after {
    display: none;
} */

 
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7adnpV-BGlaFfdAhLQo6btP&skey=36a3d5758e0e2f58&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aYnpV-BGlaFfdAhLQgUp5aHRge&skey=8b00183e5f6700b6&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7afnpV-BGlaFfdAhLEY6w&skey=a1029226f80653a8&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aanpV-BGlaFfdAjAo9_pxqHw&skey=cd2dd6afe6bf0eb2&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}