:root {
    /* Primary colours */
    --white-color: #ffffff;
    --black-color: #000000;
    --blue200: #00b0f0;
    --blue600: #001e50;
    
    /* Secondary colours */
    --grey100: #dfe4e8;
    --grey200: #c2cacf;
    --grey300: #96a3a8;
    --grey400: #6a767d;
    --grey400-rgb: 106, 118, 125;
    --grey500: #3c484d;
    --blue500: #00437a;
    
    /* Signal colours */
    --error-color: #e4002c;      /* error */
    --success-color: #029640;    /* success */
    --warning-color: #ffd100;
    --error-color-rgb: 228, 0, 44;
    --success-color-rgb: 2, 150, 64;
    --warning-color-rgb: 255, 209, 0;
    
    /* Special purpose colours */
    --blue100: #4cc7f4;     /* only hover (blue200/white000) */
    --blue300: #0082d6;     /* only for infographics */
    --blue900: #0040c5;     /* only hover (blue600) */
    --red100: #ff335c;      /* only hover (red200) */
    --green100: #ade5a1;    /* only hover (green200) */
    
    
    
/* OVERWRITING BOOTSTRAP VARIABLES */
    --bs-font-sans-serif: "vw-text", "Arial", "sans-serif";
    --bs-success: var(--success-color);
    --bs-success-rgb: var(--success-color-rgb);
    --bs-warning: var(--warning-color);
    --bs-warning-rgb: var(--warning-color-rgb);
    --bs-danger: var(--error-color);
    --bs-danger-rgb: var(--error-color-rgb);
    --bs-info: var(--purple100);
    --bs-info-rgb: var(--purple100-rgb);
    --bs-link-color: var(--grey400);
    --bs-link-color-rgb: var(--grey400-rgb);
}

.btn-primary {
  --bs-btn-color: var(--blue600);
  --bs-btn-bg: var(--blue200);
  --bs-btn-border-color: var(--blue200);
  --bs-btn-hover-color: var(--blue600);
  --bs-btn-hover-bg: var(--blue100);
  --bs-btn-hover-border-color: var(--blue100);
  --bs-btn-active-color: var(--blue600);
  --bs-btn-active-bg: var(--blue100);
  --bs-btn-active-border-color: var(--blue100);
  --bs-btn-disabled-color: var(--grey400);
  --bs-btn-disabled-bg: var(--grey100);
  --bs-btn-disabled-border-color: var(--grey100);
}

.form-control {
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0px;
}


  @font-face {
    font-family: 'vw-text';
    font-weight: 400;
    font-display: swap;
    src: url('/css/vw/fonts/vwtext-regular.woff2') format('woff2'),
    url('/css/vw/fonts/vwtext-regular.woff') format('woff');
  }

  @font-face {
    font-family: 'vw-text';
    font-weight: 700;
    font-display: swap;
    src: url('/css/vw/fonts/vwtext-bold.woff2') format('woff2'),
    url('/css/vw/fonts/vwtext-bold.woff') format('woff');
  }