* {
  box-sizing: border-box;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/css/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins Medium';
  src: url('/static/css/fonts/Poppins-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins SemiBold';
  src: url('/static/css/fonts/Poppins-SemiBold.ttf') format('truetype');
}

body {
  display: table;
  width: 100%;
  min-width: 300px;
  max-width: 1920px;
  min-height: 100vh;
  margin: 0 auto !important;

  color: #4F4F4F;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
}

select, select option, select option:focus  {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
}
@media (min-width: 992px) {
  body {
    /*font-size: 12px !important;*/
  }
  select, select option, select option:focus {
    font-size: 14px !important;
  }
}
@media (min-width: 1440px) {
  body {
    /*font-size: 14px !important;*/
  }
  select, select option, select option:focus {
    /*font-size: 14px !important;*/
  }
}

/* Mobile sizes */
h1, .h1 {
  color: #333 !important;
  font-family: 'Poppins Medium' !important;
  font-size: 20px !important;
}
h2, .h2 {
  color: #333 !important;
  font-family: 'Poppins Medium' !important;
  font-size: 18px !important;
}

h3, .h3 {
  color: #333 !important;
  font-family: 'Poppins Medium' !important;
  font-size: 20px !important;
}
h4, .h4 {
  color: #333 !important;
  font-size: 18px !important;
}
h5, .h5 {
  color: #333 !important;
  font-family: 'Poppins Medium' !important;
  font-size: 14px !important;
}
h6, .h6 {
  color: #333 !important;
  font-family: 'Poppins Medium' !important;
  font-size: 13px !important;
}
/* Laptop sizes */
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 24px !important;
  }
  h2, .h2 {
    font-size: 20px !important;
  }
}
/* Desktop sizes */
@media (min-width: 1440px) {
  h1, .h1 {
    font-size: 30px !important;
  }
  h2, .h2 {
    font-size: 24px !important;
  }
}

/********************************************************************************
// Font
*********************************************************************************/
.Poppins {
  font-family: 'Poppins' !important;
}
.Poppins-Medium {
  font-family: 'Poppins Medium' !important;
}
.Poppins-SemiBold {
  font-family: 'Poppins SemiBold' !important;
}

.lower-text {
  vertical-align: middle;
}
.underline {
  text-decoration: underline;
}

.font-mi {
  font-size: 10px !important;
}
.font-sm {
  font-size: 12px !important;
}
.font-md {
  font-size: 14px !important;
}
.font-lg {
  font-size: 17px !important;
  font-family: 'Poppins Medium' !important;
}
.font-xl {
  font-size: 28px !important;
  font-family: 'Poppins Medium' !important;
}

.font-10 {
  font-size: 10px !important;
}
.font-12 {
  font-size: 12px !important;
}
.font-13 {
  font-size: 13px !important;
}
.font-14 {
  font-size: 14px !important;
}
.font-16 {
  font-size: 16px !important;
}
.font-17 {
  font-size: 17px !important;
}
.font-18 {
  font-size: 18px !important;
}
.font-20 {
  font-size: 20px !important;
}
.font-24 {
  font-size: 24px !important;
}
.font-28 {
  font-size: 28px !important;
}
.font-36 {
  font-size: 36px !important;
}
.font-48 {
  font-size: 48px !important;
}
@media (max-width: 767px) {
  .font-sm-10 {
    font-size: 10px !important;
  }
  .font-sm-12 {
    font-size: 12px !important;
  }
  .font-sm-14 {
    font-size: 14px !important;
  }
  .font-sm-16 {
    font-size: 16px !important;
  }
  .font-sm-20 {
    font-size: 20px !important;
  }
  .font-sm-24 {
    font-size: 24px !important;
  }
  .font-sm-28 {
    font-size: 28px !important;
  }
  .font-sm-36 {
    font-size: 36px !important;
  }
  .font-sm-48 {
    font-size: 48px !important;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .font-md-10 {
    font-size: 10px !important;
  }
  .font-md-12 {
    font-size: 12px !important;
  }
  .font-md-14 {
    font-size: 14px !important;
  }
  .font-md-16 {
    font-size: 16px !important;
  }
  .font-md-20 {
    font-size: 20px !important;
  }
  .font-md-24 {
    font-size: 24px !important;
  }
  .font-md-28 {
    font-size: 28px !important;
  }
  .font-md-36 {
    font-size: 36px !important;
  }
  .font-md-48 {
    font-size: 48px !important;
  }
}
@media (min-width: 1400px) {
  .font-lg-10 {
    font-size: 10px !important;
  }
  .font-lg-12 {
    font-size: 12px !important;
  }
  .font-lg-14 {
    font-size: 14px !important;
  }
  .font-lg-16 {
    font-size: 16px !important;
  }
  .font-lg-20 {
    font-size: 20px !important;
  }
  .font-lg-24 {
    font-size: 24px !important;
  }
  .font-lg-28 {
    font-size: 28px !important;
  }
  .font-lg-36 {
    font-size: 36px !important;
  }
  .font-lg-48 {
    font-size: 48px !important;
  }
}

.line-height-10 {
  line-height: 10px !important;
}
.line-height-12 {
  line-height: 12px !important;
}
.line-height-14 {
  line-height: 14px !important;
}
.line-height-16 {
  line-height: 16px !important;
}
.line-height-20 {
  line-height: 20px !important;
}
.line-height-24 {
  line-height: 24px !important;
}
.line-height-28 {
  line-height: 28px !important;
}
.line-height-36 {
  line-height: 36px !important;
}
.line-height-48 {
  line-height: 48px !important;
}

/********************************************************************************
// Form
*********************************************************************************/
input,
select {
  height: 48px;
  padding: 0 20px !important;
  color: #4F4F4F !important;
  font-family: 'Poppins Medium' !important;
  font-size: 16px !important;
  border: 1px solid #BDBDBD !important;
}
input::placeholder,
textarea::placeholder {
  color: #838383 !important;
  font-family: 'Poppins' !important;
  font-size: 14px !important;
}
label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
}

