$black: #333 !default;

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

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

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

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

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

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

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

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

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

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

$basic-padding: 30px !default;

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

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

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

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

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



/// 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;