/*
Template Name: HexaDash
Template URI:
Author: SovWare
Author URI:
Version: 1.1.0
NB: this file contains the list of components/scss partial along with the style.scss contents order.

*/
/**                              **
**       TABLE OF CONTENTS       **
**                               **
-----------------------------------*/
/*

  01.COMPONENTS
    -- 404
    -- add-product
    -- admin-page
    -- alert
    -- app-ui
    -- avatar
    -- badge
    -- banner
    -- blog
    -- bookmark
    -- breadcrumb
    -- button
    -- calendar
    -- card-charts
    -- card-social
    -- cards
    -- carousel
    -- cart
    -- chat
    -- checkbox
    -- checkout
    -- circle-progress
    -- collapse
    -- coming-soon
    -- comments
    -- course
    -- dark-mode
    -- dashboard-base
    -- data-table
    -- data-picker
    -- drag-drop
    -- drawer
    -- dropdown
    -- empty
    -- faq
    -- fileM
    -- footer
    -- form-layouts
    -- form
    -- gallery
    -- grid
    -- icon
    -- import
    -- input
    -- job
    -- kanban-board
    -- knowledgeable
    -- list
    -- menu
    -- message
    -- modal
    -- navbar
    -- note
    -- notification
    -- order
    -- pageHeader
    -- pagination
    -- preloader
    -- pricing
    -- profile-feature
    -- profile
    -- progress-bar
    -- projects
    -- radio
    -- rate
    -- result
    -- search
    -- select
    -- shop
    -- sidebar
    -- skeleton
    -- slider
    -- spins
    -- statistics
    -- step
    -- support-ticket
    -- switch
    -- tab
    -- table
    -- tables
    -- tag
    -- task-app
    -- team
    -- term
    -- testimonial
    -- time-picker
    -- timeline
    -- todo
    -- tooltip
    -- upload
    -- users

  02.ELEMENTS
    -- customizer
    -- date-ranger
    -- social

  03.GENERAL
    -- general (Common)
    -- kewFrames (Common)
    -- utility-classes (Common)

  04.GENERAL
    -- btn-shadow (Common)
    -- btn-transparent (Common)
    -- buttons (Common)
    -- color-classes (Common)
    -- custom-scrollbar (Common)
    -- form (Common)
    -- functions (Common)
    -- gradient (Common)
    -- helpers (Common)
    -- hover (Common)
    -- media-queries (Common)
    -- overlay (Common)
    -- gradient (Common)
    -- utility-classes (Common)

  05. PAGES
    -- avatar
    -- badges
    -- buttons
    -- card
    -- contact
    -- email
    -- map
    -- social-dashboard
    -- maintenance

  -- responsive (Common)

***************************/
/* Custom bootstrap classes */


.product {
  transition: var(--transition);
}
.product.card {
  box-shadow: 0 5px 20px rgba(var(--color-lighten-rgba), 0.1);
}
.product .product-item__button button {
  height: 36px;
  margin: 5px;
  line-height: normal;
}

.product--grid .product-item__button {
  margin: -5px;
}
.product--grid:hover {
  transform: scale(1.03);
}
@media only screen and (max-width: 1399px) {
  .product--grid:hover {
    transform: unset;
  }
}
.product--grid .product-item__body .card-title {
  font-size: calc(16.2px + 0.15vw);
}
@media (min-width: 1200px) {
  .product--grid .product-item__body .card-title {
    font-size: 18px;
  }
}

.product-item .product-desc-price {
  font-size: 14px;
  line-height: 1.4285714286;
  font-weight: 600;
  color: var(--color-primary);
}
.product-item .product-price {
  font-size: 14px;
  line-height: 1.4285714286;
  font-weight: 400;
  color: var(--color-lighten);
  text-decoration: line-through;
  margin-left: 10px;
  margin-right: 10px;
}
.product-item .product-discount {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-secondary);
}
.product-item__body .card-title {
  margin-bottom: 9px;
  text-transform: capitalize;
}
.product-item__button button {
  height: 34px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--color-gray);
  text-transform: capitalize;
  border: 1px solid var(--border-light);
  border-radius: 4px;
}
.product-item__button button img,
.product-item__button button svg {
  width: 13.46px;
  height: 14.81px;
}
.product-item__button button.btn-primary {
  color: var(--color-white);
  box-shadow: 0 3px 5px rgba(32, 201, 151, 0.0509803922);
}

