/* Transition */

$fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
$fade-linear-transition: opacity 200ms linear;
$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms,
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
$border-transition-base: border-color .2s cubic-bezier(.645, .045, .355, 1);
$color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1);

/* Colors*/

$color-primary: #7AC143;
$color-hover: #558B2F;
$color-focus: #8BC34A;
$color-active: #7CB342;
$color-success: #13ce66;
$color-warning: #f7ba2a;
$color-danger: #ff4949;
$color-info: $color-primary;
$color-blue: #2e90fe;
$color-blue-light: #5da9ff;
$color-blue-lighter: rgba($color-blue, 0.12);
$color-white: #fff;
$color-black: #000;
$color-grey: #C0CCDA;
$color-zk-bg: #474b4f;
$color-zk-darker-bg: #404448;

/* Link*/

$link-color: #475669;
$link-hover-color: $color-primary;

/* Border*/

$border-width-base: 1px;
$border-style-base: solid;
$border-color-base: $color-grey;
$border-color-hover: #8492a6;
$border-base: $border-width-base $border-style-base $border-color-base;
$border-radius-base: 2px;
$border-radius-circle: 100%;
$shadow-base: 0 0 2px rgba($color-black, 0.18),
0 0 1px $color-blue-light;

/* Box-shadow*/

$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12),
0 0 6px rgba(0, 0, 0, .04);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12),
0 0 6px rgba(0, 0, 0, .12);

/* Fill*/

$fill-base: $color-white;

/* Font*/

$font-size-base: 14px;
$font-color-base: #1f2d3d;
$font-color-disabled-base: #bbb;

/* Size*/

$size-base: 14px;

/* z-index*/

$index-normal: 1;
$index-top: 1000;
$index-popper: 2000;

/* Disable base*/

$disabled-fill-base: #EFF2F7;
$disabled-color-base: #bbb;
$disabled-border-base: #D3DCE6;

/* Icon*/

$icon-color: #666;

/* Checkbox*/

$checkbox-font-size: 14px;
$checkbox-color: #1f2d3d;
$checkbox-input-height: 18px;
$checkbox-input-width: 18px;
$checkbox-input-border-radius: $border-radius-base;
$checkbox-input-fill: $color-white;
$checkbox-input-border: $border-base;
$checkbox-input-border-color: $border-color-base;
$checkbox-icon-color: $color-white;
$checkbox-disabled-input-border-color: $disabled-border-base;
$checkbox-disabled-input-fill: $disabled-fill-base;
$checkbox-disabled-icon-color: $disabled-fill-base;
$checkbox-disabled-checked-input-fill: $disabled-border-base;
$checkbox-disabled-checked-input-border-color: $disabled-border-base;
$checkbox-disabled-checked-icon-color: $color-white;
$checkbox-checked-input-border-color: $color-blue;
$checkbox-checked-input-fill: $color-primary;
$checkbox-checked-icon-color: $fill-base;
$checkbox-input-shadow-hover: $shadow-base;
$checkbox-input-border-color-hover: $color-primary;

/* Radio*/

$radio-font-size: 14px;
$radio-color: #1f2d3d;
$radio-input-height: 18px;
$radio-input-width: 18px;
$radio-input-border-radius: $border-radius-circle;
$radio-input-fill: $color-white;
$radio-input-border: $border-base;
$radio-input-border-color: $border-color-base;
$radio-icon-color: $color-white;
$radio-disabled-input-border-color: $disabled-border-base;
$radio-disabled-input-fill: $disabled-fill-base;
$radio-disabled-icon-color: $disabled-fill-base;
$radio-disabled-checked-input-fill: $disabled-border-base;
$radio-disabled-checked-input-border-color: $disabled-border-base;
$radio-disabled-checked-icon-color: $color-white;
$radio-checked-input-border-color: $color-primary;
$radio-checked-input-fill: $color-white;
$radio-checked-icon-color: $color-primary;
$radio-input-shadow-hover: $shadow-base;
$radio-input-border-color-hover: $color-primary;
$radio-button-font-size: $font-size-base;

/* Select*/