input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  accent-color: #000;
  margin-right: .5rem;
}
input[type="checkbox"].checkbox-sm {
  width: 18px !important;
  height: 18px !important;
}

input[type="radio"] {
  width: 24px !important;
  height: 24px !important;
  accent-color: #0B4971 !important;
}
input[type="radio"].radio-sm {
  width: 18px !important;
  height: 18px !important;
}

input[type="radio"].radio-square {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  padding: 0 !important;
  border-radius: -50%;
}

input[type="radio"].radio-square:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: -50%;
}

input[type="radio"].radio-square:checked:before {
  background: #000;
}
input[type="radio"].radio-square.primary-2:checked:before {
  background: #00758E;
}
input[type="radio"].radio-square.secondary-1:checked:before {
  background: #FF8D06;
}

input.input-sm,
select.input-sm {
  height: 40px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
}
.invalid-input {
  border: 1px solid #C30000 !important;
}
.invalid-span {
  display: block;
  position: relative;
  padding-right: 0.25rem !important;
  padding-top: 0.25rem !important;
  color: #C30000;
  font-size: 12px !important;
}
.invalid-icon {
  position: absolute;
  z-index: 2;
  right: 0px;
  top: -48px !important;
  width: 48px;
  height: 48px;

  color: #C30000 !important;
  line-height: 48px;
  font-size: 24px !important;
  text-align: center;

  background: #FFF !important;
  border: 1px solid #C30000 !important;
  border-left: none !important;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*
  Create an input with an icon / button

  <div class="input-btn">
    <input>
    (<button>)
      <i class="bi-* (font) (color) (padding)"></i>
    (</button>)
  </div>

  (optional)
*/
.input-btn,
.input-btn-sm {
  position: relative;
}
.input-btn i,
.input-btn button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;

  background: none;
  border: none;
  outline: 1px solid transparent;
}
.input-btn-sm i,
.input-btn-sm button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;

  background: none;
  border: none;
  outline: 1px solid transparent;
}

/********************************************************************************
// Pagination
*********************************************************************************/
.pagination {
  display: block !important;
}

.pagination span:first-child { /* Prev */
  padding-left: 0 !important;
  padding-right: .5rem !important;
}
.pagination span:last-child { /* Next */
  padding-left: .5rem !important;
  padding-right: 0 !important;
}

