// Color
$white: #fff !default;
$black: #000 !default;

$gray-lighter: #f3f3f3 !default;
$gray-light: #e0e0e0 !default;
$gray: #bdbdbd !default;
$gray-dark: #616161 !default;
$gray-darker: #212121 !default;
$gray-transparent: rgba(0, 0, 0, .54);

$blue-lighter: #c5cae9 !default;
$blue-light: #9fa8da !default;
$blue: #304ffe !default;
$blue-dark: #3f51b5 !default;
$blue-darker: #3949ab !default;

$red-light: #ff1744 !default;
$red: #f5222d !default;
$red-dark: #b71c1c !default;

$green-light: #81c784 !default;
$green: #8bc34a !default;
$green-dark: #4caf50 !default;

// Dimension
// Screen
$large-desktop-min: 1400px !default;
$desktop-min: 1200px !default;
$small-desktop-min: 960px !default;
$ultra-book-min: 760px !default;
$tablet-min: 480px !default;

// Form
$form-inline-width: 256px;
$form-inline-height: 100px;

// Element
$mat-height: 48px !default;
$nav-left-width: 200px !default;

// Font
$heading1: 40px !default;
$heading2: 30px !default;
$heading3: 25px !default;
$heading4: 20px !default;
$heading5: 18px !default;
$heading6: 16px !default;

$form-font-size: 14px !default;
$form-label-font-size: 13px !default;

// Date Picker
$date-picker-btn-width: 28px !default;

// Transition
$all-transition: all .36s cubic-bezier(.78, .14, .15, .86) !default;

// Z-Index
$z-index-right-reset: 900 !default;
$z-index-nav-left: 9990 !default;
$z-index-nav-left-mask: 9989 !default;
$z-index-nav-top: 9988 !default;
$z-index-popper: 9986 !default;
$z-index-dialog-wrapper: 9997 !default;
$z-index-dialog: 9998 !default;
$z-index-toast: 9999 !default;
$z-index-popper-in-dialog: 10000 !default;
$z-index-tooltip: 10001 !default;
$z-index-image-gallery-overlay: 10002 !default;

// Theme
$primary-lighter: $blue-lighter !default;
$primary-light: $blue-light !default;
$primary: $blue !default;
$primary-dark: $blue-dark !default;
$primary-darker: $blue-darker !default;
$info: $gray-dark !default;
$success: $green !default;
$error: $red-light !default;

// Shadow
$standard-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) !default;
$enhanced-box-shadow-hover: 1px 2px 1px 1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) !default;
$enhanced-box-shadow-active: 1px 2px 1px 1px rgba(0, 0, 0, .3), 0 1px 1px 0 rgba(0, 0, 0, .34), 0 1px 3px 0 rgba(0, 0, 0, .32) !default;