@font-face {
    font-family: 'khula';
    src: url('fonts/khula.bold-webfont.woff2') format('woff2'),
         url('fonts/khula.bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'khula';
    src: url('fonts/khula.medium-webfont.woff2') format('woff2'),
         url('fonts/khula.medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'khula';
    src: url('fonts/khula.regular-webfont.woff2') format('woff2'),
         url('fonts/khula.regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'khula';
    src: url('fonts/khula.light-webfont.woff2') format('woff2'),
         url('fonts/khula.light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'firacode';
    src: url('fonts/firacode-retina-webfont.woff2') format('woff2'),
         url('fonts/firacode-retina-webfont') format('woff');
    font-weight: 400;
    font-style: normal;
}


:root {
  --main-font: 'khula', Arial, Helvetica, sans-serif;
  --mono-font: 'firacode', monospace;

  --font-size: 15px;
  --small-size: 13px;
  --font-weight-light: 400;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --title-font:  'khula', Arial, Helvetica, sans-serif;
  --title-weight: 700;
  --title-light-weight: 500;
  --title-size-base: 20px;

  --text-color: #767676;
  --text-lighter: #AAAAAA;
  --title-color: #7c1073;

  --input-color: #888;
  --input-focus-color: #67595e;

  --dark-gray-color: lime;
  --darkest-gray: lime;
  --dark-gray: #707070;

  --gray: #CCC;
  --light-gray: #f4f4f4;
  --white: #FFF;
  --row-hover: #FAFAFA;

  --link-color: #7c1073;

  --button-height: 48px;
  --button-radius: 24px;
  --button-color: #7c1073;
  --button-text-color: #FFF;
  --button-hover-color: #f39801;
  --button-hover-text-color: #FFF;

  --brand-color-1: #7c1073;
  --brand-color-2: #e8b4b8;
  --brand-color-3: #a49393;

  --brand-dark: #7c1073;
  --brand-dark-text: #FFF;
  --brand-lighter: #f39801;
  --brand-lighter-text: #FFF;

  --small-radius: 2px;
  --big-radius: 5px;
  --mega-radius: 20px;

  --error-red: #c92424;
  --msg-warning: #d95200;
  --msg-success: #00aa27;

    --data-negative: #c92424;
    --data-positive: #00aa27;

  --lightbox-bg: #F9F7F6;
  --lightbox-color: #67595e;

    --current-period: #9ad0f7;
    --previous-period: #ffd0a2;
    --benchmark: #d197d1;

    --score_1: #64b96a;
    --score_2: #ff6900;
    --score_3: #ff0000;
    --score_4: #14c21e;
    --score_5: #ff6900;


}
#app .head h1 {
	color: #000;	
}