// -------------------------------
// Theme Fonts
// -------------------------------
// Google Fonts For the Theme
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap');

// ----------------------------------
// All Colors of Bootstrap Overrides
// ----------------------------------

$white: #fff !default;
$gray-100: #e8eaec !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #b8c3d5 !default;
$gray-600: #6c757d !default;
$gray-700: #4F5467 !default;
$gray-800: #1c2d41 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$blue: #5f76e8 !default;
$indigo: #6610f2 !default;
$purple: #5f76e8 !default;
$pink: #e83e8c !default;
$red: #ff4f70 !default;
$orange: #fb8c00 !default;
$yellow: #fdc16a !default;
$green: #22ca80 !default;
$teal: #20c997 !default;
$cyan: #01caf1 !default;

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $purple !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$cyan: $cyan !default;
$orange: $orange !default;
$theme-colors: (
    ) !default;

$theme-colors: map-merge(("primary": $primary,
            "secondary": $secondary,
            "success": $success,
            "info": $info,
            "warning": $warning,
            "danger": $danger,
            "light": $light,
            "dark": $dark,
            "cyan": $cyan,
            "orange": $orange,
            "purple": $purple),
        $theme-colors
);

// -----------------------------------------------
// Typography
// -----------------------------------------------

$font-size-base: 1rem;
$font-family-sans-serif: 'Rubik',
    sans-serif !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;

$h1-font-size: 36px !default;
$h2-font-size: 30px !default;
$h3-font-size: 21px !default;
$h4-font-size: 18px !default;
$h5-font-size: 16px !default;
$h6-font-size: 14px !default;

// -----------------------------------
// Typography Settings of Fonts
// -----------------------------------

$headings-margin-bottom: (
    1rem / 2) !default;
$headings-font-weight: 400 !default;

// Common
$min-contrast-ratio: 1.7 !default;


// ------------------------------------------------------------------------
// Quickly modify global styling by enabling or disabling optional features.
// ------------------------------------------------------------------------

$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
$enable-negative-margins: true !default;

// --------------------------------
// Body Color & bgColor Settings
// --------------------------------

$body-bg: #f9fbfd !default;
$body-color: #7c8798 !default;

// -------------------------------
// Grid Settings
// -------------------------------
$grid-gutter-width: 30px !default;

$sizes: (
    ) !default;
$sizes: map-merge((25: 25%,
            30: 30%,
            35: 35%,
            40: 40%,
            50: 50%,
            75: 75%,
            100: 100%,
            auto: auto),
        $sizes
);


// Spacer
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: 10px,
  7: 20px,
  8: 30px,
) !default;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1170px,
  xl: 1200px,
  xxl: 1400px
) !default;


// -------------------------------
// Breadcrumbs Settings
// -------------------------------
$breadcrumb-bg: $body-bg;
$breadcrumb-margin-bottom: 1.5rem;

// -------------------------------
// Dropdowns Settings
// -------------------------------
$dropdown-item-padding-x: 1rem !default;
$dropdown-item-padding-y: .65rem !default;
$dropdown-border-color: $gray-200;
$dropdown-divider-bg: $gray-100;
$dropdown-link-color: $gray-600 !default;
$dropdown-box-shadow: 1px 1px 15px rgba(0, 0, 0, .1) !default;
$dropdown-border-width: 0 !default;

// -------------------------------
// Buttons Settings
// -------------------------------
$btn-secondary-border: $gray-300;

// -------------------------------
// Tables
// -------------------------------

$table-bg-hover: $gray-100;
$table-hover-bg: $gray-100 !default;
$table-cell-padding-y: 16px !default;
$table-cell-padding-x: 16px !default;
$table-border-color: #e8eef3 !default;

// -----------------------------------
// Components active Colors Settings
// -----------------------------------
$component-active-color: $white !default;
$component-active-bg: $blue !default;

// -------------------------------
// Forms
// -------------------------------
$input-padding-y: 6px;
$input-padding-x: 12px;
$input-color: $gray-700 !default;
$input-bg: transparent !default;
$input-group-addon-bg: $gray-100;
$input-border-color: $gray-200 !default;
$form-check-label-color: #7c8798 !default;
$form-select-box-shadow: unset !default;
$input-group-addon-border-color: $gray-200 !default;
$input-btn-focus-color: rgba(0, 0, 0, .25) !default;
$input-focus-border-color: rgba(0, 0, 0, 0.25) !default;
$custom-control-indicator-active-bg: rgba(0, 0, 0, 35%) !default;
$custom-select-indicator: url(../../assets/images/custom-select.png) !default;
$input-btn-focus-box-shadow: transparent !default;
$custom-select-focus-box-shadow: transparent !default;
$custom-select-indicator: str-replace(url(""), "%23") !default;
$custom-select-color: $gray-500;


// Input
$form-label-color: $dark;
$form-label-margin-bottom: .5rem;

// -------------------------------
// Border settings
// -------------------------------

$border-width: 1px !default;
$border-color: #edf2f9 !default;
$border-radius: 2px !default;
$border-radius-lg: 2px !default;
$border-radius-sm: 1px !default;

// -------------------------------
// Progress bars settings
// -------------------------------

$progress-bg: rgba(0, 0, 0, .05) !default;
$progress-border-radius: .25rem !default;

// -------------------------------
// Tabs active bg settings
// -------------------------------

$nav-tabs-link-active-bg: $white !default;

// -------------------------------
// Navbar dark & light font colors
// -------------------------------

$navbar-dark-color: rgba($white, .5) !default;
$navbar-dark-hover-color: rgba($white, 1) !default;
$navbar-light-color: #b8c3d5 !default;
$navbar-light-hover-color: rgba($dark, 1) !default;

// -------------------------------
// Card Related Settings Here
// -------------------------------

$card-spacer-y: 25px !default;
$card-spacer-x: 25px !default;
$card-border-width: 0 !default;
$card-bg: $white !default;
$card-border-radius: .25rem !default;
$card-border-color: $gray-200 !default;
$card-columns-margin: 20px !default;

// -------------------------------
// Badge
// -------------------------------

$badge-font-weight: 400 !default;
$badge-pill-padding-x: 0.5rem !default;
$badge-padding-y: 4px;
$badge-padding-x: 10px;
$badge-color: $white;
$link-hover-decoration: none !default;


// Shadow

$box-shadow-sm: 0px 2px 9px 0px rgba(169, 184, 200, 0.2) !default;

$text-muted: #9eabc0 !default;
$input-placeholder-color: $navbar-light-color !default;

// Shadow
$list-group-item-padding-y: 12px !default;
$list-group-item-padding-x: 20px !default;
$list-group-bg: transparant !default;

// Alert
$alert-padding-y: 12px !default;
$alert-padding-x: 20px !default;