.pagination button,
.pagination span { /* Pages and "..." */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.pagination button.active,
.pagination button.active:hover {
  cursor: auto !important;
  background: #D1F0F4 !important;

}

/********************************************************************************
// Buttons
*********************************************************************************/
a.btn,
button {
  white-space: nowrap!important;
}

a[class*="btn primary"]:hover,
button[class*="primary"]:hover {
  color: #FFF !important;
  background: #00B1C9;
}
a[class*="btn secondary"]:hover,
button[class*="secondary"]:hover {
  color: #FFF !important;
  background: #FF6B18;
}

.btn,
.btn-sm {
  height: 40px !important;
  padding: 0px 40px !important;

  color: #4F4F4F !important;
  font-size: 12px !important;
  line-height: 40px !important;

  border: 1px solid #838383 !important;
  border-radius: 5px !important;
}
.btn-sm-s {
  height: 40px !important;
  padding: 0px 20px !important;

  color: #4F4F4F !important;
  font-family: 'Poppins Medium' !important;
  font-size: 14px !important;
  line-height: 20px !important;

  border: 1px solid #838383 !important;
  border-radius: 5px !important;
}
.btn-md {
  height: 48px !important;
  padding: 0px 40px !important;

  font-family: 'Poppins Medium' !important;
  font-size: 14px !important;
  line-height: 48px !important;
}
.btn-lg {
  height: 48px !important;
  padding: 0px 100px !important;

  font-family: 'Poppins Medium' !important;
  font-size: 14px !important;
  line-height: 48px !important;
}
.btn-xl {
  height: 48px !important;
  padding: 0px 140px !important;

  font-family: 'Poppins Medium' !important;
  font-size: 14px !important;
  line-height: 48px !important;
}
.btn:hover {
  background: #F2F2F2;
}

.btn a {
  color: #333 !important;
  text-decoration: none !important;
}
.btn-primary a,
.btn-secondary a,
.btn-danger a,
button[disabled] a {
  color: #fff !important;
}

.btn.btn-icon {
  height:  30px !important;
  padding: 0px 7px!important;
  color: #333 !important;
  font-size: 16px !important;
  line-height: 30px !important;
  background: #F2F2F2 !important;
  border-radius: 3px !important;
}
.btn.btn-primary {
  color: #FFF !important;
  border: none !important;
  background: #00B1C9;
}
.btn.btn-secondary {
  color: #FFF !important;
  border: none !important;
  background: #FF8D06;
}
.btn.btn-danger {
  color: #FFF !important;
  border: none !important;
  background: #C30000 !important;
}

.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
  background: #0092A6 !important;
}
.btn.btn-secondary:active,
.btn.btn-secondary:focus,
.btn.btn-secondary:hover {
  background: #FF6B18 !important;
}
.btn.btn-danger:active,
.btn.btn-danger:focus,
.btn.btn-danger:hover {
  background: #990000 !important;
}

button[disabled],
a[disabled] {
  background: #BDBDBD !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.btn.background-primary-1 {
  color: #FFF !important;
  background: #0B4971 !important;
  border: 1px solid #0B4971 !important;
}
.btn.background-primary-2 {
  color: #FFF !important;
  background: #00758E !important;
  border: 1px solid #00758E !important;
}
.btn.background-primary-3 {
  color: #FFF !important;
  background: #0092A6 !important;
  border: 1px solid #0092A6 !important;
}
.btn.background-primary-4 {
  color: #FFF !important;
  background: #00B1C9 !important;
  border: 1px solid #00B1C9 !important;
}
.btn.background-primary-5 {
  color: #FFF !important;
  background: #80D9E5 !important;
  border: 1px solid #80D9E5 !important;
}
.btn.background-primary-6 {
  color: #FFF !important;
  background: #D1F0F4 !important;
  border: 1px solid #D1F0F4 !important;
}
.btn.background-primary-7 {
  color: #FFF !important;
  background: #EEF4F4 !important;
  border: 1px solid #EEF4F4 !important;
}

.btn.background-secondary-1,
.btn.background-secondary-2:hover {
  color: #FFF !important;
  background: #FF6636 !important;
  border: 1px solid #FF6636 !important;
}
.btn.background-secondary-2 {
  color: #FFF !important;
  background: #FFBD06 !important;
  border: 1px solid #FFBD06 !important;
}
/* added neutral background for order detail page status bar */
.btn.background-neutral-1 {
  color: #FFF !important;
  background: #eee !important;
  border: 1px solid #eee !important;
}

/* Added neutral button 11/27 for order list page */

.btn.btn-neutral {
  color: #4F4F4F !important;
  background: #FFF !important;
  border: 1px solid #828282 !important;
}