$select-border-color-hover: $border-color-hover;
$select-disabled-border: $disabled-border-base;
$select-font-size: $font-size-base;
$select-close-hover-color: #99a9bf;
$select-input-color: $color-grey;
$select-multiple-input-color: #666;
$select-input-focus-background: $color-focus;
$select-input-font-size: 12px;
$select-tag-height: 24px;
$select-tag-color: $color-white;
$select-tag-background: $color-primary;
$select-option-color: $link-color;
$select-option-disabled-color: $color-grey;
$select-option-height: 36px;
$select-option-hover-background: #e5e9f2;
$select-option-selected: $color-primary;
$select-option-selected-hover: $color-hover;
$select-group-color: #999;
$select-group-height: 30px;
$select-group-font-size: 12px;
$select-dropdown-background: $color-white;
$select-dropdown-shadow: $box-shadow-base;
$select-dropdown-empty-color: #999;
$select-dropdown-max-height: 274px;
$select-dropdown-padding: 6px 0;
$select-dropdown-empty-padding: 10px 0;
$select-dropdown-border: solid 1px #d3dce6;

/* Alert*/

$alert-padding: 8px 16px;
$alert-border-radius: $border-radius-base;
$alert-title-font-size: 13px;
$alert-description-font-size: 12px;
$alert-close-font-size: 12px;
$alert-close-customed-font-size: 13px;
$alert-success-color: $color-success;
$alert-info-color: $color-info;
$alert-warning-color: $color-warning;
$alert-danger-color: $color-danger;
$alert-icon-size: 16px;
$alert-icon-large-size: 28px;

/* Message Box*/

$msgbox-width: 420px;
$msgbox-border-radius: 3px;
$msgbox-font-size: 16px;
$msgbox-content-font-size: 14px;
$msgbox-content-color: $link-color;
$msgbox-error-font-size: 12px;
$msgbox-success-color: $color-success;
$msgbox-info-color: $color-info;
$msgbox-warning-color: $color-warning;
$msgbox-danger-color: $color-danger;

/* Message*/

$message-shadow: $box-shadow-base;
$message-min-width: 300px;
$message-padding: 10px 12px;
$message-content-color: $border-color-hover;
$message-close-color: $color-grey;
$message-close-hover-color: #99A9BF;
$message-success-color: $color-success;
$message-info-color: $color-info;
$message-warning-color: $color-warning;
$message-danger-color: $color-danger;

/* Notification*/

$notification-width: 330px;
$notification-padding: 20px;
$notification-shadow: $box-shadow-base;
$notification-icon-size: 40px;
$notification-font-size: $font-size-base;
$notification-color: $border-color-hover;
$notification-title-font-size: 16px;
$notification-title-color: #1f2d3d;
$notification-close-color: $color-grey;
$notification-close-hover-color: #99A9BF;
$notification-success-color: $color-success;
$notification-info-color: $color-info;
$notification-warning-color: $color-warning;
$notification-danger-color: $color-danger;

/* Input*/

$input-font-size: $font-size-base;
$input-color: $font-color-base;
$input-width: 140px;
$input-height: 36px;
$input-shadow-hover: $shadow-base;
$input-border: $border-base;
$input-border-color: $border-color-base;
$input-border-radius: $border-radius-base;
$input-border-color-hover: $border-color-hover;
$input-fill: $color-white;
$input-fill-disabled: $disabled-fill-base;
$input-color-disabled: $font-color-disabled-base;
$input-icon-color: $color-grey;
$input-placeholder-color: #99a9bf;
$input-max-width: 314px;
$input-hover-border: $border-color-hover;
$input-focus-border: $color-primary;
$input-focus-fill: $color-white;
$input-disabled-fill: $disabled-fill-base;
$input-disabled-border: $disabled-border-base;
$input-disabled-color: $disabled-color-base;
$input-disabled-placeholder-color: #C0CCDA;
$input-large-font-size: 16px;
$input-large-height: 42px;
$input-small-font-size: 13px;
$input-small-height: 30px;
$input-mini-font-size: 12px;
$input-mini-height: 22px;

/* Cascader*/

$cascader-menu-fill: $fill-base;
$cascader-menu-font-size: $font-size-base;
$cascader-menu-radius: $border-radius-base;
$cascader-menu-border: $border-base;
$cascader-menu-border-color: $border-color-base;
$cascader-menu-border-width: $border-width-base;
$cascader-menu-color: $font-color-base;
$cascader-menu-option-color-active: $color-blue;
$cascader-menu-option-fill-active: rgba($color-blue, 0.12);
$cascader-menu-option-color-hover: $font-color-base;
$cascader-menu-option-fill-hover: rgba($color-black, 0.06);
$cascader-menu-option-color-disabled: #999;
$cascader-menu-option-fill-disabled: rgba($color-black, 0.06);
$cascader-menu-option-empty-color: #666;
$cascader-menu-group-color: #999;
$cascader-menu-shadow: 0 1px 2px rgba($color-black, 0.14),
0 0 3px rgba($color-black, 0.14);
$cascader-menu-option-pinyin-color: #999;
$cascader-menu-submenu-shadow: 1px 1px 2px rgba($color-black, 0.14),
1px 0 2px rgba($color-black, 0.14);

