// -----------------
$screen-xs:                  480px;
$screen-xs-min:              $screen-xs;
$screen-phone:               $screen-xs-min;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm:                  768px;
$screen-sm-min:              $screen-sm;
$screen-tablet:              $screen-sm-min;

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md:                  992px;
$screen-md-min:              $screen-md;
$screen-desktop:             $screen-md-min;

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg:                  1200px;
$screen-lg-min:              $screen-lg;
$screen-lg-desktop:          $screen-lg-min;

$screen-xlg:				1500px;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1);
$screen-sm-max:              ($screen-md-min - 1);
$screen-md-max:              ($screen-lg-min - 1);

// ------------------------ z-index---------------------
$zindex-navbar:            5 !default;
$zindex-dropdown:          100 !default;
$zindex-popover:           101 !default;
$zindex-tooltip:           102 !default;
$zindex-navbar-fixed:      103 !default;
$zindex-modal-background:  104 !default;
$zindex-modal:             105 !default;
$zindex-toast:             105 !default;

// =====================
$mColorMain: #3f51b5; // purple
$mColorSub: #ff4081; // pinky red

// ------------------------ some color ---------
$light-bg1: #FAFAFB;//#FAFAFB
$light-bg2: #efefef;
$light-bg3: #e3e3e3;
$light-bg4: #dadada;
$light-bg5: #ccc;

$body-bg:	$light-bg2;
$text-color: rgba(0,0,0,.87);
$text-color-dark: #767777;
$text-color-light: #576671;

// -------------------
$card-border: 		solid 1px rgba(0, 0, 0, 0.12);
$card-border-light: solid 1px #eee;
$card-shadow: 		rgba(0,0,0,0.0470588) 0 2px 3px 0;

// ------------paper-depth shadow --------
$shadow-depth0: $card-shadow;
$shadow-depth1: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
$shadow-depth2: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
$shadow-depth3: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
$shadow-depth4: 0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22);
$shadow-depth5: 0 19px 60px rgba(0, 0, 0, 0.30), 0 15px 20px rgba(0, 0, 0, 0.22);