.product--list .product-item .product-item__image {
  width: 300px;
  height: 200px;
}
@media only screen and (max-width: 1399px) {
  .product--list .product-item .product-item__image {
    width: 300px;
    height: unset;
  }
  .product--list .product-item .product-item__image img {
    height: unset;
  }
}
.product--list .product-item .product-item__image img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.product--list .like-icon {
  top: 0;
}
@media only screen and (max-width: 1399px) {
  .product--list .like-icon {
    left: -10px;
    top: -5px;
  }
}

.product--list .product-item {
  padding: 20px;
}
.product--list .product-item .product-item__title p {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-gray);
  margin-top: 17px;
}
@media (min-width: 1200px) {
  .product--list .product-item .product-item__title {
    flex: 1.5;
    padding: 0 30px;
  }
  .product--list .product-item .product-item__content {
    flex: 1;
    padding: 0 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .product--list .product-item .product-item__title {
    flex: 1.5;
    padding: 0 15px;
    padding-left: 0;
  }
  .product--list .product-item .product-item__content {
    flex: 1;
    padding: 0 15px;
  }
  .product--list .product-item .product-item__image {
    width: 307px;
    height: auto;
  }
}
@media only screen and (max-width: 575px) {
  .product--list .product-item .like-icon {
    top: 50%;
    left: -28px;
    transform: translate(50%, -50%);
  }
  .product--list .product-item .product-item__image {
    width: 100%;
    height: 100%;
  }
  .product--list .product-item .product-item__title {
    padding-right: 0;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .product--list .product-item .product-item__content {
    padding: 0;
  }
}

@media (min-width: 576px) {
  .product--list .product-item,
  .product--list .product-item__body {
    display: flex;
  }
}

.product--list .product-item__body .product-item__button {
  margin-top: 30px;
}
@media only screen and (max-width: 991px) {
  .product--list .product-item__body .product-item__button {
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .product--list .product-item__body .product-item__button button {
    width: 132px;
    height: 38px;
  }
}
.product--list .product-item__body .card-title {
  font-size: calc(16.2px + 0.15vw);
  margin-bottom: 0;
  text-transform: capitalize;
}
@media (min-width: 1200px) {
  .product--list .product-item__body .card-title {
    font-size: 18px;
  }
}
.product--list .product-item__body .card-title + p {
  font-size: 15px;
  line-height: 1.6666666667;
  font-weight: 400;
  color: var(--color-gray);
  margin-top: 13px;
}

.stars-rating {
  line-height: normal;
}
.stars-rating .star-icon {
  font-size: 26px;
}
.stars-rating .star-icon.active {
  color: var(--color-warning);
}
.stars-rating .star-icon.inactive {
  color: #C6D0DC;
}
.stars-rating span.active {
  color: var(--color-warning);
}
.stars-rating span.inactive {
  color: #C6D0DC;
}
.stars-rating__point {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--color-dark);
  margin-right: 6px;
  margin-left: 10px;
}
.stars-rating__review {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--color-lighten);
}

.product-ratings .checkbox-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-light);
  text-transform: lowercase;
}
.product-ratings .stars-rating .active {
  font-size: 14px;
}

.like-icon {
  position: absolute;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
  background-color: var(--color-white);
  box-shadow: 0 5px 10px var(--shadow3);
  left: 15px;
  top: 15px;
  border-radius: 50%;
}
.like-icon button {
  color: var(--color-light);
  border: none;
  box-shadow: none;
  background: transparent;
}
.like-icon button .icon {
  font-size: 16px;
}
.like-icon button .icon.las {
  color: var(--color-danger);
}


