$black: #333;

$color-primary: #48b0f7;
$color-primary-medium: lighten($color-primary, 20%);
$color-primary-light: lighten($color-primary, 30%);
$color-primary-lighter: lighten($color-primary, 35%);
$color-primary-dark: darken($color-primary, 20%);

$color-error: #f55753;
$color-error-medium: lighten($color-error, 20%);
$color-error-light: lighten($color-error, 30%);
$color-error-lighter: lighten($color-error, 40%);
$color-error-dark: darken($color-error, 30%);

$color-warning: #f8d053;
$color-warning-medium: lighten($color-warning, 10%);
$color-warning-light: lighten($color-warning, 27.5%);
$color-warning-lighter: lighten($color-warning, 35%);
$color-warning-dark: darken($color-warning, 27.5%);

$color-success: #10cfbd;
$color-success-medium: lighten($color-success, 40%);
$color-success-light: lighten($color-success, 60%);
$color-success-lighter: lighten($color-success, 70%);
$color-success-dark: darken($color-success, 60%);

$color-grey: #919191;
$color-grey-medium: #e6e6e6;
$color-grey-light: #f5f5f5;
$color-grey-lighter: #fafafa;
$color-grey-dark: #626262;

$alpha-black: rgba(0,0,0,0.25);
$alpha-black-medium: rgba(0,0,0,0.1);
$alpha-black-light: rgba(0,0,0,0.07);
$alpha-black-lighter: rgba(0,0,0,0.03);
$alpha-black-dark: rgba(0,0,0,0.5);

$alpha-white: rgba(255, 255, 255, 0.3);
$alpha-white-medium: rgba(255, 255, 255, 0.75);
$alpha-white-light: rgba(255, 255, 255, 0.9);
$alpha-white-dark: rgba(255, 255, 255, 0.1);

$modal-bg-full: $alpha-white-light;
$modal-bg: $alpha-black;
$modal-bg-light: $alpha-white;

$border-width: 1px;
$border-radius: 3px;

$font-giant: 72px;
$font-largest: 24px;
$font-xlarge: 18px;
$font-large: 16px;
$font-regular: 14px;
$font-small: 12px;
$font-smallest: 10px;

$basic-padding: 30px;

$header-height: 60px;
$header-md-height: 50px;
$header-xs-height: 40px;

$aside-width: 300px;
$calendar-size: 251px;

$input-xs-height: 28px;
$input-height: 35px;
$label-height: 20px;
$input-padding: 10px;

$chart-tiny: 150px;
$chart-small: 200px;
$chart-medium: 300px;
$chart-large: 600px;

$slow: 500ms;
$fast: 200ms;



/// Breakpoints
/// @type Length
$screen-xs-min: 480px !default;
$screen-sm-min: 768px !default;
$screen-md-min: 992px !default;
$screen-lg-min: 1200px !default;
$screen-xlg-min: 1366px !default;
$screen-xxlg-min: 1680px !default;
$screen-xxxlg-min: 1920px !default;

$screen-xxs-max: ($screen-xs-min - 1) !default;
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
$screen-lg-max: ($screen-xlg-min - 1) !default;
$screen-xlg-max: ($screen-xxlg-min - 1) !default;
$screen-xxlg-max: ($screen-xxxlg-min - 1) !default;
/// Breakpoints map for Sass-mq
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
/// @see {mixin} mq
$mq-breakpoints: (
    xxs: 1px,
    iphone6: 375px,
    iphone6p: 414px,
    xs: $screen-xs-min,
    sm: $screen-sm-min,
    md: $screen-md-min,
    mdplus: 1024px,
    lg: $screen-lg-min,
    lgplus: 1280px,
    xlg: $screen-xlg-min,
    xxlg: $screen-xxlg-min,
    xxxlg: $screen-xxxlg-min
) !default;

$mq-show-breakpoints: (xxs, iphone6, iphone6p, xs, sm, md, mdplus, lg, lgplus, xlg, xxlg, xxxlg) !default;