:root,
[data-bs-theme="light"] {


  // ----------------------------------
  @each $color,
  $value in $theme-colors {
    --#{$prefix}#{$color}: #{$value};
    /* ------------------------------ Colored Link ------------------------------ */
    --#{$prefix}colored-link-hover-color-#{$color}: #{if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage))};
  }

  @each $color,
  $value in $grays {
    --#{$prefix}gray-#{$color}: #{$value};
    /* ------------------------------ Colored Link ------------------------------ */
    --#{$prefix}colored-link-hover-color-#{$color}: #{if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage))};
  }

  @each $color,
  $value in $brand-colors {
    --#{$prefix}#{$color}: #{$value};
  }

  //----------------------- rgb color ----------------------------------
  @each $color,
  $value in $grays-rgb {
    --#{$prefix}gray-#{$color}-rgb: #{$value};
  }

  @each $color,
  $value in $brand-colors-rgb {
    --#{$prefix}#{$color}-rgb: #{$value};
  }

  --#{$prefix}dark-rgb: #{to-rgb(map-get($theme-colors, 'dark'))};
  --#{$prefix}light-rgb: #{to-rgb(map-get($theme-colors, 'light'))};

  /* -------------------------------- Font family ------------------------------- */
  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
  --#{$prefix}font-base: #{inspect($font-family-base)};


  /* -------------------------------- Border ------------------------------- */

  --#{$prefix}global-border-style: solid;
  --#{$prefix}border-color: #{map-get($grays, '300')};
  --#{$prefix}btn-disabled-border-color: transparent;


  --#{$prefix}top-nav-height: 4.3125rem;
  @include media-breakpoint-up(lg) {
    &.double-top-nav-layout {
      --#{$prefix}top-nav-height: 8.688rem;
    }
  }


  /* ------------------------------ Reveal Button ----------------------------- */
  --#{$prefix}btn-reveal-color: #{dark};
  --#{$prefix}btn-reveal-bg: #{shade-color($white, 10%)};
  --#{$prefix}btn-reveal-border-color: #{shade-color($white, 12.5%)};

  /* --------------------------------- Button --------------------------------- */
  // --#{$prefix}btn-hover-color: transparent ;
  // --#{$prefix}btn-hover-bg: transparent ;
  --#{$prefix}btn-hover-border-color: transparent;



  /* ------------------------------ Falcon Button ----------------------------- */

  // --#{$prefix}btn-falcon-background: var(--#{$prefix}white);
  --#{$prefix}btn-falcon-background: #{$white};
  --#{$prefix}btn-disabled-color: #4d5969;
  --#{$prefix}btn-falcon-box-shadow: #{0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba($black, 0.07), 0 1px 2px 0 rgba($black, 0.08)};
  --#{$prefix}btn-falcon-hover-box-shadow: #{0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.1), 0 3px 9px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba($black, 0.08), 0 1px 2px 0 rgba($black, 0.08)};

  --#{$prefix}btn-falcon-default-color: #{map-get($grays, '800')};
  --#{$prefix}btn-falcon-default-hover-color: #{shift-color(map-get($grays, '800'), 17%)};
  --#{$prefix}btn-falcon-default-active-background: #{shade-color($white, 10%)};
  --#{$prefix}btn-falcon-default-active-border: #{shift-color(map-get($grays, '800'), 17%)};
  --#{$prefix}btn-active-border-color: transparent;


  @each $color,
  $value in $theme-colors {
    /* ------------------------------ Falcon button ----------------------------- */
    --#{$prefix}btn-falcon-#{$color}-color: var(--#{$prefix}#{$color});
    --#{$prefix}btn-falcon-#{$color}-hover-color: #{shift-color($value, 17%)};
    --#{$prefix}btn-falcon-#{$color}-active-background: #{shift-color($value, -80%)};
    --#{$prefix}btn-falcon-#{$color}-active-color: #{shift-color($value, 17%)};

    /* ---------------------------------- Alert --------------------------------- */
    .alert-#{$color} {
      --#{$prefix}alert-bg: #{shift-color($value, $alert-bg-scale)};
      --#{$prefix}alert-border-color: #{shift-color($value, $alert-border-scale)};
      --#{$prefix}alert-color: #{shift-color($value, $alert-color-scale)};
      --#{$prefix}alert-link-color-#{$color}: #{shade-color($value, 20%)};
    }

    /* ------------------------------- List Group ------------------------------- */
    --#{$prefix}list-group-item-background-#{$color}: #{shift-color($value, $list-group-item-bg-scale)};
    --#{$prefix}list-group-item-color-#{$color}: #{shift-color($value, $list-group-item-color-scale)};

    .list-group {
      --#{$prefix}list-group-bg: #{$white};
      --#{$prefix}list-group-action-hover-color: #{map-get($grays, '700')};
      --#{$prefix}list-group-action-hover-bg: #{map-get($grays, '100')};
      // -- new 5.2 -----
      --#{$prefix}list-group-disabled-bg: #{$white};
    }

    /* ---------------------------------- Badge --------------------------------- */
    --#{$prefix}badge-subtle-#{$color}-background-color: #{shift-color($value, -80%)};

    @if $color =='secondary' {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, -6.4%)};
    }

    @else if $value =='warning' {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, 20%)};
    }

    @else if $value =='danger' {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, 36%)};
    }

    @else {
      --#{$prefix}badge-subtle-#{$color}-color: #{shift-color($value, 36%)};
    }
  }

  --#{$prefix}transparent-50: #{rgba($white, 0.5)};


  /* --------------------------------- Shadow --------------------------------- */
  --#{$prefix}box-shadow: #{0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07)};
  --#{$prefix}box-shadow-sm: #{ 0 .125rem .25rem rgba($black, .075)};
  --#{$prefix}box-shadow-lg: #{0 1rem 4rem rgba($black, 0.175)};
  --#{$prefix}box-shadow-inset: #{inset 0 1px 2px rgba($black, .075)};

  --#{$prefix}component-active-color: #{map-get($theme-colors, 'white')};
  --#{$prefix}component-active-bg: #{$component-active-bg};


  --#{$prefix}text-muted: #{map-get($grays, '600')};

  --#{$prefix}blockquote-footer-color: #{map-get($grays, '600')};

  // --#{$prefix}hr-color: var(--#{$prefix}border-color); // Review
  --#{$prefix}hr-opacity: 0.25;

  --#{$prefix}mark-bg: #fcf8e3; // Review

  // Need To Work
  --#{$prefix}input-btn-focus-color: #{rgba($component-active-bg, $input-btn-focus-color-opacity)};

  --#{$prefix}btn-link-color: #{$btn-link-color};
  --#{$prefix}btn-link-hover-color: #{$link-hover-color};
  --#{$prefix}btn-disabled-color: #{map-get($grays, '600')};

  --#{$prefix}heading-color: #{map-get($grays, '900')};

  /* ---------------------------------- Form ---------------------------------- */
  --#{$prefix}input-bg: #{$white};
  --#{$prefix}input-color: #{map-get($grays, '900')};
  --#{$prefix}input-border-color: #{map-get($grays, '300')};
  --#{$prefix}input-focus-border-color: #{tint-color($component-active-bg, 50%)};

  --#{$prefix}input-focus-color: #{$input-color};

  --#{$prefix}input-placeholder-color: #{map-get($grays, '400')};
  --#{$prefix}input-plaintext-color: #{$input-plaintext-color};

  --#{$prefix}form-check-label-color: #{$form-check-label-color};

  --#{$prefix}form-check-input-bg: #{$form-check-input-bg};
  --#{$prefix}form-check-input-border: #{$form-check-input-border};
  --#{$prefix}form-check-input-border-color: #{map-get($grays, '400')};

  --#{$prefix}form-check-input-checked-color: #{$component-active-color};
  --#{$prefix}form-check-input-checked-bg-color: #{$component-active-bg};
  --#{$prefix}form-check-input-checked-border-color: #{$form-check-input-checked-bg-color};

  --#{$prefix}form-check-input-indeterminate-color: #{$component-active-color};
  --#{$prefix}form-check-input-indeterminate-bg-color: #{$component-active-bg};
  --#{$prefix}form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-bg-color};

  --#{$prefix}form-switch-color:rgba(0, 0, 0, .25);
  --#{$prefix}form-switch-focus-color: #{$input-focus-border-color};
  --#{$prefix}form-switch-checked-color: #{$component-active-color};

  --#{$prefix}input-group-addon-color: #{$input-border-color};
  --#{$prefix}input-group-addon-border-color: #{$input-border-color};

  --#{$prefix}form-select-color: #{$input-color};
  --#{$prefix}form-select-disabled-color: #{map-get($grays, '600')};
  --#{$prefix}form-select-bg: #{$input-bg};
  --#{$prefix}form-select-disabled-bg: #{map-get($grays, '200')};
  --#{$prefix}form-select-indicator-color: #{map-get($grays, '800')};
  --#{$prefix}form-select-focus-box-shadow: #{0 0 0 $form-select-focus-width $input-btn-focus-color};


  --#{$prefix}form-select-border-color: #{$input-border-color};
  --#{$prefix}form-select-focus-border-color: #{$input-focus-border-color};

  --#{$prefix}form-range-thumb-bg: #{$component-active-bg};
  --#{$prefix}form-range-thumb-box-shadow: #{0 .1rem .25rem rgba($black, .1)};
  --#{$prefix}form-range-thumb-focus-box-shadow: #{0 0 0 1px $body-bg, $input-focus-box-shadow};
  --#{$prefix}form-range-thumb-active-bg: #{lighten($component-active-bg, 35%)};
  --#{$prefix}form-range-thumb-disabled-bg: #{map-get($grays, '500')};

  --#{$prefix}form-file-focus-border-color: #{$input-focus-border-color};
  --#{$prefix}form-file-focus-box-shadow: #{$input-focus-box-shadow};
  --#{$prefix}form-file-disabled-bg: #{$input-disabled-bg};
  --#{$prefix}form-file-disabled-border-color: #{$input-disabled-border-color};

  --#{$prefix}form-file-color: #{$input-color};
  --#{$prefix}form-file-bg: #{$input-bg};
  --#{$prefix}form-file-border-color: #{$input-border-color};
  --#{$prefix}form-file-box-shadow: #{$input-box-shadow};

  --#{$prefix}form-feedback-valid-color: #{map-get($theme-colors, 'success')};
  --#{$prefix}form-feedback-invalid-color: #{map-get($theme-colors, 'danger')};

  --#{$prefix}form-feedback-icon-valid-color: var(--#{$prefix}form-feedback-valid-color);
  --#{$prefix}form-feedback-icon-invalid-color: var(--#{$prefix}form-feedback-invalid-color);

  /* ----------------------------------- Nav ---------------------------------- */


  --#{$prefix}bg-navbar-glass: #{rgba(map-get($grays, '200'), 0.96)};
  // --#{$prefix}nav-pills-link-active-color: #{$component-active-color};
  // --#{$prefix}nav-pills-link-active-bg: #{$component-active-bg};

  /* --------------------------------- Navbar --------------------------------- */
  --#{$prefix}navbar-dark-color: #{rgba($white, .55)};
  --#{$prefix}navbar-dark-hover-color: #{rgba($white, .75)};
  --#{$prefix}navbar-dark-active-color: #{$white};
  --#{$prefix}navbar-dark-disabled-color: #{rgba($white, .25)};
  --#{$prefix}navbar-dark-toggler-border-color: #{rgba($white, .1)};

  --#{$prefix}navbar-light-color: #{rgba($black, .55)};
  --#{$prefix}navbar-light-hover-color: #{rgba($black, .7)};
  --#{$prefix}navbar-light-active-color: #{rgba($black, .9)};
  --#{$prefix}navbar-light-disabled-color: #{rgba($black, .3)};
  --#{$prefix}navbar-light-toggler-border-color: #{rgba($black, .1)};

  --#{$prefix}navbar-light-brand-color: #{map-get($theme-colors, 'primary')};
  --#{$prefix}navbar-dark-brand-color: #{map-get($theme-colors, 'primary')};

  // --------------------------- nav dropdown ------------------------------------
  --#{$prefix}nav-dropdown-link-hover-bg: #{map-get($grays, '200')};


  /* -------------------------------------------------------------------------- */
  /*                               Navbar Vertical                              */
  /* -------------------------------------------------------------------------- */

  /* --------------------------------- Default -------------------------------- */
  --#{$prefix}navbar-vertical-default-bg-color: #{$navbar-vertical-default-bg-color};
  --#{$prefix}navbar-vertical-default-link-color: #{$navbar-vertical-default-link-color};
  --#{$prefix}navbar-vertical-default-link-hover-color: #{$navbar-vertical-default-link-hover-color};
  --#{$prefix}navbar-vertical-default-link-active-color: #{$navbar-vertical-default-link-active-color};
  --#{$prefix}navbar-vertical-default-link-disable-color: #{$navbar-vertical-default-link-disable-color};
  --#{$prefix}navbar-vertical-default-hr-color: #{$navbar-vertical-default-hr-color};
  --#{$prefix}navbar-vertical-default-scrollbar-color: #{$navbar-vertical-default-scrollbar-color};
  --#{$prefix}navbar-vertical-default-label-color: #{$navbar-vertical-default-label-color};

  /* ----------------------------- Inverted ---------------------------- */
  --#{$prefix}navbar-vertical-inverted-bg-color: #{$navbar-vertical-inverted-bg-color};
  --#{$prefix}navbar-vertical-inverted-link-color: #{$navbar-vertical-inverted-link-color};
  --#{$prefix}navbar-vertical-inverted-link-hover-color: #{$navbar-vertical-inverted-link-hover-color};
  --#{$prefix}navbar-vertical-inverted-link-active-color: #{$navbar-vertical-inverted-link-active-color};
  --#{$prefix}navbar-vertical-inverted-link-disable-color: #{$navbar-vertical-inverted-link-disable-color};
  --#{$prefix}navbar-vertical-inverted-hr-color: #{$navbar-vertical-inverted-hr-color};
  --#{$prefix}navbar-vertical-inverted-scrollbar-color: #{$navbar-vertical-inverted-scrollbar-color};
  --#{$prefix}navbar-vertical-inverted-label-color: #{$navbar-vertical-inverted-label-color};
  
  /* ----------------------------- Vibrant ---------------------------- */
  --#{$prefix}navbar-vertical-vibrant-bg-image: #{$navbar-vertical-vibrant-bg-image};
  --#{$prefix}navbar-vertical-vibrant-link-color: #{$navbar-vertical-vibrant-link-color};
  --#{$prefix}navbar-vertical-vibrant-link-hover-color: #{$navbar-vertical-vibrant-link-hover-color};
  --#{$prefix}navbar-vertical-vibrant-link-active-color: #{$navbar-vertical-vibrant-link-active-color};
  --#{$prefix}navbar-vertical-vibrant-link-disable-color: #{$navbar-vertical-vibrant-link-disable-color};
  --#{$prefix}navbar-vertical-vibrant-hr-color: #{$navbar-vertical-vibrant-hr-color};
  --#{$prefix}navbar-vertical-vibrant-scrollbar-color: #{$navbar-vertical-vibrant-scrollbar-color};
  --#{$prefix}navbar-vertical-vibrant-label-color: #{$navbar-vertical-vibrant-label-color};

  /* ----------------------------- Card ---------------------------- */
  --#{$prefix}navbar-vertical-card-bg-color: #{$navbar-vertical-card-bg-color};
  --#{$prefix}navbar-vertical-card-link-color: #{$navbar-vertical-card-link-color};
  --#{$prefix}navbar-vertical-card-link-hover-color: #{$navbar-vertical-card-link-hover-color};
  --#{$prefix}navbar-vertical-card-link-active-color: #{$navbar-vertical-card-link-active-color};
  --#{$prefix}navbar-vertical-card-link-disable-color: #{$navbar-vertical-card-link-disable-color};
  --#{$prefix}navbar-vertical-card-hr-color: #{$navbar-vertical-card-hr-color};
  --#{$prefix}navbar-vertical-card-scrollbar-color: #{$navbar-vertical-card-scrollbar-color};
  --#{$prefix}navbar-vertical-card-label-color: #{$navbar-vertical-card-label-color};

  /* -------------------------------------------------------------------------- */
  /*                           End Navbar Vertical                           */
  /* -------------------------------------------------------------------------- */


  --#{$prefix}dropdown-dark-color: #{map-get($grays, '300')};
  --#{$prefix}dropdown-dark-bg: #{map-get($grays, '800')};
  --#{$prefix}dropdown-dark-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-dark-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-dark-box-shadow: null;
  --#{$prefix}dropdown-dark-link-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-dark-link-hover-color: #{$white};
  --#{$prefix}dropdown-dark-link-hover-bg: #{rgba($white, .15)};
  --#{$prefix}dropdown-dark-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-dark-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-dark-link-disabled-color: #{map-get($grays, '500')};
  --#{$prefix}dropdown-dark-header-color: #{map-get($grays, '500')};



  /* ---------------------------------- Modal --------------------------------- */
  .modal {
    --#{$prefix}modal-bg: #{$modal-content-bg};
  }


  /* --------------------------------- Avarar --------------------------------- */
  --#{$prefix}avatar-status-border-color: #{$white};
  --#{$prefix}avatar-name-bg: #{map-get($grays, '900')};
  --#{$prefix}avatar-button-bg: #{map-get($grays, '400')};
  --#{$prefix}avatar-button-hover-bg: #{map-get($grays, '500')};

  /* ------------------------------ Notification ------------------------------ */
  --#{$prefix}notification-bg: #{map-get($grays, 'white')};
  --#{$prefix}notification-title-bg: #{map-get($grays, '100')};
  --#{$prefix}notification-unread-bg: #{map-get($grays, '200')};
  --#{$prefix}notification-unread-hover-bg: #{darken(map-get($grays, '200'), 5%)};
  --#{$prefix}notification-indicator-border-color: #{map-get($grays, '200')};

  /* --------------------------------- Kanban --------------------------------- */
  --#{$prefix}kanban-bg: #{map-get($grays, '100')};
  --#{$prefix}kanban-header-bg: var(--#{$prefix}kanban-bg);
  --#{$prefix}kanban-item-bg: #{map-get($grays, 'white')};
  --#{$prefix}kanban-item-color: #{map-get($grays, '900')};
  --#{$prefix}kanban-btn-add-hover-bg: #{map-get($grays, '200')};
  --#{$prefix}kanban-draggable-source-dragging-bg: #{map-get($grays, '200')};
  --#{$prefix}kanban-bg-attachment-bg: #{map-get($grays, '300')};
  --#{$prefix}kanban-footer-color: #{map-get($grays, '600')};
  --#{$prefix}kanban-nav-link-card-details-color: #{map-get($grays, '700')};
  --#{$prefix}kanban-nav-link-card-details-hover-bg: #{map-get($grays, '200')};

  /* --------------------------- Gradient Background -------------------------- */
  --#{$prefix}bg-shape-bg: #4695ff;
  --#{$prefix}bg-shape-bg-ltd: #{linear-gradient(-45deg,#4695ff, #1970e2)};
  --#{$prefix}bg-shape-bg-dtl: #{linear-gradient(-45deg,#1970e2, #4695ff)};

  --#{$prefix}line-chart-gradient: #{linear-gradient(-45deg, #014ba7, #0183d0)};
  --#{$prefix}card-gradient: #{linear-gradient(-45deg, #1970e2, #4695ff)};
  --#{$prefix}progress-gradient: #{linear-gradient(-45deg, #1970e2, #4695ff)};
  --#{$prefix}bg-circle-shape: none;
  --#{$prefix}bg-circle-shape-bg: #4695ff;
  --#{$prefix}modal-shape-header: #{linear-gradient(-45deg,#1970e2,#4695ff)};
  --#{$prefix}modal-shape-header-bg: #4494ff;

  /* ------------------------------ Full Calendar ----------------------------- */
  --fc-button-bg-color: #{map-get($grays, '900')};
  --fc-button-border-color: #{map-get($grays, '900')};
  --fc-button-hover-bg-color: #{$dark};
  --fc-button-hover-border-color: #{$dark};
  --fc-button-active-bg-color: #{$dark};
  --fc-button-active-border-color: #{$dark};
  --fc-button-list-day-cushion: #{$white};

  /* -------------------------------- Flatpickr ------------------------------- */
  --#{$prefix}flatpickr-calendar-bg: #{$white};

  /* -------------------------------- Flatpickr ------------------------------- */
  --#{$prefix}leaflet-bar-bg: #{$white};
  --#{$prefix}leaflet-popup-content-wrapper-bg: #{$white};

  /* --------------------------------- Choices -------------------------------- */
  --#{$prefix}choices-item-selectable-highlighted-bg: #{$white};
  --#{$prefix}choices-item-has-no-choices-bg: #{$white};
  --#{$prefix}bg-choices-close-button: #{map-get($grays, '200')};


  /* -------------------------------- Thumbnail ------------------------------- */
  --#{$prefix}thumbnail-bg: #{$white};

  /* ---------------------------------- Chat ---------------------------------- */
  --#{$prefix}chat-contact-bg: #{$card-bg};

  /* --------------------------------- Tinymce -------------------------------- */
  --#{$prefix}tinymce-bg: #{$white};

  /* --------------------------------- Swiper --------------------------------- */
  --#{$prefix}swiper-nav-bg: #{rgba($white, 0.8)};

  /* --------------------------------- Rater --------------------------------- */
  --#{$prefix}star-rating-bg-image: #{url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFdElEQVR4nO2aXWxURRTH/2dut58Imho1SgStuit+vBo0BkgkRjDog+VBiJEXqJhKK21x+7EdUu5u2W1Uqi8Qo4YQY6gQDQlRn9RENGoMD0a7RCzGRCJGBLRF9mOOD+waKHe7e2f23mt0f4/zceY/Z2fmzJm7QI0aNWr8j6EgBu3sHG9oXHC2gxQvJ/CUhbpUPD5wMggtwv8hmZrmn3mHmF8G4XEm6s5R/kinlPP91xKAA7YN2A8CeHRW8eLmrOjwWwsQgAMYqs+xnLGls3O8wW89vjqgp1/eDWC1YyXhxqYFvz/ppx7AZwcIsnrmbMDUK6X0V5NfA/VJuRDgdWWa3Tmds1b5IqiAf97OUReAunLNCOx4RniFL/eALimvrs+KnwDMq6yHWJq0Bz/3VFRxJD8GabgY4iqcPABWvd6puRzPV4CUsnEmK6YA3OCiG1tKRRIJecwrXUU8XwHTGbEe7iYPAJQXYqsXeq4YyEvjUkoxkxXfAbhDo/uFOrYWxeMDv1Rb16V4ugJmctYa6E0eABpyItdZTT1OeLwFDEMa02YpZeWHpwaeOaBncOQhMJYamrnmvMdJUtXOgI0bd4daW0+25S0rAoV7iLiHgWqkuDkChjik9ibl8EmAuAo2/8G1A7ZKea24IMJkcQRAmJkiBIQBtAGwqiluNgScU4w0EU2CkWZSk8ycnleP76WUf2nadCYajbfmrfwDxIWJgiMAhQG06k7AQxSAEwAmiTnNRJMEMWkxpePx/lNzrRpHB7wwOLJcMR+Cm9vbv5cZAK81h1S3lFLNrnQ8BBVjF/4bkweAZgDPnc+IJ5wqS0QBDnsoKBAYdLtTubMDCF95qiYAhMUfOpY7FSqlOgCc9lSRjzDR86MjsS+d6hwdMBaX3zCrlQDOeKrMBwiIpnYMvVSqvuRNMBWXXwPiYQB/eKLMBxgY3mnHRudqM+dVOGkPfsEKjwCYrqoyHyAgnrKHRipoV57CveAwgCZjZT7AwFjKHuqr5Npc8VW4r3/7ShAdAuD7xwuXjCftoa5KcwZXuUDv4MgqYn4XQEhLmscw8+5UPPaMm4TJVTqc2jF0GERrAeRcq/MceqOlnje7zRa10uHege3tBHobgXxdvhIm7DuRjjw9MbE277av1gRS9vAEwE8BqGpurgVhf0ud2qAz+YvdDegb3L4BTK+b2DCBgffO/np9+549m7K6NoweMD795KOj9y9bcRsB95rY0SRTp+qW7drV/aeJEeM9TMzvm9rQg48mEv2/mVoxP8RYLDa2oYWor4oVYwuEu6qgQwOOtLfvN36DrEIY4yXmNrRobGv79hZTI0YOKPwCEVMRurBFxqvPyAGLw+lbEWBuoBCwAwhB7f/i+GS8/YwcwBzY/i8S7AoILgIUMY8EZluAzZegIY2Fc0gbbQdc9DwHFgGKCFZGP4K2AwoxuFGz+xkCehFSNxHzKoCO6uowjQRl/7dXCs0YnCXmVwWH7Evu8T9LKT+Yzoj1BNggLHRl0fAc0ncAiyVuHl8INKEI0aQdOz67rvDRcm9394sToabpLhBHAVxVkV02c4D2e0DfwMi+Cv76CoCPKEU9Y4nYZ5Xa7pHyOpEVwwA2oXzKfmHqWKRF90FEewVUkAMcZ/C2lB076PadbkzKUwCejUblK3kSO0FYM0fzhkXh9M0AptyMUcQkDJY6AE8D2NIcUktS9vABk7+0JBJyMhmPPcYKywEu9cGWQ3nrnO4Y2g5gYN+sogyIU5mQakvasXEpZUbX9mxSidjHzSG+jxjrAPx4eS29afIwor0FWkJq9HzOOsvMq5n5B0vx2OioPKFrrxyFg/ItKeXBmazoAGMFQEea6/MlP3zWqFGjRo0y/A3lxcMNXfCjjAAAAABJRU5ErkJggg==')};

  /* ---------------------------------- Toast --------------------------------- */
  --#{$prefix}toast-background-color: #{rgba($white, 0.85)};

  /* --------------------------------- Wizard --------------------------------- */
  --#{$prefix}theme-wizard-nav-item-circle-bg: #{$white};

  /* -------------------------------- Card Span ------------------------------- */
  --#{$prefix}card-span-img-bg: #{$white};
  --#{$prefix}card-span-img-box-shadow: #{$box-shadow-sm};
  --#{$prefix}card-span-img-hover-box-shadow: #{$box-shadow-lg};
  /* ------------------------------ showcase-page ------------------------------ */
  --#{$prefix}setting-toggle-shadow: #{0 -7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07)};

  /* -------------------------------- Scrollbar ------------------------------- */
  --#{$prefix}scrollbar-bg: rgba(var(--falcon-gray-400-rgb), 0.55);
  --#{$prefix}simplebar-bg: rgba(var(--falcon-gray-400-rgb), 1);


  /* ------------------------------- Falcon Pill ------------------------------ */
  --#{$prefix}nav-pills-falcon-active-bg-color: #{$white};

  /* ------------------------------- Hover Background ------------------------------ */
  @each $color,
  $value in $grays {
    --#{$prefix}hover-bg-gray#{$color}: #{map-get($grays, $color)};
  }

  /* ------------------------------- Custom disabled button ------------------------------ */
  --#{$prefix}btn-disabled-custom-background: rgba(var(--falcon-light-rgb), 0.55);
  --#{$prefix}btn-disabled-custom-color: rgba(var(--falcon-dark-rgb), 0.3);
  /* ------------------------------- Dropdown Caret ------------------------------ */
  --#{$prefix}dropdown-caret-bg: #{$card-bg};
  /* ------------------------------- Divider content ------------------------------ */
  --#{$prefix}divider-content-bg: #{$card-bg};

  .accordion {
    --#{$prefix}accordion-border-color: #{$accordion-border-color};
    --#{$prefix}accordion-bg: #{$accordion-button-active-bg};
    --#{$prefix}accordion-color: #{$accordion-color};
  }


  &.card,
  .card {
    --#{$prefix}card-border-color: #{$card-border-color};
    --#{$prefix}card-cap-bg: #{rgba($black, 0)};
    --#{$prefix}card-bg: #{$card-bg};
  }

  --#{$prefix}card-bg: #{$card-bg};

  /* -------------------------------- Dropdown -------------------------------- */

  .dropdown-menu {
    --#{$prefix}dropdown-bg: #{$dropdown-bg};
    --#{$prefix}dropdown-color: #{$dropdown-color};
    // --#{$prefix}dropdown-border-color: #{rgba($white, 0.075)};
    --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
    --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
    --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
    --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
    --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
    --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
    --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
    --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  }

  /* ------------------------------- Pagination ------------------------------- */
  .pagination {
    --#{$prefix}pagination-color: #{$pagination-color};
    --#{$prefix}pagination-bg: #{$pagination-bg};
    --#{$prefix}pagination-border-color: #{$pagination-border-color};
    --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
    --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  }

  /* --------------------------------- Popover -------------------------------- */
  .popover {
    --#{$prefix}popover-bg: #{$popover-bg};
    --#{$prefix}popover-border-color: #{$popover-border-color};
    // --#{$prefix}popover-box-shadow: #{$box-shadow};
    --#{$prefix}popover-header-bg: #{$popover-header-bg};
    --#{$prefix}popover-header-border-bottom-color: #{$popover-header-border-bottom-color}; //black

    --#{$prefix}popover-arrow-color: #{$popover-arrow-color};
    --#{$prefix}popover-arrow-outer-color: #{$popover-arrow-outer-color};
  }

  .offcanvas {
    --#{$prefix}offcanvas-bg: #{$white};
  }

  /* ---------------------------------- Toast --------------------------------- */
  .toast {
    --#{$prefix}toast-bg: #{$toast-background-color};
    --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  }

  /* ---------------------------------- Tooltip --------------------------------- */
  .tooltip {
    --#{$prefix}tooltip-bg: #{$tooltip-bg};
    --#{$prefix}tooltip-color: #{$tooltip-color};
  }

  /* ------------------------------- List Group ------------------------------- */
  .list-group {
    --#{$prefix}list-group-bg: #{$list-group-bg};
    --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
    --#{$prefix}list-group-action-hover-bg: #{$list-group-action-active-bg};
    // -- new 5.2 -----
    --#{$prefix}list-group-disabled-bg: var(--#{$prefix}card-cap-bg);
  }


  /* ---------------------------------- Table --------------------------------- */
  .table {
    --#{$prefix}table-border-color: #{$table-border-color};
    --#{$prefix}table-striped-bg: #{$table-striped-bg};
    --#{$prefix}table-striped-color: #{$table-striped-color};
    --#{$prefix}table-color: #{$body-color};

  }

  @each $color,
  $value in $table-variants {
    .table-#{$color} {
      --#{$prefix}table-bg: #{$value};
      --#{$prefix}table-color: #{color-contrast(opaque(map-get($grays, '200'), $value))};
      --#{$prefix}table-hover-bg: #{mix(color-contrast(opaque(map-get($grays, '200'), $value)), $value, percentage($table-hover-bg-factor))};
      --#{$prefix}table-hover-color: #{color-contrast(mix(color-contrast(opaque(map-get($grays, '200'), $value)), $value, percentage($table-hover-bg-factor)))};
      --#{$prefix}table-striped-bg: #{mix(color-contrast(opaque(map-get($grays, '200'), $value)), $value, percentage($table-striped-bg-factor))};
      --#{$prefix}table-striped-color: #{color-contrast(mix(color-contrast(opaque(map-get($grays, '200'), $value)), $value, percentage($table-striped-bg-factor)))};
      --#{$prefix}table-active-bg: #{mix(color-contrast(opaque(map-get($grays, '200'), $value)), $value, percentage($table-active-bg-factor))};
      --#{$prefix}table-active-color: #{color-contrast(mix(color-contrast(opaque(map-get($grays, '200'), $value)), $value, percentage($table-active-bg-factor)))};
      --#{$prefix}table-border-color: #{rgba(mix(color-contrast(opaque(map-get($grays, '200'), $value)), $value, percentage($table-border-factor)), 0.05)};
    }

  }

  --#{$prefix}progressbar-width:100%
}