/* Custom bootstrap classes */
/*------------------------------------*\
    #-CSS Variables
\*------------------------------------*/
:root {
  --body:#f4f5f7;
  --contents-bg:#f4f5f7;
  --main-color:white;
  --accent:#ffffff;
  /* Menu color*/
  --color-menu: #404040;
  --color-menu-hover: #5840FF;
  --color-menu-active: #5840FF;
  --color-menu-bg-opacity: rgb(var(--color-primary-rgba), .10);
  --header-bg: white;
  --sidebar-bg: white;
  --main-content:var(--contents-bg);
  --header-bg:white;
  --logo-wrapper-bg:white;
  --color-add-listing-button-text: var(--color-white);
  --color-add-listing-button-text-hover: var(--color-white);
  --bgcolor-add-listing-button: #8231D3;
  --bgcolor-add-listing-button-hover: #0A0A0A;
  --color-banner_title: var(--color-white);
  --color-breadcrumb-link: #8C90A4;
  --color-breadcrumb-link-hover: #5840FF;
  --color-breadcrumb_separator: #8C90A4;
  --bgcolor-footer: #353b58;
  --color-footer-divider: #353b58;
  --color-footer-title: var(--color-white);
  --color-footer-link-hover: var(--color-white);
  --color-primary: #8231D3;
  --color-secondary: #5840FF;
  --color-success: #01B81A;
  --color-info: #00AAFF;
  --color-warning: #FA8B0C;
  --color-danger: #FF0F0F;
  --color-dark: #0A0A0A;
  --color-infos:#00E4EC;
  --color-warnings:#FFBB00;
  --color-dangers: #FF0F0F;
  --color-purple:#A722F6;
  --bg-primary: #8231D3;
  --bg-secondary: #5840FF;
  --bg-success: #01B81A;
  --bg-info: #00AAFF;
  --bg-warning: #FA8B0C;
  --bg-danger: #FF0F0F;
  --bg-dark: rgb(10, 10, 10);
  --bg-primary-hover: #6726A8;
  --bg-secondary-hover: #3520C8;
  --bg-success-hover: #0D811D;
  --bg-info-hover: #0787C7;
  --bg-warning-hover: #D9790A;
  --bg-danger-hover: #CB0000;
  --bg-dark-hover: #272525;
  --bg-gray-hover: #585858;
  --color-primary-rgba: 130, 49, 211;
  --color-secondary-rgba: 88, 64, 255;
  --color-success-rgba: 1, 184, 26;
  --color-info-rgba: 0, 170, 255;
  --color-warning-rgba: 250, 139, 12;
  --color-danger-rgba: 255, 15, 15;
  --color-dark-rgba: 10, 10, 10;
  --color-primary-rgba-shadow: rgba(var(--color-primary-rgba), 0.20);
  --color-white: #fff;
  --color-light: #747474;
  --color-lighten: #A0A0A0;
  --color-lighter: #F8F9FB;
  --color-lighten-x: #5d658c;
  --footer-dark: #353b58;
  --color-deep: #eff0f3;
  --color-normal: #f8f9fb;
  --color-lighters: #f4f5f7;
  --color-lighten-rgba:173, 181, 217;
  --color-gray: #404040;
  --color-gray-x: #5A5F7D;
  --body-color: #666d92;
  --text-color: #666d92;
  --light-gray: #8C90A4;
  --light-gray-rgba: 173, 181, 217;
  --border-color: #F1F2F6;
  --border-light: #E3E6EF;
  --border-deep: #c6d0dc;
  --bg-normal: #f8f9fb;
  --bg-lighters: #f4f5f7;
  --bg-lighter: #f4f5f7;
  --bg-deep: #EFF0F3;
  --bg-gray: #404040;
  --bg-light: #747474;
  --bg-white: #ffffff;
  --bg-light-rgba: 116, 116, 116;
  --bg-normal-rgba: 248, 249, 251;
  --bg-lighter-rgba: 244, 245, 247;
  --bg-deep-rgba:239, 240, 243;
  --color-gray-rgba: 173, 181, 217;
  --color-dark-rgba: 39, 43, 65;
  --color-white-rgba: 255, 255, 255;
  --box-shadow-color-rgba: 146, 153, 184;
  --border-radius-xl: 10px;
  --border-radius-md: 6px;
  --border-radius-xs: 4px;
  --color-facebook: #2366b8;
  --color-twitter: #00abe4;
  --color-pinterest: #ef1b25;
  --color-gplus: #dc4e41;
  --color-linkedin: #007cbc;
  --color-tumblr: #35465c;
  --color-vk: #4a76a8;
  --color-youtube: #e32212;
  --color-instagram: #9c27b0;
  --color-ruby: #c2185b;
  --color-facebook-rgba: 35, 102, 184;
  --color-twitter-rgba: 0, 171, 228;
  --color-pinterest-rgba: 239, 27, 37;
  --color-gplus-rgba: 220, 78, 65;
  --color-linkedin-rgba: 0, 124, 188;
  --color-tumblr-rgba: 53, 70, 92;
  --color-vk-rgba: 74, 118, 168;
  --color-youtube-rgba: 227, 34, 18;
  --color-instagram-rgba: 156, 39, 176;
  --color-ruby-rgba: 194, 24, 91;
  --color-infos-rgba:0, 228, 236;
  --color-warnings-rgba:255, 187, 0;
  --color-dangers-rgba: 255, 15, 15;
  --color-purple-rgba:167, 34, 246;
  --color-primary-rgba-10:rgba(var(--color-primary-rgba), 0.1);
  --color-secondary-rgba-10:rgba(var(--color-secondary-rgba), 0.1);
  --color-primary-rgba-50:rgba(var(--color-primary-rgba), 0.5);
  --color-secondary-rgba-50:rgba(var(--color-secondary-rgba), 0.5);
  --transition:all 0.3s ease;
  --gridLines_color:#E3E6EF;
  --scrollbarBG: var(--color-white);
  --thumbBG: #E3E6EF;
  --input-bg:var(--color-white);
  --input-focus-bg:var(--color-white);
  --tooltip-bg:var(--color-white);
  --tooltip-arrow-color:var(--color-white);
  --shadow2:#9299B80D;
  --shadow3:#9299B81A;
  --shadow4:#9299B833;
  --shadow5:#9299b826;
}

