$sans-serif-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;

// Border thicknesses
$none: 0 !default;
$border-thin: 1px !default;
$border-thick: 2px !default;

// Whites
$white-color: #fdfcfc !default;
$white-bg: #fff !default;

// Blacks
$black-bg: rgba(30, 30, 30, 0.97) !default;
$light-black: #444 !default;
$black-color: #2c2c2c !default;
$black-hr: #444 !default;
$dark-color: $black-color;

$text-color: $black-color !default;

// Backgrounds
$main-bg: #eef5fb !default;
$dark-background: #555 !default;
$pale-blue-bg: #dae4f1 !default;

// Opacities
$opacity-1: rgba(255, 255, 255, 0.1) !default;
$opacity-2: rgba(255, 255, 255, 0.2) !default;
$opacity-3: rgba(255, 255, 255, 0.3) !default;
$opacity-4: rgba(255, 255, 255, 0.4) !default;
$opacity-5: rgba(255, 255, 255, 0.5) !default;
$opacity-6: rgba(255, 255, 255, 0.6) !default;
$opacity-7: rgba(255, 255, 255, 0.7) !default;
$opacity-8: rgba(255, 255, 255, 0.8) !default;
$opacity-gray-1: rgba(200, 208, 218, 0.1) !default;
$opacity-gray-2: rgba(200, 208, 218, 0.2) !default;
$opacity-gray-3: rgba(200, 208, 218, 0.3) !default;
$opacity-gray-4: rgba(200, 208, 218, 0.4) !default;
$opacity-gray-5: rgba(200, 208, 218, 0.5) !default;
$opacity-gray-6: rgba(200, 208, 218, 0.6) !default;
$opacity-gray-7: rgba(200, 208, 218, 0.7) !default;
$opacity-gray-8: rgba(200, 208, 218, 0.8) !default;

// Datepicker
$datepicker-color-days: rgba(255, 255, 255, 0.8) !default;
$datepicker-color-old-new-days: rgba(255, 255, 255, 0.4) !default;

// Transparent BG
$transparent-bg: transparent !default;

// State colors
$default-color: #9cc0e8 !default;
$default-states-color: lighten($default-color, 6%) !default;
$default-color-opacity: rgba(182, 182, 182, 0.6) !default;

$primary-color: #4173a7 !default;
$primary-states-color: lighten($primary-color, 6%) !default;
$primary-color-opacity: rgba(249, 99, 50, 0.3) !default;
$primary-color-alert: rgba(249, 99, 50, 0.8) !default;

$success-color: #73c16b !default;
$success-states-color: lighten($success-color, 6%) !default;
$success-color-opacity: rgba(48, 167, 42, 0.3) !default;
$success-color-alert: rgb(107, 195, 103) !default;

$info-color: #5cc6d2 !default;
$info-states-color: lighten($info-color, 6%) !default;
$info-color-opacity: rgba(36, 144, 220, 0.3) !default;
$info-color-alert: rgba(143, 188, 220, 0.8) !default;

$warning-color: #e08e45 !default;
$warning-states-color: lighten($warning-color, 6%) !default;
$warning-color-opacity: rgba(255, 143, 26, 0.3) !default;
$warning-color-alert: rgb(228, 169, 62) !default;

$danger-color: #c55e5e !default;
$danger-states-color: lighten($danger-color, 6%) !default;
$danger-color-opacity: rgba(202, 37, 37, 0.3) !default;
$danger-color-alert: rgb(216, 96, 96) !default;

// Brand colors
$brand-primary: $primary-color !default;
$brand-primary-light: tint($brand-primary, 10%);
$brand-primary-lighter: tint($brand-primary, 25%);
$brand-primary-lightest: tint($brand-primary, 38%);
$brand-primary-dark: shade($brand-primary, 10%);
$brand-primary-darker: shade($brand-primary, 25%);
$brand-primary-darkest: shade($brand-primary, 38%);