/* Group*/

$group-option-flex: 0 0 (1/5) * 100%;
$group-option-offset-bottom: 12px;
$group-option-fill-hover: rgba($color-black, 0.06);
$group-title-color: $color-black;
$group-title-font-size: $font-size-base;
$group-title-width: 66px;

/* Tab*/

$tab-font-size: $font-size-base;
$tab-border-line: 1px solid #e4e4e4;
$tab-header-color-active: $color-blue;
$tab-header-color-hover: $font-color-base;
$tab-header-color: $font-color-base;
$tab-header-fill-active: rgba($color-black, 0.06);
$tab-header-fill-hover: rgba($color-black, 0.06);
$tab-vertical-header-width: 90px;
$tab-vertical-header-count-color: $color-white;
$tab-vertical-header-count-fill: $color-blue;
$tab-horizontal-border: 2px solid #438de0;

/* Button*/

$button-font-size: 14px;
$button-border-radius: $border-radius-base;
$button-paddding: 5px 20px;
$button-padding-vertical: 10px;
$button-padding-horizontal: 15px;
$button-large-font-size: 16px;
$button-large-padding-vertical: 11px;
$button-large-padding-horizontal: 19px;
$button-small-font-size: 12px;
$button-small-padding-vertical: 7px;
$button-small-padding-horizontal: 9px;
$button-mini-font-size: 12px;
$button-mini-padding-vertical: 4px;
$button-mini-padding-horizontal: 4px;
$button-default-color: #1F2D3D;
$button-default-fill: $color-white;
$button-default-border: #c4c4c4;
$button-ghost-color: #666;
$button-ghost-fill: transparent;
$button-ghost-border: none;
$button-disabled-color: #C0CCDA;
$button-disabled-fill: #EFF2F7;
$button-disabled-border: #D3DCE6;
$button-primary-border: $color-primary;
$button-primary-color: $color-white;
$button-primary-fill: $color-primary;
$button-success-border: $color-success;
$button-success-color: $color-white;
$button-success-fill: $color-success;
$button-warning-border: $color-warning;
$button-warning-color: $color-white;
$button-warning-fill: $color-warning;
$button-danger-border: $color-danger;
$button-danger-color: $color-white;
$button-danger-fill: $color-danger;
$button-info-border: $color-info;
$button-info-color: $color-white;
$button-info-fill: $color-info;
$button-hover-tint-percent: 20%;
$button-active-shade-percent: 10%;

/* cascader*/

$cascader-height: 200px;

/* Switchzk- */

$switch-on-color: $color-primary;
$switch-off-color: #C0CCDA;
$switch-disabled-color: #E5E9F3;
$switch-disabled-text-color: #F9FAFC;
$switch-font-size: $font-size-base;
$switch-core-border-radius: 12px;
$switch-size: 46px 22px;
$switch-button-size: 16px;

/* Dialogzk- */

$dialog-background-color: $color-blue;
$dialog-footer-background: $color-blue-lighter;
$dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
$dialog-tiny-width: 30%;
$dialog-small-width: 50%;
$dialog-large-width: 90%;
$dialog-close-color: $color-grey;
$dialog-close-hover-color: $color-primary;
$dialog-title-font-size: 16px;
$dialog-font-size: 14px;

/* Tablezk- */

$table-border-color: #e0e6ed;
$table-text-color: #1f2d3d;
$table-header-background: #EFF2F7;

/* Paginationzk- */

$pagination-font-size: 13px;
$pagination-fill: $color-white;
$pagination-color: $link-color;
$pagination-border-radius: 2px;
$pagination-button-color: #99a9bf;
$pagination-button-size: 28px;
$pagination-button-disabled-color: #e4e4e4;
$pagination-button-disabled-fill: $color-white;
$pagination-border-color: #D3DCE6;
$pagination-hover-fill: $color-primary;
$pagination-hover-color: $color-white;