/* Added for neutral color button */
.btn.btn-neutral:hover {
  background: #EEF4F4 !important;
}

/********************************************************************************
// Main
*********************************************************************************/
.main-px {
  padding-left: 4.5rem !important;
  padding-right: 4.5rem !important;
}
.main-py {
  padding-top: 5px !important;
  padding-bottom: 40px !important;
}
@media screen and (max-width: 767px) {
  .main-px {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media (min-width: 768px) {
  .main-py {
    padding-top: 20px !important;
  }
}
@media (min-width: 1299px) {
  .main-py {
    padding-top: 40px !important;
  }
}

.banner {
/* Stretches element past main padding */
  position: relative;
  left: -1.5rem;
  top: 0px;
  width: calc(100% + 3rem);
}
@media (min-width: 768px) {
  .banner {
    top: -20px;
    left: -4.5rem;
    width: calc(100% + 9rem);
  }
}
@media (min-width: 1299px) {
  .banner {
    top: -40px;
  }
}


.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  max-width: 100%!important;
}

.center-container {
  margin: 0 auto !important;
  max-width: 1200px;
}
@media (min-width: 992px) {
  .center-lg-container {
    margin: 0 auto !important;
    max-width: 1200px !important;
  }
}

#popup_message {
  position: absolute;
  z-index: 9001;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: rgba(0,0,0,0.5);
}
#popup_message p {
  display: table;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  padding: 40px !important;
  background: #FFF;
  border-radius: 10px;
}

/********************************************************************************
// Navbar
*********************************************************************************/
/* WY Added 11/15 to fix webkit cancel button overlapping with search icon */
#searchbar ::-webkit-search-cancel-button {
  margin-right: 30px;
  cursor: pointer;
}

header {
  position: relative;
  z-index: 100;
}

.navbar-brand {
  display: block;
  position: relative;
  z-index: 1;
  /*max-width: 140px;*/
  /*width: 150px !important;*/
  /*height: 58px !important;*/
}
@media (max-width: 767px) {
  .navbar-brand img {
    max-width: 100px;
  }
}

#searchbar input {
  text-indent: 10px !important;
}
@media (min-width: 992px) {
  #searchbar {
    max-width: 500px;
  }
}

.main-nav {
  position: relative;
  line-height: 58px;
  /*display: flex;*/
}
.user_nav {
  /*position: absolute;*/
  z-index: 1;
  top: 0;
  right: 0px;
  line-height: 56px;
}
/*#signup_nav {
  top: 35px;
}*/
/*@media (max-width: 440px) {
  .user_nav {
    flex-direction: column;
  }
  .user_nav li {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .user_nav li:last-child {
    line-height: 58px;
  }
  #signup_nav {
    padding-right: 0.5rem !important;
  }
  #signup_nav li:last-child {
    line-height: 116px;
  }
  #searchbar {
    min-width: 180px;
    width: calc(100% - 100px);
  }
}*/
@media (min-width: 992px) {
  .user_nav {
/*    position: relative;
    top: 0;
    line-height: 56px;*/
  }
/*  #signup_nav {
    top: 0;
  }*/
}
@media (max-width: 767px) {
  .user_nav .dropdown-menu {
    top: -15px !important;
  }
}
.user_nav .dropdown-menu {
  box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.1);
}
.user_nav .dropdown-item {
  line-height: 24px;
}

.menu-item:hover {
  background: none !important;
  text-decoration: underline !important;
}



.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
}

/********************************************************************************
// Breadcrumb
*********************************************************************************/
.breadcrumb-chevron {
  --bs-breadcrumb-divider: url(
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"
    );
  gap: .5rem;
}
.breadcrumb-chevron .breadcrumb-item {
  display: flex;
  gap: inherit;
  align-items: center;
  padding-left: 0;
  line-height: 1;
}
.breadcrumb-chevron .breadcrumb-item::before {
  float: none;
  gap: inherit;
  width: 1rem;
  height: 1rem;
}