.layout-dark {
  --body:var(--main-color);
  --contents-bg:var(--main-color);
  --white-100:white;
  --white-87:rgb(255, 255, 255, .87);
  --white-60:rgb(255, 255, 255, .60);
  --white-30:rgb(255, 255, 255, .30);
  --white-20:rgb(255, 255, 255, .20);
  --white-10:rgb(255, 255, 255, .10);
  --white-06:rgb(255, 255, 255, .06);
  --main-color:#010413;
  /* Menu color*/
  --color-menu: #404040;
  --color-menu-hover: #5840FF;
  --color-menu-active: #5840FF;
  --color-menu-bg-opacity: rgb(251, 53, 134, .10);
  --header-bg: white;
  --sidebar-bg: white;
  --main-content:var(--bg-normal);
  --logo-wrapper-bg:var(--white-10);
  --header-bg:var(--white-10);
  --color-add-listing-button-text: var(--color-white);
  --color-add-listing-button-text-hover: var(--color-white);
  --bgcolor-add-listing-button: #8231D3;
  --bgcolor-add-listing-button-hover: #0A0A0A;
  --color-banner_title: var(--color-white);
  --color-breadcrumb-link: #8C90A4;
  --color-breadcrumb-link-hover: #5840FF;
  --color-breadcrumb_separator: #8C90A4;
  --bgcolor-footer: #353b58;
  --color-footer-divider: #353b58;
  --color-footer-title: var(--color-white);
  --color-footer-link-hover: var(--color-white);
  --color-primary: #8231D3;
  --color-secondary: #5840FF;
  --color-success: #01B81A;
  --color-info: #00AAFF;
  --color-warning: #FA8B0C;
  --color-danger: #FF0F0F;
  --color-dark: var(--white-87);
  --color-infos:#00E4EC;
  --color-warnings:#FFBB00;
  --color-dangers: #FF0F0F;
  --color-purple:#A722F6;
  --bg-primary: #8231D3;
  --bg-secondary: #5840FF;
  --bg-success: #01B81A;
  --bg-info: #00AAFF;
  --bg-warning: #FA8B0C;
  --bg-danger: #FF0F0F;
  --bg-dark: var(--white-87);
  --bg-primary-hover: #6726A8;
  --bg-secondary-hover: #3520C8;
  --bg-success-hover: #0D811D;
  --bg-info-hover: #0787C7;
  --bg-warning-hover: #D9790A;
  --bg-danger-hover: #CB0000;
  --bg-dark-hover: #272525;
  --bg-gray-hover: #585858;
  --color-primary-rgba: 130, 49, 211;
  --color-secondary-rgba: 88, 64, 255;
  --color-success-rgba: 1, 184, 26;
  --color-info-rgba: 0, 170, 255;
  --color-warning-rgba: 250, 139, 12;
  --color-danger-rgba: 255, 15, 15;
  --color-dark-rgba: 9, 14, 48;
  --color-primary-rgba-shadow: rgba(var(--color-primary-rgba), 0.20);
  --color-white: var(--white-87);
  --color-gray: var(--white-60);
  --color-light: var(--white-60);
  --color-lighten: var(--white-60);
  --color-lighter: #F8F9FB;
  --color-lighten-x: #5d658c;
  --footer-dark: #353b58;
  --color-deep: #eff0f3;
  --color-normal: #f8f9fb;
  --color-lighters: #f4f5f7;
  --color-lighten-rgba:173, 181, 217;
  --color-gray-x: var(--white-60);
  --body-color: var(--white-60);
  --text-color: var(--white-60);
  --light-gray: var(--white-60);
  --light-gray-rgba: 140, 144, 164;
  --border-color: var(--white-06);
  --border-deep: var(--white-06);
  --border-color: var(--white-06);
  --border-light:var(--white-06);
  --bg-normal: var(--white-10);
  --bg-lighters: var(--white-10);
  --bg-lighter: var(--white-10);
  --bg-deep: var(--white-10);
  --bg-white:var(--white-10);
  --bg-normal-rgba: 248, 249, 251;
  --bg-lighter-rgba: 244, 245, 247;
  --bg-deep-rgba: 239, 240, 243;
  --color-gray-rgba: 140, 144, 164;
  --color-dark-rgba: 39, 43, 65;
  --color-white-rgba: 255, 255, 255;
  --box-shadow-color-rgba:146, 153, 184;
  --main-color-rgba:1, 4, 19;
  --border-radius-xl: 10px;
  --border-radius-md: 6px;
  --border-radius-xs: 4px;
  --color-facebook: #2366b8;
  --color-twitter: #00abe4;
  --color-pinterest: #ef1b25;
  --color-gplus: #dc4e41;
  --color-linkedin: #007cbc;
  --color-tumblr: #35465c;
  --color-vk: #4a76a8;
  --color-youtube: #e32212;
  --color-instagram: #9c27b0;
  --color-ruby: #c2185b;
  --color-facebook-rgba: 35, 102, 184;
  --color-twitter-rgba: 0, 171, 228;
  --color-pinterest-rgba: 239, 27, 37;
  --color-gplus-rgba: 220, 78, 65;
  --color-linkedin-rgba: 0, 124, 188;
  --color-tumblr-rgba: 53, 70, 92;
  --color-vk-rgba: 74, 118, 168;
  --color-youtube-rgba: 227, 34, 18;
  --color-instagram-rgba: 156, 39, 176;
  --color-ruby-rgba: 194, 24, 91;
  --color-primary-rgba-10:rgba(var(--color-primary-rgba), 0.1);
  --color-secondary-rgba-10:rgba(var(--color-secondary-rgba), 0.1);
  --color-primary-rgba-50:rgba(var(--color-primary-rgba), 0.5);
  --color-secondary-rgba-50:rgba(var(--color-secondary-rgba), 0.5);
  --transition:all 0.3s ease;
  --gridLines_color:rgb(255, 255, 255, .30);
  --scrollbarBG: #1b1e2b;
  --thumbBG:rgb(255, 255, 255, .30);
  --input-bg:var(--white-10);
  --input-focus-bg:var(--white-10);
  --tooltip-bg:var(--main-color);
  --tooltip-arrow-color:var(--main-color);
  --shadow2:#01041333;
  --shadow3:#01041366;
  --shadow4:#01041399;
  --shadow5:#01041399;
}