$default: #ffffff; // default colors for layout
$body-bg: #F0F3F4; // default bg color
$black-color: #000000;

// color scheme
$primary: #017170 !default;
$info: #3498db !default;
$success: #287562 !default;
$warning: #f39c12 !default;
$danger: #e74c3c !default;

$primary-light: tint($primary, 30%);
$info-light: tint($info, 30%);
$success-light: tint($success, 30%);
$warning-light: tint($warning, 30%);
$danger-light: tint($danger, 30%);

$primary-dark: shade($primary, 15%);
$info-dark: shade($info, 15%);
$success-dark: shade($success, 15%);
$warning-dark: shade($warning, 15%);
$danger-dark: shade($danger, 15%);

$primary-bg: tint($primary, 20%);
$info-bg: tint($info, 20%);
$success-bg: tint($success, 20%);
$warning-bg: tint($warning, 20%);
$danger-bg: tint($danger, 20%);

// sidebar colors
$sidebar: #23282d;
$sidebar-text: #ffffff;
$sidebar-sublist: #32373c;
$sidebar-border: #101920;

$topbar: #23282d;
$topbar-text: #ffffff;
$topbar-border: $sidebar-border;

$default-text: $default; // default text color layout (usually is the same as $default)
$content-text: $default-text; // content text color on card, panels, form, etc
$help-text: rgba($default-text, 0.5); // additional text color for hits

$label-text: $default-text; // labels color
$border: rgba(255, 255, 255, 0.5); // border color
$border-light: rgba(255, 255, 255, 0.3); // lighter version of border color (for hovers)
$input-border: $sidebar-sublist; // input border color
$input-background: rgba($sidebar-sublist, 0.5);; // input border color for hover
$disabled: $input-border; // color for disabled state
$disabled-bg: tint($disabled, 15%); // background color for disable state
$dropdown-text: #7d7d7d; // dropdown text color

// specific components colors
$mail-box: whitesmoke;
$auth-panel-background: #ffffff;
$progress-background: rgba(0, 0, 0, 0.15);
$progress-default: rgba($default-text, 0.95);

// bootstrap card panel styles
$bootstrap-panel-radius: 7px;
$bootstrap-panel-text: #ffffff;
$bootstrap-panel-bg: rgba(255, 255, 255, 0.1);
$bootstrap-panel-header-bg: $topbar;
$bootstrap-panel-header-border: 1px solid $topbar-border;
$bootstrap-panel-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);

// link colors
$activelink: $default;
$hoverlink: $primary;

$font-family: 'DINRegular', "PingFang SC", -apple-system, BlinkMacSystemFont, 'Roboto', 'Century Gothic', BlinkMacSystemFont, 'Segoe UI', 'Microsoft yahei', '微软雅黑', 'Helvetica Neue', sans-serif, SimHei;

$resXXL: 1280px;
$resXL: 1170px;
$resL: 991px;
$resM: 768px;
$resS: 660px;
$resXS: 500px;
$resXXS: 435px;
$resMin: 320px;

$header-height: 45px;
$sidebar-width: 190px;

$small-card-height: 114px;
$xsmall-card-height: 187px;
$medium-card-height: 400px;
$extra-medium-card-height: 550px;
$large-card-height: 974px;

$default-animation-duration: 0.2s;
$default-animation-style: ease-out;

$assets-root: '/assets/';
$images-root: $assets-root + 'images/';
$fonts-root: $assets-root + 'fonts/';
$font-thin: 100;
$font-light: 300;
$font-normal: 400;
$font-bold: 700;
$font-bolder: 500;
$font-ultraBold: 900;

$gap: 1rem;
$gap-xs: $gap * 0.618;
$gap-lg: $gap-xs * 3;
$radius-xs: 1px;
$radius-sm: 4px;
$radius-lg: 8px;

$font-size-base: 1rem;
$font-size-lg: $font-size-base * 1.25;
$font-size-sm: $font-size-base * .86;

$z-index-header: 999;
$z-index-sidebar-xs: 998;
$z-index-sidebar: 997;
$z-index-main: 997;
$z-index-main-markdown: 1;
$z-index-main-backtop: 1;