/********************************************************************************
// Product
*********************************************************************************/
.price {
  position: relative;
  display: table;
  color: #333;
  font-family: 'Poppins Medium';
  font-size: 24px;
}
.price .msrp {
  margin-left: 10px;
  color: #838383;
  font-size: 16px;
  text-decoration: line-through;
}
.price .discount {
  position: absolute ;
  top: 30px;
  color: #fff !important;
  font-family: 'Poppins Medium';
  font-size: 20px;

  background: #C30000;
  border-radius: 5px;
}
@media (min-width: 768px) {
  .price .discount {
    top: 40px;
  }
}
.bg_orange {background-color: #fd7e14 !important;}

/********************************************************************************
// Footer
*********************************************************************************/
footer {
/*  position: relative;
  z-index: 1;*/
}

.social {
  color: #fff;
}
.facebook {
  background: #3B5998;
}
.twitter-x {
  background: #000;
}
.youtube {
  background: #FF0000;
}
.instagram {
  background:
    linear-gradient(270deg, rgba(214,41,118,0.5) 50%, rgba(0,0,0,0) 100%),
    linear-gradient(45deg, rgba(254,218,117,1) 25%, rgba(250,126,30,0.7) 40%, rgba(0,0,0,0) 50%),
    linear-gradient(90deg, rgba(79,91,213,1) 33.33%, rgba(150,47,191,1) 100%);
  /* pink -> transparent */
  /* yellow -> orange -> transparent */
  /* blue -> purple */
}
.threads {
  background: linear-gradient(135deg, #5458D2 25%, #E03174 50%, #F2713A 75%, #FED674 100%);
  /* blue -> pink -> orange -> yellow */
}

#scroll_to_top {
  display: none;
  z-index: 999;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  color: #fff;
  background: #5c5d5f;
}
#scroll_to_top:hover {
  background: #0056b3;
}

/********************************************************************************
// Colors
*********************************************************************************/
a {
  color: #333 !important;
}
a.btn {
  color: #000 !important;
}
.nav-item a {
  text-decoration: none;
}
.text-decoration-none a {
  text-decoration: none !important;
}

.primary-1,
a.primary-1 {
  color: #0B4971 !important;
}
.primary-2,
a.primary-2 {
  color: #00758E !important;
}
.primary-3,
a.primary-3 {
  color: #0092A6 !important;
}
.primary-4,
a.primary-4 {
  color: #00B1C9 !important;
}
.primary-5,
a.primary-5 {
  color: #80D9E5 !important;
}
.primary-6,
a.primary-6 {
  color: #D1F0F4 !important;
}
.primary-7,
a.primary-7 {
  color: #EEF4F4 !important;
}

.hover-black:hover {
  color: #000 !important;
}
.hover-primary-1:hover {
  color: #0B4971 !important;
}
.hover-primary-1 a:hover {
  color: #0B4971 !important;
}

.hover-underline:hover {
  text-decoration: underline !important;
}
.hover-underline a:hover {
  text-decoration: underline !important;
}
.no-underline {
  text-decoration: none !important;
}

.background-primary-1 {
  background: #0B4971 !important;
}
.background-primary-2 {
  background: #00758E !important;
}
.background-primary-3 {
  background: #0092A6 !important;
}
.background-primary-4 {
  background: #00B1C9 !important;
}
.background-primary-5 {
  background: #80D9E5 !important;
}
.background-primary-6 {
  background: #D1F0F4 !important;
}
.background-primary-7 {
  background: #EEF4F4 !important;
}
.background-neutral-1 {
  background: #eee !important;
}

.secondary-1,
a.secondary-1 {
  color: #FF6636 !important;
}
.secondary-2,
a.secondary-2 {
  color: #FFBD06 !important;
}

.background-secondary-1 {
  background: #FF6636 !important;
}
.background-secondary-2 {
  background: #FFBD06 !important;
}

.accent-red,
a.accent-red {
  color: #C30000 !important;
}

.black,
a.black {
  color: #000 !important;
}
.white,
a.white {
  color: #FFF !important;
}

.gray-1,
a.gray-1 {
  color: #333 !important;
}
.gray-2,
a.gray-2 {
  color: #4F4F4F !important;
}
.gray-3,
a.gray-3 {
  color: #838383 !important;
}
.gray-4,
a.gray-4 {
  color: #BDBDBD !important;
}
.gray-5,
a.gray-5 {
  color: #E0E0E0 !important;
}
.gray-6,
a.gray-6 {
  color: #F2F2F2 !important;
}
.gray-7,
a.gray-7 {
  color: #F8F8F8 !important;
}

