/* overview section */
:root {
  --hsd-overview-background-color: #00205b;
  --hsd-overview-text-color: #ffff;
}

.hsd-at-a-glance {
  background: var(--hsd-overview-background-color);
  color: var(--hsd-overview-text-color);
  max-width:1050px;
  width:100%;
  margin:1rem auto;
  padding:2em;
  padding-bottom: 4rem;
  text-align: center;
}
.hsd-at-a-glance ul {
  text-align:left;
  max-width:850px;
  margin:0 auto;
}


/* Adjust the Highlight color to match the Client's site/OEM.

If dark background is requested, adjust the highlight color, and p/ul color to contrast with it appropriately */

  :root {
    /* Summary Section Parent */
    --hsd-mod-summary-section-background: #fff;

    /* Color for Heading AND Border */
    --hsd-mod-summary-section-highlight-color: #00205b;

    /* p / ul */
    --hsd-mod-ss-p-ul-color: #000;
  }

  .hsd-mod-summary-section {
    display: flex;
    flex-flow: column;
    gap: 12px;

    max-width: 1440px;
    width: 100%;
    padding: 32px 2rem 44px;
    margin: 32px 0;
    box-sizing: border-box;

    background: var(--hsd-mod-summary-section-background) !important;
    border-left: 4px solid var(--hsd-mod-summary-section-highlight-color) !important;

    transition: all 0.1s ease-out;
  }
  .hsd-mod-summary-section:hover {
    padding-left: calc(2rem - 4px);

    border-left: 8px solid var(--hsd-mod-summary-section-highlight-color) !important;
  }

  .hsd-mod-summary-section span {
    margin: 0 0 8px !important;

    font-size: clamp(16px, 2vw, 18px) !important;
    color: var(--hsd-mod-summary-section-highlight-color) !important;
    text-transform: uppercase !important;
  }

  .hsd-mod-summary-section p,
  .hsd-mod-summary-section ul {
    margin: 0 !important;

    font-size: clamp(12px, 2vw, 14px) !important;
    color: var(--hsd-mod-ss-p-ul-color) !important;
  }

  @media screen and (max-width: 767px) {
    .hsd-mod-summary-section ul {
      padding-left: 20px !important;
    }
    .hsd-mod-summary-section li {
      margin-bottom: 8px !important;
    }
  }


  /* Content w/ Lifestyles customizable root variables */
:root {
  /* cwl = Content w/ Lifestyles */

  /* Accent Class */
  --hsd-mod-cwl-50-50-accent-background-color: #00205b;
  --hsd-mod-cwl-50-50-accent-text-color: #fff;
  --hsd-mod-cwl-50-50-accent-link-color: #fff;
}

/* Module Parent */
.hsd-mod-content-w-lifestyle-50-50 {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-items: center;
  max-width: 1440px;
  width: 100%;
}

/* Image Cont */
.hsd-mod-cwl-50-50-img {
  width: 100%;
  height: 100%;
}
.hsd-mod-cwl-50-50-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content Cont */
.hsd-mod-cwl-50-50-content {
  margin: 1rem;
  padding: 4rem;
  box-sizing: border-box;
}

/*  ** Optional Classes ** */

/* Reverse Class */
/* (swaps image and content position when added) */
.hsd-mod-cwl-50-50-reverse {
  grid-template-columns: 50% 50%;
}
.hsd-mod-cwl-50-50-reverse .hsd-mod-cwl-50-50-content {
  order: 1;
}

/* Accent styling */
.hsd-mod-cwl-50-50-accent {
  color: var(--hsd-mod-cwl-50-50-accent-text-color) !important;
  background-color: var(--hsd-mod-cwl-50-50-accent-background-color);
}
.hsd-mod-cwl-50-50-accent a {
  color: var(--hsd-mod-cwl-50-50-accent-link-color) !important;
}

/* Split 1 image: stack two images vertically to look like one image */
.hsd-mod-cwl-50-50-img--stacked {
  height: auto;
}

.hsd-mod-cwl-50-50-img--stacked img {
  display: block;
  width: 100%;
  height: auto !important;
  margin: 0;
  padding: 0;
}