$brand-info: $info-color !default;
$brand-success: $success-color !default;
$brand-warning: $warning-color !default;
$brand-danger: $danger-color !default;
$link-disabled-color: #666 !default;

// Grays
$gray-100: mix($brand-primary, $white-color, 2%);
$gray-200: mix($brand-primary, $white-color, 4%);
$gray-300: mix($brand-primary, $white-color, 8%);
$gray-400: mix(desaturate($brand-primary, 20%), $white-color, 16%);
$gray-500: mix(desaturate($brand-primary, 20%), $white-color, 24%);
$gray-600: mix(desaturate($brand-primary, 20%), $white-color, 32%);
$gray-700: mix(desaturate($brand-primary, 20%), $white-color, 40%);
$gray-800: mix(desaturate($brand-primary, 20%), $white-color, 48%);
$gray-900: mix(desaturate($brand-primary, 20%), $white-color, 56%);

$grays: (
  100: $gray-100,
  200: $gray-200,
  300: $gray-300,
  400: $gray-400,
  500: $gray-500,
  600: $gray-600,
  700: $gray-700,
  800: $gray-800,
  900: $gray-900
);

$light-gray: $gray-200;
$medium-gray: $gray-400;
$dark-gray: $gray-900;

// Colors
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;

$colors: (
  default: $default-color,
  blue: $blue,
  indigo: $indigo,
  purple: $purple,
  pink: $pink,
  red: $red,
  orange: $orange,
  yellow: $yellow,
  green: $green,
  teal: $teal,
  cyan: $cyan,
  white: $white,
  gray: $gray-600,
  gray-dark: $gray-800
);

// Lighter colors
$light-blue: rgba($primary-color, 0.2);
$light-azure: rgba($info-color, 0.2);
$light-green: rgba($success-color, 0.2);
$light-orange: rgba($warning-color, 0.2);
$light-red: rgba($danger-color, 0.2);

// Update the theme color map
$theme-colors: (
  default: $default-color,
  primary: $primary-color,
  secondary: $default-color,
  success: $success-color,
  info: $info-color,
  warning: $warning-color,
  danger: $danger-color,
  light: $gray-400,
  dark: $dark-color
);

// Padding
$padding-input-vertical: 11px !default;
$padding-input-horizontal: 19px !default;
$padding-btn-vertical: 0.7rem !default;
$padding-btn-horizontal: 1rem !default;
$padding-base-vertical: 0.7rem !default;
$padding-base-horizontal: 0.7rem !default;
$padding-nav-link-vertical: 0.2rem !default;
$padding-nav-link-horizontal: 0.7rem !default;
$padding-round-horizontal: 23px !default;
$padding-simple-vertical: 10px !default;
$padding-simple-horizontal: 17px !default;
$padding-large-vertical: 15px !default;
$padding-large-horizontal: 48px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 15px !default;

// $padding-xs-vertical:           1px !default;
// $padding-xs-horizontal:         5px !default;

$padding-label-vertical: 2px !default;
$padding-label-horizontal: 12px !default;
$margin-large-vertical: 30px !default;
$margin-base-vertical: 15px !default;
$margin-base-horizontal: 15px !default;
$margin-bottom: 10px !default;
$border: 1px solid !default;
$border-radius-extra-small: 0.125rem !default;
$border-radius-small: 0.1875rem !default;
$border-radius-base: 1rem !default;
$border-radius-large: 0.25rem !default;
$border-radius-extreme: 0.875rem !default;
$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
$btn-round-radius: 30px !default;
$height-base: 55px !default;
$btn-icon-size: 3.5rem !default;
$btn-icon-size-regular: 2.375rem !default;
$btn-icon-font-size-regular: 0.9375rem !default;
$btn-icon-font-size-small: 0.6875rem !default;
$btn-icon-size-small: 1.875rem !default;
$btn-icon-font-size-lg: 1.325rem !default;
$btn-icon-size-lg: 3.6rem !default;
$btn-icon-top-padding: 0.3rem !default;