.background-gray-1 {
  background: #333 !important;
}
.background-gray-2 {
  background: #4F4F4F !important;
}
.background-gray-3 {
  background: #838383 !important;
}
.background-gray-4 {
  background: #BDBDBD !important;
}
.background-gray-5 {
  background: #E0E0E0 !important;
}
.background-gray-6 {
  background: #F2F2F2 !important;
}
.background-gray-7 {
  background: #F8F8F8 !important;
}

.border-primary-1 {
  border: 1px solid #0B4971 !important;
}
.border-primary-2 {
  border: 1px solid #00758E !important;
}
.border-primary-3 {
  border: 1px solid #0092A6 !important;
}
.border-primary-4 {
  border: 1px solid #00B1C9 !important;
}
.border-primary-5 {
  border: 1px solid #80D9E5 !important;
}
.border-primary-6 {
  border: 1px solid #D1F0F4 !important;
}

.border-secondary-1 {
  border: 1px solid #FF6636 !important;
}
.border-secondary-2 {
  border: 1px solid #FFBD06 !important;
}

.border-accent-red {
  border: 1px solid #C30000 !important;
}

.border-black {
  border: 1px solid #000 !important;
}
.border-white {
  border: 1px solid #FFF !important;
}

.border-gray-1 {
  border: 1px solid #333 !important;
}
.border-gray-2 {
  border: 1px solid #4F4F4F !important;
}
.border-gray-3 {
  border: 1px solid #838383 !important;
}
.border-gray-4 {
  border: 1px solid #BDBDBD !important;
}
.border-gray-5 {
  border: 1px solid #E0E0E0 !important;
}
.border-gray-6 {
  border: 1px solid #F2F2F2 !important;
}
.border-gray-7 {
  border: 1px solid #F8F8F8 !important;
}

.border-top-gray {
  border-top: 1px solid #BDBDBD;
}
.border-bottom-gray {
  border-bottom: 1px solid #BDBDBD;
}

@media (min-width: 768px) {
  .primary-md-1 {
    color: #0B4971 !important;
  }
  .primary-md-2 {
    color: #00758E !important;
  }
  .primary-md-3 {
    color: #0092A6 !important;
  }
  .primary-md-4 {
    color: #00B1C9 !important;
  }
  .primary-md-5 {
    color: #80D9E5 !important;
  }
  .primary-md-6 {
    color: #D1F0F4 !important;
  }
  .primary-md-7 {
    color: #EEF4F4 !important;
  }

  .background-md-primary-1 {
    background: #0B4971 !important;
  }
  .background-md-primary-2 {
    background: #00758E !important;
  }
  .background-md-primary-3 {
    background: #0092A6 !important;
  }
  .background-md-primary-4 {
    background: #00B1C9 !important;
  }
  .background-md-primary-5 {
    background: #80D9E5 !important;
  }
  .background-md-primary-6 {
    background: #D1F0F4 !important;
  }
  .background-md-primary-7 {
    background: #EEF4F4 !important;
  }

  .secondary-1 {
    color: #FF6636 !important;
  }
  .secondary-2 {
    color: #FFBD06 !important;
  }

  .background-md-secondary-1 {
    background: #FF6636 !important;
  }
  .background-md-secondary-2 {
    background: #FFBD06 !important;
  }

  .accent-md-red {
    color: #C30000 !important;
  }

  .black-md {
    color: #000 !important;
  }
  .white-md {
    color: #FFF !important;
  }

  .gray-md-1 {
    color: #333 !important;
  }
  .gray-md-2 {
    color: #4F4F4F !important;
  }
  .gray-md-3 {
    color: #838383 !important;
  }
  .gray-md-4 {
    color: #BDBDBD !important;
  }
  .gray-md-5 {
    color: #E0E0E0 !important;
  }
  .gray-md-6 {
    color: #F2F2F2 !important;
  }
  .gray-md-7 {
    color: #F8F8F8 !important;
  }

  .background-md-gray-1 {
    background: #333 !important;
  }
  .background-md-gray-2 {
    background: #4F4F4F !important;
  }
  .background-md-gray-3 {
    background: #838383 !important;
  }
  .background-md-gray-4 {
    background: #BDBDBD !important;
  }
  .background-md-gray-5 {
    background: #E0E0E0 !important;
  }
  .background-md-gray-6 {
    background: #F2F2F2 !important;
  }
  .background-md-gray-7 {
    background: #F8F8F8 !important;
  }
}
@media (min-width: 1440px) {
  .primary-lg-1 {
    color: #0B4971 !important;
  }
  .primary-lg-2 {
    color: #00758E !important;
  }
  .primary-lg-3 {
    color: #0092A6 !important;
  }
  .primary-lg-4 {
    color: #00B1C9 !important;
  }
  .primary-lg-5 {
    color: #80D9E5 !important;
  }
  .primary-lg-6 {
    color: #D1F0F4 !important;
  }
  .primary-lg-7 {
    color: #EEF4F4 !important;
  }

  .background-lg-primary-1 {
    background: #0B4971 !important;
  }
  .background-lg-primary-2 {
    background: #00758E !important;
  }
  .background-lg-primary-3 {
    background: #0092A6 !important;
  }
  .background-lg-primary-4 {
    background: #00B1C9 !important;
  }
  .background-lg-primary-5 {
    background: #80D9E5 !important;
  }
  .background-lg-primary-6 {
    background: #D1F0F4 !important;
  }
  .background-lg-primary-7 {
    background: #EEF4F4 !important;
  }

  .secondary-lg-1 {
    color: #FF6636 !important;
  }
  .secondary-lg-2 {
    color: #FFBD06 !important;
  }

  .background-lg-secondary-1 {
    background: #FF6636 !important;
  }
  .background-lg-secondary-2 {
    background: #FFBD06 !important;
  }

  .accent-lg-red {
    color: #C30000 !important;
  }

  .black-lg {
    color: #000 !important;
  }
  .white-lg {
    color: #FFF !important;
  }

  .gray-lg-1 {
    color: #333 !important;
  }
  .gray-lg-2 {
    color: #4F4F4F !important;
  }
  .gray-lg-3 {
    color: #838383 !important;
  }
  .gray-lg-4 {
    color: #BDBDBD !important;
  }
  .gray-lg-5 {
    color: #E0E0E0 !important;
  }
  .gray-lg-6 {
    color: #F2F2F2 !important;
  }
  .gray-lg-7 {
    color: #F8F8F8 !important;
  }

  .background-lg-gray-1 {
    background: #333 !important;
  }
  .background-lg-gray-2 {
    background: #4F4F4F !important;
  }
  .background-lg-gray-3 {
    background: #838383 !important;
  }
  .background-lg-gray-4 {
    background: #BDBDBD !important;
  }
  .background-lg-gray-5 {
    background: #E0E0E0 !important;
  }
  .background-lg-gray-6 {
    background: #F2F2F2 !important;
  }
  .background-lg-gray-7 {
    background: #F8F8F8 !important;
  }
}

