@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

* {
  box-sizing: border-box;
  /* color: black; */
}

body {
  /* body has default 8px margin on all sides (but no default padding) */
  margin: 0;
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
}

form {
  display: inline;
}

h1 {
  text-align: center;
  margin-top: 0;
}

.small-txt {
  font-size: 1rem;
}

.centered {
  text-align: center;
}

.image img {
  max-width: 100%;
}

.main-header {
  width: 100%;
  height: 3rem;
  background-color: #292a2b;
  padding: 0 1.5rem;
  display: flex;
  /* Aligns vertically */
  align-items: center;
}

.main-header__nav {
  width: 100%;
  display: none;
  align-items: center;
  justify-content: space-between;
}

/* ul */
.main-header__item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* li */
.main-header__item {
  margin: 0 1rem;
  z-index: 5;
}

.main-header__item a,
.main-header__item button {
  text-decoration: none;
  color: #fff;
}

.main-header__item a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #bebebe;
  transition: width 0.3s;
}

.main-header__item a:hover::after {
  width: 100%;
}

.main-header__item a:hover,
.main-header__item a:active,
.main-header__item a.active,
.main-header__item button:hover,
.main-header__item button:active {
  color: #bebebe;
}

.mobile-nav {
  width: 30rem;
  height: 100vh;
  max-width: 90%;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: 2rem;
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}

.mobile-nav.open {
  transform: translateX(0);
}

.mobile-nav__item-list {
  list-style: none;
  /* ul has top and bottom default margin of 1em */
  margin: 0;
  /* ul has default padding-inline-start of 40px */
  padding: 0;
}

.mobile-nav__item {
  /* margin: 5px 16px; */
  text-align: center;
  padding: 2px 7px;
}

.mobile-nav__item:first-of-type {
  margin-top: 0;
  white-space: nowrap !important;
  direction: ltr !important;
}

.mobile-nav__item a,
.mobile-nav__item button {
  font: inherit;
  text-decoration: none;
  color: #000;
  font-size: 20px;
  padding: 0.5rem 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.mobile-nav__item a:active,
.mobile-nav__item a:hover,
.mobile-nav__item a.active,
.mobile-nav__item button:hover,
.mobile-nav__item button:active {
  background: #F0C14B;
  color: black;
  border-radius: 5px;
  padding: 3px 3px;
  margin: 3px 3px;
  font-size: 20px;
}

.logout-button_prod {
    background-color: #f0c14b;
    padding: 3px 3px;
    border-radius: 3px 3px;
}

#side-menu-toggle {
  border: 1px solid #fff;
  font: inherit;
  padding: 0.4rem;
  display: block;
  background: transparent;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

#side-menu-toggle:focus {
  outline: none;
}

#side-menu-toggle:active,
#side-menu-toggle:hover {
  color: #bebebe;
  border-color: #bebebe;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  display: none;
}

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  border-radius: 5px;
  /* Using flexbox to ensure card__actions (details, add to cart buttons) are aligned with bottom of card */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card__header,
.card__content {
  padding: 1rem;
}

.card__header h1,
.card__content h1,
.card__content h2,
.card__content p {
  margin: 0;
}

.card__image {
  width: 100%;
}

.card__image img {
  width: 100%;
}

.card__actions {
  padding: 1rem;
  text-align: center;
}

.card__actions button,
.card__actions a {
  /* margin: 0 0.25rem; */
}

.btn {
  display: inline-block;
  padding: 0.25rem 1rem;
  text-decoration: none;
  font: inherit;
  border: 1px solid #37474f;
  color: #ffffff;
  background: #222222;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

/* Applies to "add to cart" button on products page that appears when user is logged in */
button.btn {
  /* margin-top: 0.7rem; */
}

.btn-danger {
  display: inline-block;
  padding: 0.25rem 1rem;
  text-decoration: none;
  font: inherit;
  border: 1px solid #37474f;
  color: #37474f;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  color: #d9534f;
  border-color: #d9534f;
  transition: 0.3s;
}

.btn-danger:hover,
.btn-danger:active {
  background-color: #d9534f;
  color: #fff;
}

.btn:hover,
.btn:active {
  background-color: #990b0b;
  color: #fff;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.75rem;
  /* To center within main, since it has a width set on some breakpoints */
  margin-left: auto;
  margin-right: auto;
}

.logout {
  cursor: pointer;
  outline: none;
}

.product-detail-description {
  margin-bottom: 1.5rem;
}

/* Password reset link */
.reset {
  margin-top: -3.5rem;
  text-align: center;
}

.user-message {
  margin: 161px auto;
  width: 90%;
  padding: 0.75rem 1.25rem;
  margin-bottom: 11rem;
  text-align: center;
  border-radius: 5px;
  /* Same colors for Bootstrap 4 primary alert */
  border: 1px solid #b8daff;
  background-color: #cce5ff;
  color: #004085;
}

li:last-of-type {
  margin-bottom: 0;
}

.user-message--error {
  /* Same colors for Bootstrap 4 danger alert */
  border: 1px solid #f5c6cb;
  background-color: #f8d7da;
  color: #721c24;
  margin: 100px auto;
}

.pagination {
  margin: 0 0 2rem;
  text-align: center;
}

.pagination a {
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  color: #37474f;
  border: 1px solid #37474f;
  border-radius: 5px;
  margin: 0 0.3rem;
}

.pagination a:hover,
.pagination a:active,
.pagination a.active {
  background: #37474f;
  color: #fff;
}

main {
  margin: 1.5rem auto;
}

/* Smartphones */
@media (max-width: 767px) {
  .main-header {
    padding: 2rem 1rem 2rem 0.7rem;
  }

  main {
    margin-top: 0.75rem;
  }
}

/* Tablets and larger devices */
@media (min-width: 768px) {
  .main-header__nav {
    display: flex;
  }

  #side-menu-toggle {
    display: none;
  }

  .user-message {
    width: 30rem;
  }
}

/* Larger computer screens */
@media screen and (min-width: 1600px) {
  .grid {
    width: 80%;
  }
}


/* Responsive styles for search bar */

.search-form,
.mobile-search-form {
  display: flex;
  align-items: center;
  margin: 0 1rem;
}

.search-form input,
.search-form select,
.mobile-search-form input,
.mobile-search-form select {
  margin-right: 0.5rem;
  padding: 0.25rem;
}

.search-form button,
.mobile-search-form button {
  padding: 0.25rem 0.5rem;
  background-color: #f0c14b;
  color: white;
  border: 1px solid #070707;
  border-radius: 3px;
  cursor: pointer;
  color: black;
}

.search-form button:hover,
.search-form button:active,
.mobile-search-form button:hover,
.mobile-search-form button:active {
  background-color: #f0c14b;
  border-color: #f0c14b;
  color: white;
}

@media (max-width: 768px) {
  .search-form {
    display: none;
  }
  
  .mobile-search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .mobile-search-form input,
  .mobile-search-form select,
  .mobile-search-form button {
    margin: 0.5rem 0;
    width: 100%;
  }
}


