$color-background-text: whitesmoke;
$bloomeBackGroundColor:#1b75bb;
$light-Purple:#00ADEF;
$color-border: #747c83;
$color-black: #000;
$color-white-smoke: whitesmoke;
$color-white: #ffffff;
$color-text: #6a696a;
$color-white: #fff;
$purple: #5f249f;//$light-Purple;
$color-title:#f1f1f1;
$color-yellow: #ffff10;
$color-red:red;
$color-black: black;
$color-gray:gray;
$color-blue:blue;
$color-whitedark:white;
$color-purple:$purple;
$color-yellow:yellow;
$color-whitesmoke:#c1c1c1;
$color-blacktext:#1d1d1d;
$background-grayout:#D9D9D959;
$gray-whitesmoke:#8888884f;
$backgroundcolor-white:#f9f9f9;
$font-path: "../fonts" !default;
$dxc-purple: #5f249f;
$font-family-regular: "SourceSansProRegular";
$font-family-light: "SourceSansPro-Light";
$font-family-semibold: "SourceSansPro-Semibold";
$font-family-black: "SourceSansPro-Black";
$font-family-bold: "SourceSansPro Bold";
$font-family: "Open Sans";
// Typography
$font-h1: 66px;
$font-h2: 49px;
$font-h3: 37px;
$font-h4: 28px;
$font-h5: 20px;
$font-h6: 25px;
$font-h7: 18px;
$font-h8: 24px;
$font-34: 34px;
$font-45: 45px;
$font-30: 30px;
$font-default: 15px;
$font-10: 10px;
$font-12: 12px;
$font-13: 13px;
$font-14: 14px;
$font-16: 16px;
$font-17: 17px;
$font-18: 18px;
$font-20: 20px;
$blue: #0067b3;
$blue-link:#3498db;
$blue-pink:#005FCC;
$gray: #e0e0e0;
$gray-dark: #4f4f4f;
$gray-pink:#ffffffad;
$gray-boarder:#dad2d29e;
$green: #41ce50;
$green-light:#8acc60;
$green-dark:#004040;
$white: #ffffff;
$white-link:#e5e5e5;
$white-gray: #f8f8f8;
$white-color:#F2EAFA;
$background-white:#EEEEEE;
$yellow: #b7f848;
$violet: #b399ff;
$cyan: #7df3ee;
$red: #e42b07;
$red-dark:#D0011B;
$black: #000000;
$black-box:#00000029;
$black-shadow: #0e0d0d63;
$black-white:#212529;
$grey: #dcdcdc;
$gray-link:#C8C8C8 ;
$white-light:#f5f5f5;
$white-pink:#F7F7F7;
$purple-gray: #f5ebf9;
$border: $gray;
$gray-light: #888888;
$gray-white:#888;
$light-purple: #6F2C9180;
$bold-purple: #6F2C91;
$blue-link: #006BF6;
$blue-box:#0095ff;
$blue-grey: #7db1d8;
$dark-grey: #666666;
$dark-gray:#676767;
$white-gray: #d9d9d9;
$white-purple:#F2F2F2;
$grey-light: gainsboro;
// Colors
$primary: $white-gray !default;
$color-title: $gray !default;
$text-gray: $gray-dark !default;
//Button
$btn-border-width: 1px;
//Background
$bg-primary: $primary !default;
//Space
$distance: 8px;
//border
$border-gray: 1px solid $border !default;
$shadow: 0 2px 6px 0 rgba(222, 222, 222, 0.5);
$box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14);
$cusor-pointer:pointer;
@mixin common-border {
  border: 1px solid !important;
}

// responsive
$breakpoints: (
  "mobile": (
    max-width: 500px,
  ),
  "mobile-big": (
    max-width: 576px,
  ),
  "tablet": (
    max-width: 767px,
  ),
  "tablet-big": (
    max-width: 1024px,
  ),
  "desktop": (
    min-width: 1025px,
  ),
) !default;

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }
}

$breakpoints-between: (
  "xxs": 350px,
  "xs": 500px,
  "sm": 768px,
  "md": 992px,
  "lg": 1024px,
  "xl": 1200px,
  "xxl": 1400px,
) !default;

@mixin respond-between($lower, $upper) {
  @if map-has-key($breakpoints-between, $lower) and
    map-has-key($breakpoints-between, $upper)
  {
    $lower-breakpoint: map-get($breakpoints-between, $lower);
    $upper-breakpoint: map-get($breakpoints-between, $upper);

    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  }
}

//Custom scrollbar
@mixin custom-scrollbar {
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: $gray !important;
    border-radius: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 1px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background-color: $gray !important;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: $gray !important;
  }
}