.background-error {
  background: #FFF0F0 !important;
}

.active-text,
a.active-text {
  color: #0B4971 !important;
  font-family: 'Poppins Medium';
}
.active-bg,
a.active-bg {
  color: #fff !important;
  border: 1px solid #0B4971 !important;
  background: #0B4971 !important;
}

.alert {
  border-color: transparent !important;
}
.alert i {
  padding-right: 5px;
}
.alert button {
  position: relative !important;
  padding: 0px 10px !important;
  height: 9px;
}
.alert-info {
  border: none !important;
  background: #EEF4F4 !important;
}
.alert-danger {
  color: #C30000 !important;
  border: none !important;
  background: #FFF0F0 !important;
}

/********************************************************************************
// Effects
*********************************************************************************/
/*
  Add transparency to a background image without affecting other elements:

  <div id="div_with_bg">
    <div class="bg-opacity-mask"></div>

    <stuff></stuff>
    <more stuff></more stuff>
  </div>
 */
.bg-opacity-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
}
*[class*="opacity-mask"] ~ * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
  .bg-sm-opacity-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.6);
  }
}
@media (max-width: 1400px) {
  .bg-md-opacity-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.6);
  }
}
@media (min-width: 1400px) {
  .bg-xxl-opacity-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.6);
  }
}

/********************************************************************************
// Animations
*********************************************************************************/
.hidden  {
  opacity: 0 !important;
}
.fade-in {
  opacity: 1 !important;
  transition: opacity 0.5s ease-out !important;
}

/********************************************************************************
// Misc.
*********************************************************************************/
.hover-cursor:hover {
  cursor: pointer;
}

.nowrap {
  white-space: nowrap !important;
}

.title-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* Header Styling */
span.cart-qty {
  font-size: 10px;
  top: 5px;
  font-style: normal;
}

span.cart-price {
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}