/* filter form */

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filter-form select {
  padding: 0.5rem;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.filter-form button {
  padding: 0.5rem 1rem;
  background-color: #37474f;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.filter-form button:hover {
  background-color: #2c3a41;
}

@media (max-width: 768px) {
  .filter-form {
    flex-direction: column;
  }
}



/* advenced search :start */

.AnimateCa-ComFORM_1 {
  block-size: 313.6px;
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  height: 313.6px;
  inline-size: 1063.4px;
  margin-block-end: 0px;
  perspective-origin: 531.7px 156.8px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 531.7px 156.8px;
  width: 1063.4px;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  margin: 0px;
  outline: rgb(25, 25, 25) none 0px;
  width: 100%;
  max-width: 1200px;
}/*.AnimateCa-ComFORM_1*/

.AnimateCa-ComFORM_1:after {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComFORM_1:after*/

.AnimateCa-ComFORM_1:before {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComFORM_1:before*/

.AnimateCa-ComDIV_2 {
  block-size: 30px;
  border-block-end-color: rgb(229, 229, 229);
  border-block-end-style: solid;
  border-block-end-width: 0.8px;
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  height: 30px;
  inline-size: 1063.4px;
  padding-block-end: 24px;
  perspective-origin: 531.7px 27.4px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 531.7px 27.4px;
  width: 1063.4px;
  border-top: 0px none rgb(25, 25, 25);
  border-right: 0px none rgb(25, 25, 25);
  border-bottom: 0.8px solid rgb(229, 229, 229);
  border-left: 0px none rgb(25, 25, 25);
  font: 700 24px / 30px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
  padding: 0px 0px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
  /* max-width: 600px; */
  /* margin: 0 auto; */
}/*.AnimateCa-ComDIV_2*/

.AnimateCa-ComDIV_2:after {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 700 24px / 30px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComDIV_2:after*/

.AnimateCa-ComDIV_2:before {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 700 24px / 30px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComDIV_2:before*/

.AnimateCa-ComFIELDSET_3 {
  /* block-size: 96.4px; */
  /* border-block-end-color: rgb(229, 229, 229); */
  /* border-block-end-style: solid; */
  /* border-block-end-width: 0.8px; */
  border-block-start-color: rgb(25, 25, 25);
  border-block-start-style: none;
  border-block-start-width: 0px;
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-end-style: none;
  border-inline-end-width: 0px;
  border-inline-start-color: rgb(25, 25, 25);
  border-inline-start-style: none;
  border-inline-start-width: 0px;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  height: 96.4px;
  /* inline-size: 1063.4px; */
  margin-inline-end: 0px;
  margin-inline-start: 0px;
  padding-block-end: 0px;
  padding-block-start: 0px;
  padding-inline-end: 0px;
  padding-inline-start: 0px;
  perspective-origin: 531.7px 48.6px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 531.7px 48.6px;
  width: 1063.4px;
  border-top: 0px none rgb(25, 25, 25);
  border-right: 0px none rgb(25, 25, 25);
  border-bottom: 0.8px solid rgb(229, 229, 229);
  border-left: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  margin: 0px;
  outline: rgb(25, 25, 25) none 0px;
  padding: 0px;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  /* padding: 20px; */
  width: 100%;
  /* max-width: 600px; */
  /* margin: 4px 40px; */
  height: 105px;
}/*.AnimateCa-ComFIELDSET_3*/

.AnimateCa-ComFIELDSET_3:after {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComFIELDSET_3:after*/

.AnimateCa-ComFIELDSET_3:before {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComFIELDSET_3:before*/

.AnimateCa-ComDIV_4 {
  block-size: 64.4px;
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  height: 64.4px;
  inline-size: 1063.4px;
  margin-block-end: 16px;
  margin-block-start: 16px;
  perspective-origin: 531.7px 32.2px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 531.7px 32.2px;
  width: 1063.4px;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  margin: 16px 0px;
  outline: rgb(25, 25, 25) none 0px;
  width: 100%;
}/*.AnimateCa-ComDIV_4*/

.AnimateCa-ComDIV_4:after {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComDIV_4:after*/

.AnimateCa-ComDIV_4:before {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComDIV_4:before*/

.AnimateCa-ComLABEL_5 {
  /* block-size: 16.8px; */
  /* border-block-end-color: rgb(25, 25, 25); */
  /* border-block-start-color: rgb(25, 25, 25); */
  /* border-inline-end-color: rgb(25, 25, 25); */
  /* border-inline-start-color: rgb(25, 25, 25); */
  /* caret-color: rgb(25, 25, 25); */
  color: rgb(25, 25, 25);
  /* column-rule-color: rgb(25, 25, 25); */
  display: block;
  height: 16.8px;
  /* inline-size: 232px; */
  /* margin-block-end: 8px; */
  /* margin-inline-end: 8px; */
  /* max-inline-size: 232px; */
  /* max-width: 232px; */
  perspective-origin: 232px 8.4px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 232px 8.4px;
  width: 232px;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  margin: 0px 8px 8px 0px;
  outline: rgb(25, 25, 25) none 0px;
  font-weight: bold;
  width: 100%;
}/*.AnimateCa-ComLABEL_5*/



.AnimateCa-ComLABEL_5:before {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComLABEL_5:before*/

.AnimateCa-ComSPAN_6 {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  cursor: default;
  inline-size: 100%;
  max-inline-size: 232px;
  max-width: 232px;
  perspective-origin: 0px 0px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  width: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 700 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComSPAN_6*/


.AnimateCa-ComSPAN_6:before {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  cursor: default;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 700 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComSPAN_6:before*/

.AnimateCa-ComSPAN_7 {
  block-size: 39.6px;
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  bottom: 0px;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  display: inline-block;
  height: 39.6px;
  inline-size: 232px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  /* inset-inline-start: 0px; */
  /* left: 0px; */
  /* max-inline-size: 232px; */
  /* max-width: 232px; */
  perspective-origin: 232px 19.8px;
  position: relative;
  right: 0px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 232px 19.8px;
  width: 232px;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
  /* position: relative; */
  width: 72%;
  width: 100%;
}/*.AnimateCa-ComSPAN_7*/



.AnimateCa-ComLABEL_8 {
  block-size: 16.8px;
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  bottom: 22.8px;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  display: block;
  height: 16.8px;
  inline-size: 232px;
  inset-block-end: 22.8px;
  inset-block-start: 0px;
  inset-inline-end: -16px;
  inset-inline-start: 16px;
  left: 16px;
  max-inline-size: 232px;
  max-width: 232px;
  perspective-origin: 232px 8.4px;
  pointer-events: none;
  position: absolute;
  right: -16px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-overflow: ellipsis;
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  transform: matrix(1, 0, 0, 1, 0, 12);
  transform-origin: 0px 8.4px;
  width: 232px;
  z-index: 1;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
  overflow: hidden;
  width: 100%;
}/*.AnimateCa-ComLABEL_8*/



.AnimateCa-ComLABEL_8:before {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  pointer-events: none;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComLABEL_8:before*/

.AnimateCa-ComSPAN_9 {
  align-items: center;
  block-size: 39.6px;
  border-block-end-color: rgb(143, 143, 143);
  border-block-end-style: solid;
  border-block-end-width: 0.8px;
  border-block-start-color: rgb(143, 143, 143);
  border-block-start-style: solid;
  border-block-start-width: 0.8px;
  border-end-end-radius: 8px;
  border-end-start-radius: 8px;
  border-inline-end-color: rgb(143, 143, 143);
  border-inline-end-style: solid;
  border-inline-end-width: 0.8px;
  border-inline-start-color: rgb(143, 143, 143);
  border-inline-start-style: solid;
  border-inline-start-width: 0.8px;
  border-start-end-radius: 8px;
  border-start-start-radius: 8px;
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-gap: 8px;
  column-rule-color: rgb(25, 25, 25);
  display: inline-flex;
  height: 39.6px;
  /* inline-size: 232px; */
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  max-inline-size: 232px;
  /* max-width: 232px; */
  perspective-origin: 232px 19.8px;
  position: relative;
  right: 0px;
  row-gap: 8px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 232px 19.8px;
  width: 305px;
  background: rgb(247, 247, 247) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0.8px solid rgb(143, 143, 143);
  border-radius: 8px;
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
  overflow: hidden;
  width: 100%;
}/*.AnimateCa-ComSPAN_9*/


.AnimateCa-ComINPUT_10 {
  appearance: none;
  /* block-size: 38px; */
  border-block-end-color: rgb(25, 25, 25);
  border-block-end-style: none;
  border-block-end-width: 0px;
  border-block-start-color: rgb(25, 25, 25);
  border-block-start-style: none;
  border-block-start-width: 0px;
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-end-style: none;
  border-inline-end-width: 0px;
  border-inline-start-color: rgb(25, 25, 25);
  border-inline-start-style: none;
  border-inline-start-width: 0px;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  display: block;
  /* height: 38px; */
  inline-size: 462.4px;
  /* max-inline-size: 232px; */
  /* max-width: 232px; */
  min-block-size: auto;
  min-height: auto;
  min-inline-size: 232px;
  /* min-width: 232px; */
  padding-block-end: 2px;
  padding-block-start: 18px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
  perspective-origin: 231.2px 19px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 231.2px 19px;
  vertical-align: middle;
  width: 462.4px;
  background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(25, 25, 25);
  flex: 1 1 auto;
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
  padding: 16px;
  margin: 0;
  width: 100%;
}/*.AnimateCa-ComINPUT_10*/


.AnimateCa-ComFIELDSET_11 {
  block-size: 104.8px;
  border-block-end-color: rgb(229, 229, 229);
  border-block-end-style: solid;
  border-block-end-width: 0.8px;
  border-block-start-color: rgb(25, 25, 25);
  border-block-start-style: none;
  border-block-start-width: 0px;
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-end-style: none;
  border-inline-end-width: 0px;
  border-inline-start-color: rgb(25, 25, 25);
  border-inline-start-style: none;
  border-inline-start-width: 0px;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  /* height: 104.8px; */
  /* inline-size: 1063.4px; */
  /* margin-inline-end: 0px; */
  /* margin-inline-start: 0px; */
  /* padding-block-end: 0px; */
  /* padding-block-start: 0px; */
  /* padding-inline-end: 0px; */
  padding-inline-start: 0px;
  perspective-origin: 531.7px 52.8px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 531.7px 52.8px;
  width: 1063.4px;
  border-top: 0px none rgb(25, 25, 25);
  border-right: 0px none rgb(25, 25, 25);
  border-bottom: 0.8px solid rgb(229, 229, 229);
  border-left: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  margin: 0px;
  outline: rgb(25, 25, 25) none 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 20px; */
  /* width: 100%; */
  /* max-width: 600px; */
  /* margin: 0; */
  /* margin: 4px 40px; */
  width: 100%;
}/*.AnimateCa-ComFIELDSET_11*/


.AnimateCa-ComDIV_12 {
  /* block-size: 72.8px; */
  /* border-block-end-color: rgb(25, 25, 25); */
  /* border-block-start-color: rgb(25, 25, 25); */
  /* border-inline-end-color: rgb(25, 25, 25); */
  /* border-inline-start-color: rgb(25, 25, 25); */
  /* caret-color: rgb(25, 25, 25); */
  /* color: rgb(25, 25, 25); */
  /* column-rule-color: rgb(25, 25, 25); */
  /* height: 72.8px; */
  /* inline-size: 1063.4px; */
  /* margin-block-end: 16px; */
  /* margin-block-start: 16px; */
  /* perspective-origin: 531.7px 36.4px; */
  /* text-decoration: none solid rgb(25, 25, 25); */
  /* text-emphasis-color: rgb(25, 25, 25); */
  /* text-size-adjust: 100%; */
  /* transform-origin: 531.7px 36.4px; */
  /* width: 1063.4px; */
  /* border: 0px none rgb(25, 25, 25); */
  /* font: 14px "Market Sans", Arial, sans-serif; */
  /* margin: 16px 0px; */
  /* outline: rgb(25, 25, 25) none 0px; */
  width: 100%;
}/*.AnimateCa-ComDIV_12*/




.AnimateCa-ComLABEL_13 {
  /* block-size: 16.8px; */
  /* border-block-end-color: rgb(25, 25, 25); */
  /* border-block-start-color: rgb(25, 25, 25); */
  /* border-inline-end-color: rgb(25, 25, 25); */
  /* border-inline-start-color: rgb(25, 25, 25); */
  /* caret-color: rgb(25, 25, 25); */
  color: rgb(25, 25, 25);
  /* column-rule-color: rgb(25, 25, 25); */
  display: block;
  /* height: 16.8px; */
  /* inline-size: 1055.4px; */
  /* margin-block-end: 8px; */
  /* margin-inline-end: 8px; */
  /* perspective-origin: 527.7px 8.4px; */
  /* text-decoration: none solid rgb(25, 25, 25); */
  /* text-emphasis-color: rgb(25, 25, 25); */
  /* text-size-adjust: 100%; */
  /* transform-origin: 527.7px 8.4px; */
  width: 1055.4px;
  /* border: 0px none rgb(25, 25, 25); */
  /* font: 14px "Market Sans", Arial, sans-serif; */
  /* margin: 0px 8px 8px 0px; */
  /* outline: rgb(25, 25, 25) none 0px; */
  font-weight: bold;
  width: 100%;
}/*.AnimateCa-ComLABEL_13*/


.AnimateCa-ComDIV_14 {
  /* block-size: 40px; */
  /* border-block-end-color: rgb(25, 25, 25); */
  /* border-block-start-color: rgb(25, 25, 25); */
  /* border-inline-end-color: rgb(25, 25, 25); */
  /* border-inline-start-color: rgb(25, 25, 25); */
  /* caret-color: rgb(25, 25, 25); */
  /* color: rgb(25, 25, 25); */
  /* column-rule-color: rgb(25, 25, 25); */
  /* height: 40px; */
  /* inline-size: 1063.4px; */
  /* margin-block-end: 16px; */
  /* margin-block-start: 16px; */
  /* perspective-origin: 531.7px 20px; */
  /* text-decoration: none solid rgb(25, 25, 25); */
  /* text-emphasis-color: rgb(25, 25, 25); */
  /* text-size-adjust: 100%; */
  /* transform-origin: 531.7px 20px; */
  /* width: 1063.4px; */
  /* border: 0px none rgb(25, 25, 25); */
  /* font: 14px "Market Sans", Arial, sans-serif; */
  margin: 16px 0px;
  /* outline: rgb(25, 25, 25) none 0px; */
  width: 100%;
}/*.AnimateCa-ComDIV_14*/


.AnimateCa-ComSPAN_15 {
  /* block-size: 40px; */
  /* border-block-end-color: rgb(25, 25, 25); */
  /* border-block-start-color: rgb(25, 25, 25); */
  /* border-inline-end-color: rgb(25, 25, 25); */
  /* border-inline-start-color: rgb(25, 25, 25); */
  /* bottom: 0px; */
  /* caret-color: rgb(25, 25, 25); */
  /* color: rgb(25, 25, 25); */
  /* column-rule-color: rgb(25, 25, 25); */
  display: inline-block;
  /* height: 40px; */
  /* inline-size: 232px; */
  /* inset-block-end: 0px; */
  /* inset-block-start: 0px; */
  /* inset-inline-end: 0px; */
  /* inset-inline-start: 0px; */
  /* left: 0px; */
  /* perspective-origin: 116px 20px; */
  /* position: relative; */
  /* right: 0px; */
  /* text-decoration: none solid rgb(25, 25, 25); */
  /* text-emphasis-color: rgb(25, 25, 25); */
  /* text-size-adjust: 100%; */
  /* top: 0px; */
  /* transform-origin: 116px 20px; */
  width: 232px;
  /* border: 0px none rgb(25, 25, 25); */
  /* font: 14px "Market Sans", Arial, sans-serif; */
  /* outline: rgb(25, 25, 25) none 0px; */
  width: 100%;
}/*.AnimateCa-ComSPAN_15*/



.AnimateCa-ComSELECT_16 {
  appearance: none;
  block-size: 40px;
  border-block-end-color: rgb(143, 143, 143);
  border-block-start-color: rgb(143, 143, 143);
  border-end-end-radius: 8px;
  border-end-start-radius: 8px;
  border-inline-end-color: rgb(143, 143, 143);
  border-inline-start-color: rgb(143, 143, 143);
  border-start-end-radius: 8px;
  border-start-start-radius: 8px;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  height: 40px;
  inline-size: 232px;
  padding-inline-end: 32px;
  padding-inline-start: 16px;
  perspective-origin: 116px 20px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 116px 20px;
  vertical-align: middle;
  /* width: 232px; */
  background: rgb(247, 247, 247) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0.8px solid rgb(143, 143, 143);
  border-radius: 8px;
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
  padding: 0px 32px 0px 16px;
}/*.AnimateCa-ComSELECT_16*/



.AnimateCa-ComOPTION_17, .AnimateCa-ComOPTION_18 {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  cursor: default;
  min-block-size: 16.8px;
  min-height: 16.8px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComOPTION_17, .AnimateCa-ComOPTION_18*/


.AnimateCa-ComOPTION_19 {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  cursor: default;
  min-block-size: 16.8px;
  min-height: 16.8px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-ComOPTION_19*/


.AnimateCa-Comsvg_20 {
  block-size: 40px;
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  bottom: 0px;
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  display: block;
  fill: rgb(25, 25, 25);
  height: 40px;
  inline-size: 12px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 16px;
  inset-inline-start: 204px;
  left: 204px;
  overflow-clip-margin: content-box;
  perspective-origin: 6px 20px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  stroke: rgb(25, 25, 25);
  stroke-width: 0px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 6px 20px;
  vertical-align: middle;
  width: 12px;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
  overflow: hidden;
}/*.AnimateCa-Comsvg_20*/



.AnimateCa-Comuse_21 {
  border-block-end-color: rgb(25, 25, 25);
  border-block-start-color: rgb(25, 25, 25);
  border-inline-end-color: rgb(25, 25, 25);
  border-inline-start-color: rgb(25, 25, 25);
  caret-color: rgb(25, 25, 25);
  color: rgb(25, 25, 25);
  column-rule-color: rgb(25, 25, 25);
  fill: rgb(25, 25, 25);
  perspective-origin: 0px 0px;
  pointer-events: none;
  stroke: rgb(25, 25, 25);
  stroke-width: 0px;
  text-decoration: none solid rgb(25, 25, 25);
  text-emphasis-color: rgb(25, 25, 25);
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  border: 0px none rgb(25, 25, 25);
  font: 14px "Market Sans", Arial, sans-serif;
  outline: rgb(25, 25, 25) none 0px;
}/*.AnimateCa-Comuse_21*/


.AnimateCa-ComDIV_22 {
  align-items: center;
  /* block-size: 40px; */
  /* border-block-end-color: rgb(25, 25, 25); */
  /* border-block-start-color: rgb(25, 25, 25); */
  /* border-inline-end-color: rgb(25, 25, 25); */
  /* border-inline-start-color: rgb(25, 25, 25); */
  /* caret-color: rgb(25, 25, 25); */
  /* color: rgb(25, 25, 25); */
  /* column-rule-color: rgb(25, 25, 25); */
  /* display: flex; */
  /* height: 40px; */
  /* inline-size: 1063.4px; */
  /* margin-block-start: 16px; */
  /* perspective-origin: 531.7px 20px; */
  /* text-decoration: none solid rgb(25, 25, 25); */
  /* text-emphasis-color: rgb(25, 25, 25); */
  /* text-size-adjust: 100%; */
  /* transform-origin: 531.7px 20px; */
  /* width: 1063.4px; */
  /* border: 0px none rgb(25, 25, 25); */
  /* font: 14px "Market Sans", Arial, sans-serif; */
  /* margin: 16px 0px 0px 16px; */
  /* outline: rgb(25, 25, 25) none 0px; */
  align-items: center;
  /* margin: 8px auto; */
  /* transform: translate(40px, 1px); */
  width: 100%;
  padding: 16px;
}

.AnimateCa-ComDIV_22 {}/*.AnimateCa-ComDIV_22*/


.AnimateCa-ComBUTTON_23 {
  /* block-size: 40px; */
  /* border-block-end-color: rgb(54, 101, 243); */
  /* border-block-end-style: solid; */
  /* border-block-end-width: 0.8px; */
  /* border-block-start-color: rgb(54, 101, 243); */
  /* border-block-start-style: solid; */
  /* border-block-start-width: 0.8px; */
  /* border-end-end-radius: 20px; */
  /* border-end-start-radius: 20px; */
  /* border-inline-end-color: rgb(54, 101, 243); */
  /* border-inline-end-style: solid; */
  /* border-inline-end-width: 0.8px; */
  /* border-inline-start-color: rgb(54, 101, 243); */
  /* border-inline-start-style: solid; */
  /* border-inline-start-width: 0.8px; */
  /* border-start-end-radius: 20px; */
  /* border-start-start-radius: 20px; */
  /* caret-color: rgb(255, 255, 255); */
  color: rgb(255, 255, 255);
  /* column-rule-color: rgb(255, 255, 255); */
  /* display: block; */
  /* height: 40px; */
  /* inline-size: 178px; */
  /* margin-inline-end: 24px; */
  /* min-block-size: 40px; */
  /* min-height: 40px; */
  /* min-inline-size: 178px; */
  /* min-width: 178px; */
  padding-block-end: 9.5px;
  padding-block-start: 9.5px;
  /* padding-inline-end: 20px; */
  /* padding-inline-start: 20px; */
  perspective-origin: 89px 20px;
  text-decoration: none solid rgb(255, 255, 255);
  text-emphasis-color: rgb(255, 255, 255);
  text-size-adjust: 100%;
  transform-origin: 89px 20px;
  vertical-align: bottom;
  width: 178px;
  background: rgb(54, 101, 243) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0.8px solid rgb(54, 101, 243);
  border-radius: 20px;
  font: 700 14px "Market Sans", Arial, sans-serif;
  /* margin: 0px 24px 0px 0px; */
  outline: rgb(255, 255, 255) none 0px;
  /* padding: 9.5px 20px; */
  /* position: relative; */
  width: 20%;
  justify-self: center;
}/*.AnimateCa-ComBUTTON_23*/



@media (max-width: 353px) {
  .AnimateCa-ComDIV_22 {
    transform: translate(32px, 1px);
  }
}


/* advenced search :end */



/* product detaills css start */

.SP-DIV_1 {
  block-size: 77.125px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 77.125px;
  inline-size: 620px;
  perspective-origin: 310px 38.5625px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  transform-origin: 310px 38.5625px;
  width: 620px;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(51, 51, 51) none 0px;
  width: 100%;
}/*.SP-DIV_1*/



.SP-TABLE_2 {
  block-size: auto;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: auto;
  /* inline-size: 620px; */
  max-inline-size: 100%;
  max-width: 100%;
  perspective-origin: 310px 38.5625px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  transform-origin: 310px 38.5625px;
  width: 660px;
  border: 0px none rgb(51, 51, 51);
  border-spacing: 0px 0px;
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(51, 51, 51) none 0px;
  width: 55%;
  margin: 0 auto;
}/*.SP-TABLE_2*/
@media (max-width: 768px) {
  .SP-TABLE_2 {
    width: 89%;
  }
}


.SP-CAPTION_3 {
  block-size: 1px;
  bottom: 78.125px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  clip: rect(0px, 0px, 0px, 0px);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  display: block;
  height: 1px;
  inline-size: 1px;
  inset-block-end: 78.125px;
  inset-block-start: 0px;
  inset-inline-end: 621px;
  inset-inline-start: 0px;
  left: 0px;
  margin-block-end: -1px;
  margin-block-start: -1px;
  margin-inline-end: -1px;
  margin-inline-start: -1px;
  perspective-origin: 0.5px 0.5px;
  position: absolute;
  right: 621px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 0.5px 0.5px;
  width: 1px;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  list-style: outside none none;
  margin: -1px;
  outline: rgb(51, 51, 51) none 0px;
  overflow: hidden;
}/*.SP-CAPTION_3*/



.SP-TBODY_4 {
  block-size: 77.125px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 77.125px;
  inline-size: 620px;
  perspective-origin: 310px 38.5625px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  transform-origin: 310px 38.5625px;
  width: 676px;
  border: 0px none rgb(51, 51, 51);
  font: 46px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(51, 51, 51) none 0px;
}/*.SP-TBODY_4*/



.SP-TR_5 {height: 38.5625px;inline-size: 620px;perspective-origin: 310px 19.275px;text-decoration: none solid rgb(51, 51, 51);text-emphasis-color: rgb(51, 51, 51);text-size-adjust: 100%;transform-origin: 310px 19.2812px;vertical-align: middle;width: 644px;border: 0px none rgb(51, 51, 51);font: 33px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;list-style: outside none none;outline: rgb(51, 51, 51) none 0px;}/*.SP-TR_5*/



.SP-TH_6, .SP-TH_9 {
  block-size: 38.5625px;
  border-block-end-color: rgb(141, 141, 141);
  border-block-start-color: rgb(141, 141, 141);
  border-collapse: collapse;
  border-inline-end-color: rgb(141, 141, 141);
  border-inline-start-color: rgb(141, 141, 141);
  box-sizing: border-box;
  caret-color: rgb(141, 141, 141);
  color: rgb(141, 141, 141);
  column-rule-color: rgb(141, 141, 141);
  display: block;
  height: 38.5625px;
  inline-size: 340.763px;
  padding-block-end: 10px;
  padding-block-start: 10px;
  padding-inline-end: 10px;
  padding-inline-start: 10px;
  perspective-origin: 170.375px 19.275px;
  text-align: left;
  text-decoration: none solid rgb(141, 141, 141);
  text-emphasis-color: rgb(141, 141, 141);
  text-size-adjust: 100%;
  transform-origin: 170.381px 19.2812px;
  vertical-align: top;
  width: 340.763px;
  border: 0px none rgb(141, 141, 141);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(141, 141, 141) none 0px;
  padding: 10px;
}/*.SP-TH_6, .SP-TH_9*/



.SP-TD_7, .SP-TD_10 {height: 38.5625px;inline-size: 279.237px;padding-block-end: 10px;padding-block-start: 10px;padding-inline-end: 10px;padding-inline-start: 10px;perspective-origin: 139.613px 19.275px;text-decoration: none solid rgb(51, 51, 51);text-emphasis-color: rgb(51, 51, 51);text-size-adjust: 100%;transform-origin: 139.619px 19.2812px;vertical-align: top;width: 279.237px;border: 0px none rgb(51, 51, 51);font: 600 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;list-style: outside none none;outline: rgb(51, 51, 51) none 0px;padding: 10px;text-align: left;}/*.SP-TD_7, .SP-TD_10*/



.SP-TR_8 {height: 38.5625px;inline-size: 620px;perspective-origin: 310px 19.275px;text-decoration: none solid rgb(51, 51, 51);text-emphasis-color: rgb(51, 51, 51);text-size-adjust: 100%;transform-origin: 310px 19.2812px;vertical-align: middle;width: 620px;background: #ccc none repeat scroll 0% 0% / auto padding-box border-box;border: 0px none rgb(51, 51, 51);font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;list-style: outside none none;outline: rgb(51, 51, 51) none 0px;}/*.SP-TR_8*/



/* start image gallery */

.SPGall-DIV_1 {
  block-size: 434px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 434px;
  inline-size: 562.8px;
  min-inline-size: 1px;
  min-width: 1px;
  perspective-origin: 281.4px 217px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  transform-origin: 281.4px 217px;
  width: 562.8px;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  overflow: hidden;
  position: relative;
  width: 100%;
}/*.SPGall-DIV_1*/



.SPGall-DIV_2, .SPGall-DIV_23 {
  block-size: 0px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 0px;
  inline-size: 562.8px;
  perspective-origin: 281.4px 0px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  transform-origin: 281.4px 0px;
  width: 562.8px;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  width: 100%;
}/*.SPGall-DIV_2, .SPGall-DIV_23*/



.SPGall-DIV_3 {
  block-size: 434px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 434px;
  inline-size: 562.8px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  max-inline-size: 100%;
  max-width: 100%;
  perspective-origin: 281.4px 217px;
  position: relative;
  right: 0px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  top: 0px;
  transform-origin: 281.4px 217px;
  user-select: none;
  width: 562.8px;
  z-index: 0;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  /* position: relative; */
  width: 100%;
}/*.SPGall-DIV_3*/


.SPGall-DIV_4 {
  block-size: 340px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 340px;
  inline-size: 562.8px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  max-block-size: 340px;
  max-height: 340px;
  max-inline-size: 100%;
  max-width: 100%;
  perspective-origin: 281.4px 170px;
  position: relative;
  right: 0px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  top: 0px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transform-origin: 281.4px 170px;
  user-select: none;
  width: 562.8px;
  background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  overflow: hidden;
  /* position: relative; */
  width: 100%;
  border: 0.8px solid rgb(238, 238, 238);
}/*.SPGall-DIV_4*/



.SPGall-DIV_5 {
  background-position: 0px 0px;
  block-size: 80px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  display: none;
  height: 80px;
  inline-size: 80px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  opacity: 0;
  position: absolute;
  right: 0px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  top: 0px;
  user-select: none;
  width: 80px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0) url("https://www.maxodeals.com/static/frontend/Maxodeals/theme/en_GB/mage/gallery/gallery.png") no-repeat scroll 0px 0px / auto padding-box border-box;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
  width: 100%;
}/*.SPGall-DIV_5*/


.SPGall-DIV_6 {
  /* block-size: 340px; */
  /* border-block-end-color: rgb(238, 238, 238); */
  /* border-block-end-style: solid; */
  /* border-block-end-width: 0.8px; */
  /* border-block-start-color: rgb(238, 238, 238); */
  /* border-block-start-style: solid; */
  /* border-block-start-width: 0.8px; */
  /* border-end-end-radius: 2px; */
  /* border-end-start-radius: 2px; */
  /* border-inline-end-color: rgb(238, 238, 238); */
  /* border-inline-end-style: solid; */
  /* border-inline-end-width: 0.8px; */
  /* border-inline-start-color: rgb(238, 238, 238); */
  /* border-inline-start-style: solid; */
  /* border-inline-start-width: 0.8px; */
  /* border-start-end-radius: 2px; */
  /* border-start-start-radius: 2px; */
  /* bottom: 0px; */
  /* box-sizing: border-box; */
  /* caret-color: rgb(51, 51, 51); */
  /* color: rgb(51, 51, 51); */
  /* column-rule-color: rgb(51, 51, 51); */
  cursor: grab;
  height: 340px;
  /* inline-size: 562.8px; */
  /* inset-block-end: 0px; */
  /* inset-block-start: 0px; */
  /* inset-inline-end: 0px; */
  /* inset-inline-start: 0px; */
  /* left: 0px; */
  /* max-block-size: 340px; */
  /* max-height: 340px; */
  /* perspective-origin: 281.4px 170px; */
  /* position: relative; */
  /* right: 0px; */
  /* text-decoration: none solid rgb(51, 51, 51); */
  /* text-emphasis-color: rgb(51, 51, 51); */
  /* text-size-adjust: 100%; */
  /* top: 0px; */
  /* transform: matrix(1, 0, 0, 1, 0, 0); */
  /* transform-origin: 281.4px 170px; */
  /* user-select: none; */
  /* width: 562.8px; */
  /* border: 0.8px solid rgb(238, 238, 238); */
  /* border-radius: 2px; */
  /* font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* outline: rgb(51, 51, 51) none 0px; */
  /* overflow: hidden; */
  /* transition: transform cubic-bezier(0.1, 0, 0.25, 1), width cubic-bezier(0.1, 0, 0.25, 1); */
  position: relative;
}/*.SPGall-DIV_6*/



.SPGall-DIV_7 {
  /* block-size: 338.4px; */
  /* border-block-end-color: rgb(51, 51, 51); */
  /* border-block-start-color: rgb(51, 51, 51); */
  /* border-inline-end-color: rgb(51, 51, 51); */
  /* border-inline-start-color: rgb(51, 51, 51); */
  /* bottom: 0px; */
  /* box-sizing: border-box; */
  /* caret-color: rgb(51, 51, 51); */
  /* color: rgb(51, 51, 51); */
  /* column-rule-color: rgb(51, 51, 51); */
  /* cursor: zoom-in; */
  height: 338.4px;
  /* inline-size: 561.2px; */
  /* inset-block-end: 0px; */
  /* inset-block-start: 0px; */
  /* inset-inline-end: 0px; */
  /* inset-inline-start: 0px; */
  /* left: 0px; */
  /* perspective-origin: 280.6px 169.2px; */
  /* position: absolute; */
  /* right: 0px; */
  /* text-align: center; */
  /* text-decoration: none solid rgb(51, 51, 51); */
  /* text-emphasis-color: rgb(51, 51, 51); */
  /* text-size-adjust: 100%; */
  /* top: 0px; */
  /* transform: matrix(1, 0, 0, 1, 0, 0); */
  /* transform-origin: 280.6px 169.2px; */
  /* user-select: none; */
  width: 100%;
  z-index: 8;
  /* border: 0px none rgb(51, 51, 51); */
  /* font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* outline: rgb(51, 51, 51) none 0px; */
  /* overflow: hidden; */
}/*.SPGall-DIV_7*/


.SPGall-IMG_8 {
  /* block-size: 338.4px; */
  /* border-block-end-color: rgb(51, 51, 51); */
  /* border-block-start-color: rgb(51, 51, 51); */
  /* border-inline-end-color: rgb(51, 51, 51); */
  /* border-inline-start-color: rgb(51, 51, 51); */
  /* bottom: -169.2px; */
  /* box-sizing: border-box; */
  /* caret-color: rgb(51, 51, 51); */
  /* color: rgb(51, 51, 51); */
  /* column-rule-color: rgb(51, 51, 51); */
  cursor: zoom-in;
  /* display: block; */
  height: 100%;
  /* inline-size: 338.4px; */
  /* inset-block-end: -169.2px; */
  /* inset-block-start: 169.2px; */
  /* inset-inline-end: -57.8px; */
  /* inset-inline-start: 280.6px; */
  /* left: 280.6px; */
  /* max-block-size: 100%; */
  /* max-height: 100%; */
  /* max-inline-size: 100%; */
  /* max-width: 100%; */
  /* padding-block-end: 5px; */
  /* padding-block-start: 5px; */
  /* padding-inline-end: 5px; */
  /* padding-inline-start: 5px; */
  /* perspective-origin: 169.2px 169.2px; */
  /* position: absolute; */
  /* right: -57.8px; */
  /* text-align: center; */
  /* text-decoration: none solid rgb(51, 51, 51); */
  /* text-emphasis-color: rgb(51, 51, 51); */
  /* text-size-adjust: 100%; */
  /* top: 169.2px; */
  /* transform: matrix(1, 0, 0, 1, -280.2, -169.2); */
  /* transform-origin: 169.2px 169.2px; */
  /* user-select: none; */
  /* vertical-align: middle; */
  /* width: 100%; */
  /* background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box; */
  /* border: 0px none rgb(51, 51, 51); */
  /* font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* outline: rgb(51, 51, 51) none 0px; */
  /* padding: 5px; */
  /* transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s; */
  position: relative;
  width: 100%;
}/*.SPGall-IMG_8*/


.SPGall-DIV_9 {
  block-size: 84px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 84px;
  inline-size: 562.8px;
  margin-block-start: 10px;
  perspective-origin: 281.4px 42px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  transform-origin: 281.4px 42px;
  user-select: none;
  width: 562.8px;
  border: 0px none rgb(51, 51, 51);
  font: 13px / 18.5714px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 10px 0px 0px;
  outline: rgb(51, 51, 51) none 0px;
  width: 100%;
}/*.SPGall-DIV_9*/


.SPGall-DIV_10 {
  block-size: 84px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  height: 84px;
  inline-size: 562.8px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  max-inline-size: 100%;
  max-width: 100%;
  perspective-origin: 281.4px 42px;
  position: relative;
  right: 0px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transform-origin: 281.4px 42px;
  user-select: none;
  width: 562.8px;
  z-index: 5;
  border: 0px none rgb(51, 51, 51);
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  overflow: hidden;
  width: 100%;
}/*.SPGall-DIV_10*/


.SPGall-DIV_11 {
  block-size: 84px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  height: 84px;
  inline-size: 30px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 532.8px;
  inset-inline-start: 0px;
  left: 0px;
  opacity: 0;
  perspective-origin: 15px 42px;
  pointer-events: none;
  position: absolute;
  right: 532.8px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  transform-origin: 15px 42px;
  user-select: none;
  width: 30px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.3) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(51, 51, 51);
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  transition: background-color 0.3s ease-in-out;
}/*.SPGall-DIV_11*/


.SPGall-DIV_12 {
  background-position: -25px -265px;
  block-size: 30px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 12px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  height: 30px;
  inline-size: 30px;
  inset-block-end: 12px;
  inset-block-start: 42px;
  inset-inline-end: -15px;
  inset-inline-start: 15px;
  left: 15px;
  padding-block-end: 30px;
  perspective-origin: 15px 15px;
  pointer-events: none;
  position: absolute;
  right: -15px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 42px;
  transform: matrix(1, 0, 0, 1, -15, -15);
  transform-origin: 15px 15px;
  user-select: none;
  width: 30px;
  background: rgba(0, 0, 0, 0) url("https://www.maxodeals.com/static/frontend/Maxodeals/theme/en_GB/mage/gallery/gallery.png") no-repeat scroll -25px -265px / auto padding-box border-box;
  border: 0px none rgb(51, 51, 51);
  font: 0.001px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  padding: 0px 0px 30px;
}/*.SPGall-DIV_12*/




.SPGall-DIV_13 {
  block-size: 85.6px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: grab;
  display: inline-block;
  height: 85.6px;
  inline-size: 171.2px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  perspective-origin: 85.6px 42.8px;
  position: relative;
  right: 0px;
  text-align: left;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transform-origin: 85.6px 42.8px;
  user-select: none;
  vertical-align: middle;
  width: 171.2px;
  border: 0px none rgb(51, 51, 51);
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  transition: transform 0.50875s cubic-bezier(0.1, 0, 0.25, 1), width 0.50875s cubic-bezier(0.1, 0, 0.25, 1);
}/*.SPGall-DIV_13*/





.SPGall-DIV_14 {
  backface-visibility: hidden;
  block-size: 80px;
  border-block-end-color: rgb(255, 85, 1);
  border-block-end-style: solid;
  border-block-end-width: 1.6px;
  border-block-start-color: rgb(255, 85, 1);
  border-block-start-style: solid;
  border-block-start-width: 1.6px;
  border-inline-end-color: rgb(255, 85, 1);
  border-inline-end-style: solid;
  border-inline-end-width: 1.6px;
  border-inline-start-color: rgb(255, 85, 1);
  border-inline-start-style: solid;
  border-inline-start-width: 1.6px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: grab;
  display: none;
  height: 80px;
  inline-size: 80px;
  inset-block-start: 0px;
  inset-inline-start: 0px;
  left: 0px;
  margin-block-start: 2px;
  position: absolute;
  text-align: left;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  user-select: none;
  width: 80px;
  z-index: 9;
  background: rgba(0, 0, 0, 0) linear-gradient(to right bottom, rgba(255, 255, 255, 0.25), rgba(64, 64, 64, 0.1)) repeat scroll 0% 0% / auto padding-box border-box;
  border: 1.6px solid rgb(255, 85, 1);
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 2px 0px 0px;
  outline: rgb(51, 51, 51) none 0px;
  transition: transform 0.55s cubic-bezier(0.1, 0, 0.25, 1), width 0.55s cubic-bezier(0.1, 0, 0.25, 1);
}/*.SPGall-DIV_14*/


.SPGall-DIV_15 {
  block-size: 80px;
  border-block-end-color: rgb(238, 238, 238);
  border-block-end-style: solid;
  border-block-end-width: 0.8px;
  border-block-start-color: rgb(238, 238, 238);
  border-block-start-style: solid;
  border-block-start-width: 0.8px;
  border-end-end-radius: 2px;
  border-end-start-radius: 2px;
  border-inline-end-color: rgb(238, 238, 238);
  border-inline-end-style: solid;
  border-inline-end-width: 0.8px;
  border-inline-start-color: rgb(238, 238, 238);
  border-inline-start-style: solid;
  border-inline-start-width: 0.8px;
  border-start-end-radius: 2px;
  border-start-start-radius: 2px;
  bottom: 0px;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  display: inline-block;
  height: 80px;
  inline-size: 80px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  margin-inline-end: 3px;
  max-block-size: 340px;
  max-height: 340px;
  padding-block-end: 2px;
  padding-block-start: 2px;
  padding-inline-end: 2px;
  perspective-origin: 41.8px 42.8px;
  position: relative;
  right: 0px;
  text-align: left;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  transform-origin: 41.8px 42.8px;
  user-select: none;
  vertical-align: middle;
  width: 80px;
  border: 0.8px solid rgb(238, 238, 238);
  border-radius: 2px;
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0px 3px 0px 0px;
  outline: rgb(51, 51, 51) none 0px;
  overflow: hidden;
  padding: 2px 2px 2px 0px;
}/*.SPGall-DIV_15*/



.SPGall-DIV_16, .SPGall-DIV_19 {
  block-size: 80px;
  border-block-end-color: rgb(238, 238, 238);
  border-block-end-style: solid;
  border-block-end-width: 0.8px;
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  height: 80px;
  inline-size: 80px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  perspective-origin: 40px 40px;
  position: relative;
  right: 0px;
  text-align: left;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  transform-origin: 40px 40px;
  user-select: none;
  width: 80px;
  background: rgb(235, 235, 235) none repeat scroll 0% 0% / auto padding-box border-box;
  border-top: 0px none rgb(51, 51, 51);
  border-right: 0px none rgb(51, 51, 51);
  border-bottom: 0.8px solid rgb(238, 238, 238);
  border-left: 0px none rgb(51, 51, 51);
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  overflow: hidden;
}/*.SPGall-DIV_16, .SPGall-DIV_19*/



.SPGall-IMG_17, .SPGall-IMG_20 {
  block-size: 79.2px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: -39.6px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  display: block;
  height: 79.2px;
  inline-size: 80px;
  inset-block-end: -39.6px;
  inset-block-start: 39.6px;
  inset-inline-end: 0px;
  inset-inline-start: 0px;
  left: 0px;
  max-block-size: 100%;
  max-height: 100%;
  padding-block-end: 5px;
  padding-block-start: 5px;
  padding-inline-end: 5px;
  padding-inline-start: 5px;
  perspective-origin: 40px 39.6px;
  position: absolute;
  right: 0px;
  text-align: left;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 39.6px;
  transform: matrix(1, 0, 0, 1, 0, -39.6);
  transform-origin: 40px 39.6px;
  user-select: none;
  vertical-align: middle;
  width: 80px;
  background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(51, 51, 51);
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  padding: 5px;
}/*.SPGall-IMG_17, .SPGall-IMG_20*/




.SPGall-DIV_21 {
  block-size: 84px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 0px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  height: 84px;
  inline-size: 30px;
  inset-block-end: 0px;
  inset-block-start: 0px;
  inset-inline-end: 0px;
  inset-inline-start: 532.8px;
  left: 532.8px;
  perspective-origin: 15px 42px;
  position: absolute;
  right: 0px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 0px;
  transform-origin: 15px 42px;
  user-select: none;
  width: 30px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.3) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(51, 51, 51);
  font: 0px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  transition: background-color 0.3s ease-in-out;
}/*.SPGall-DIV_21*/


.SPGall-DIV_22 {
  background-position: -25px -350px;
  block-size: 30px;
  border-block-end-color: rgb(51, 51, 51);
  border-block-start-color: rgb(51, 51, 51);
  border-inline-end-color: rgb(51, 51, 51);
  border-inline-start-color: rgb(51, 51, 51);
  bottom: 12px;
  box-sizing: border-box;
  caret-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  column-rule-color: rgb(51, 51, 51);
  cursor: pointer;
  height: 30px;
  inline-size: 30px;
  inset-block-end: 12px;
  inset-block-start: 42px;
  inset-inline-end: -15px;
  inset-inline-start: 15px;
  left: 15px;
  padding-block-end: 30px;
  perspective-origin: 15px 15px;
  position: absolute;
  right: -15px;
  text-decoration: none solid rgb(51, 51, 51);
  text-emphasis-color: rgb(51, 51, 51);
  text-size-adjust: 100%;
  text-wrap-mode: nowrap;
  top: 42px;
  transform: matrix(1, 0, 0, 1, -15, -15);
  transform-origin: 15px 15px;
  user-select: none;
  width: 30px;
  background: rgba(0, 0, 0, 0) url("https://www.maxodeals.com/static/frontend/Maxodeals/theme/en_GB/mage/gallery/gallery.png") no-repeat scroll -25px -350px / auto padding-box border-box;
  border: 0px none rgb(51, 51, 51);
  font: 0.001px / 0px CircularStd, "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(51, 51, 51) none 0px;
  padding: 0px 0px 30px;
}/*.SPGall-DIV_22*/




.SPGall-DIV_15:hover {
  border: 1px solid blue;
  border-radius: 8px;
}


.SPGall-DIV_6 {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.arrow-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}

.arrow-button.visible {
     opacity: 1;
   }


#prevButton {
  left: 10px;
}

#nextButton {
  right: 10px;
}



/* thmbnails start */

.SPGall-DIV_10 {
  position: relative;
  overflow: hidden;
}
.thumbnail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumbnail-arrow.visible {
  opacity: 1;
}

#prevThumbnail {
  left: 0;
}

#nextThumbnail {
  right: 0;
}

.SPGall-DIV_10 {
  position: relative;
  overflow: hidden;
}

.thumbnail-container {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}
.SPGall-DIV_15 {
  flex: 0 0 auto;
  width: 80px; /* Adjust this to match your thumbnail width */
  margin-right: 3px; /* Adjust this to match your thumbnail margin */
}



/* full size omage code here  */


.SPGallzoom-DIV_1 {


  cursor: pointer;
  height: 123px;
  left: 80.35px;
  position: absolute;
  right: 306.45px;
  top: 0.0374999px;
  width: 272px;
  background: rgba(0, 0, 0, 0) url("https://m.media-amazon.com/images/G/01/apparel/rcxgs/tile._CB483369110_.gif") repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(15, 17, 17);
  font: 14px / 20px "Amazon Ember", Arial, sans-serif;
  list-style: outside none none;
  outline: rgb(15, 17, 17) none 0px;
}

/* zoom display code here  */
.SPGallzoom-DIV_5 {transform-origin: 402.2px 181.5px;bottom: -293.4px;box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 8px 2px;color: rgb(15, 17, 17);column-rule-color: rgb(15, 17, 17);height: 363px;left: 696.6px;perspective-origin: 402.2px 181.5px;position: absolute;right: 18.2px;text-decoration: none solid rgb(15, 17, 17);text-emphasis-color: rgb(15, 17, 17);text-size-adjust: 100%;top: 311.2px;transform-origin: 402.2px 181.5px;width: 804.4px;z-index: 199;background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;border: 0.8px solid rgb(148, 148, 148);font: 14px / 20px "Amazon Ember", Arial, sans-serif;outline: rgb(15, 17, 17) none 0px;overflow: hidden;}/*#SPGallzoom-DIV_1*/


.SPGallzoom-IMG_6 {
  bottom: -605.312px;
  color: rgb(15, 17, 17);
  display: block;
  height: 1418px;
  left: -234.528px;
  position: absolute;
  right: -355.675px;
  top: -451.294px;
  transform-origin: 696.5px 709px;
  vertical-align: top;
  width: 1393px;
  border: 0px none rgb(15, 17, 17);
  font: 14px / 20px "Amazon Ember", Arial, sans-serif;
  outline: rgb(15, 17, 17) none 0px;
}/*#SPGallzoom-IMG_2*/

.SPGall-DIV_7 {
  position: relative;
  overflow: hidden;
}

.SPGallzoom-DIV_1 {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  display: none;
}

.SPGallzoom-DIV_5 {
  position: absolute;
  top: 91px;
  right: -300px; /* Adjust as needed */
  width: 690px;
  height: 439px;
  overflow: hidden;
  display: none;
  left: 764px;
}

.SPGallzoom-IMG_6 {
  position: absolute;
  top: 175px;
  left: 285px;
  /* width: 283%; */ /* Adjust for zoom level */
  /* height: 169%; */ /* Adjust for zoom level */
}



 /* full screen code here  */
 .fullscreen-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
}

.fullscreen-image {
  max-width: 90%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-fullscreen {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  border: none;
  cursor: pointer;
  z-index: 999999;
  color: white;
  background: rgb(0 0 0 / 25%);
  padding: 0;
}

.fullscreen-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: white;
  background: rgb(0 0 0 / 50%);
  border: none;
  cursor: pointer;
  z-index: 9999999;
}

.prev-fullscreen {
  left: 30px;
}

.next-fullscreen {
  right: 30px;
}


/* title start here */
.SPtitle-DIV_1 {/* box-sizing: border-box; *//* caret-color: rgb(15, 17, 17); *//* color: rgb(15, 17, 17); *//* column-rule-color: rgb(15, 17, 17); */height: auto;/* inline-size: 666.963px; *//* perspective-origin: 333.475px 64px; *//* text-decoration: none solid rgb(15, 17, 17); *//* text-emphasis-color: rgb(15, 17, 17); *//* text-size-adjust: 100%; *//* transform-origin: 333.481px 64px; *//* width: 666.963px; *//* border: 0px none rgb(15, 17, 17); *//* font: 14px / 20px "Amazon Ember", Arial, sans-serif; *//* outline: rgb(15, 17, 17) none 0px; *//* margin: 0px 0px 14px; */width: 100%;padding: 9px 4px;}/*.SPtitle-DIV_1*/


.SPtitle-H1_2 {/* box-sizing: border-box; *//* caret-color: rgb(15, 17, 17); *//* color: rgb(15, 17, 17); *//* column-rule-color: rgb(15, 17, 17); *//* height: 128px; *//* inline-size: 666.963px; *//* margin-block-end: 0px; *//* margin-block-start: 0px; *//* perspective-origin: 333.475px 64px; *//* text-decoration: none solid rgb(15, 17, 17); *//* text-emphasis-color: rgb(15, 17, 17); *//* text-rendering: optimizelegibility; *//* text-size-adjust: 100%; *//* transform-origin: 333.481px 64px; *//* width: 666.963px; *//* border: 0px none rgb(15, 17, 17); *//* font: 24px / 32px "Amazon Ember", Arial, sans-serif; *//* margin: 0px; *//* outline: rgb(15, 17, 17) none 0px; */}/*.SPtitle-H1_2*/


.SPtitle-SPAN_3 {
  /* border-block-end-color: rgb(15, 17, 17); */
  /* border-block-start-color: rgb(15, 17, 17); */
  /* border-inline-end-color: rgb(15, 17, 17); */
  /* border-inline-start-color: rgb(15, 17, 17); */
  /* box-sizing: border-box; */
  /* caret-color: rgb(15, 17, 17); */
  /* color: rgb(15, 17, 17); */
  /* column-rule-color: rgb(15, 17, 17); */
  /* perspective-origin: 0px 0px; */
  /* text-decoration: none solid rgb(15, 17, 17); */
  /* text-emphasis-color: rgb(15, 17, 17); */
  /* text-rendering: optimizelegibility; */
  /* text-size-adjust: 100%; */
  /* transform-origin: 0px 0px; */
  word-break: break-word;
  /* border: 0px none rgb(15, 17, 17); */
  font: 24px / 32px "Amazon Ember", Arial, sans-serif;
  /* outline: rgb(15, 17, 17) none 0px; */
  width: -webkit-fill-available;
}/*.SPtitle-SPAN_3*/


/* code for put title and product detailled  */

.product-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px; /* Adjust the space between the image gallery and product details */
}

.SPGall-DIV_1 {
  flex: 0 0 auto; /* Don't allow this to grow or shrink */
}

.product-details {
  /* flex: 1; */ /* Allow this to grow and fill remaining space */
  width: 100%;
  max-width: 579px;
  border: 0.8px solid rgb(238, 238, 238);
}

@media (max-width: 768px) {
  .product-container {
    flex-direction: column;
  }
}


.SPtitleline-HR_1 {width: 666.963px;border-top: 0.8px solid rgb(213, 217, 217);border-right: 0px inset rgb(15, 17, 17);border-bottom: 0px inset rgb(15, 17, 17);border-left: 0px inset rgb(15, 17, 17);font: 14px / 19px "Amazon Ember", Arial, sans-serif;margin: 0px 0px 14px;outline: rgb(15, 17, 17) none 0px;width: 100%;}


/* spec start from here  */
.SPspec-DIV_1 {/* box-sizing: border-box; *//* caret-color: rgb(15, 17, 17); *//* color: rgb(15, 17, 17); *//* column-rule-color: rgb(15, 17, 17); *//* height: 20px; *//* inline-size: 666.963px; *//* margin-block-end: 8px; *//* margin-block-start: 8px; *//* perspective-origin: 333.475px 10px; *//* text-decoration: none solid rgb(15, 17, 17); *//* text-emphasis-color: rgb(15, 17, 17); *//* text-size-adjust: 100%; *//* transform-origin: 333.481px 10px; *//* width: 666.963px; *//* border: 2px rgb(15, 17, 17); *//* font: 14px / 20px "Amazon Ember", Arial, sans-serif; *//* margin: 8px 0px; *//* outline: rgb(15, 17, 17) none 0px; */width: 100%;}/*.SPspec-DIV_1*/


.SPspec-TABLE_2 {
  /* block-size: 20px; */
  /* border-collapse: collapse; */
  /* caret-color: rgb(15, 17, 17); */
  /* color: rgb(15, 17, 17); */
  /* column-rule-color: rgb(15, 17, 17); */
  /* height: 20px; */
  /* inline-size: 666.963px; */
  /* perspective-origin: 333.475px 10px; */
  /* text-decoration: none solid rgb(15, 17, 17); */
  /* text-emphasis-color: rgb(15, 17, 17); */
  /* text-size-adjust: 100%; */
  /* transform-origin: 333.481px 10px; */
  /* width: 666.963px; */
  /* font: 14px / 20px "Amazon Ember", Arial, sans-serif; */
  /* outline: rgb(15, 17, 17) none 0px; */
  width: 100%;
}/*.SPspec-TABLE_2*/


.SPspec-TBODY_3 {
  block-size: 20px;
  border-block-end-color: rgb(128, 128, 128);
  border-block-start-color: rgb(128, 128, 128);
  border-collapse: collapse;
  border-inline-end-color: rgb(128, 128, 128);
  border-inline-start-color: rgb(128, 128, 128);
  box-sizing: border-box;
  caret-color: rgb(15, 17, 17);
  color: rgb(15, 17, 17);
  column-rule-color: rgb(15, 17, 17);
  height: 20px;
  inline-size: 666.963px;
  perspective-origin: 333.475px 10px;
  text-decoration: none solid rgb(15, 17, 17);
  text-emphasis-color: rgb(15, 17, 17);
  text-size-adjust: 100%;
  transform-origin: 333.481px 10px;
  width: 666.963px;
  border: 0px none rgb(128, 128, 128);
  border-spacing: 1.6px 1.6px;
  font: 14px / 20px "Amazon Ember", Arial, sans-serif;
  outline: rgb(15, 17, 17) none 0px;
  width: 100%;
}/*.SPspec-TBODY_3*/


.SPspec-TR_4 {
  block-size: 20px;
  border-block-end-color: rgb(128, 128, 128);
  border-block-start-color: rgb(128, 128, 128);
  border-collapse: collapse;
  /* border-inline-end-color: rgb(128, 128, 128); */
  /* border-inline-start-color: rgb(128, 128, 128); */
  /* box-sizing: border-box; */
  /* caret-color: rgb(15, 17, 17); */
  /* color: rgb(15, 17, 17); */
  /* column-rule-color: rgb(15, 17, 17); */
  /* height: 20px; */
  /* inline-size: 666.963px; */
  /* margin-block-end: 8px; */
  /* perspective-origin: 333.475px 10px; */
  /* text-decoration: none solid rgb(15, 17, 17); */
  /* text-emphasis-color: rgb(15, 17, 17); */
  /* text-size-adjust: 100%; */
  transform-origin: 333.481px 10px;
  vertical-align: middle;
  width: 666.963px;
  /* border: 0px none rgb(128, 128, 128); */
  /* border-spacing: 1.6px 1.6px; */
  /* font: 14px / 20px "Amazon Ember", Arial, sans-serif; */
  /* margin: 0px 0px 8px; */
  /* outline: rgb(15, 17, 17) none 0px; */
  width: 100%;
  border: 0.8px solid rgb(238, 238, 238);
}/*.SPspec-TR_4*/


.SPspec-TD_5 {
  block-size: 20px;
  border-block-end-color: rgb(15, 17, 17);
  border-block-start-color: rgb(15, 17, 17);
  border-collapse: collapse;
  border-inline-end-color: rgb(15, 17, 17);
  border-inline-start-color: rgb(15, 17, 17);
  box-sizing: border-box;
  caret-color: rgb(15, 17, 17);
  color: rgb(15, 17, 17);
  column-rule-color: rgb(15, 17, 17);
  height: 20px;
  inline-size: 159.738px;
  padding-block-end: 0px;
  padding-block-start: 0px;
  padding-inline-end: 3px;
  padding-inline-start: 0px;
  perspective-origin: 79.8625px 10px;
  text-decoration: none solid rgb(15, 17, 17);
  text-emphasis-color: rgb(15, 17, 17);
  text-size-adjust: 100%;
  transform-origin: 79.8688px 10px;
  vertical-align: top;
  width: 159.738px;
  border: 0px none rgb(15, 17, 17);
  border-spacing: 1.6px 1.6px;
  font: 14px / 20px "Amazon Ember", Arial, sans-serif;
  outline: rgb(15, 17, 17) none 0px;
  padding: 12px 3px 0px 0px;
}/*.SPspec-TD_5*/


.SPspec-SPAN_6 {
  border-block-end-color: rgb(15, 17, 17);
  border-block-start-color: rgb(15, 17, 17);
  border-collapse: collapse;
  border-inline-end-color: rgb(15, 17, 17);
  border-inline-start-color: rgb(15, 17, 17);
  box-sizing: border-box;
  caret-color: rgb(15, 17, 17);
  color: rgb(15, 17, 17);
  column-rule-color: rgb(15, 17, 17);
  perspective-origin: 0px 0px;
  text-decoration: none solid rgb(15, 17, 17);
  text-emphasis-color: rgb(15, 17, 17);
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  border: 0px none rgb(15, 17, 17);
  border-spacing: 1.6px 1.6px;
  font: 700 14px / 20px "Amazon Ember", Arial, sans-serif;
  outline: rgb(15, 17, 17) none 0px;
}/*.SPspec-SPAN_6*/


.SPspec-TD_7 {
  block-size: 20px;
  border-block-end-color: rgb(15, 17, 17);
  border-block-start-color: rgb(15, 17, 17);
  border-collapse: collapse;
  border-inline-end-color: rgb(15, 17, 17);
  border-inline-start-color: rgb(15, 17, 17);
  box-sizing: border-box;
  caret-color: rgb(15, 17, 17);
  color: rgb(15, 17, 17);
  column-rule-color: rgb(15, 17, 17);
  height: 20px;
  inline-size: 507.225px;
  padding-block-end: 0px;
  padding-block-start: 0px;
  padding-inline-end: 0px;
  padding-inline-start: 3px;
  perspective-origin: 253.613px 10px;
  text-decoration: none solid rgb(15, 17, 17);
  text-emphasis-color: rgb(15, 17, 17);
  text-size-adjust: 100%;
  transform-origin: 253.613px 10px;
  vertical-align: top;
  width: 507.225px;
  border: 0px none rgb(15, 17, 17);
  border-spacing: 1.6px 1.6px;
  font: 14px / 20px "Amazon Ember", Arial, sans-serif;
  outline: rgb(15, 17, 17) none 0px;
  padding: 12px 3px 0px 0px;
}/*.SPspec-TD_7*/


.SPspec-SPAN_8 {
  border-block-end-color: rgb(15, 17, 17);
  border-block-start-color: rgb(15, 17, 17);
  border-collapse: collapse;
  border-inline-end-color: rgb(15, 17, 17);
  border-inline-start-color: rgb(15, 17, 17);
  box-sizing: border-box;
  caret-color: rgb(15, 17, 17);
  color: rgb(15, 17, 17);
  column-rule-color: rgb(15, 17, 17);
  perspective-origin: 0px 0px;
  text-decoration: none solid rgb(15, 17, 17);
  text-emphasis-color: rgb(15, 17, 17);
  text-size-adjust: 100%;
  transform-origin: 0px 0px;
  word-break: break-word;
  border: 0px none rgb(15, 17, 17);
  border-spacing: 1.6px 1.6px;
  font: 14px / 20px "Amazon Ember", Arial, sans-serif;
  outline: rgb(15, 17, 17) none 0px;
}/*.SPspec-SPAN_8*/


.product-title {
  /* display: flex; */
  /* align-items: center; */
  /* min-height: 3em; */ /* Adjust this value based on your design needs */
  width: 100%;
}

.SPtitle-SPAN_3 {
  /* display: inline-block; */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  line-height: 1.2;
}




.centered {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */ /* This ensures the main takes up at least the full viewport height */
}

.product-container {
  display: flex;
  /* justify-content: space-between; */
  /* align-items: flex-start; */
  gap: 20px;
  max-width: 1200px; /* Adjust this value based on your design needs */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 1218px) {
  .product-container {
    flex-direction: column;
    align-items: center;
  }
}


/*make zoom feDisplacementMapy responsive code*/

/* Container for the main image and zoom display */
.image-container {
   /* Set the width to match SPGall-DIV_1 */
   /* Ensure it doesn't overflow on smaller screens */
   position: relative; /* For positioning the zoom display */
   width: 100%;
   max-width: 579px;
}

/* Main image container */
.SPGall-DIV_1 {
  width: 100%; /* Take full width of the container */
  height: 434px; /* Maintain the original height */
  /* position: relative; */
}

/* Zoom display container */
.SPGallzoom-DIV_5 {
  /* position: absolute; */ /* Position it absolutely within .image-container */
  top: 79%; /* Place it directly below the main image */
  left: 0; /* Align with the left edge of the container */
  width: 100%; /* Take full width of the container */
  height: 338.4px; /* Same height as the main image */
  overflow: hidden; /* Hide overflow for zoomed image */
  display: none; /* Hidden by default, show with JavaScript */
}

/* Zoomed image */
.SPGallzoom-IMG_6 {
  position: absolute; /* Position absolutely within .SPGallzoom-DIV_5 */
  /* top and left will be dynamically set by JavaScript */
  width: 285%; /* Zoom level, adjust as needed */
  height: 174%; /* Zoom level, adjust as needed */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .image-container {
    /* width: 100%; */ /* Full width on smaller screens */
  }

  .SPGall-DIV_1,
  .SPGallzoom-DIV_5 {
    /* height: auto; */ /* Allow height to adjust */
    /* aspect-ratio: 562.8 / 434; */ /* Maintain aspect ratio */
  }
}



/* edit images gallery start*/
.existing-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thumbnail-container1 {
  position: relative;
  width: 100px;
  height: 100px;
}

.thumbnail1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-image {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 768px) {
  .thumbnail-container1 {
    width: 80px;
    height: 80px;
  }
}


/* electricity hover two menu dropdown menu*/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1c1d1e;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding-left: 0 !important; /* Remove any padding from the left */
  margin-left: 0 !important;  /* Ensure no left margin is applied */
}

.dropdown-content li {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  white-space: nowrap !important;
  direction: ltr !important;
}

.dropdown-content li:hover {
  background-color: #1c1d1e;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.main-header__item > a,
.main-header__item > button {
  font: inherit;
  background: transparent;
  border: none;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.main-header__item > a:hover,
.main-header__item > a:active,
.main-header__item > a.active,
.main-header__item > button:hover,
.main-header__item > button:active {
  color: #f0c14b;
}


.mobile-dropdown {
  position: relative;
}




.main-header__item a:hover, .main-header__item button:hover {
  text-decoration: none;
  color: white;
}

/* css for table result by year by station */
.result-by-year {
  /* padding: 20px; */
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f4f4f9;
}

.result-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.result-table thead {
  background-color: #333;
  color: #fff;
}

.result-table th, .result-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

.result-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.result-table tbody tr:hover {
  background-color: #f1f1f1;
}

.result-table th {
  background-color: #4CAF50;
  color: white;
}

.result-table td {
  color: #555;
}

.winter {
  background-color: #b3cde0; /* Light blue for winter */
}

.summer {
  background-color: #fbb4ae; /* Light coral for summer */
}

.legend {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.winter-color {
  display: inline-block;
  background-color: #b3cde0;
  padding: 5px 10px;
  margin-right: 10px;
  color: #333;
}

.summer-color {
  display: inline-block;
  background-color: #fdd835;
  padding: 5px 10px;
  color: #333;
}


.winter-month {
  background-color: #b3cde0; /* Light blue for winter */
  color: #333;
}

.summer-month {
  background-color: #fdd835; /* Light yellow for summer */
  color: #333;
}

.result-table th {
  background-color: #4CAF50;
  color: white;
}

.result-table td {
  color: #555;
}




/* Ensure dropdown content is hidden by default */
.mobile-dropdown-content {
  display: none;
  /* position: absolute; */ /* Optional: Position the dropdown content */
  background-color: white; /* Optional: Background color */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Optional: Add shadow */
  z-index: 1; /* Ensure it appears above other content */
}

/* Show dropdown content on hover */
.mobile-dropdown:hover .mobile-dropdown-content {
  display: block;
  padding: 0px;
}

/* Optional: Style the dropdown link */
.mobile-dropdown > a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  color: black;
  font-size: 20px;
}

/* Optional: Style the dropdown items */
.mobile-dropdown-content li {
  list-style: none;
}

.mobile-dropdown-content li a {
  text-decoration: none;
  color: black;
  display: block;
.mobile-nav__item
  a: active, .mobile-nav__item a:hover, .mobile-nav__item a.active, .mobile-nav__item button:hover, .mobile-nav__item button:active {
    background: #F0C14B;
  color: black;
  border-radius: 5px;
  padding: 3px 3px;
  margin: 3px 3px;
  font-size: 20px;
};
.mobile-nav__item
  a: active, .mobile-nav__item a:hover, .mobile-nav__item a.active, .mobile-nav__item button:hover, .mobile-nav__item button:active {
    background: #F0C14B;
  color: black;
  border-radius: 5px;
  padding: 3px 3px;
  margin: 3px 3px;
  font-size: 20px;
};
.mobile-nav__item
  a: active, .mobile-nav__item a:hover, .mobile-nav__item a.active, .mobile-nav__item button:hover, .mobile-nav__item button:active {
    background: #F0C14B;
  color: black;
  border-radius: 5px;
  padding: 3px 3px;
  margin: 3px 3px;
  font-size: 20px;
};
  white-space: nowrap !important;
  direction: ltr !important;
  /* text-align: -webkit-left; */
  padding-left: 0;
  padding-right: 0;
}

.mobile-dropdown-content li a:hover {
  background-color: #f0c14b; /* Optional: Highlight on hover */
  color: white;
}



/* Calculateur de Consommation Électrique */

.container_calc {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card_calc {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.card-title_calc {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.form_calc {
  display: flex;
  flex-direction: column;
}

.form-row_calc {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.form-group_calc {
  flex: 1 1 calc(50% - 20px);
  margin: 10px;
}

.label_calc {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.input_calc,
.select_calc {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.btn-primary_calc,
.btn-secondary_calc {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary_calc {
  background-color: #f0c14b;
  color: black;
}

.btn-secondary_calc {
  background-color: #232F3E;
  color: white;
}

.btn-primary_calc:hover {
  opacity: 0.9;
  background-color: #f0c14b;
  color: white;
}
.btn-secondary_calc:hover {
  opacity: 0.9;
  background-color: #37474f;
  color: white;
}

.separator_calc {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid #eee;
}

.file-input_calc {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  width: 100%;
}

@media (max-width: 768px) {
  .form-group_calc {
      flex: 1 1 100%;
  }
}

.textarea_calc {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}







/* Walmart-inspired styles for result page */

.main_resul {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Bogle', Arial, sans-serif;
  color: #2e2f32;
}

.main-title_resul {
  text-align: center;
  color: black;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 700;
}

.content-wrapper_resul {
  max-width: 1200PX;
  width: 100%;
  /* display: flex; */
  flex-wrap: wrap;
  gap: 2rem;
}

.sidebar_resul {
  flex: 1;
  min-width: 250px;
  background-color: #232f3e;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sidebar-title_resul {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1rem;
  font-weight: 600;
}

.station-list_resul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.station-item_resul {
  background-color: #fff;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.station-item_resul:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.station-name_resul {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.station-link_resul {
  color: black;
  text-decoration: none;
  transition: color 0.3s ease;
}

.station-link_resul:hover {
  color: #004c91;
}

.year-list_resul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.year-item_resul {
  font-size: 0.9rem;
}

.year-link_resul {
  color: black;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: #f0c14b;
  transition: background-color 0.3s ease;
}

.year-link_resul:hover {
  background-color: #f0c14b;
  color: white;
}

.results-section_resul {
  flex: 2;
  min-width: 300px;
}

.results-content_resul {
  background-color: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  color: black;
}

/* css for views\maintenance\preventive-history.ejs and views\electricity\result.ejs*/
.btn_resul {
  background-color: #0071dc;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn_resul:hover {
  background-color: #004c91;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content-wrapper_resul {
    flex-direction: column;
  }

  .sidebar_resul, .results-section_resul {
    width: 100%;
  }

  .main-title_resul {
    font-size: 2rem;
  }
}

/* return button ehnanced css */
.return-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 24px;
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.return-icon:hover {
  color: #0056b3;
}
.result-by-year {
  position: relative;
  padding-top: 60px;
}

.year-link_resul, .month-link_resul, .week-link_resul {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.year-link_resul:hover, .month-link_resul:hover, .week-link_resul:hover {
  background-color: #f0c14b;
  color: white;
}

.year-link_resul.active, .month-link_resul.active {
  background-color: #e0e0e0;
  font-weight: bold;
}

.month-list_resul, .week-list_resul {
  margin-left: 20px;
  border-left: 2px solid #ccc;
  padding-left: 10px;
}

.month-item_resul, .week-item_resul {
  margin: 5px 0;
}

.station-item_resul {
  margin-bottom: 20px;
}

.station-name_resul {
  font-size: 1.2em;
  margin-bottom: 10px;
}

/* end views\electricity\result.ejs */
/* continue views\maintenance\preventive-history.ej Add some CSS for the modal maintence preventive hystorique views\maintenance\preventive-history.ejs*/
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.operation-images img {
  max-width: 100px;
  max-height: 100px;
  margin: 5px;
  cursor: pointer;
}

/* Styles for the full image modal */
#fullImageModal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

#fullImageModal .modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#fullImageModal .close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#fullImageModal .close:hover,
#fullImageModal .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* end views\maintenance\preventive-history.ejs */

/* continue  views\maintenance\corrective-history.ejs */
/* Corrective Maintenance Modal Styles */
.maintenance-record_corrective {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.record-header_corrective {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.record-header_corrective h3 {
  color: #333;
  margin: 0;
  font-size: 1.2rem;
}

.record-details_corrective {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.detail-item_corrective {
  display: flex;
  flex-direction: column;
}

.detail-label_corrective {
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.detail-value_corrective {
  color: #333;
}

.description_corrective {
  grid-column: span 2;
}

.description_corrective p {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  line-height: 1.5;
}

.doc-link_corrective {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.doc-link_corrective:hover {
  background-color: #45a049;
}

.images-section_corrective {
  margin-top: 20px;
}

.images-section_corrective h4 {
  margin-bottom: 10px;
  color: #333;
}

.image-gallery_corrective {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.image-container_corrective {
  height: 150px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-container_corrective img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.image-container_corrective img:hover {
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .record-details_corrective {
      grid-template-columns: 1fr;
  }
  
  .description_corrective {
      grid-column: span 1;
  }
}
/* end  views\maintenance\corrective-history.ejs */




/* Mass import product ehnanced css */

.container_MassImp {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.card_MassImp {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card__header_MassImp {
  background-color: #232F3E;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.title_MassImp {
  margin: 0;
  color: wheat;
  font-size: 1.5rem;
}

.card__content_MassImp {
  padding: 20px;
}

.instruction_MassImp {
  margin-bottom: 15px;
  font-size: 1rem;
  color: #555;
}

.column-list_MassImp {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style-type: none;
  padding-left: 0;
}

.column-list_MassImp li {
  margin-bottom: 8px;
  break-inside: avoid;
}

.progress-container_MassImp {
  margin-bottom: 20px;
}

.progress-bar_MassImp {
  width: 100%;
  height: 20px;
}

.progress-text_MassImp {
  text-align: center;
  margin-top: 5px;
  font-weight: bold;
}

.main_MassImp {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form_MassImp {
  display: flex;
  flex-direction: column;
}

.form-group_MassImp {
  margin-bottom: 20px;
}

.file-label_MassImp {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.file-input_MassImp {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.button-group_MassImp {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.btn_MassImp {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn_MassImp:first-child {
  background-color: #f0c14b;
  color: black;
}

.btn_MassImp:last-child {
  background-color: #232f3e;
  color: wheat;
}

.btn_MassImp:hover {
  opacity: 0.9;
  color: white;
}

@media (max-width: 768px) {
  .column-list_MassImp {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }

  .button-group_MassImp {
    flex-direction: column;
  }

  .btn_MassImp {
    margin-bottom: 10px;
  }
}

.cadence-btn {
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.cadence-btn.active {
  background-color: #007bff;
  color: white;
}

/* Advanced search ehnanced css */

.container_AdvSrch {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #232F3E;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form_AdvSrch {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-title_AdvSrch {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1.5rem;
  text-align: center;
}

.form-group_AdvSrch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.label_AdvSrch {
  font-weight: 600;
  color: white;
}

.input_AdvSrch,
.select_AdvSrch {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 1rem;
}

.select-wrapper_AdvSrch {
  position: relative;
}

.select-wrapper_AdvSrch::after {
  /* content: '\25BC'; */
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6c757d;
}

.button_AdvSrch {
  background-color: #F0C14B;
  color: black;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button_AdvSrch:hover {
  background-color: #F0C14B;
  color: white;
}

@media (max-width: 768px) {
  .container_AdvSrch {
    margin: 1rem;
    padding: 1.5rem;
  }
}



/* edit button in product details */
.btn_edit {
  margin: 3px;
}

.btn_edit:hover {
  background-color: #f0c14b;
}

/* notation full content */
.full-content-ul {
  white-space: normal;
  word-wrap: break-word;
  max-width: none;
  overflow: visible;
}

/* displayed at a regular size and not at their original size, you can set specific dimensions for the .card__image */

.action-container_prod {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.btn-primary_prod,
.btn-secondary_prod,
.btn-danger_prod {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  margin: 5px;
  margin-left: 6px;
}

.btn-primary_prod {
  background-color: #f0c14b;
  border: 1px solid #a88734;
  color: #111;
}

.btn-primary_prod:hover {
  background-color: #f7ca00;
}

.btn-secondary_prod {
  background-color: #f0f0f0;
  border: 1px solid #d5d9d9;
  color: #0F1111;
}

.btn-secondary_prod:hover {
  background-color: #e7e7e7;
}

.btn-danger_prod {
  background-color: #fff;
  border: 1px solid #d5d9d9;
  color: #0F1111;
}

.btn-danger_prod:hover {
  background-color: red;
}

.admin-actions_prod {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.icon_prod {
  margin-right: 5px;
}

.delete-form_prod {
  margin: 0;
}

@media (max-width: 768px) {
  .action-container_prod {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary_prod,
  .btn-secondary_prod,
  .btn-danger_prod {
    width: 100%;
    margin: 5px 0;
  }

  .admin-actions_prod {
    flex-direction: column;
  }
}


.image-container_prod {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.product-image_prod {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-container_prod:hover .product-image_prod {
  transform: scale(1.05);
}

.image-overlay_prod {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container_prod:hover .image-overlay_prod {
  opacity: 1;
}

.quick-view-button_prod {
  padding: 10px 20px;
  background-color: #fff;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.quick-view-button_prod:hover {
  background-color: #f0c14b;
}

.low-stock-badge_prod {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #c40000;
  color: #fff;
  padding: 5px 10px;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 3px;
}


/* Quick view modal */

.modal_prod {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content_prod {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
}

.close_prod {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close_prod:hover,
.close_prod:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.station-badge_prod {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #232f3e;  /* Amazon's dark blue color */
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 0.8em;
  font-weight: bold;
}


/* logout button  */

.logout-button_prod {
  background-color: #f0c14b;
  border: 1px solid #a88734;
  border-radius: 3px;
  color: #111;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  padding: 3px 10px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.logout-button_prod:hover {
  background-color: #f0c14b;
  color: white;
}

.logout-button_prod:active {
  background-color: #f0c14b;
  border-color: #a88734 #9c7e31 #9c7e31;
}

@media (max-width: 768px) {
  .logout-button_prod {
      width: 100%;
      padding: 8px 10px;
      font-size: 14px;
  }
}

.logout-button_Mob {
  background: #F0C14B !important;
  color: black !important;
  border-radius: 5px !important;
  padding: 3px 3px !important;
  margin: 3px 3px !important;
  font-size: 20px !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.logout-button_Mob:hover {
  background: #F0C14B !important;
  color: white !important;
}





/* css for getPreventiveHistory views\maintenance\preventive-history.ejs page  */
.main_preven {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.title_preven {
  text-align: center;
  color: #232f3e;
  margin-bottom: 2rem;
}

.maintenance-grid_preven {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.maintenance-card_preven {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 1.5rem;
  transition: box-shadow 0.3s ease;
}

.maintenance-card_preven:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.maintenance-title_preven {
  color: #232f3e;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.maintenance-info_preven {
  margin-bottom: 0.5rem;
  color: #555;
}

.clickable_preven {
  color: #007bff;
  cursor: pointer;
  text-decoration: underline;
}

.operations_preven {
  margin-top: 1rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.operations-title_preven {
  color: #232f3e;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.operations-list_preven {
  list-style-type: none;
  padding: 0;
}

.operation-item_preven {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.operation-info_preven {
  margin-bottom: 0.3rem;
}

.done_preven {
  color: green;
}

.not-done_preven {
  color: red;
}

.image-gallery_preven {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.thumbnail_preven {
  width: 50px;
  height: 50px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

.thumbnail_preven:hover {
  transform: scale(1.1);
}

.modal_preven {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content_preven {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain;
}

.close_preven {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close_preven:hover,
.close_preven:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.no-maintenance_preven {
  text-align: center;
  color: #555;
  font-style: italic;
}


/* Start views\maintenance\preventive.ejs */
.form_preventive {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: block !important;
}

.form-step_preventive {
  margin-bottom: 20px;
}

.form-label_preventive {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #232f3e;
}

.form-select_preventive,
.form-input_preventive {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-select_preventive:focus,
.form-input_preventive:focus {
  outline: none;
  border-color: #ff9900;
}

.section-title_preventive {
  color: #232f3e;
  margin-bottom: 15px;
}

.operations-list_preventive {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
}

.submit-btn_preventive {
  background-color: #ff9900;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn_preventive:hover {
  background-color: #ffa31a;
}

@media (max-width: 768px) {
  .form_preventive {
      padding: 15px;
  }

  .form-select_preventive,
  .form-input_preventive {
      font-size: 14px;
  }

  .submit-btn_preventive {
      width: 100%;
  }
}


/* continue views\maintenance\preventive.ejs maintnenace opeartion part */
.operation-item_preventive {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f8f8;
}

.checkbox_preventive {
  margin-right: 10px;
}

.checkbox-label_preventive {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #111;
  margin-bottom: 10px;
}

.input_preventive {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #a6a6a6;
  border-radius: 3px;
  font-size: 14px;
}

.input_preventive:focus {
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228,121,17,.5);
}

.file-input_preventive {
  display: none;
}

.file-input-label_preventive {
  display: inline-block;
  padding: 8px 12px;
  margin-top: 10px;
  background-color: #f0c14b;
  border: 1px solid #a88734;
  border-radius: 3px;
  color: #111;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.file-input-label_preventive:hover {
  background-color: #f4d078;
}

@media (max-width: 768px) {
  .operation-item_preventive {
      padding: 10px;
  }

  .checkbox-label_preventive {
      font-size: 14px;
  }

  .input_preventive,
  .file-input-label_preventive {
      font-size: 12px;
  }
}


.textarea_preventive {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #a6a6a6;
  border-radius: 3px;
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.textarea_preventive:focus {
  border-color: #007eb9;
  box-shadow: 0 0 5px rgba(0, 126, 185, 0.5);
  outline: none;
}

.file-input-container_preventive {
  margin-top: 10px;
}

.file-input-label_preventive {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.file-input-label_preventive:hover {
  background-color: #e0e0e0;
}

.image-preview-container_preventive {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.image-preview_preventive {
  width: 100px;
  height: 100px;
  object-fit: cover;
  /* margin-right: 10px; */
  /* margin-bottom: 10px; */
  border: 1px solid #ccc;
  border-radius: 4px;
}

 /* for maintenance curative  */

 .operation-item_preventive {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.operation-item_preventive:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.checkbox-label_preventive {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.checkbox_preventive {
  margin-right: 10px;
  transform: scale(1.2);
}

.operation-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
}

.operation-details span {
  background-color: #e9ecef;
  padding: 5px 10px;
  border-radius: 4px;
}

.unite-input {
  width: 60px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}

.unite-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* Responsive design */
@media (max-width: 768px) {
  .operation-details {
      flex-direction: column;
      gap: 10px;
  }
}

/* home page css start */
._home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

._home-hero {
  
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 100px 0;
  text-align: center;
}

._home-hero-content {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 40px;
  border-radius: 10px;
}

._home-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

._home-hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

._home-cta-button {
  display: inline-block;
  background-color: #ff9900;
  color: #000000;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

._home-cta-button:hover {
  background-color: #ffa31a;
  color: white;
}

._home-section {
  margin: 60px 0;
  /* padding: 0px; */
}

._home-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #232f3e;
}

._home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

._home-grid-item {
  background-color: #f3f3f3;
  padding: 20px;
  border-radius: 8px;
}

._home-grid-item h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #232f3e;
}

._home-grid-item ul {
  padding-left: 20px;
}

._home-stations {
  background-color: #f3f3f3;
  /* padding: 40px; */
  border-radius: 8px;
}

._home-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

._home-table th,
._home-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

._home-table th {
  background-color: #232f3e;
  color: #ffffff;
}

._home-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

@media (max-width: 768px) {
  ._home-hero {
    padding: 60px 0;
  }

  ._home-hero h1 {
    font-size: 2rem;
  }

  ._home-hero p {
    font-size: 1rem;
  }

  ._home-section h2 {
    font-size: 1.75rem;
  }

  ._home-grid-item h3 {
    font-size: 1.25rem;
  }

  ._home-table {
    font-size: 0.9rem;
  }
}

._home-table td[colspan="4"] {
  background-color: #232f3e;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

/* footer start code */
.site-footer {
  background-color: #292a2b;
  color: #ffffff;
  padding: 20px 0;
  font-size: 13px;
}
  
.footer-content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #dddddd;
  text-decoration: none;
  margin: 0 10px;
}

.footer-links a:hover {
  text-decoration: underline;
}



.page-wrapper_ {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrapper_ .main-content_ {
    flex: 1 0 auto;
}

.site-footer_ {
    flex-shrink: 0;
    background-color: #f8f9fa;
    padding: 20px 0;
}

.footer-content_ {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links_ {
    display: flex;
    gap: 20px;
}

.footer-links_ a {
    color: #333;
    text-decoration: none;
}

.footer-links_ a:hover {
    text-decoration: underline;
}


/* CSS styling for the maintenance details modal and add a button to edit the maintenance */
.modal_mainmodal {
  font-family: Arial, sans-serif;
  color: #333;
}

.modal_mainmodal-title {
  font-size: 24px;
  margin-bottom: 5px;
}

.modal_mainmodal-subtitle {
  font-size: 18px;
  color: #666;
  margin-top: 0;
}

.modal_mainmodal-actions {
  margin-bottom: 20px;
}

.modal_mainmodal-button {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.modal_mainmodal-button--excel {
  background-color: #1d6f42;
  color: white;
}

.modal_mainmodal-button--excel:hover {
  background-color: #15532f;
}

.modal_mainmodal-button--edit {
  background-color: #4a90e2;
  color: white;
  margin-top: 10px;
}

.modal_mainmodal-button--edit:hover {
  background-color: #3a78c2;
}

.modal_mainmodal-record {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
}

.modal_mainmodal-intervenant {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 15px;
}

.modal_mainmodal-operations {
  list-style-type: none;
  padding: 0;
}

.modal_mainmodal-operation {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.modal_mainmodal-operation:last-child {
  border-bottom: none;
}

.modal_mainmodal-operation-name {
  display: block;
  margin-bottom: 5px;
}

.modal_mainmodal-operation-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 14px;
}

.modal_mainmodal-operation-status--done {
  background-color: #e6f4ea;
  color: #137333;
}

.modal_mainmodal-operation-status--notdone {
  background-color: #fce8e6;
  color: #c5221f;
}

.modal_mainmodal-observation {
  margin-top: 5px;
  font-style: italic;
  color: #666;
}

.modal_mainmodal-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.modal_mainmodal-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}

.modal_mainmodal-image:hover {
  transform: scale(1.05);
}

.modal_mainmodal-error {
  color: #c5221f;
  font-weight: bold;
}

/* CSS styling for the maintenance details modal and add a button to edit the maintenance */

.form-control_signup {
  margin-bottom: 1rem;
}

.form-control_signup label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #333;
}

.form-control_signup input,
.form-control_signup select {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control_signup input:focus,
.form-control_signup select:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control_signup select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2rem;
}

.form-control_signup select:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

.form-control_signup .invalid {
  border-color: #dc3545;
}

.form-control_signup .invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

@media (max-width: 768px) {
  .form-control_signup input,
  .form-control_signup select {
    font-size: 16px; /* Prevents zoom on focus in iOS */
  }
}

/* adds a click event listener to handle the delete button clicks. */

.image-preview-wrapper {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.delete-image-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
/* adds a click event listener to handle the delete button clicks. end */

/* resultByYear.ejs make the table responsive and prevent overflow, while adding a scrollbar for control */

.table-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 1em;
}


.result-table th, .result-table td {
  padding: 8px;
  border: 1px solid #ddd;
}

.result-table thead {
  background-color: #f2f2f2;
}

.result-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}





.has-remarque {
  background-color: #ffcccc;
  cursor: help;
  position: relative;
}


.has-remarque:hover::after {
  content: attr(title);
  position: absolute;
  top: -23px;
  right: -582px;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1;
  font-size: 14px;
}

.has-remarque::after {
  content: "ℹ";
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: #007bff;
  white-space: nowrap;
}



#chartScrollWrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

#chartContainer {
  height: 500px;  /* Adjust as needed */
  width: max-content; /* Auto-size based on canvas width */
}

canvas {
  height: 100% !important;
}


/* navigation nested dropdown for marche start */
.nested-dropdown {
  position: relative;
}

.nested-dropdown-content {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #1c1d1e;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.nested-dropdown:hover .nested-dropdown-content {
  display: block;
}

.mobile-nested-dropdown-content {
  display: none;
  padding-left: 20px;
}

.mobile-nested-dropdown:hover .mobile-nested-dropdown-content {
  display: block;
}
/* navigation nested dropdown for marche end */


/* populateIntervention css start views\maintenance\curative.ejs*/
/* Style for curative station titles */
.curative-station-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
}

/* Style for curative nature titles */
.curative-nature-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2980b9;
  margin-top: 15px;
  margin-bottom: 10px;
  text-decoration: underline;
}

/* Style for curative operation items */
.curative-operation-item {
  display: flex;
  align-items: center;
  border: 1px solid #ecf0f1;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.curative-operation-item:hover {
  background-color: #e3f2fd;
  transform: scale(1.02);
}

/* Style for curative checkbox labels */
.curative-checkbox-label {
  flex: 1;
  font-size: 1rem;
  color: #34495e;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Style for curative operation details */
.curative-operation-details {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}

.curative-operation-details span {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 5px;
}

/* Style for curative unit input */
.curative-unite-input {
  width: 50px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Style for the curative gap between groups */
.curative-gap {
  height: 20px;
  border-top: 1px dashed #bdc3c7;
  margin: 20px 0;
}

/* corrective-results css end views\maintenance\corrective-results.ejs*/

.download-attachement-btn-container {
  text-align: center !important;
  padding: 17px !important;
  border-top: 2px solid #ddd !important;
  display: ruby-text;
}


/* Download Attachement Button Styles */
.download-attachement-btn {
  padding: 10px 20px !important;
  background-color: #28a745 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 0.95em !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: background-color 0.2s !important;
  display: block !important;
  margin: 0 auto !important;
}

.download-attachement-btn:hover {
  background-color: #218838 !important;
}

/* Modify Button Styles */
.modify-intervention-btn {
  padding: 10px 20px !important;
  background-color: #0071e9 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 0.95em !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: background-color 0.2s !important;
  display: block !important;
  margin: 0 auto !important;
}

.modify-intervention-btn:hover {
  background-color: #004a99 !important;
}




/* .modify-intervention-btn {
  
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px; 
  font-size: 0.95em;
  transition: background-color 0.2s;
}

.modify-intervention-btn:hover {
  background-color: #e0a800;
} */


/* Enhanced Resolution Info Styling */
.resolution-display-card {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.08) 0%, rgba(23, 162, 184, 0.02) 100%);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-left: 4px solid #17a2b8;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.resolution-display-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.15);
}

.resolution-details h6 {
    color: #17a2b8;
    font-size: 1rem;
}

.resolution-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.resolution-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aspect-ratio-box {
    position: relative;
    background: #f8f9fa;
    border: 2px solid #17a2b8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 80px;
    min-height: 45px;
}

.aspect-ratio-box.landscape {
    width: 80px;
    height: 45px;
}

.aspect-ratio-box.portrait {
    width: 45px;
    height: 80px;
}

.dimension-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #17a2b8;
    text-align: center;
    line-height: 1.2;
}

.resolution-metadata {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 15px;
}

.resolution-metadata .col-4 {
    text-align: center;
}

.resolution-metadata small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resolution-metadata .fw-semibold {
    font-size: 0.9rem;
    color: #2c3e50;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .resolution-display-card {
        padding: 15px;
    }
    
    .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    
    .resolution-preview {
        align-self: center;
    }
    
    .resolution-metadata .row {
        text-align: center;
    }
}

/* Animation for smooth transitions */
.resolution-info {
    transition: all 0.3s ease;
}

.resolution-specs {
    padding: 8px 0;
}