// Fonts
$font-size-h1: 3.5em !default;
$font-size-h2: 2.5em !default;
$font-size-h3: 2em !default;
$font-size-h4: 1.714em !default;
$font-size-h5: 1.37em !default;
$font-size-h6: 1em !default;

$font-paragraph: 1em !default;
$font-size-navbar: 1em !default;
$font-size-mini: 0.7142em !default;
$font-size-small: 0.8571em !default;
$font-size-base: 14px !default;
$font-size-large: 1em !default;
$font-size-large-navbar: 20px !default;
$font-size-blockquote: 1.1em !default; // ~ 15px

$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semi: 600 !default;
$font-weight-bold: 700 !default;

// Line Heights
$line-height-general: 1.5 !default;
$line-height-nav-link: 1 !default;
$btn-icon-line-height: 2.4em !default;
$line-height: 1.35em !default;
$line-height-lg: 54px !default;
$border-radius-top: 10px 10px 0 0 !default;
$border-radius-bottom: 0 0 10px 10px !default;
$dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
$box-shadow-raised: 0 10px 25px 0 rgba(0, 0, 0, 0.3);
$general-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.25);
$light-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.25);
$dropdown-coordinates: 29px -50px !default;
$select-coordinates: 50% -40px !default;

// Tranasitions and Timing
$general-transition-time: 300ms !default;
$slow-transition-time: 370ms !default;
$fast-transition-time: 150ms !default;
$transition-linear: linear !default;
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1);
$transition-ease: ease 0s;

$navbar-margin-a: 15px 0;
$padding-social-a: 10px 5px;
$navbar-margin-a-btn: 15px 0;
$navbar-margin-a-btn-round: 16px 0;
$navbar-padding-a-icons: 6px 15px;
$navbar-margin-a-icons: 6px 3px;
$navbar-padding-base: 0.5rem;