/* Popoverzk- */

$popover-fill: $color-white;
$popover-font-size: 12px;
$popover-border-color: #d3dce6;
$popover-arrow-size: 6px;
$popover-padding: 10px;
$popover-title-font-size: 13px;
$popover-title-color: #1f2d3d;

/* Tooltip*/

$tooltip-fill: #1f2d3d;
$tooltip-color: $color-white;
$tooltip-font-size: 12px;
$tooltip-border-color: #1f2d3d;
$tooltip-arrow-size: 6px;
$tooltip-padding: 10px;

/* Tag*/

$tag-padding: 0 5px;
$tag-fill: $border-color-hover;
$tag-border: $border-color-hover;
$tag-color: $color-white;
$tag-close-color: #666;
$tag-font-size: 12px;
$tag-border-radius: 4px;
$tag-gray-fill: #e5e9f2;
$tag-gray-border: #e5e9f2;
$tag-gray-color: $link-color;
$tag-primary-fill: rgba(32, 159, 255, 0.10);
$tag-primary-border: rgba(32, 159, 255, 0.20);
$tag-primary-color: $color-primary;
$tag-success-fill: rgba(18, 206, 102, 0.10);
$tag-success-border: rgba(18, 206, 102, 0.20);
$tag-success-color: $color-success;
$tag-warning-fill: rgba(247, 186, 41, 0.10);
$tag-warning-border: rgba(247, 186, 41, 0.20);
$tag-warning-color: $color-warning;
$tag-danger-fill: rgba(255, 73, 73, 0.10);
$tag-danger-border: rgba(255, 73, 73, 0.20);
$tag-danger-color: $color-danger;

/* Dropdown*/

$dropdown-menu-box-shadow: $box-shadow-dark;
$dropdown-menuItem-hover-fill: #e5e9f2;
$dropdown-menuItem-hover-color: $link-color;

/* Badge*/

$badge-fill: $color-danger;
$badge-radius: 10px;
$badge-font-size: 12px;
$badge-padding: 6px;
$badge-size: 18px;

/* Cardzk-*/

$card-border-color: $disabled-border-base;
$card-border-radius: 2px;
$card-padding: 20px;

/* Sliderzk-*/

$slider-main-background-color: $color-primary;
$slider-runway-background-color: #e5e9f2;
$slider-button-hover-color: $color-hover;
$slider-stop-background-color: $color-grey;
$slider-disable-color: $color-grey;
$slider-margin: 16px 0;
$slider-border-radius: 3px;
$slider-height: 4px;
$slider-button-size: 12px;
$slider-button-wrapper-size: 36px;
$slider-button-wrapper-offset: -16px;

/* Stepszk-*/

$steps-border-color: $disabled-border-base;
$steps-border-radius: 4px;
$steps-padding: 20px;

/* Stepszk-*/

$menu-item-color: $link-color;
$menu-item-fill: #eff2f7;
$menu-item-hover-fill: #d3dce6;
$submenu-item-fill: #e5e9f2;
$dark-menu-item-color: $link-color;
$dark-menu-item-fill: #474b4f;
$dark-menu-item-hover-fill: $link-color;
$dark-submenu-item-fill: #1f2d3d;

/* Ratezk-*/

$rate-height: 20px;
$rate-font-size: $font-size-base;
$rate-icon-size: 18px;
$rate-icon-margin: 6px;
$rate-icon-color: #C6D1DE;

/* DatePickerzk-*/

$datepicker-color: $link-color;
$datepicker-off-color: #ddd;
$datepicker-header-color: $border-color-hover;
$datepicker-icon-color: #99a9bf;
$datepicker-trigger-color: #c0ccda;
$datepicker-border-color: #d3dce6;
$datepicker-inner-border-color: #e4e4e4;
$datepicker-cell-hover-color: #e5e9f2;
$datepicker-inrange-color: #D3ECFF;
$datepicker-inrange-hover-color: #AFDCFF;
$datepicker-active-color: $color-primary;
$datepicker-text-hover-color: #20a0ff;

/* Loading*/

$loading-spinner-size: 42px;
$loading-fullscreen-spinner-size: 50px;


//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;
$grid-breakpoints: (
127   xs: 0,
128   sm: 576px,
129   md: 768px,
130   lg: 992px,
131   xl: 1200px
132 ) !default;

$grid-gutter-width:         30px !default;
// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop:      (1140px + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;