
.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.bg-primary-blue {
  background-color: #1b80ec;
}

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.container{
  max-width: 1600px !important;
}

/*
 * Sidebar
 */

@media (min-width: 768px) {
  .sidebar .offcanvas-lg {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
  }
  .navbar-search {
    display: block;
  }
}

.sidebar .nav-link {
  font-size: 20px;
  font-weight: 500;
}

.sidebar .nav-link:hover {
  color: #b1c4de !important;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar-heading {
  font-size: 25px;
}

.product-card img {
  height: 400px;
  object-fit: scale-down;
}

.line-clamp {
  overflow: hidden;
  display: -webkit-box; /* Required for -webkit-line-clamp */
  -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
  -webkit-line-clamp: 2; /* Limits the text to 3 lines */
  line-clamp: 2; /* Standard property, for wider browser support */
}

.bd-placeholder-img{font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (min-width: 768px){.bd-placeholder-img-lg{font-size:3.5rem}}.b-example-divider{width:100%;height:3rem;background-color:#0000001a;border:solid rgba(0,0,0,.15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em #0000001a,inset 0 .125em .5em #00000026}.b-example-vr{flex-shrink:0;width:1.5rem;height:100vh}.bi{vertical-align:-.125em;fill:currentColor}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.btn-bd-primary{--bd-violet-bg: #712cf9;--bd-violet-rgb: 112.520718, 44.062154, 249.437846;--bs-btn-font-weight: 600;--bs-btn-color: var(--bs-white);--bs-btn-bg: var(--bd-violet-bg);--bs-btn-border-color: var(--bd-violet-bg);--bs-btn-hover-color: var(--bs-white);--bs-btn-hover-bg: #6528e0;--bs-btn-hover-border-color: #6528e0;--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);--bs-btn-active-color: var(--bs-btn-hover-color);--bs-btn-active-bg: #5a23c8;--bs-btn-active-border-color: #5a23c8}.bd-mode-toggle{z-index:1500}.bd-mode-toggle .bi{width:1em;height:1em}.bd-mode-toggle .dropdown-menu .active .bi{display:block!important}

.rating .star {
  font-size: 2rem; /* Adjust size as needed */
  color: gold;
  cursor: pointer;
}

.rating .star.selected,
.rating .star:hover,
.rating .star:hover ~ .star {
  color: gold; /* Color for selected/hovered stars */
}

.bg-header {
  background-color: royalblue !important;
}

.bg-dashbaord {
  background-color: cornflowerblue !important;
}

.bg-sidebar {
  background-color: darkblue !important;
}

.bg-primary-blue {
  background-color: lightsteelblue !important;
}

.bg-details {
  background-color: #d1e9ff !important;
}

.field-control {
    display: block;
    width: 100%;
    padding: 8px 40px  8px 10px;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.field-control:focus {
    color: #000000;
    border-color: transparent;
    outline: none;
    box-shadow: none;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.lazy-img {
  filter: blur(35px);
  visibility: hidden;
  transition: filter 0.8s ease-in-out;
}

.lazy-img.loaded {
  visibility: visible;
  filter: blur(0);
  transition: filter 1.6s ease-in-out;
}

.offcanvas-end {
  position: fixed;
  overflow-y: scroll;
  height: 1000px;
  width: inherit;
}

.offcanvas-header {
    background-color: aliceblue;
}

/* Media Query for Mobile Devices */

	@media (320px <= width <= 480px) {

    .full-width {
      width: 100% !important;
    }

    .field-control {
      display: block;
      width: 100%;
      padding: 8px 30px  8px 30px;
    }
}


/* Media Query for low resolution  Tablets, iPad */

  @media (481px <= width <= 767px) {

    .full-width {
      width: 100% !important;
    }

    .field-control {
      display: block;
      width: 100%;
      padding: 8px 90px  8px 29px;
    }
  }