:root {
    /* defaults */
    --ifes-color-blue: #004c99; /* = CI blue */
    --ifes-color-red: #ff1515;
    --ifes-color-orange: #f68c28;
    --ifes-color-yellow: #ffbf00;
    --ifes-color-green: #0C7C59;
    --ifes-color-white: #ffffff;
    --ifes-color-grey: #f0f0f0;
    --ifes-color-black: #212529;

    --ifes-primary-color: var(--ifes-color-blue);
    --ifes-secondary-color: var(--ifes-color-green);

    --ifes-default-font-color: var(--ifes-color-black);
    --ifes-default-background-color: var(--ifes-color-white);
    --ifes-default-highlight-color: var(--ifes-secondary-color);
    --ifes-default-highlight-background-color: var(--ifes-default-background-color);

    --ifes-default-font-family: Roboto, "Segoe UI", "Liberation Sans", Arial;
    --ifes-default-font-family-monospace: "Roboto Mono", "Liberation Mono", "Courier New";
    --ifes-default-font-size: 1.2rem;
    --ifes-default-font-weight: 400;
    --ifes-default-line-height: 1.5rem;

    --ifes-default-border-color: var(--ifes-primary-color);
    --ifes-default-border-width: 1px;
    --ifes-default-border-radius: 0.375rem;
    --ifes-default-panel-padding: 0.375rem;
    --ifes-default-label-gap: 0.375rem;

    /* container */
    --ifes-container-max-width: 1200px;
    --ifes-container-padding: 2.5rem;
    --ifes-panel-padding-x: 0.5rem;
    --ifes-panel-padding-y: 0.5rem;
    --ifes-container-margin: 0 auto;


    /* body */
    --ifes-body-font-family: var(--ifes-default-font-family);
    --ifes-body-font-size: var(--ifes-default-font-size);
    --ifes-body-font-weight: var(--ifes-default-font-weight);
    --ifes-body-line-height: var(--ifes-default-line-height);
    --ifes-body-font-color: var(--ifes-default-font-color);
    --ifes-body-background-color: var(--ifes-default-background-color);
    --ifes-body-background: var(--ifes-body-background-color);
    --ifes-body-text-align: left;

    /* misc html elements */
    --ifes-heading-font-color: var(--ifes-body-font-color);
    --ifes-link-font-color: var(--ifes-body-font-color);
    --ifes-link-text-decoration: underline;
    --ifes-link-hover-font-color: var(--ifes-link-font-color);
    --ifes-link-hover-text-decoration: var(--ifes-link-text-decoration);
    --ifes-caption-font-color: var(--ifes-body-font-color);
    --ifes-code-font-color: var(--ifes-body-font-color);
    --ifes-kbd-font-color: var(--ifes-body-background-color);
    --ifes-kdb-background-color: var(--ifes-body-font-color);

    /* checkboxes & radio */
    --ifes-check-color: var(--ifes-primary-color);
    --ifes-check-background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    --ifes-check-checked-background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --ifes-check-background-color: var(--ifes-body-background-color);
    --ifes-check-border-width: var(--ifes-default-border-width);
    --ifes-check-border-color: var(--ifes-check-color);

    --ifes-checkbox-indeterminate-background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --ifes-radio-checked-background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");

    /* input */
    --ifes-input-disabled-opacity: 0.65;

    /* header */
    --ifes-header-z-index: 99999;
    --ifes-header-background-color: var(--ifes-color-grey);
    --ifes-header-background: var(--ifes-header-background-color);
    --ifes-header-font-color: var(--ifes-body-font-color);
    --ifes-header-font-size: calc(1.5 * var(--ifes-body-font-size));
    --ifes-header-font-weight: 700;
    --ifes-header-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    --ifes-header-img-max-height: calc(2.5 * var(--ifes-body-font-size));
    --ifes-header-menu-font-size: var(--ifes-body-font-size);
    --ifes-header-menu-background-color: var(--ifes-body-background-color);
    --ifes-header-menu-background: var(--ifes-header-menu-background-color);
    --ifes-header-menu-column-gap: 3rem;
    --ifes-header-menu-backdrop-opacity: 0.9;
    --ifes-header-hamburger-color: var(--ifes-header-font-color);

    /* survey instruction */
    --ifes-survey-instruction-background-color: var(--ifes-body-background-color);
    --ifes-survey-instruction-background: var(--ifes-survey-instruction-background-color);
    --ifes-survey-instruction-font-color: var(--ifes-body-font-color);
    --ifes-survey-instruction-font-size: var(--ifes-body-font-size);
    --ifes-survey-instruction-font-weight: bolder;
    --ifes-survey-instruction-border: none;
    --ifes-survey-instruction-padding: var(--ifes-panel-padding-y) var(--ifes-panel-padding-x);

    /* survey question */
    --ifes-survey-question-background-color: var(--ifes-body-background-color);
    --ifes-survey-question-background: var(--ifes-survey-question-background-color);
    --ifes-survey-question-font-color: var(--ifes-body-font-color);
    --ifes-survey-question-font-size: var(--ifes-body-font-size);
    --ifes-survey-question-font-weight: var(--ifes-body-font-weight);
    --ifes-survey-question-border: none;
    --ifes-survey-question-padding: var(--ifes-panel-padding-y) var(--ifes-panel-padding-x);
    --ifes-survey-question-margin: 10px 0 10px 0;

    /* survey error */
    --ifes-survey-error-background-color: var(--ifes-color-red);
    --ifes-survey-error-background: var(--ifes-survey-error-background-color);
    --ifes-survey-error-font-color: var(--ifes-color-white);
    --ifes-survey-error-font-size: var(--ifes-body-font-size);
    --ifes-survey-error-font-weight: bolder;
    --ifes-survey-error-border: none;
    --ifes-survey-error-padding: var(--ifes-panel-padding-y) var(--ifes-panel-padding-x);
    --ifes-survey-error-margin: 0;

    /* survey answer */
    --ifes-survey-answer-background-color: var(--ifes-body-background-color);
    --ifes-survey-answer-background: var(--ifes-survey-answer-background-color);
    --ifes-survey-answer-font-color: var(--ifes-body-font-color);
    --ifes-survey-answer-font-size: var(--ifes-body-font-size);
    --ifes-survey-answer-font-weight: var(--ifes-body-font-weight);
    --ifes-survey-answer-border: none;
    --ifes-survey-answer-padding: 0;
    --ifes-survey-answer-margin: 0 0 20px 0;
    --ifes-survey-answer-row-padding: 5px 10px;
    --ifes-survey-answer-row-odd-background-color: var(--ifes-color-grey);
    --ifes-survey-answer-row-odd-background: var(--ifes-survey-answer-row-odd-background-color);
    --ifes-survey-answer-row-even-background-color: inherit;
    --ifes-survey-answer-row-even-background: var(--ifes-survey-answer-row-even-background-color);


    /* survey progressbar */
    --ifes-progressbar-color: var(--ifes-color-blue);
    --ifes-progressbar-text-color: var(--ifes-color-white);
    --ifes-survey-progressbar-font-color: inherit;
    --ifes-survey-progressbar-background-color: inherit;
    --ifes-survey-progressbar-background: var(--ifes-survey-progressbar-background-color);
    --ifes-survey-progressbar-inner-font-color: var(--ifes-progressbar-text-color);
    --ifes-survey-progressbar-inner-background-color: var(--ifes-progressbar-color);
    --ifes-survey-progressbar-inner-background: var(--ifes-survey-progressbar-inner-background-color);

    --ifes-survey-progressbar-width: 300px; /* TODO calc? */
    --ifes-survey-progressbar-font-size: calc(.7 * var(--ifes-body-font-size));
    --ifes-survey-progressbar-font-weight: 500;
    --ifes-survey-progressbar-border: 1px solid var(--ifes-progressbar-color);
    --ifes-survey-progressbar-border-radius: 3px;

    /* button defaults */
    --ifes-btn-padding-x: var(--ifes-panel-padding-x);
    --ifes-btn-padding-y: 0.375rem;
    --ifes-btn-font-family: var(--ifes-default-font-family);
    --ifes-btn-font-size: var(--ifes-default-font-size);
    --ifes-btn-font-weight: var(--ifes-default-font-weight);
    --ifes-btn-line-height: var(--ifes-default-line-height);
    --ifes-btn-text-wrap: nowrap;
    --ifes-btn-font-color: var(--ifes-color-white);
    --ifes-btn-background-color: var(--ifes-color-blue);
    --ifes-btn-background: var(--ifes-btn-background-color);
    --ifes-btn-border-width: var(--ifes-default-border-width);
    --ifes-btn-border-color: transparent;
    --ifes-btn-border-radius: var(--ifes-default-border-radius);
    --ifes-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --ifes-btn-transition: color 0.15s ease-in-out, background 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    --ifes-btn-filter: ;
    --ifes-btn-opacity: ;

    --ifes-btn-hover-font-color: var(--ifes-btn-font-color);
    --ifes-btn-hover-background-color: var(--ifes-btn-background-color);
    --ifes-btn-hover-background: var(--ifes-btn-hover-background-color);
    --ifes-btn-hover-border-color: var(--ifes-btn-border-color);
    --ifes-btn-hover-box-shadow: var(--ifes-btn-box-shadow);
    --ifes-btn-hover-filter: brightness(115%);
    --ifes-btn-hover-focus-box-shadow: var(--ifes-btn-hover-box-shadow);

    --ifes-btn-active-font-color: var(--ifes-btn-hover-font-color);
    --ifes-btn-active-background-color: var(--ifes-btn-hover-background-color);
    --ifes-btn-active-background: var(--ifes-btn-active-background-color);
    --ifes-btn-active-border-color: var(--ifes-btn-hover-border-color);
    --ifes-btn-active-box-shadow: var(--ifes-btn-hover-box-shadow);
    --ifes-btn-active-filter: var(--ifes-btn-hover-filter);

    --ifes-btn-focus-shadow-rgb: ;
    --ifes-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--ifes-btn-focus-shadow-rgb), .5);

    --ifes-btn-disabled-font-color: ;
    --ifes-btn-disabled-background-color: ;
    --ifes-btn-disabled-background: var(--ifes-btn-disabled-background-color);
    --ifes-btn-disabled-border-color: ;
    --ifes-btn-disabled-box-shadow: ;
    --ifes-btn-disabled-opacity: var(--ifes-input-disabled-opacity);
}

@media (max-width: 1000px) {
  :root {
    --ifes-default-font-size: 1.1rem;
  }
}

@media (max-width: 800px) {
  :root {
    --ifes-default-font-size: 1rem;
    --ifes-default-panel-padding: 0.2rem;
    --ifes-container-padding: 1.25rem;
  }
}

@media (max-width: 500px) {
  :root {
    --ifes-default-panel-padding: 0.1rem;
    --ifes-container-padding: 0.5rem;
  }
}