/* Jumplink Sidebar w/ Content Section */
:root {
  /* !!! OEM Color (match website CTAs) !!! */
  --hsd-jumplink-oem-color: #1b365d; /* sidebar variables, leave empty for default values */
  --hsd-jumplink-sidebar-background: #f0f0f0;
  --hsd-jumplink-sidebar-text: ;
  --hsd-jumplink-sidebar-links: #333; /* content section variables, leave empty for default values */
  --hsd-jumplink-content-background: #1b365d;
  --hsd-jumplink-content-text: #fff;
  --hsd-jumplink-content-links: #fff;
}
.hsd-jumplink-sidebar {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}
.hsd-jswc-sidebar {
  flex: 1;
  max-width: 33.33%;
  padding: 2rem;
  color: var(--hsd-jumplink-sidebar-text);
  background-color: var(--hsd-jumplink-sidebar-background);
}
.hsd-jswc-sidebar hr {
  margin-top: 0;
  border: 0;
  border-top: 3px solid var(--hsd-jumplink-oem-color);
}
.hsd-jswc-sidebar a {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--hsd-jumplink-sidebar-links);
}
.hsd-jswc-sidebar a:hover {
  color: var(--hsd-jumplink-oem-color);
}
.hsd-jswc-content {
  flex: 2;
  max-width: 66.66%;
  padding: 2rem;
  background-color: var(--hsd-jumplink-content-background);
  color: var(--hsd-jumplink-content-text);
} /* Mobile CSS */
@media (max-width: 768px) {
  .hsd-jswc-sidebar,
  .hsd-jswc-content {
    max-width: 100%;
    flex: 100%;
  }
} /* Content w/ Slideshow customizable root variables */
:root {
  --hsd-accent-background-color: #1b365d;
  --hsd-accent-text-color: #fff;
  --hsd-accent-link-color: #fff;
  --hsd-section-margin: 1rem 0px;
  --hsd-content-padding: 4rem;
  --hsd-content-margin: 1rem;
} /* Content w/ Slideshow styles */
.hsd-section {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-items: center;
  margin: var(--hsd-section-margin);
}
.hsd-section-image {
  width: 100%;
  height: 100%;
  grid-row-start: 2;
}
.hsd-section-image img {
  width: 100%;
  height: 100%;
}
.hsd-section-paragraph {
  margin: var(--hsd-content-margin);
  padding: var(--hsd-content-padding);
  grid-row-start: 2;
}
.hsd-left {
  grid-column-start: 1;
}
.hsd-right {
  grid-column-start: 2;
}
.hsd-accent {
  color: var(--hsd-accent-text-color);
  background-color: var(--hsd-accent-background-color);
}
.hsd-accent a {
  color: var(--hsd-accent-link-color);
}
@media screen and (max-width: 720px) {
  .hsd-section {
    display: block;
    z-index: 9999;
    height: auto;
  }
  .hsd-section-paragraph {
    margin: 1rem;
    padding: 1rem;
  }
} /* Slideshow CSS (renamed to hsd-ls-slideshow) */
.hsd-custom-carousel {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem;
  overflow-x: scroll;
  scrollbar-color: #b7b7b7 transparent;
  animation: animateright 0.4s;
}
.hsd-custom-carousel ::-webkit-scrollbar-thumb {
  background: #b7b7b7;
}
.hsd-custom-carousel ::-webkit-scrollbar-track {
  background: transparent;
}
.hsd-ls-slideshow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  align-items: center;
  height: 100%;
}
.hsd-ls-slide-wrapper.hsd-ls-slide {
  flex: 1 0 100%;
  display: none;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.6s ease-in-out;
  border: 1px solid #e3e3e3;
  box-sizing: border-box;
  max-width: 100%;
}
.hsd-ls-slide-wrapper.hsd-ls-slide.hsd-ls-slide-visible {
  display: block;
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}
.hsd-ls-carousel-image {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 850px) {
  .hsd-ls-slide-wrapper {
    gap: 16px;
    max-height: 350px;
    height: auto !important;
    width: 100%;
  }
}
@keyframes animateright {
  0% {
    right: -300px;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
} /* Arrow buttons styling */
.hsd-ls-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: white;
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
} /* Positioning */
.hsd-ls-arrow-prev {
  left: 10px;
}
.hsd-ls-arrow-next {
  right: 10px;
} /* Hover effect */
.hsd-ls-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
} /* Disabled state */
.hsd-ls-arrow:disabled {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
  box-shadow: none;
} /* Pros & Cons Module Style */
:root {
  /* MOD - PCS - Pros & Cons Cont */
  --hsd-mod-pcs-cont-background: #f9f9f9;
  --hsd-mod-pcs-cont-border: 1px solid #ddd;
  --hsd-mod-pcs-cont-border-radius: 4px; /* MOD - PCS - Pros & Cons h3 */
  --hsd-mod-pcs-heading-font-color: ; /* MOD - PCS - Pros */ /* h3 */
  --hsd-mod-pcs-pros-heading-border: 2px solid #008000; /* ::before */
  --hsd-mod-pcs-pros-marker: "\2713";
  --hsd-mod-pcs-pros-font-size: 10px;
  --hsd-mod-pcs-pros-font-color: #008000; /* MOD - PCS - Cons */ /* h3 */
  --hsd-mod-pcs-cons-heading-border: 2px solid #ff0000; /* ::before */
  --hsd-mod-pcs-cons-marker: "\274C";
  --hsd-mod-pcs-cons-font-size: 10px;
  --hsd-mod-pcs-cons-font-color: #ff0000; /* MOD - PCS - Pros & Cons li */
  --hsd-mod-pcs-li-font-color: ;
}
.hsd-mod-pro-con-section {
  /* Display */
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center; /* Sizing */
  max-width: 1440px;
  margin: 0 auto; /* padding: 1rem; */
}
.hsd-mod-pro-con-section > h2 {
  /* Display */
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2px; /* Sizing */
  margin: 32px auto !important;
}
.hsd-mod-pro-con-section > h2 span {
  /* Font */
  font-size: 14px !important;
  line-height: 100% !important;
}
.hsd-mod-pcs-pro-con-cont {
  /* Display */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px; /* Sizing */
  width: 100%;
  padding: 20px;
  box-sizing: border-box; /* Background */
  background: var(--hsd-mod-pcs-cont-background);
  border: var(--hsd-mod-pcs-cont-border);
  border-radius: var(--hsd-mod-pcs-cont-border-radius);
}
.hsd-mod-pcs-pros,
.hsd-mod-pcs-cons {
  /* Sizing */
  max-width: 550px;
  min-width: 350px;
  width: calc(50% - 16px);
  box-sizing: border-box;
}
.hsd-mod-pcs-pros h2,
.hsd-mod-pcs-pros h3 {
  /* Sizing */
  border-bottom: var(--hsd-mod-pcs-pros-heading-border);
  width: fit-content;
  margin: 0 auto !important; /* Font */
  color: var(--hsd-mod-pcs-heading-font-color) !important;
  text-align: center;
}
.hsd-mod-pcs-cons h2,
.hsd-mod-pcs-cons h3 {
  /* Sizing */
  border-bottom: var(--hsd-mod-pcs-cons-heading-border);
  width: fit-content;
  margin: 0 auto !important; /* Font */
  color: var(--hsd-mod-pcs-heading-font-color) !important;
  text-align: center;
}
.hsd-mod-pcs-pros ul,
.hsd-mod-pcs-cons ul {
  /* Sizing */
  padding: 14px;
}
.hsd-mod-pcs-pros ul li,
.hsd-mod-pcs-cons ul li {
  /* Style */
  color: var(--hsd-mod-pcs-li-font-color) !important; /* List */
  list-style: none;
}
.hsd-mod-pcs-pros ul li::before {
  /* Font */
  content: var(--hsd-mod-pcs-pros-marker);
  margin-right: var(--hsd-mod-pcs-pros-font-size);
  color: var(--hsd-mod-pcs-pros-font-color);
}
.hsd-mod-pcs-cons ul li::before {
  /* Font */
  content: var(--hsd-mod-pcs-cons-marker);
  margin-right: var(--hsd-mod-pcs-cons-font-size);
  color: var(--hsd-mod-pcs-cons-font-color);
}
@media screen and (max-width: 850px) {
  .hsd-mod-pcs-pro-con-cont {
    /* Display */
    gap: 16px; /* Sizing */
    padding: 20px;
  }
  .hsd-mod-pcs-pros,
  .hsd-mod-pcs-cons {
    /* Sizing */
    width: 100%;
  }
  .hsd-mod-pcs-pros h2,
  .hsd-mod-pcs-pros h3 {
    /* Sizing */
    margin: 0 0 0 14px !important;
  }
  .hsd-mod-pcs-cons h2,
  .hsd-mod-pcs-cons h3 {
    /* Sizing */
    margin: 0 0 0 14px !important;
  }
} /* Responsive Table Mod Styles */
:root {
  /* MOD - Responsive Table */
  --hsd-rt-scrollbar-color: #f2f2f2 transparent;
  --hsd-rt-webkit-scrollbar-thumb-color: #f2f2f2;
  --hsd-rt-webkit-scrollbar-track-color: transparent;
} /* Table Scroll Label Mod Styles */
:root {
  /* MOD - Table Scroll Label */ /* MOD - TSL ::before */
  --hsd-mod-tsl-before-background: transparent;
  --hsd-mod-tsl-before-color: #000;
  --hsd-mod-tsl-before-font-size: 14px;
} /* If the table starts scrolling before 650px screensize, update the max-width to the screen size where scrolling starts */
@media screen and (max-width: 716px) {
  .hsd-mod-table-scroll-label:before {
    content: "Scroll to see more \2192";
  }
}
@media screen and (max-width: 650px) {
  .hsd-mod-table-scroll-label:before {
    content: "Drag to see more \2192";
  }
} /* Responsive Table Module Styles */
.hsd-mod-responsive-table {
  /* Sizing */
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem;
} /* Scroll For Overflow */
.hsd-mod-rt-scroll-cont {
  /* Sizing */
  max-width: 100%; /* Overflow */
  overflow-x: scroll;
  scrollbar-color: var(--hsd-rt-scrollbar-color);
}
.CLASS::-webkit-scrollbar-thumb {
  background: var(--hsd-rt-webkit-scrollbar-thumb-color);
}
.CLASS::-webkit-scrollbar-track {
  background: var(--hsd-rt-webkit-scrollbar-track-color);
} /* Table */
.hsd-mod-rt-table {
  /* Sizing */
  max-width: 100% !important;
  width: 100% !important;
  margin: 1rem 0px; /* Background */
  border-collapse: collapse;
}
.hsd-mod-rt-table th,
.hsd-mod-rt-table td {
  /* Sizing */
  min-width: 150px;
  padding: 8px; /* Background */
  border: 1px solid #ddd; /* Font */
  text-align: center;
}
.hsd-mod-rt-table thead th {
  /* Background */
  background-color: #f2f2f2; /* Font */
  color: #333;
}
.hsd-mod-rt-table tr:nth-child(even) {
  /* Background */
  background-color: #f9f9f9;
}
.hsd-mod-rt-table tr:hover {
  /* Background */
  background-color: #f1f1f1;
}
.hsd-mod-rt-table td {
  /* Font */
  color: #555;
}
.hsd-mod-rt-table td ul {
  /* Font */
  text-align: left;
}
.hsd-mod-rt-show-mobile {
  /* Display */
  display: none; /* Font */
  text-align: center;
}
@media screen and (min-width: 740px) {
  /* hide scrollbar but allow scrolling */
  .hsd-mod-rt-scroll-cont {
    /* Overflow */ /* -ms-overflow-style: none; */ /* for Internet Explorer, Edge */ /* scrollbar-width: none; */ /* for Firefox */
    overflow-y: scroll;
  }
  .hsd-mod-rt-scroll-cont::-webkit-scrollbar {
    /* Display */
    display: none; /* for Chrome, Safari, and Opera */
  }
}
@media screen and (max-width: 740px) {
  .hsd-mod-rt-show-mobile {
    /* Display */
    display: block; /* Font */
    text-align: center;
  }
} /* Table Scroll Label Mod Styles */
.hsd-mod-table-scroll-label {
  /* Position */
  position: relative;
}
.hsd-mod-table-scroll-label:before {
  /* Position */
  position: sticky;
  top: 0;
  left: 0; /* Sizing */
  padding-left: 8px; /* Background */
  background: var(--hsd-mod-tsl-before-background); /* Font */
  color: var(--hsd-mod-tsl-before-color);
  font-size: var(--hsd-mod-tsl-before-font-size);
  font-style: italic;
}