$navbar-margin-brand-icons: 12px auto;
$navbar-margin-btn: 15px 3px;
$height-icon-sm: 32px;
$width-icon-sm: 32px;
$padding-icon-sm: 4px;
$border-radius-icon-sm: 7px;
$height-icon-message: 40px;
$width-icon-message: 40px;
$height-icon-message-sm: 20px;
$width-icon-message-sm: 20px;
$white-navbar: rgba(#fff, 0.96);
$primary-navbar: rgba(#34acdc, 0.98);
$info-navbar: rgba(#5bcaff, 0.98);
$success-navbar: rgba(#4cd964, 0.98);
$warning-navbar: rgba(#ff9500, 0.98);
$danger-navbar: rgba(#ff4c40, 0.98);
$topbar-x: topbar-x !default;
$topbar-back: topbar-back !default;
$bottombar-x: bottombar-x !default;
$bottombar-back: bottombar-back !default;

// Social icons color
$social-twitter: #55acee !default;
$social-twitter-state-color: darken(#55acee, 5%) !default;
$social-facebook: #3b5998 !default;
$social-facebook-state-color: darken(#3b5998, 5%) !default;
$social-google: #dd4b39 !default;
$social-google-state-color: darken(#dd4b39, 5%) !default;
$social-linkedin: #0077b5 !default;
$social-linkedin-state-color: darken(#0077b5, 5%) !default;
$zindex-navbar-fixed: 1030;

// Side Nav
$side-nav-transition: 250ms cubic-bezier(0.47, 0, 0.745, 0.715);
$side-nav-width: 255px;
$side-nav-menu-background-color: #2e4261;
$side-nav-header-bg-color: #2e4261;
$side-nav-header-bg-link-color: lighten($brand-primary, 25%);
$side-nav-header-link-hover-color: white;
$side-nav-header-color: white;
$side-nav-header-padding: 1rem;
$side-nav-menu-item-vertical-padding: 0.8rem;
$side-nav-menu-item-horizontal-padding: 0.8rem;
$side-nav-menu-item-active-border-width: 2px;
$side-nav-menu-right-border-color: transparent;
$side-nav-text-color: darken(#0077b5, 5%);
$side-nav-menu-item-background-color: #395379;
$side-nav-menu-item-icon-color: #4d80b8;
$side-nav-menu-item-color: lighten($brand-primary, 25%);
$side-nav-menu-item-active-color: $white-color;
$side-nav-menu-item-hover-color: $white-color;
$side-nav-sub-menu-item-vertical-padding: 0.3rem;
$side-nav-sub-menu-item-horizontal-padding: 0.8rem;
$side-nav-menu-footer-background-color: #2e4261;

// Tooltips
$tooltip-bg: lighten($brand-primary, 25%);

// Timelines
$left-timeline-item-background-color: #fff;
$left-timeline-item-padding: 1rem;

// Gradients
$gradient-1: linear-gradient(180deg, #5a94ff 25%, #d87278 100%);
$gradient-2: linear-gradient(180deg, #a4d0de 25%, #e3313a 100%);
$gradient-3: linear-gradient(180deg, #a1bdcc 25%, #f4f8c1 100%);
$gradient-4: linear-gradient(180deg, #fac043 25%, #e13b36 100%);
$gradient-5: linear-gradient(180deg, #2ae374 25%, #f7f9bc 100%);
$gradient-floor-fade: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.6) 90%
  )
  no-repeat scroll 0 0;
$gradient-roof-fade: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 90%,
    rgba(0, 0, 0, 0.6) 40%,
    transparent 100%
  )
  no-repeat scroll 0 0;
$gradient-white-to-alpha: linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

// Card Acivity Feed
$card-activity-feed-label-bg: $gray-400;
$card-activity-feed-timeline-thread-bg: $gray-400;
$card-activity-feed-item-icon-color: $gray-100;
$card-activity-feed-item-icon-bg: $gray-800;

// Card Chat
$card-chat-bg: $gray-400;

$switch-width: 90px;
$switch-height: 40px;
$gray-light: $gray-700;

$navbar-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);

$card-header-bg: transparent !default;
$card-header-border-color: $medium-gray !default;

$metric-card-detail-bg: $opacity-7;
$metric-card-detail-color: $text-color;
$metric-card-detail-border-radius: 4px;

$navbar-brand-color: $white-color;

$navbar-background: $brand-primary;

$button-default-bg: $white-color;
$button-default-state-bg: $gray-400;
$button-default-color: $brand-primary;

$dropdown-bg: white;
$dropdown-item-color: black;

$form-input-focus-background: transparent;
$form-input-placeholder: lighten($primary-color, 10%);
$form-input-color: $brand-primary;
$form-input-has-danger-focus-bg: transparent;
$form-input-bg: transparent;
$form-input-disabled-bg: $light-gray;

$checkbox-check: $brand-primary;

$input-group-focus-bg: transparent;

$landing-nav-bg: transparent;
$landing-nav-color: $dark-color;
$landing-nav-brand-color: $dark-color;

$pagination-color: $black-color;
$pagination-bg: $default-color;
$pagination-hover-color: $black-color;
$pagination-hover-bg: $opacity-gray-3;

$pagination-disabled-bg: #e0e7ef;
$pagination-disabled-color: #4e5763;

$progress-bar-bg: $gray-400;
$progress-bar-color: $brand-primary;

$card-sheet-bg: $white-color;
$listgroup-item-border-color: 1px solid rgba(228, 228, 228, 0.23) !default;
$listgroup-item-disabled-color: rgba($gray-400, 0.5);
$listgroup-item-disabled-bg: rgba($gray-300, 0.2);

$scaffold-page-header-bg: $white-color;
$scaffold-page-header-color: $text-color;

$nav-stacked-active-link-bg: $white-color;
$nav-stacked-link-border-color: $gray-400;
$nav-stacked-link-hover-bg: $gray-400;
$nav-stacked-chevron-bg: $white-color;

$plan-selector-active-bg: $gray-200;

$style-scrollbar: true !default;
$scrollbar-width: 0.15em !default;
$scrollbar-foreground: $brand-primary !default;
$scrollbar-background: mix($brand-primary, white, 50%) !default;