/* Media Query for mobile */
@media screen and (max-width: 767px) {
  /* Module Parent */
  .hsd-mod-content-w-lifestyle-50-50 {
    grid-template-columns: 1fr;
  }

  /* Content Cont */
  .hsd-mod-cwl-50-50-content {
    margin: 1rem;
    padding: 1rem;
  }

  /* Have the content above the image */
  .hsd-mod-content-w-lifestyle-50-50 .hsd-mod-cwl-50-50-content {
    order: 2;
  }
}


  /* Responsive Table Module Styles */
  :root {
    --hsd-rt-scrollbar-color: #f2f2f2 transparent;
    --hsd-rt-webkit-scrollbar-thumb-color: #f2f2f2;
    --hsd-rt-webkit-scrollbar-track-color: transparent;
  }

  /* Table Scroll Label Module Styles */
  :root {
    /* ::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 {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1rem;
  }

  /* Scroll For Overflow */
  .hsd-mod-rt-scroll-cont {
    max-width: 100%;

    overflow-x: scroll;
    scrollbar-color: var(--hsd-rt-scrollbar-color);
  }
  .hsd-mod-rt-scroll-cont::-webkit-scrollbar-thumb {
    background: var(--hsd-rt-webkit-scrollbar-thumb-color);
  }
  .hsd-mod-rt-scroll-cont::-webkit-scrollbar-track {
    background: var(--hsd-rt-webkit-scrollbar-track-color);
  }

  /* Table */
  .hsd-mod-rt-table {
    max-width: 100% !important;
    width: 100% !important;
    margin: 1rem 0px;

    border-collapse: collapse;
  }

  .hsd-mod-rt-table th,
  .hsd-mod-rt-table td {
    min-width: 150px;
    padding: 8px;

    border: 1px solid #ddd;
    text-align: center;
  }

  .hsd-mod-rt-table thead th {
    background-color: #f2f2f2;
    color: #333;
  }

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

  .hsd-mod-rt-table tr:hover {
    background-color: #f1f1f1;
  }

  .hsd-mod-rt-table td {
    color: #555;
  }

  :is(.hsd-mod-rt-table td ul, .hsd-mod-rt-table td ol) {
    display: table;
    margin: 0 auto;
    
    text-align: left;
  }

  .hsd-mod-rt-show-mobile {
    display: none;

    text-align: center;
  }

  @media screen and (min-width: 740px) {
    /* hide scrollbar but allow scrolling */
    .hsd-mod-rt-scroll-cont {
      /* -ms-overflow-style: none;  */
      /* for Internet Explorer, Edge */
      /* scrollbar-width: none;  */
      /* for Firefox */
      overflow-y: scroll;
    }

    .hsd-mod-rt-scroll-cont::-webkit-scrollbar {
      display: none; /* for Chrome, Safari, and Opera */
    }
  }

  @media screen and (max-width: 740px) {
    .hsd-mod-rt-show-mobile {
      display: block;
      text-align: center;
    }
  }

  /* Table Scroll Label Mod Styles */
  .hsd-mod-table-scroll-label {
    position: relative;
  }

  .hsd-mod-table-scroll-label:before {
    position: sticky;
    top: 0;
    left: 0;

    padding-left: 8px;

    background: var(--hsd-mod-tsl-before-background);
    color: var(--hsd-mod-tsl-before-color) !important;
    font-size: var(--hsd-mod-tsl-before-font-size) !important;
    font-style: italic;
  }

  /* Static Single Review - Module CSS */

:root {
  /* Module Background */
  --hsd-mod-ssr-background: transparent;

  /* Review Container */
  --hsd-mod-ssr-review-background: #fff;
  --hsd-mod-ssr-review-border: 1px solid #e3e3e3;

  /* Text Colors */
  --hsd-mod-ssr-review-title: #000;
  --hsd-mod-ssr-review-name-color: #000;
  --hsd-mod-ssr-review-date-color: #545454;
  --hsd-mod-ssr-review-body-color: #000;
}

/* Static review section */
.hsd-mod-static-single-review {
  background-color: var(--hsd-mod-ssr-background);
  margin: 32px auto;
  padding: 32px 0;
}

.hsd-mod-ssr-cont {
  padding: 0 1rem;
}

/* Module Title */
.hsd-mod-ssr-title {
  margin: 0 0 12px;
  color: var(--hsd-mod-ssr-review-title) !important;
  font-family: "Arial" !important;
  font-size: 20px !important;
  font-style: normal;
  font-weight: 400;
}

.hsd-mod-ssr-review {
  display: flex;
  flex-flow: column;
  gap: 16px;
  max-height: 450px;
  padding: 36px;
  background-color: var(--hsd-mod-ssr-review-background);
  border: var(--hsd-mod-ssr-review-border);
}

.hsd-mod-ssr-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

:is(.hsd-mod-ssr-name, .hsd-mod-ssr-date, .hsd-mod-ssr-body) {
  line-height: 21px; /* 150% */
}

.hsd-mod-ssr-heading-cont {
  display: flex;
  flex-flow: column;
  gap: 4px;
}

.hsd-mod-ssr-stars-cont {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

/* Name */
.hsd-mod-ssr-name {
  color: var(--hsd-mod-ssr-review-name-color) !important;
  font-family: "Arial" !important;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin: 0 !important;
}

/* Date */
.hsd-mod-ssr-date {
  color: var(--hsd-mod-ssr-review-date-color) !important;
  font-family: "Arial" !important;
  font-size: 14px !important;
  font-style: italic;
  font-weight: 400;
  line-height: 24px; /* 120% */
  margin: 0 !important;
}

/* Star Icon */
.hsd-mod-ssr-star {
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='31' viewBox='0 0 32 31' fill='none'%3E%3Cpath d='M16.1641 23.7726L7.31804 30.2774C7.18292 30.3768 7.01993 30.431 6.85223 30.4324C6.68453 30.4338 6.52065 30.3823 6.3839 30.2852C6.24714 30.1881 6.14447 30.0504 6.09048 29.8916C6.03649 29.7329 6.03392 29.5611 6.08314 29.4008L9.32589 18.8454L0.335398 12.4362C0.197539 12.3381 0.0944136 12.1988 0.0409246 12.0384C-0.0125644 11.8779 -0.0136469 11.7046 0.0378337 11.5434C0.0893142 11.3823 0.190691 11.2417 0.327316 11.142C0.46394 11.0422 0.628736 10.9885 0.79789 10.9886L11.9307 10.9771L15.2178 0.557819C15.2683 0.397637 15.3681 0.257479 15.5029 0.157326C15.6377 0.0571731 15.8007 0.00213611 15.9687 6.0917e-05C16.1366 -0.00201428 16.3009 0.0489782 16.4381 0.145769C16.5754 0.24256 16.6786 0.38021 16.733 0.539095L20.31 10.9732L31.2038 10.9981C31.3723 10.9984 31.5364 11.052 31.6725 11.1513C31.8086 11.2506 31.9097 11.3904 31.9615 11.5508C32.0132 11.7111 32.0128 11.8837 31.9604 12.0438C31.908 12.2039 31.8062 12.3433 31.6697 12.442L22.8921 18.7931L26.4995 29.4343C26.5539 29.5944 26.5559 29.7676 26.5054 29.929C26.4549 30.0903 26.3544 30.2315 26.2184 30.332C26.0825 30.4325 25.9181 30.4872 25.749 30.4882C25.5799 30.4892 25.4149 30.4364 25.2778 30.3375L16.1641 23.7726Z' fill='%23FBBC05' /%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Google Icon SVG */
.hsd-mod-ssr-icon {
  width: 40px;
  height: 40px;
}

/* Scroll Container */
.hsd-mod-ssr-bottom {
  overflow-y: auto;
}

/* Review Body */
.hsd-mod-ssr-body {
  color: var(--hsd-mod-ssr-review-body-color) !important;
  font-family: "Arial" !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

@supports (scrollbar-color: #b7b7b7 transparent) {
  .hsd-mod-ssr-bottom {
    scrollbar-color: #b7b7b7 transparent;
  }
}

.hsd-custom-review-slides-section ::-webkit-scrollbar-thumb {
  background: #b7b7b7;
}

.hsd-custom-review-slides-section ::-webkit-scrollbar-track {
  background: transparent;
}

@media screen and (min-width: 850px) {
  /* Static review section */
  .hsd-mod-ssr-cont {
    max-width: 1440px;
    margin: 0 auto;
  }

  .hsd-mod-ssr-review {
    gap: 24px;
    max-height: none;
  }

  /* Name */
  .hsd-mod-ssr-name {
    font-size: 20px !important;
  }

  /* Date */
  .hsd-mod-ssr-date {
    font-size: 20px !important;
  }

  /* Star Icon */
  .hsd-mod-ssr-star {
    width: 32px;
    height: 32px;
  }

  /* Review Body */
  .hsd-mod-ssr-body {
    font-size: 16px !important;
  }
}