.top-spacing-section{
  margin-top:120px;
}
.bottom-spacing-section{
  margin-bottom:120px;
}
.page-template-template-service-redesign .container {
  max-width: 1400px;
}
.page-template-template-service-redesign {
  overflow-y: hidden;
}
.page-template-template-service-redesign footer#main-footer {
  position: relative;
  border-top: 1px solid #f2f2f2;
  padding: 19px 0 0 0;
}
.page-template-template-service-redesign sup {
  bottom: 5px;
  font-size: 12px;
}
.page-template-template-service-redesign h1 {
  font-size: 60px;
  line-height: 65px;
  font-weight: 300;
}
.page-template-template-service-redesign h2 {
  font-size: 38px;
  line-height: 65px;
  font-weight: 500;
  color: #252525;
  margin-bottom: 30px;
}
.page-template-template-service-redesign h3 {
  /* Figma: Headlines/size-lg */
  color: #252525;
  font-family: 'Figtree', sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 34px; /* 121.429% */
}
.page-template-template-service-redesign h4 {
  font-size: 28px;
  line-height: 34px;
  color: #252525;
}
.page-template-template-service-redesign p, .page-template-template-service-redesign li {
  font-size: 18px;
  line-height: 30px;
  color: #0F2318;
}
.page-template-template-service-redesign p {
  margin-bottom: 15px;
}
.page-template-template-service-redesign p:last-child {
  margin-bottom: 0px;
}
.page-template-template-service-redesign p strong {
  font-weight: 700;
}

.page-template-template-service-redesign .hero-block .field__item h1 sup {
  font-size: 40px;
  bottom: 15px;
}
.page-template-template-service-redesign .menu-item-link-wrapper sup {
  bottom: 0px;
}

/* Main nav */
.logged-in .sticky-nav-bar.fixed-top-nav.sticky-element-original.element-is-sticky {
  top: 58px !important;
}

/*service-hero*/
.service-hero-section .hero-block {
  margin: 0 auto;
}
.service-hero-section .block-system-breadcrumb-block {
  float: none;
  padding-top: 25px;
}
.service-hero-section .block-system-breadcrumb-block > .container {
  margin: 0px;
  width: 100%;
  padding-left: 0px;
}
#block-views-blockheader-slider.block-views-page.service-hero-section,
#block-views-blockheader-slider.block-views-page.service-hero-section
  > .block-views-blockheader {
  height: auto;
  margin-bottom: 45px;
}
.hero-bg
  #block-views-blockheader-slider.block-views-page
  .bgr-image-header
  img {
  background-position: center;
  background-size: contain;
  object-fit: cover;
}
.page-template-template-service-redesign .hero-block .field__item h1 sup {
  font-size: 40px;
  bottom: 15px;
}
.service-hero-content-block {
  max-width: 49.3%;
  padding: 60px 20px 90px;
}
.page-template-template-service-redesign
  .service-hero-content-block
  .content-below-title
  sup,
.xenograft-model p sup {
  bottom: 0px;
}
.service-hero-section .breadcrumb ol li:first-child > a:after {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2023/07/home-icon.svg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.service-hero-section .breadcrumb ol li:not(:first-child):before {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2023/07/breadcrumbs-arrow.svg);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  top: 10px;
  left: -10px;
  opacity: 1;
}
.service-hero-section .anchor-button {
  padding: 10px 25px;
}

.service-hero-section .breadcrumb ol li:first-child > a {
  font-size: 0px;
}
.service-hero-section .breadcrumb ol li,
.service-hero-section .breadcrumb ol li a,
.service-hero-section h1,
.service-hero-section p {
  color: #fff;
  font-weight: 400;
}

.xenograft-model .service-hero-section .block-system-breadcrumb-block {
  padding: 0px;
}
.xenograft-model .service-hero-section .block-system-breadcrumb-block ol {
  display: none;
}
.xenograft-model .service-hero-section h1 {
  padding-top: 5px;
}
.service-hero-section .breadcrumb ol li {
  padding: 10px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
.service-hero-section .breadcrumb ol li:last-child {
  font-weight: 300;
}
.service-hero-section .breadcrumb ol li a {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
.io-service-banner p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
#main-header.not-sticky {
  position: absolute;
}
.page-template-template-service-redesign .view-container {
  padding-top: 45px;
  padding-bottom: 0px;
  margin-bottom: 120px;
}
.io-service-banner {
  margin-bottom: 0px !important;
}
.io-service-banner .block-views-blockheader {
  margin-bottom: 0px !important;
}

#block-views-blockheader-slider.block-views-page.io-service-banner {
  background-color: #0F2318;
}
/* #block-views-blockheader-slider.block-views-page.io-service-banner:before {
  content: "";
    display: block;
    border-radius: 440.134px;
    background: linear-gradient(180deg, #FFF 0%, rgba(35, 149, 255, 0.01) 100%),
    url("wp-content/uploads/2026/07/kinease-top-bg.svg") no-repeat center top;
    box-shadow: 0 10.857px 13.39px 0 #FFF inset, 0 0 72.381px 0 #007B7D;
    filter: blur(36.19042205810547px);
    width: 440.134px;
    height: 438.179px;
    transform: rotate(-75deg);
    position: absolute;
    top: -299px;
    left: -222px;
}
.block-views-blockheader::before{
  content: "";
    position: absolute;
    left: -171px;
    bottom: -197px;
    pointer-events: none;
    width: 300px;
    height: 300px;
    transform: rotate(-45deg);
    z-index: 1;
    border-radius: 806.422px;
    background: url(/wp-content/uploads/2026/07/kinase-Ellipse-13.svg), linear-gradient(180deg, #FFF 0%, rgba(35, 149, 255, 0.01) 100%);
    box-shadow: 0 10.857px 13.39px 0 #FFF inset, 0 0 72.381px 0 #176D99;
    filter: blur(36.19042205810547px);
} */
/* #block-views-blockheader-slider.io-service-banner .bgr-image-header {
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
} */
.io-service-banner .service-hero-content-block {
  padding: 0 0 80px;
  max-width: 53% !important;
  /* Match the parent banner's dark background so the content block never looks
     transparent/broken on initial load (no dependency on an inline style). */
  background-color: rgb(15, 35, 24);
}
#block-views-blockheader-slider.block-views-page.io-service-banner .bgr-image-header {
  margin: 0px !important;
  position: absolute;
  z-index: 1;
  display: block;
  top: 0px;
  right: 0px;
  overflow: hidden;
	width: 638px;
  height: 100%;
}
.hero-bg #block-views-blockheader-slider.block-views-page.io-service-banner .bgr-image-header img {
  clip-path: ellipse(66% 116% at 72% 50%);
	width: auto !important;
}
/* .page-template-template-service-redesign #block-views-blockheader-slider.block-views-page .paragraph-view-type-banner, 
.io-service-banner .service-hero-content-block {
	height: 380px !important;
} */
/* .io-service-banner p.desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
} */



/* intro section */
.page-template-template-service-redesign
  .services-intro-section
  .services-intro-content {
  margin-bottom: 45px;
}
.page-template-template-service-redesign
  .services-intro-section
  .services-intro-content
  p:last-child {
  margin-bottom: 0px;
}
/*service-modal-section*/
/* .services-grid {
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(3, 1fr);
  padding: 45px 0px;
}

.service-card {
  padding: 20px;
  min-height: 320px;
  max-width: 100%;
  transition: all 0.3s ease;
  height: 100%;
  flex: 1;
}
.service-card:hover,
.related-service-card:hover {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}
.service-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 40px;
}
.service-title {
  margin-top: 11px;
  color: #066938;
  word-break: break-word;
}
.service-description {
  margin-top: 16px;
  font-size: 20px;
  color: #2b2b2b;
  line-height: 30px;
  flex-grow: 1;
}
.service-description p {
  margin: 0px;
} */

/* CTA Section */

.io-service-cta-section {
  background: linear-gradient(0deg, #0F2318 0%, #0F2318 100%);
  margin-top: 120px;
}
.io-service-cta-section h2.cta-title {
  color: #fff;
  margin-bottom: 28px;
  text-align: center;
}
.io-service-cta-section .content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  text-align: center;
}
.io-service-cta-section .cta-content {
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding: 93px 0px;
}
.io-service-cta-section .white-btn {
  padding: 10px 15px;
  border-radius: 99px;
  color: #3C3C3B;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  cursor: pointer;
  background-color: #F9F9F9;
  transition: all 0.5s ease;
  /* border: none;
  position: relative;
  transition: background-color 0.3s ease; */
}
.io-service-cta-section .white-btn:hover {
  background-color: #3778B4;
  color: #fff;
  transition: all 0.5s ease;
}
.io-service-cta-section a.white-btn:before {
	background: none;
}
.io-service-cta-section .cta-description {
  margin-bottom: 14px;
}
.io-service-cta-section .cta-description p {
  color: #fff;
}


/*table section*/
.color-scheme-purple .service-table h2 {
  color: #252525;
}
.color-scheme-purple .service-table h3{
  font-weight: 700;
}
.color-scheme-purple .paragraph--type--table-one .tablefield thead tr th {
  background: #066938;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  padding: 10px;
  font-weight: 400;
}
.color-scheme-purple
  .paragraph--type--table-one
  .tablefield
  tbody
  tr:nth-child(2n + 1)
  td {
  background: #ebf7f2;
  padding: 10px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #252525;
}
.color-scheme-purple
  .paragraph--type--table-one
  .tablefield
  tbody
  tr:nth-child(2n)
  td {
  background: #f9f9f9;
  padding: 10px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #252525;
}
.color-scheme-purple .paragraph--type--table-one .tablefield tbody tr a {
  color: #066938;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length label,
.color-scheme-purple .paragraph--type--table-one .dataTables_filter label,
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  .dataTables_info {
  font-size: 20px;
  line-height: 30px;
  color: #252525;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  .dataTables_info {
  padding: 40px 0px 45px;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  .dataTables_paginate {
  padding: 30px 0px 45px;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length label {
  display: flex;
  gap: 15px;
  align-items: center;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_length,
.color-scheme-purple .paragraph--type--table-one .dataTables_filter {
  padding: 15px 0px !important;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_length
  select,
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_filter
  input[type="search"] {
  font-size: 18px !important;
  line-height: 20px !important;
  padding: 5px;
  height: 50px !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 4px;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_filter
  input[type="search"] {
  width: 457px;
  margin-left: 10px;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_filter > label {
  position: relative;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_filter
  > label:after {
  content: "";
  position: absolute;
  background-image: url(/wp-content/uploads/2023/07/Search-Icons.svg);
  width: 20px;
  height: 20px;
  right: 10px;
  top: 50%;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.color-scheme-purple .paragraph--type--table-one table.tablefield {
  width: 100%;
}
.color-scheme-purple .paragraph--type--table-one .dt-buttons {
  padding: 30px 0 45px;
  float: right;
}
.color-scheme-purple .paragraph--type--table-one .dt-buttons > .buttons-excel {
  padding: 10px 25px;
  font-size: 22px;
  line-height: 30px;
  background: transparent;
  color: #066938;
  font-weight: 400;
  border: 1px solid #066938;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dt-buttons
  > .buttons-excel
  > span {
  text-transform: capitalize;
}
.color-scheme-purple
  table.tablefield.dataTable.no-footer.dtr-inline.fixedHeader-locked {
  display: none;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dt-buttons
  > .buttons-excel:hover {
  color: #ffffff;
  background-color: #066938;
}
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  thead
  > tr:not(.header-group-row),
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  thead
  > tr:not(.header-group-row),
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  tbody
  tr:not(:last-child) {
  border-bottom: 5px solid #fff;
}
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  thead
  > tr.header-group-row {
  border-bottom: 1px solid #fff;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length {
  width: 215px !important;
}
.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_filter {
  width: calc(100% - 215px);
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length > label {
  position: relative;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_length
  > label:before {
  content: "";
  position: absolute;
  background-image: url(/wp-content/uploads/2023/07/down-arrow.svg);
  background-repeat: no-repeat;
  left: 55%;
  top: 50%;
  width: 14px;
  height: 10px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: all;
  cursor: pointer;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_length
  > label
  > select {
  appearance: none;
  width: 74px;
  cursor: pointer;
  background-color: transparent !important;
  z-index: 1;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  a.paginate_button {
  font-size: 20px;
  line-height: 30px;
  color: #066938;
  width: 44px;
  height: 50px;
  padding: 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) !important;
}
.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_paginate
  .paginate_button.next::before,
.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_paginate
  .paginate_button.previous::before {
  color: #066938;
}
.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_paginate
  .paginate_button.current {
  background: #f2f2f2;
}

.paragraph--table-simple th {
  background: #006c60;
  color: #fff;
  border-right: 2px solid #fff;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 400;
}
.paragraph--table-simple th::after {
  opacity: 0.5;
  font-family: "FontAwesome";
  content: "\0a0\f0dc";
  font-weight: normal;
}
.paragraph--table-simple table tbody tr:nth-child(2n + 1) td {
  background: rgba(0, 108, 96, 0.1) !important;
}
.paragraph--table-simple table tbody tr:nth-child(2n) td {
  background: rgba(0, 108, 96, 0.05) !important;
}
.paragraph--table-simple table tbody tr td {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 8px 10px;
  font-size: 1.15rem;
}

.hero-block .anchor-link {
  margin-top: 31px;
}

/* entry content */

.entry-content-servises .overview {
  margin-bottom: 80px;
}
.entry-content-servises ul {
  margin: 0;
  padding: 0;
}
.entry-content-servises ul li {
  margin: 0;
  position: relative;
  list-style-type: none;
  padding: 0 0 0 20px;
  font-size: 20px;
  line-height: 30px;
}
.entry-content-servises ul li a {
  color: #006c60;
}
.entry-content-servises ul li::before {
  content: "";
  position: absolute;
  display: block;
  top: 0.6rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  box-sizing: content-box;
}
.page-template-template-service-redesign .entry-content-servises ul {
  color: #252525;
}
.page-template-template-service-redesign .entry-content-servises p {
  color: #2b2b2b;
  margin-bottom: 15px;
}

.entry-content-servises .teaser_title h4 {
  font-size: 1.8rem;
  font-weight: 600;
}

.page-template-template-service-redesign .contact-buttons {
  flex: 0 0 250px;
  padding-top: 7px;
}
.page-template-template-service-redesign .contact-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.page-template-template-service-redesign .contact-buttons > .block {
  width: 246px;
  height: 58px;
  background: #066938;
  margin: 0 0 5px 0;
  position: relative;
  padding: 5px;
  z-index: 1;
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  -o-transition: all 250ms;
  transition: all 250ms;
  transition-delay: 0;
  transform: translateZ(0);
}
.contact-buttons > .block a {
  display: block;
  height: 100%;
  align-items: center;
  position: relative;
  z-index: 2;
  text-decoration: none;
}
.contact-buttons > .block:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background: -moz-linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
    background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%); */
  z-index: 1;
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  -o-transition: all 250ms;
  transition: all 250ms;
  transition-delay: 0;
  transform: translateZ(0);
}
.contact-buttons > .block:hover {
  width: 266px;
  padding-right: 15px;
}
.contact-buttons > .block:hover:after {
  background: -moz-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  background: -webkit-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
}
.contact-buttons > .block a .field--name-field-icon {
  float: left;
  width: 38px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 0;
}
.contact-buttons > .block a .field--name-field-icon img {
  width: 100%;
  height: auto;
}
.contact-buttons > .block a .field--name-field-text {
  color: #fff;
  padding: 0 0 0 15px;
  font-size: 16px;
  line-height: 24px;
  float: left;
  width: calc(100% - 38px);
  height: 100%;
  display: flex;
  align-items: center;
}
.text-mit-bild-text {
  position: relative;
  max-width: 100%;
  display: flex;
  gap: 81px;
}

/* Sticky Navigation css */

.sticky-nav-bar {
  padding: 15px 0px;
  background: #fff;
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}
.sticky-nav-bar ul {
  display: flex;
  gap: 50px;
  margin-bottom: 0px;
}
.sticky-nav-bar li {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
.sticky-nav-bar li a {
  color: #3c3c3b;
}
.sticky-nav-bar a.active {
  border-bottom: 3px solid #066938;
  padding-bottom: 15px;
  color: #066938 !important;
}

/* hero section */

.page-template-template-service-redesign .service-hero-section,
.page-template-template-service-redesign .block-views-blockheader {
  margin-bottom: 0px !important;
}
.io-service-banner p.desc {
  font-weight: 400;
}
.io-service-banner p.sub-desc {
  font-weight: 600;
}

/* breadcrumbs css */
/* .page-template-template-service-redesign
  .paragraph-view-type-banner
  .field--name-field-headline-big {
  background-color: #13771f;
} */
.page-template-template-service-redesign .breadcrumb ol li {
  color: #066938;
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #fff;
  text-underline-offset: 2px;
}

.page-template-template-service-redesign .breadcrumb a {
  color: #066938;
}
.page-template-template-service-redesign .et-social-icons .et-social-icon a {
  color: #666;
}

.page-template-template-service-redesign .block-system-breadcrumb-block,
.page-template-template-service-redesign .discovery-breadcrumb-block {
  float: none;
}
.page-template-template-service-redesign .breadcrumb ol li:last-child {
  color: #fff;
  text-decoration: none;
}

/* Overview section */

/* Add top spacing so the overview doesn't butt against the hero (was 0).
   Adjust the value to taste. */
.page-template-template-service-redesign .service-overview-section {
  /* Spacing now comes from .content-with-sidebar margin-top (80px); keep this 0
     so the gap matches the in-vitro-safety-screening page (not 80+60). */
  margin-top: 0px;
}

/* Overview CTA button — Figma 14689-3328 (e.g. "Learn more about NExT").
   Dark-green pill, sized to its content and left-aligned (Figma centers it;
   we override to left). Hover -> brand blue #2395FF per project rule. */
.service-overview-section a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 99px;
  background-color: #066938;
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.service-overview-section a:hover,
.service-overview-section a:focus {
  background: #04502a;
  color: #fff;
}

.page-template-template-service-redesign .service-overview-text p, 
.page-template-template-service-redesign .service-overview-text ul {
  max-width: 1000px;
}
.page-template-template-service-redesign .service-overview-text ul {
  list-style: disc;
  padding-left: 20px;
}
.page-template-template-service-redesign .service-overview-text p {
  font-size: 18px;
  line-height: 30px;
}
.page-template-template-service-redesign .service-overview-text ul li {
  font-size: 18px;
  line-height: 30px;
  color: #0f2318;
  margin-bottom: 5px;
}
.page-template-template-service-redesign .service-overview-text h2:nth-child(3) {
  margin-top: 80px;
}
.service-overview-text li::marker,
.assay-card__desc li::marker {
  color: #066938;
}

/* Standalone table section (new template only).
   The table now renders outside .content-with-sidebar, just above Resources.
   A fixed 120px top margin guarantees the gap holds even when the sections
   that used to precede it are absent. Scoped to the new template so the old
   rb-new-template layout is unaffected. */
.page-template-template-service-redesign .table-section-standalone {
  margin-top: 120px;
}
@media (max-width: 767px) {
  .page-template-template-service-redesign .table-section-standalone {
    margin-top: 70px;
  }
}

/* Full-bleed: the table, resources and services sections span the full viewport
   width (edge-to-edge), overriding the .container 1060px cap + centering. These
   sit outside .content-with-sidebar, whose parent is full width, so width:100%
   + max-width:none fills the viewport without a horizontal-scrollbar overflow.
   Scoped to the new template so the old rb-new-template layout is unaffected. */
.page-template-template-service-redesign .table-section-standalone,
.page-template-template-service-redesign .related-resources-container,
.page-template-template-service-redesign .related-services-container {
  width: 100%;
}

/* Resources Section */

/* =========================================================
   RELATED RESOURCES — Figma 14448-7590 (new template only)
   ========================================================= */
.page-template-template-service-redesign .related-resources-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 120px;
  background-color: #fff;
}
.page-template-template-service-redesign .related-resources-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.page-template-template-service-redesign .resources-section-title {
  margin: 0;
  color: #252525;
  font-size: 38px;
  line-height: 65px;
  font-weight: 500;
}
.page-template-template-service-redesign .related-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.page-template-template-service-redesign .related-resources-link {
  display: flex;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.page-template-template-service-redesign .related-resources-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 410px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #ecf1f7;
}
.page-template-template-service-redesign .related-resources-card:hover {
   box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.10);
   background-color: #2395ff;
   transition: all 0.3s ease;
}
.page-template-template-service-redesign .resources-image {
  display: block;
  width: 100%;
  height: 196px;
  object-fit: cover !important;
  object-position: top center;
}
.page-template-template-service-redesign .related-resources-card:hover h4{
  color: #fff;
  transition: all 0.3s ease;
}
.page-template-template-service-redesign .related-resources-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 15px;
}
.page-template-template-service-redesign .related-resources-prefix {
  width: fit-content;
  margin: 0;
  padding: 2px 10px;
  background: #cbdcef;
  color: #0f2318;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.page-template-template-service-redesign .related-resources-title h4 {
  margin: 0;
  color: #0f2318;
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .page-template-template-service-redesign .related-resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .page-template-template-service-redesign .related-resources-container {
    margin: 70px 0;
  }
  .page-template-template-service-redesign .related-resources-grid {
    grid-template-columns: 1fr;
  }
  .page-template-template-service-redesign .related-resources-card {
    min-height: 0;
  }
  .page-template-template-service-redesign .resources-section-title {
    font-size: 28px;
    line-height: 40px;
  }
  .page-template-template-service-redesign .related-resources-prefix {
    font-size: 14px;
    line-height: 26px;
  }
  .page-template-template-service-redesign .related-resources-title h4 {
    font-size: 20px;
    line-height: 30px;
  }
}

/* Related Services title — different section, keep its own (bold) weight. */
.page-template-template-service-redesign .related-service-title {
  color: #0f2318;
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
}

/* Service section */
.page-template-template-service-redesign .related-services-container {
  margin-bottom: 90px;
}

/* faq-css */
.page-template-template-service-redesign .paragraph--type--faq-container {
  clear: both; /* Ensure FAQ section appears after any floating elements */
  margin-top: 45px; /* Add some spacing from previous section */
}
.faq-section {
  margin-bottom: 120px;
  margin-top: 100px;
}
.faq-section .faq-container {
  padding: 30px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
}

/* .faq-title {
  font-family: "Heebo", sans-serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 60px;
  color: #252525 !important;
  margin: 0 !important;
} */
.faq-title:after {
  content: unset !important;
}
.faq-subtitle {
  font-family: "Heebo", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #2b2b2b;
  max-width: 335px;
  margin: 0;
}

.faq-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-width: 0;
}

.faq-item {
  background: #0F2318;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-item.active {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.page-template-template-service-redesign .faq-item:hover {
  border-radius: 4px;
  background: #04502a;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
  color: #fff;
}
.faq-item:hover .faq-question-text {
  color: #fff;
}
.faq-question {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.faq-item .faq-question.active {
  background: #0F2318;
  color: #fff;
  border-bottom: 1px solid #0F2318;
  border-radius: 4px 4px 0px 0px;
}

.faq-item .faq-question:not(.active) .faq-question {
  background: #f4fbf8;
  color: #066938;
}
.faq-header p {
  color: #2b2b2b;
}

/* .page-template-template-service-redesign h3.faq-question-text {
  color: #066938;
} */

.page-template-template-service-redesign h3.faq-question-text {
  flex: 1;
  font-family: "Heebo", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  transition: all 0.3s ease;
  color: #066938;
}
.faq-item .faq-question.active .faq-question-text {
  color: #fff;
}
.faq-toggle-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item:hover svg.chevron-down path {
  color: #fff;
}
.faq-toggle-icon svg.chevron-down path {
  color: #fff;
}

.page-template-template-service-redesign h3.faq-question-text {
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 0;
}
.page-template-template-service-redesign .faq-answer {
  background: #E8F3EC;
  padding: 30px;
  border-top: none;
  display: none;
}
.faq-item .faq-question.active .faq-answer {
  display: block;
}
.faq-answer-text {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #0F2318;
  margin: 0;
}
.faq-answer-text p:last-child {
  margin-bottom: 0;
}
/* Chevron SVG styles */
.chevron-down {
  width: 36px;
  height: 36px;
}

.faq-item .faq-question:not(.active) .chevron-down {
  opacity: 1;
}
.faq-item .faq-question.active .chevron-down {
  transform: rotate(180deg);
  filter: brightness(0) invert(1);
}

/* Accordian Section */

.faq-section.accordian-section {
  margin-bottom: 0px !important;
}
.accordian-section .faq-answer {
  background: #FDFDFD;
}
.accordian-section .faq-question {
  padding: 13px 30px;
}
.accordian-section .faq-items {
  gap: 12px;
}
.faq-item.active {
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
}



/* Tab section css */

.tab-container {
  display: flex;
  margin: 15px 0 0 0;
  width: 100%;
}
.tab-container .tab-navigation {
  background: rgba(0, 108, 96, 0.05);
}
.page-template-template-service-redesign .tab-container .tab-navigation {
	background: #E8F3EC;
	position: relative;
}
.page-template-template-service-redesign .tab-container .tab-navigation:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background-color: #FBF5F8;
}
.tab-content-wrapper ul {
  padding-left: 20px;
}
.tab-content-wrapper ul li {
  font-size: 20px;
  line-height: 30px;
  list-style-type: none;
  color: #252525;
  position: relative;
  padding: 0 0 0 20px;
}
.tab-content-wrapper ul li:before {
  content: "";
  position: absolute;
  display: block;
  top: 0.7rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  box-sizing: content-box;
}
.tab-container .tab-navigation {
  width: 370px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px 0;
  background: rgba(6, 105, 56, 0.05);
  z-index: 0;
}
.page-template-template-service-redesign .tab-container .tab-navigation li:hover {
  background: #04502a;
  color: #fff;
  transition: all 0.3s ease;
}
.page-template-template-service-redesign
  .tab-container
  .tab-navigation
  li::after,
.page-template-template-service-redesign
  .paragraph--type--tab-container
  > .center
  > .tab-container
  .tab-navigation
  li::after {
  top: 0px !important;
}
.page-template-template-service-redesign .paragraph--type--tab-container > .center > .tab-container > .field--name-field-paragraph > .paragraph .field--name-field-title {
  font-size: 18px;
  line-height: 30px;
}
.page-template-template-service-redesign .tab-container > .field--name-field-paragraph > .paragraph {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
	border-radius: 0 8px 8px 0;
	transform: none;
}
.tab-container .tab-navigation li.tab-active {
  color: #fff;
  margin: 0 -15px 0 0px !important;
  z-index: 100;
  font-weight: 700;
}
.page-template-template-service-redesign .tab-container .tab-navigation li {
  list-style-type: none;
  border-top: 3px solid #fff;
  margin: 0;
  padding: 15px;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.tab-container > .field--name-field-paragraph {
  display: flex;
  flex-direction: column;
  flex-grow: 3;
  flex-basis: 0;
}
.tab-container > .field--name-field-paragraph > .paragraph.tab-content-active {
  display: block;
  min-height: 100%;
}
.tab-container > .field--name-field-paragraph > .paragraph {
  box-shadow: 0 0 20px rgba(5, 83, 130, 0.2);
  display: flex;
  padding: 42px 26px 42px 44px;
  display: none;
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  -o-transition: all 250ms;
  transition: all 250ms;
  transition-delay: 0;
  transform: translateZ(0);
}
.tab-container
  > .field--name-field-paragraph
  > .paragraph
  .field--name-field-title {
  font-weight: 500;
  display: none;
  background: #066938;
  color: #fff;
  margin: 0 -2px;
  padding: 5px 22px;
}
.page-template-template-service-redesign .tab-content-wrapper h3 {
  color: #000;
  font-weight: 400;
}
.tab-container
  > .field--name-field-paragraph
  > .paragraph
  .field--name-field-title {
  font-weight: 500;
  display: none;
  background: #066938;
  color: #fff;
  margin: 0 -2px;
  padding: 5px 22px;
}
.page-template-template-service-redesign section {
  margin-bottom: 120px;
}

.page-template-template-service-redesign section.rb-poster-section{
  padding: 0px;
}
/* Space between stacked tables (not after the last one) */
.page-template-template-service-redesign .field--type-tablefield:not(:last-child) {
  margin-bottom: 60px;
}
.page-template-template-service-redesign .tab-section h2 {
  margin-bottom: 30px;
}
.page-template-template-service-redesign .tab-section,
.page-template-template-service-redesign .faq-section {
  margin-bottom: 90px;
}
.page-template-template-service-redesign .tab-container .tab-navigation li.tab-active {
  background: #0F2318;
  border-radius: 0 8px 8px 0;
}
.tab-content-wrapper h4 {
  color: #0F2318;
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
}
.tab-content-wrapper h5 {
  color: #0F2318;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
}
.tab-content-wrapper h4, .tab-content-wrapper h5 {
  margin-bottom: 15px;
}



/* ===== Related Services (matches screenshot) ===== */

.related-services-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr);
}

.page-template-template-service-redesign .related-services-card {
  display: flex;
  width: auto;
  flex-direction: column;
  height: 100%;
  flex: 1;
  padding: 20px;
  background-color: #EBF1F8;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.page-template-template-service-redesign .related-services-card:hover {
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.10);
  background-color: #2395ff;
  transition: all 0.3s ease;
}
.page-template-template-service-redesign .related-services-card:hover h4.related-services-card__title, 
.page-template-template-service-redesign .related-services-card:hover .related-services-card__desc p {
  color: #fff;
  transition: all 0.3s ease;
}
.related-service-details {
  display: flex;
  padding: 5px 15px 15px 15px;
  flex-direction: column;
  gap: 10px;
}
.related-service-description {
  color: #2b2b2b;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 0;
  flex-grow: 1;

}
/* Grid */
.related-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  grid-auto-rows: 1fr;
}
/* Title + description inside card */
.page-template-template-service-redesign .related-services-card__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  color: #0F2318; 
  transition: all 0.3s ease;
}
.related-services-card__desc p {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  color: #0F2318;
  transition: all 0.3s ease;
}

/* 
@media (min-width: 768px) {
  .related-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
  .io-service-banner p.desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
} */




/* Hover (subtle) */
.related-services-card:hover {
  background: #e6eef3;
  /* transform: translateY(-1px); */
}

/* Keyboard focus */
.related-services-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 127, 103, 0.22);
}

.content-with-sidebar {
  display: flex;
  gap: 30px;
  /* !important to beat the higher-specificity style.css rule
     body.rb-new-template:not(.page-template-template-io-services) div.container { margin: auto }
     whose `margin: auto` shorthand otherwise zeroes this margin-top. */
  margin-top: 80px !important;
}
.content-with-sidebar__aside {
  flex: 0 0 217px;
  width: 217px;
}
.content-with-sidebar__main {
  flex: 1 1 auto;  
  min-width: 0;  
  max-width: 1153px;
}
.sidebar-sticky-nav-bar {
  border-radius: 8px;
  background: #EBF1F8;
  padding: 20px;
}
.sidebar-sticky-nav-bar .container {
  margin: 0;
  padding: 0;
}
.sidebar-sticky-nav-bar ul li {
  padding: 11px 0px;
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}
.sidebar-sticky-nav-bar h5 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #252525;
  margin-bottom: 3px;
}
.sidebar-sticky-nav-bar ul {
  margin-bottom: 0;
}
.sidebar-sticky-nav-bar ul li:hover a {
  color: #3778B4;
}

.fixed-top-nav.sticky-nav-bar li {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.fixed-top-nav.sticky-nav-bar li:hover a {
	color: #0f2318;
	border-bottom: 1px solid #0F2318;
}
.fixed-top-nav.sticky-nav-bar ul {
  gap: 3px;
}
.fixed-top-nav.sticky-nav-bar {
  background-color: #fff;
  padding: 0;
  margin-top: 0px;
  border-bottom: 1px solid #EEE;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
  top: 89px !important;
}
.fixed-top-nav.sticky-nav-bar li a {
  color: #2e683e;
  padding: 10px 20px;
  text-align: center;
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* .fixed-top-nav.sticky-nav-bar li a.active {
  color: #0F2318 !important;
  border-bottom: 1px solid #0F2318;
} */
.sidebar-sticky-nav-bar ul li a {
  color: #2e683e;
}
.fixed-top-nav.sticky-nav-bar li a.active-item {
    color: #0F2318 !important;
    border-bottom: 1px solid #0F2318;
}

/* Key application section */
.strategy-section {
  margin-top: 120px;
  margin-bottom: 120px;
}
article.strategy-card {
  /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10); */
  background: #E8F3EC;
  border-radius: 8px;
  padding: 30px;
  position: relative;
  cursor: pointer;
  transition: background 0.5s ease, box-shadow 0.35s ease;
}
.strategy-card__link {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
}
/* align-items:start (NOT stretch/grid-auto-rows:1fr) — the cards must be free to
   grow and shrink as their text expands/collapses. Equal-height rows would force
   every card to the tallest expanded height and defeat the collapse. */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: start;
}
h3.strategy-card__title {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  color: #252525;
  /* Collapsed: title sits flush against the hidden text. Expands to 15px when
     .is-active / .is-hovered reveals the paragraph. */
  margin-bottom: 0;
  transition: color 0.3s ease, margin-bottom 0.3s ease;
  display: flex;
  align-items: center;
}
/* Collapsed state — the paragraph is hidden until the card is hovered/clicked.
   js/custom.js toggles .is-active / .is-hovered on the card to reveal it. */
.strategy-card__text {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.3s ease;
}
.strategy-card__text ul{
  list-style: disc;
  padding-left: 20px;
}
.strategy-card__text p, .strategy-card__text ul li {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 30px;
  color: #0F2318;
  margin-top: 15px;
  transition: color 0.3s ease;
}
article.strategy-card:hover {
  background: #0F2318;
  box-shadow: 0 8px 24px rgba(15, 35, 24, 0.18);
  transition: background 0.5s ease, box-shadow 0.35s ease;
}
article.strategy-card:hover h3.strategy-card__title,
article.strategy-card:hover .strategy-card__text p,
article.strategy-card:hover .strategy-card__text ul li {
  color: #fff;
}

/* Expanded state — set by js/custom.js on click (.is-active) or hover (.is-hovered). */
article.strategy-card.is-active,
article.strategy-card.is-hovered {
  background: #0F2318;
  transition: background 0.5s ease;
}

article.strategy-card.is-active h3.strategy-card__title,
article.strategy-card.is-active .strategy-card__text p,
article.strategy-card.is-active .strategy-card__text ul li,
article.strategy-card.is-hovered h3.strategy-card__title,
article.strategy-card.is-hovered .strategy-card__text p,
article.strategy-card.is-hovered .strategy-card__text ul li {
  color: #fff;
}

article.strategy-card.is-active h3.strategy-card__title,
article.strategy-card.is-hovered h3.strategy-card__title {
  margin-bottom: 15px;
}

article.strategy-card.is-active .strategy-card__text,
article.strategy-card.is-hovered .strategy-card__text {
  max-height: 1000px;
  opacity: 1;
}

#overview,
#applications,
#assay_formats,
#advantage,
#case_studies,
#faqs {
    scroll-margin-top: 260px;
}

/* Anchor jump to the service table section (e.g. the overview's
   "See all targets" -> #targets_panels link): leave room above so the fixed
   header + sticky nav don't cover the table heading / column headers. Targeted
   by the stable class so it works whatever id the ACF "table_id" produces. */
.page-template-template-service-redesign .table-section-standalone {
    scroll-margin-top: 200px;
}


/* Assay Formats */

.assay-formats__track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
}
.assay-formats__carousel {
  position: relative;
  overflow: visible;
}
.assay-card {
  background: #E8F3EC;
  padding: 30px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  flex: 0 0 490px;
  border-radius: 8px;
}
h3.assay-card__title, h3.section__sub-heading {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  margin-bottom: 15px;
}
.assay-card__desc ul,.tab-section ul {
  list-style: disc;
  padding-left: 30px;
}
.assay-card__desc ul li,.tab-section ul li {
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 15px;
}
.assay-card__desc ul li ul {
  margin-bottom: 0px;
  margin-top: 10px;
}
.assay-formats__nav {
  background-color: #fff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  background-repeat: no-repeat;
  overflow: visible;
  padding: 0;
  position: absolute;
  top: 50%;
  bottom: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  display: block;
  /* display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%); */
}
.assay-formats__nav img {
  padding: 8px;
}
.assay-formats__nav:hover {
  background-color: #1F8A41;
}
.assay-formats__nav:hover path {
  fill: #fff;
}
.assay-formats__nav:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(10%) saturate(0%) hue-rotate(112deg) brightness(108%) contrast(101%);
}
.assay-formats__nav--prev {
  left: -22px;
}
.assay-formats__nav--next {
  right: -22px;
  transform: rotate(180deg);
}


.assay-formats__track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}


/* Responsive */

  @media (min-width: 1280px) {
    .page-template-template-service-redesign #block-views-blockheader-slider.block-views-page .paragraph-view-type-banner, .io-service-banner .service-hero-content-block {
      /* min-height (not height) so the section never collapses below 380px but
         also doesn't fight the JS height:auto override — eliminates the flash. */
      min-height: 380px;
    }
  }

@media (min-width: 768px) {
  .related-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
  .content-below-title {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    text-overflow: clip;
    max-height: none;
    height: auto;
  }
}


@media (min-width: 1281px) and (max-width: 1440px) {
  .page-template-template-service-redesign .infobox-image {
    width: 40%;
  }
  .page-template-template-service-redesign .infobox-content {
    width: 60%;
  }
}

@media only screen and (max-width: 1360px) {
	.hero-bg #block-views-blockheader-slider.block-views-page.io-service-banner .bgr-image-header img {
    clip-path: ellipse(53% 85% at 65% 50%);
    width: 650px !important;
  }
	.io-service-banner .service-hero-content-block {
		max-width: 50% !important;
	}
}

@media screen and (max-width: 1280px) {
  .page-template-template-service-redesign .infobox-image {
    width: 50%;
  }
  .page-template-template-service-redesign .infobox-content {
    width: 50%;
  }
}

@media screen and (max-width: 1180px) {
  #block-views-blockheader-slider.block-views-page.service-hero-section
    > .block-views-blockheader {
    min-height: auto;
  }
  .service-hero-content-block {
    max-width: 75%;
  }
  .hero-bg #block-views-blockheader-slider.block-views-page.io-service-banner .bgr-image-header img {
    clip-path: ellipse(57% 72% at 62% 50%);
    width: 500px !important;
  }
  .fixed-top-nav.sticky-nav-bar li a {
    padding: 10px 10px;
  }
}


@media screen and (max-width: 992px) {
  .color-scheme-purple
    .paragraph--type--table-one
    .dataTables_filter
    input[type="search"] {
    width: 350px;
  }
  .color-scheme-purple .paragraph--type--table-one .dt-buttons {
    width: 100%;
    text-align: center;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_info {
    padding: 40px 0px 0px;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_paginate {
    padding: 30px 0px 0px;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .io-service-cta-section {
    padding: 30px 20px;
  }
  .io-service-cta-section .content-container {
    max-width: 100%;
  }
  .related-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-service-card {
    width: 100%;
    max-width: 448px;
  }
  .top-spacing-section{
    margin-top:80px;
  }
  .bottom-spacing-section{
    margin-bottom:80px;
  }
  .page-template-template-service-redesign .view-container {
    margin-bottom: 80px;
  }
  .strategy-section {
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .fixed-top-nav.sticky-nav-bar li a {
    font-size: 16px;
  }
}

@media screen and (max-width: 834px) {
  .content-with-sidebar__aside {
    display: none;
  }
  .content-with-sidebar__main {
    max-width: 100%;
  }

}


@media only screen and (min-width: 768px) {
	.service-hero-section .breadcrumb ol li {
	  position: relative;
    left: -10px;
  }
}

@media screen and (max-width: 767px) {
  .page-template-template-service-redesign .hero-block .field__item h1 sup {
    bottom: 5px !important;
  }
  .page-template-template-service-redesign .view-container {
    padding-top: 40px;
    margin-bottom: 60px;
  }
  .anchor-button,
  .white-btn {
    font-size: 18px;
    line-height: 26px;
    padding: 10px 20px;
  }
  /* .color-scheme-purple .paragraph--type--table-one .dataTables_length label,
  .color-scheme-purple .paragraph--type--table-one .dataTables_filter label,
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_info,
  .color-scheme-purple .paragraph--type--table-one .tablefield thead tr th,
  .color-scheme-purple
    .paragraph--type--table-one
    .tablefield
    tbody
    tr:nth-child(2n + 1)
    td,
  .color-scheme-purple
    .paragraph--type--table-one
    .tablefield
    tbody
    tr:nth-child(2n)
    td,
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    a.paginate_button {
    font-size: 18px;
    line-height: 28px;
  } */
  /* .service-table {padding-top: 20px;} */
  .color-scheme-purple
    .paragraph--type--table-one
    .dataTables_filter
    input[type="search"] {
    width: auto;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_length,
  .color-scheme-purple .paragraph--type--table-one .dataTables_filter {
    width: 100% !important;
  }
  .color-scheme-purple .paragraph--type--table-one .dataTables_filter > label {
    margin-left: 0px !important;
  }
  .color-scheme-purple
    .paragraph--type--table-one
    .dataTables_length
    > label:before {
    left: 115px;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_paginate {
    margin: 0px;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_info {
    padding: 30px 0px 0px;
  }
  .color-scheme-purple .paragraph--type--table-one .dt-buttons {
    padding: 30px 0 20px;
  }
  .page-template-template-service-redesign footer#main-footer {
    margin-top: 20px;
  }

  #block-views-blockheader-slider.block-views-page.service-hero-section {
    margin-bottom: 0px;
  }
  #block-views-blockheader-slider.block-views-page.service-hero-section
    > .block-views-blockheader {
    margin-bottom: 20px;
  }
  .service-hero-section .breadcrumb ol li {
    padding: 0px 0px 10px 20px;
  }
  .service-hero-section .breadcrumb ol li:not(:first-child):before {
    left: 0px;
    top: 0px;
  }
  .service-hero-section .breadcrumb ol li:first-child > a:after {
    left: 0px;
  }
  .service-hero-section .breadcrumb ol li:first-child {
    margin-right: 0px;
  }
  .service-hero-content-block {
    max-width: 100%;
    padding: 20px 15px 50px;
  }
  .page-template-template-service-redesign
    .services-intro-section
    .services-intro-content {
    margin-bottom: 20px;
  }
  .service-card {
    width: 100%;
    max-width: 427px;
    margin-left: auto;
    margin-right: auto;
  }
  .services-grid {
    padding: 20px 0px;
    gap: 30px;
  }
  .services-grid,
  .related-services-grid {
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    justify-content: center;
    align-self: center;
  }
  .research-excellence {
    padding: 20px 0px;
  }
  .research-excellence article.content {
    flex-wrap: wrap;
    gap: 15px;
  }
  .research-excellence .content-col {
    max-width: 100%;
  }
  .research-excellence .image-col {
    width: 100%;
    justify-content: end;
  }
  .io-service-cta-section {
    padding: 40px 15px;
    width: 100%;
  }
  .io-service-cta-section .content-container {
    gap: 20px;
  }
  .io-service-cta-section .cta-description {
    font-size: 16px;
    line-height: 24px;
  }
  .contact-button {
    padding: 15px 20px;
    font-size: 18px;
  }

  .related-service-details {
    padding: 5px 10px 10px 10px;
  }
  .related-service-description {
    font-size: 16px;
    line-height: 24px;
  }
  /* .page-template-template-service-redesign .workflow-content {
    grid-template-columns: none;
  }
  .page-template-template-service-redesign .infobox-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .page-template-template-service-redesign .infobox-image,
  .page-template-template-service-redesign .infobox-content {
    flex: 1;
    max-width: 100%;
  } */
  /* .page-template-template-service-redesign section {
    margin-bottom: 45px;
  } */
  .page-template-template-service-redesign
    .tab-section
    .paragraph--type--tab-container
    .paragraph
    .field--name-field-title {
    background: #066938 !important;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .page-template-template-service-redesign
    .tab-section
    .paragraph--type--tab-container
    > .center
    > .tab-container
    > .field--name-field-paragraph
    > .paragraph {
    margin-bottom: 5px;
  }
  /* .feature_table_container {
    width: 100%;
    overflow-x: auto;
  }
  .feature-table-wrapper {
    width: 100%;
    min-width: 700px;
  } */
  
  /* .page-template-template-service-redesign .infobox-image {
    width: 100%;
  }
  .page-template-template-service-redesign .infobox-content {
    width: 100%;
  }
  .page-template-template-service-redesign .infobox-image img,
  .page-template-template-service-redesign .workflow-image img {
    max-width: 100%;
  } */
  .tab-content-wrapper ul {
    padding-left: 10px;
  }
  .tab-content-wrapper ul li {
    /* font-size: 18px;
    line-height: 26px; */
    padding-left: 20px;
  }
  /* .page-template-template-service-redesign .related-resources-title h4,
  .page-template-template-service-redesign .related-service-title {
    font-size: 22px;
    line-height: 32px;
  } */
  /* .entry-content-servises ul li {
    font-size: 18px;
    line-height: 28px;
  } */
  .page-template-template-service-redesign .contact-buttons {
    flex: 0 0 150px;
  }
  .feature-table-wrapper td {
    vertical-align: top;
  }
  .feature-table-wrapper th,
  .feature-table-wrapper td {
    font-size: 18px;
    line-height: 28px;
  }
  .tab-container
    > .field--name-field-paragraph
    > .paragraph
    .field--name-field-title {
    padding: 15px 35px 15px 15px;
    font-size: 16px;
  }
  .page-template-template-service-redesign h3.faq-question-text {
    font-size: 18px;
    line-height: 28px;
  }
  .page-template-template-service-redesign.color-scheme-purple
    .paragraph--type--table-one
    .dt-buttons
    > .buttons-excel {
    font-size: 18px;
    line-height: 28px;
  }
  /* .page-template-template-service-redesign .tab-section,
  .page-template-template-service-redesign .faq-section,
  .page-template-template-service-redesign .related-resources-container,
  .page-template-template-service-redesign .related-services-container {
    margin-bottom: 60px;
  } */
  .page-template-template-service-redesign .contact-buttons > .block {
    width: 165px;
  }

  /* Fix: Tables must fit inside their section, no horizontal scroll */
.page-template-template-service-redesign table {
  min-width: unset !important;
  width: 100% !important;
}

.mobile-scroll {
  overflow-x: visible !important;
  border-radius: 8px;
}

  .text-mit-bild-text {
    gap: 0;
  }
  .page-template-template-service-redesign table.tablefield thead > tr.header-group-row {
    display: none;
  } 
  .strategy-grid { 
	  display: block;
	}
	.strategy-card {
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 470px) {
  .page-template-template-service-redesign .table-section {
    margin-bottom: 328px;
  }

}

.service-hero-section .breadcrumb ol li:first-child > a:after {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2023/07/home-icon.svg);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.service-hero-section .breadcrumb ol li:not(:first-child):before {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2023/07/breadcrumbs-arrow.svg);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  top: 10px;
  left: -10px;
  opacity: 1;
}
.page-template-template-service-redesign .service-hero-section .anchor-button {
  padding: 10px 15px;
}

.service-hero-section .breadcrumb ol li:first-child > a {
  font-size: 0px;
}
.service-hero-section .breadcrumb ol li,
.service-hero-section .breadcrumb ol li a,
.service-hero-section h1,
.service-hero-section p {
  color: #fff;
  font-weight: 400;
}
.page-template-template-service-redesign h1{
  font-weight: 300;
}
.service-hero-section .breadcrumb {
  margin-bottom: 25px;
}

.service-hero-section .breadcrumb ol li {
  padding: 10px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.service-hero-section .breadcrumb ol li:last-child {
  font-weight: 300;
}
.service-hero-section .breadcrumb ol li a {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

/* intro section */
.page-template-template-service-redesign
  .services-intro-section
  .services-intro-content {
  margin-bottom: 45px;
}
.page-template-template-service-redesign
  .services-intro-section
  .services-intro-content
  p:last-child {
  margin-bottom: 0px;
}
/*service-modal-section*/
/* .services-grid {
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(3, 1fr);
  padding: 45px 0px;
}

.service-card {
  padding: 20px;
  min-height: 320px;
  max-width: 100%;
  transition: all 0.3s ease;
  height: 100%;
  flex: 1;
}
.service-card:hover,
.related-service-card:hover {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}
.service-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 40px;
}

.service-title {
  margin-top: 11px;
  color: #066938;
  word-break: break-word;
}

.service-description {
  margin-top: 16px;
  font-size: 20px;
  color: #2b2b2b;
  line-height: 30px;
  flex-grow: 1;
}
.service-description p {
  margin: 0px;
} */
.paragraph--table-simple th {
  background: #006c60;
  color: #fff;
  border-right: 2px solid #fff;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 400;
}
.paragraph--table-simple th::after {
  opacity: 0.5;
  font-family: "FontAwesome";
  content: "\0a0\f0dc";
  font-weight: normal;
}
.paragraph--table-simple table tbody tr:nth-child(2n + 1) td {
  background: rgba(0, 108, 96, 0.1) !important;
}
.paragraph--table-simple table tbody tr:nth-child(2n) td {
  background: rgba(0, 108, 96, 0.05) !important;
}
.paragraph--table-simple table tbody tr td {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 8px 10px;
  font-size: 1.15rem;
}
.page-template-template-service-redesign table.has-grouped-headers thead > tr.header-group-row th:after{
  display: none;
} 

.single-post .smoa_pro_text-2.footer-wrapper {
  display: none;
}

.page-template-template-service-redesign .cta-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 auto;
}

.page-template-template-service-redesign .content-container {
  max-width: 832px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  margin: 0 auto;
}

.page-template-template-service-redesign h2.cta-title {
  color: #fff;
  font-size: 60px;
  font-weight: 400;
  line-height: 65px;
  width: 100%;
  margin: 0;
  text-align: center;
  width: 76.65%;
}


/* .anchor-button,
.white-btn {
  padding: 20px 25px;
  border-radius: 4px;
  color: #2b2b2b;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  cursor: pointer;
  background-color: #fff;
  border: none;
  position: relative;
  transition: background-color 0.3s ease;
} */
/* .anchor-button:before,
.white-btn:before {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  top: 50%;
  height: 0;
  background: #2b2b2b;
  opacity: 0.2;
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  -o-transition: all 250ms;
  transition: all 250ms;
  transform: translateZ(0);
} */
/* .anchor-button:hover,
.white-btn:hover {
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.anchor-button:hover:before,
.white-btn:hover:before {
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
}
.immuno-oncology-page .cta-section {
  padding: 75px 45px;
} */


.related-services-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #fff;
}

.related-services-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0px;
}

.related-section-title {
  color: #252525;
  gap: 15px;
  margin: 0;
}

.related-service-card {
  display: flex;
  width: auto;
  flex-direction: column;
  gap: 20px;
  transition: all 0.3s ease;
  height: 100%;
  flex: 1;
}

.related-service-image {
  height: 266px;
  width: 100%;
  object-fit: cover;
}

.related-service-details {
  display: flex;
  padding: 5px 15px 15px 15px;
  flex-direction: column;
  gap: 10px;
}

.related-service-title {
  color: #066938;
  font-weight: 600;
  margin: 0;
}

.related-service-description {
  color: #2b2b2b;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin: 0;
  flex-grow: 1;
}

/*research section*/
.bullet-icon-wrapper {
  display: flex;
  gap: 7px;
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: 15px;
}
.bullet-icon-wrapper p {
  margin: 0px;
}
.research-excellence {
  padding: 45px 0px;
}
.research-excellence article.content {
  display: flex;
  justify-content: space-between;
}

.research-excellence .image-col {
  display: flex;
  align-items: end;
}
.research-excellence .content-col {
  max-width: 59.65%;
}
.research-excellence .research-title {
  color: #3c3c3b;
}

/*table section*/
/* .page-template-template-service-redesign .feature_table_section h2 {
  margin-bottom: 30px;
} */
/* .color-scheme-purple .service-table h2 {
  color: #252525;
} */
.color-scheme-purple .paragraph--type--table-one .tablefield thead tr th {
  background: #066938;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  padding: 10px;
  font-weight: 400;
}
.color-scheme-purple
  .paragraph--type--table-one
  .tablefield
  tbody
  tr:nth-child(2n + 1)
  td {
  background: #ebf7f2;
  padding: 10px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #252525;
}
.color-scheme-purple
  .paragraph--type--table-one
  .tablefield
  tbody
  tr:nth-child(2n)
  td {
  background: #f9f9f9;
  padding: 10px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #252525;
}
.color-scheme-purple .paragraph--type--table-one .tablefield tbody tr a {
  color: #066938;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length label,
.color-scheme-purple .paragraph--type--table-one .dataTables_filter label,
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  .dataTables_info {
  font-size: 20px;
  line-height: 30px;
  color: #252525;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  .dataTables_info {
  padding: 40px 0px 45px;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  .dataTables_paginate {
  padding: 30px 0px 45px;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length label {
  display: flex;
  gap: 15px;
  align-items: center;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_length,
.color-scheme-purple .paragraph--type--table-one .dataTables_filter {
  padding: 15px 0px !important;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_length
  select,
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_filter
  input[type="search"] {
  font-size: 18px !important;
  line-height: 20px !important;
  padding: 5px;
  height: 50px !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 4px;
  color: #2b2b2b;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_filter
  input[type="search"] {
  width: 457px;
  margin-left: 10px;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_filter > label {
  position: relative;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_filter
  > label:after {
  content: "";
  position: absolute;
  background-image: url(/wp-content/uploads/2023/07/Search-Icons.svg);
  width: 20px;
  height: 20px;
  right: 10px;
  top: 50%;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.color-scheme-purple .paragraph--type--table-one table.tablefield {
  width: 100%;
}
.color-scheme-purple .paragraph--type--table-one .dt-buttons {
  padding: 30px 0 45px;
  float: right;
}
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  thead
  > tr:not(.header-group-row),
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  thead
  > tr:not(.header-group-row),
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  tbody
  tr:not(:last-child) {
  border-bottom: 5px solid #fff;
}
.color-scheme-purple
  .paragraph--type--table-one
  table.tablefield
  thead
  > tr.header-group-row {
  border-bottom: 1px solid #fff;
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length {
  width: 215px !important;
}
.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_filter {
  width: calc(100% - 215px);
}
.color-scheme-purple .paragraph--type--table-one .dataTables_length > label {
  position: relative;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_length
  > label:before {
  content: "";
  position: absolute;
  background-image: url(/wp-content/uploads/2023/07/down-arrow.svg);
  background-repeat: no-repeat;
  left: 55%;
  top: 51%;
  width: 14px;
  height: 10px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: all;
  cursor: pointer;
}
.color-scheme-purple
  .paragraph--type--table-one
  .dataTables_length
  > label
  > select {
  appearance: none;
  width: 74px;
  cursor: pointer;
  background-color: transparent !important;
  z-index: 1;
}
.color-scheme-purple
  .paragraph--type--table-one.service-table
  .dataTables_wrapper
  a.paginate_button {
  font-size: 20px;
  line-height: 30px;
  color: #066938;
  width: 44px;
  height: 50px;
  padding: 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) !important;
}
.table-section tr.odd td,
.table-section tr.even td {
  color: #2b2b2b !important;
}
.paragraph--type--table
  .field--name-field-table
  .tablefield-wrapper
  .tablefield
  thead
  tr
  th::after,
.paragraph--type--table-one
  .field--name-field-table
  .tablefield-wrapper
  .tablefield
  thead
  tr
  th::after,
.paragraph--type--table-referenced
  .field--name-field-table
  .tablefield-wrapper
  .tablefield
  thead
  tr
  th::after,
.paragraph--type--table
  .field--name-field-table-one
  .tablefield-wrapper
  .tablefield
  thead
  tr
  th::after,
.paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .tablefield
  thead
  tr
  th::after,
.paragraph--type--table-referenced
  .field--name-field-table-one
  .tablefield-wrapper
  .tablefield
  thead
  tr
  th::after {
  opacity: 0.5;
  font-family: "FontAwesome";
  content: "\0a0\f0dc";
  font-weight: normal;
}

/* =========================================================
   Service tables — separate up / down sort carets (pure CSS).
   Up caret = ::before (\f0de), Down caret = ::after (\f0dd),
   stacked at the right of each sortable header. Default gray; the
   active sort direction's caret turns white; on header hover the up
   caret nudges UP and the down caret nudges DOWN (parallax + soft
   shadow). Scoped to sortable headers; the .sorting* class raises
   specificity above the base th::after. */
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc {
  position: relative;
  padding-right: 28px;
}
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting::before,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting::after,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc::before,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc::after,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc::before,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc::after {
  position: absolute;
  right: 10px;
  font-family: "FontAwesome";
  font-weight: normal;
  line-height: 1;
  opacity: 1;
  color: gray;
  transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease;
}
/* up caret (\f0de) — sits in the top half of the cell */
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting::before,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc::before,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc::before {
  content: "\f0de";
  top: 60%;
  margin-top: -0.85em;
}
/* down caret (\f0dd) — sits in the bottom half (replaces base combined glyph) */
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting::after,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc::after,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc::after {
  content: "\f0dd";
  top: 40%;
  margin-top: -0.15em;
}
/* Active sort → the active direction's caret turns WHITE (up = ascending,
   down = descending) so the current sort is clearly visible. */
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc::before {
  color: #fff;
}
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc::after {
  color: #fff;
}
/* Hover — the up caret lifts UP: parallax translateY + soft shadow. */
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting:hover::before,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc:hover::before,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc:hover::before {
  transform: translateY(-2px);
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}
/* Hover — the down caret nudges DOWN: parallax translateY + soft shadow. */
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting:hover::after,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_asc:hover::after,
.page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield thead tr th.sorting_desc:hover::after {
  transform: translateY(2px);
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_paginate
  .paginate_button.next::before,
.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_paginate
  .paginate_button.previous::before {
  color: #066938;
}
.color-scheme-purple
  .paragraph--type--table-one
  .field--name-field-table-one
  .tablefield-wrapper
  .dataTables_paginate
  .paginate_button.current {
  background: #f2f2f2;
}

.page-template-template-service-redesign .service-overview-text h3{
    margin-bottom: 30px;
}

/* ── TABLE ── */
.service-overview-text h3{
  font-weight: 700;
}

.service-overview-text section:not(:last-child) {
  margin-bottom: 80px;
}

.service-overview-text section:last-child {
  margin-bottom: 0px;
}

.service-overview-text table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: #0f2318;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 15px;
  /* Figma 14580-12571: rounded 8px corners, clipped. */
  border-radius: 8px;
  overflow: hidden;
}

/* ── HEADER CELLS ── (Figma: dark-forest bg, white BOLD) */
.service-overview-text table thead tr th {
  background-color: #0f2318;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  padding: 10px;
  text-align: left;
}

/* ── THEAD ROW SEPARATOR ── */
.service-overview-text table thead tr {
  border-bottom: 5px solid #fff;
}

/* ── BODY ROW SEPARATOR ── */
.service-overview-text table tbody tr:not(:last-child) td {
  border-bottom: 5px solid #fff;
}

/* ── ODD ROWS (1st, 3rd, …) — Figma light-green ── */
.service-overview-text table tbody tr:nth-child(odd) td {
  background-color: #f4fbf8;
  color: #0f2318;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding: 10px;
}

/* ── EVEN ROWS (2nd, 4th, …) — Figma grey ── */
.service-overview-text table tbody tr:nth-child(even) td {
  background-color: #f9f9f9;
  color: #0f2318;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding: 10px;
}

/* ── LINKS inside tbody ── */
.service-overview-text table tbody tr a {
  color: rgb(6, 105, 56);
}

.service-overview-text .mobile-scroll{
  margin-bottom: 15px;
}

/* Responsive Design */

@media screen and (max-width: 1180px) {
  #block-views-blockheader-slider.block-views-page.service-hero-section
    > .block-views-blockheader {
    min-height: auto;
  }
  .service-hero-content-block {
    max-width: 75%;
  }
  .sticky-nav-bar.fixed-top-nav.sticky-element-original.element-is-sticky {
      top: 110px !important;
  }
}

@media only screen and (min-width: 1081px) and (max-width: 1360px) {
  #block-views-blockheader-slider.block-views-page.io-service-banner .bgr-image-header {
    width: 52%;
  }
  .hero-bg #block-views-blockheader-slider.block-views-page.io-service-banner .bgr-image-header img {
    width: 100% !important;
    display: block;
  }
}

@media only screen and (max-width: 1080px){
	#block-views-blockheader-slider.io-service-banner .bgr-image-header {
    background-image: none !important;
  }
  .assay-formats__nav--next {
    right: -10px !important;
  }
  .assay-formats__nav--prev {
    left: -10px !important;
  }
  .assay-formats__nav {
    width: 40px !important;
    height: 40px !important;
    z-index: 99;
  }
  .bgr-image-header {
		display: none !important;
	}
	.io-service-banner .service-hero-content-block {
		max-width: 80% !important;
	}
}

@media screen and (max-width: 992px) {
  .color-scheme-purple
    .paragraph--type--table-one
    .dataTables_filter
    input[type="search"] {
    width: 350px;
  }
  .color-scheme-purple .paragraph--type--table-one .dt-buttons {
    width: 100%;
    text-align: center;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_info {
    padding: 40px 0px 0px;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_paginate {
    padding: 30px 0px 0px;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .io-service-cta-section {
    padding: 30px 20px;
  }
  .io-service-cta-section .content-container {
    max-width: 100%;
  }
  .related-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-service-card {
    width: 100%;
    max-width: 448px;
  }
  .tab-container > .field--name-field-paragraph > .paragraph {
    padding: 42px 30px 42px 44px;
  }
  #block-views-blockheader-slider.io-service-banner .bgr-image-header {
    background-image: none !important;
  } 
}

@media screen and (max-width: 767px) {

  /* Mobile Font Sizes */
  .page-template-template-service-redesign h1,
  .page-template-template-service-redesign h2.cta-title {
    font-size: 36px;
    line-height: 46px;
  }
  .page-template-template-service-redesign h2 {
    font-size: 30px;
    line-height: 46px;
  }
  .page-template-template-service-redesign h4 {
    font-size: 20px;
    line-height: 30px;
  }
  .page-template-template-service-redesign .service-overview-text p, 
  .page-template-template-service-redesign .service-overview-text ul li {
    font-size: 16px;
    line-height: 28px;
  }
  .page-template-template-service-redesign p, .page-template-template-service-redesign ul li {
    font-size: 16px;
    line-height: 28px;
  }
  h3.strategy-card__title, h3.assay-card__title, h3.section__sub-heading {
    font-size: 20px;
    line-height: 30px;
  }
  .page-template-template-service-redesign h3.faq-question-text {
    font-size: 16px;
    line-height: 28px;
  }
  .page-template-template-service-redesign .container.center.hero-block {
    margin: 0 0px;
  }
  .page-template-template-service-redesign .container.center.hero-block #block-proquinase-breadcrumbs .container {
    padding: 0 0px;
  }
  .anchor-button,
  .white-btn {
    font-size: 18px;
    line-height: 26px;
    padding: 10px 20px;
  }
  .page-template-template-service-redesign .tab-section h4 {
    font-size: 26px;
    line-height: 40px;
  }
  .page-template-template-service-redesign .faq-answer-text p, 
  .page-template-template-service-redesign .paragraph--type--tab-container > .center > .tab-container > .field--name-field-paragraph > .paragraph .field--name-field-title {
    font-size: 16px;
    line-height: 28px;
  }
  .page-template-template-service-redesign .related-services-card__title {
    font-size: 20px;
    line-height: 30px;
  }
  .io-service-cta-section h2.cta-title {
    font-size: 30px;
    line-height: 46px;
  }

  /* Mobile spacing */

  .io-service-banner .service-hero-content-block {
    padding: 0 0 54px;
  }
  .content-with-sidebar {
    margin-bottom: 54px;
    margin-top: 54px;
  }
  .page-template-template-service-redesign .service-overview-text h2:nth-child(3) {
    margin-top: 54px;
  }
  .strategy-section {
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .page-template-template-service-redesign .service-overview-text h2:nth-child(3) {
    margin-bottom: 25px;
  }
	.page-template-template-service-redesign h2 {
		margin-bottom: 28px;
	} 

  .io-service-banner .service-hero-content-block {
    max-width: 100% !important;
  }

  /* FAQ mobile */
  .faq-section {
    margin-top: 50px;
    margin-bottom: 70px;   
  }
  .faq-section.accordian-section {
    margin-top: 70px;
    margin-bottom: 0px;
  }
  .faq-header {
    max-width: 100%;
  }
  .faq-container {
    flex-direction: column;
    gap: 15px;
  }
  .faq-title {
    width: 100%;
    font-size: 30px;
    line-height: 46px;
  }
  .faq-subtitle {
    width: 100%;
    font-size: 18px;
    line-height: 28px;
  }
  .faq-question {
    padding: 15px 20px;
  }
  .faq-answer {
    padding: 20px;
  }
  .faq-question-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .faq-question-text {
    font-size: 18px;
    line-height: 28px;
  }
  .faq-answer-text {
    font-size: 18px;
    line-height: 28px;
  }
  .page-template-template-service-redesign .faq-header p {
    margin-bottom: 0px;
  }
  .faq-section .faq-container {
    padding: 15px;
  }
  .faq-items {
    gap: 15px;
  }
  /* Faq End */

  .sticky-nav-bar {
    display: none;
  }
  .assay-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  .assay-formats__carousel {
    overflow: visible;
  }

  /* CTA Mobile */
  .io-service-cta-section {
    padding: 40px 15px;
    width: 100%;
  }
  .io-service-cta-section .content-container {
    gap: 20px;
  }
  .io-service-cta-section .cta-description {
    font-size: 16px;
    line-height: 24px;
  }
  .io-service-cta-section .white-btn {
    font-size: 18px;
    line-height: 26px;
  }
  /* CTA end */

  .contact-button {
    padding: 15px 20px;
    font-size: 18px;
  }
  /* .related-services-content{
    padding: 20px 0px;
  } */

  .related-service-details {
    padding: 5px 10px 10px 10px;
  }
  .related-service-description {
    font-size: 16px;
    line-height: 24px;
  }


  /* .page-template-template-service-redesign p,
  .color-scheme-purple .paragraph--type--table-one .dataTables_length label,
  .color-scheme-purple .paragraph--type--table-one .dataTables_filter label,
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_info,
  .color-scheme-purple .paragraph--type--table-one .tablefield thead tr th,
  .color-scheme-purple
    .paragraph--type--table-one
    .tablefield
    tbody
    tr:nth-child(2n + 1)
    td,
  .color-scheme-purple
    .paragraph--type--table-one
    .tablefield
    tbody
    tr:nth-child(2n)
    td,
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    a.paginate_button {
    font-size: 18px;
    line-height: 28px;
  } */
  .service-table {
    padding-top: 15px;
  }

  .color-scheme-purple
    .paragraph--type--table-one
    .dataTables_filter
    input[type="search"] {
    width: auto;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_length,
  .color-scheme-purple .paragraph--type--table-one .dataTables_filter {
    width: 100% !important;
  }
  .color-scheme-purple .paragraph--type--table-one .dataTables_filter > label {
    margin-left: 0px !important;
  }
  .color-scheme-purple
    .paragraph--type--table-one
    .dataTables_length
    > label:before {
    left: 115px;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_paginate {
    margin: 0px;
  }
  .color-scheme-purple
    .paragraph--type--table-one.service-table
    .dataTables_wrapper
    .dataTables_info {
    padding: 30px 0px 0px;
  }
  .table-section .child li {
    display: flex;
    gap: 50px;
    margin-bottom: 10px;
  }
  .table-section .child li span {
    flex: 0 0 40%;
  }
  .color-scheme-purple .paragraph--type--table-one .dt-buttons {
    padding: 30px 0 20px;
  }
  .page-template-template-service-redesign footer#main-footer {
    margin-top: 20px;
  }

  #block-views-blockheader-slider.block-views-page.service-hero-section {
    margin-bottom: 0px;
  }
  #block-views-blockheader-slider.block-views-page.service-hero-section
    > .block-views-blockheader {
    margin-bottom: 20px;
  }
  .service-hero-section .breadcrumb ol li {
    padding: 0px 0px 10px 20px;
  }
  .service-hero-section .breadcrumb ol li:not(:first-child):before {
    left: 0px;
    top: 0px;
  }
  .service-hero-section .breadcrumb ol li:first-child > a:after {
    left: 0px;
  }
  .service-hero-section .breadcrumb ol li:first-child {
    margin-right: 0px;
  }
  .service-hero-content-block {
    max-width: 100%;
    padding: 20px 15px 50px;
  }
  .page-template-template-service-redesign
    .services-intro-section
    .services-intro-content {
    margin-bottom: 20px;
  }
  .service-card {
    width: 100%;
    max-width: 427px;
    margin-left: auto;
    margin-right: auto;
  }
  .services-grid {
    padding: 20px 0px;
    gap: 30px;
  }
  .services-grid,
  .related-services-grid {
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    justify-content: center;
    align-self: center;
  } 
  .page-template-template-service-redesign.color-scheme-purple .paragraph--type--table-one .dataTables_filter input[type="search"]{
    margin-left: 10px;
    max-width: 300px;
    width: auto !important;
  }
  .page-template-template-service-redesign .paragraph--type--table-one .field--name-field-table-one .tablefield-wrapper .dataTables_filter label:last-child{
    display: block;
    width: auto;
  }
  .color-scheme-purple .paragraph--type--table-one .dataTables_filter > label:after{
    right: 15px;
  }
  
}



/* ==========================================
   Featured Poster callout (Figma 14478-9046)
   Mint card with the poster image on the left and heading + copy +
   "Download" link on the right. Renders below the Overview section.
   Dynamic: poster_image / poster_heading / poster_description /
   poster_link_text / poster_link_url.
   ========================================== */
.rb-poster-section {
  padding: 40px 0;
  position: relative;   /* positioning context for the diagram, which now sits on the left */
  min-height: 470px;    /* reserve height for the absolutely-positioned diagram */
}
/* Card (Figma 14478-9048): mist-green background, 8px radius, 30px padding.
   The card hugs the heading + copy in the right half; the diagram is lifted
   out of the card (absolute, anchored to the section) onto the left half so it
   sits entirely on the white background instead of overlapping the mist card. */
.rb-poster-card {
  position: static;   /* not a positioning context — the diagram anchors to the section instead */
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-radius: 8px;
  padding: 30px;
  overflow: visible;
  background-color: rgb(234, 243, 236);
  box-sizing: border-box;
  width: 48.5%;         /* hug the heading + copy only; sits in the right half */
  margin-left: 51.5%;   /* right half, leaving a ~2.5% (~24px) gutter to the diagram */
}
.rb-poster-title {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  color: rgb(37, 37, 37);
}

.rb-poster-description{
  color:#0F2318;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}
/* row: poster image (left half) + text column (right half) */
.rb-poster-row {
  position: static;   /* diagram anchors to the section, not the row, so it clears the card */
  display: block;
  width: 100%;
}
/* Diagram is an absolute element anchored to the section (not the card): pinned
   to the section's left edge (left:0), occupying the left half, fully on white. */
.rb-poster-media {
  position: absolute;
  left: 0;      /* flush with the section's left edge, fully on the white background */
  top: 125px;
  width: 49%;   /* left half — mirrors the card and no longer overlaps it */
  margin: 0;
  box-sizing: border-box;
}
.rb-poster-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
/* Figma 14478-9052: text is pushed to the right half, clearing the image. */
.rb-poster-body {
  padding-left: 0;   /* diagram no longer overlaps the text, so no reserved space */
  box-sizing: border-box;
}
.rb-poster-description p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  margin: 0 0 15px;
  color: rgb(15, 35, 24);
}
.rb-poster-description p:last-child {
  margin-bottom: 0;
}
.rb-poster-link {
  display: inline-block;
  margin-top: 12px;
  color: rgb(6, 105, 56);
  text-decoration: underline;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
.rb-poster-link:hover {
  color: rgb(4, 77, 40);
}

/* =============================================================
   RB Poster Section – Responsive
   - Above 992px: the diagram sits on the left half over the white
     background and the mist card hugs the heading + copy on the
     right half. Both are proportional halves (49% / 48.5%), so the
     layout scales across breakpoints with no per-width nudging —
     only the reserved height steps down as the section narrows and
     the diagram gets shorter.
   - 992px and below (all iPads + phones): stacked layout — diagram
     full-width above the text. One shared design.
   ============================================================= */

/* ── Reserved diagram height steps down as the section narrows ── */
@media (max-width: 1194px) {
  .rb-poster-section { min-height: 440px; }
}
@media (max-width: 1100px) {
  .rb-poster-section { min-height: 420px; }
    .page-template-template-service-redesign .related-resources-container ,
  .page-template-template-service-redesign .table-section,
  .page-template-template-service-redesign .related-services-container{
        padding: 0px 20px;
  }
}
@media (max-width: 1024px) {
  .rb-poster-section { min-height: 400px; }
}

/* ── 992px and below — iPad + phones: stacked mobile layout ──
   Diagram drops out of the absolute overlay and sits full-width
   above the text. Same design across every device under 992px. */
@media (max-width: 992px) {
  .rb-poster-section { padding: 24px 0; min-height: unset; position: static; }
  .rb-poster-card  { width: 100%; margin-left: 0; padding: 20px; }
  .rb-poster-media { position: static; width: 100%; margin: 0 0 16px;
                     top: auto; left: auto; }
  .rb-poster-body  { padding-left: 0; }
  .rb-poster-title { font-size: 24px; line-height: 30px; }
}

/* =========================================================
   AVAILABLE TARGETS TABLE FIX — color-scheme-turquoise
   Mirrors .color-scheme-purple rules for kinase-panel-screening
   ========================================================= */

.color-scheme-turquoise .table-section { margin-bottom: 120px; }
.color-scheme-turquoise .service-table h2 { color: rgb(37, 37, 37); }

.color-scheme-turquoise .paragraph--type--table-one .tablefield thead tr th {
  background: rgb(6, 105, 56); font-size: 20px; line-height: 30px;
  color: #fff; padding: 10px; font-weight: 400;
}
.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody tr:nth-child(2n+1) td {
  background: rgb(235, 247, 242); padding: 10px; font-size: 20px;
  line-height: 30px; font-weight: 400; color: rgb(37, 37, 37);
}
.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody tr:nth-child(2n) td {
  background: rgb(249, 249, 249); padding: 10px; font-size: 20px;
  line-height: 30px; font-weight: 400; color: rgb(37, 37, 37);
}
.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody tr a { color: rgb(6, 105, 56); }
.color-scheme-turquoise .paragraph--type--table-one table.tablefield { width: 100%; }

.color-scheme-turquoise .paragraph--type--table-one table.tablefield thead > tr:not(.header-group-row),
.color-scheme-turquoise .paragraph--type--table-one table.tablefield tbody tr:not(:last-child) {
  border-bottom: 5px solid #fff;
}
.color-scheme-turquoise .paragraph--type--table-one table.tablefield thead > tr.header-group-row {
  border-bottom: 1px solid #fff;
}
.color-scheme-turquoise table.tablefield.dataTable.no-footer.dtr-inline.fixedHeader-locked { display: none; }

.color-scheme-turquoise .paragraph--type--table-one .dataTables_length label,
.color-scheme-turquoise .paragraph--type--table-one .dataTables_filter label,
.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper .dataTables_info {
  font-size: 20px; line-height: 30px; color: rgb(37, 37, 37);
}
.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper .dataTables_info { padding: 40px 0 45px; }
.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper .dataTables_paginate { padding: 30px 0 45px; }
.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_length,
.color-scheme-turquoise .paragraph--type--table-one .dataTables_filter { padding: 0 0 15px 0; }

.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_length select,
.color-scheme-turquoise .paragraph--type--table-one .dataTables_filter input[type="search"] {
  border: 1px solid rgb(43, 43, 43); border-radius: 4px; padding: 5px 10px;
  font-size: 18px; margin-left: 8px;
}
.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button {
  font-size: 20px; line-height: 30px; color: rgb(6, 105, 56);
  width: 44px; height: 50px; padding: 10px;
  box-shadow: rgba(0,0,0,0.05) 0px 4px 4px 0px !important;
}
.color-scheme-turquoise .paragraph--type--table-one .field--name-field-table-one .tablefield-wrapper .dataTables_paginate .paginate_button.next::before,
.color-scheme-turquoise .paragraph--type--table-one .field--name-field-table-one .tablefield-wrapper .dataTables_paginate .paginate_button.previous::before {
  color: rgb(6, 105, 56);
}
.color-scheme-turquoise .paragraph--type--table-one .field--name-field-table-one .tablefield-wrapper .dataTables_paginate .paginate_button.current {
  background: rgb(242, 242, 242);
}
.color-scheme-turquoise .table-section tr.odd td,
.color-scheme-turquoise .table-section tr.even td { color: rgb(43, 43, 43) !important; }

/* =========================================================
   PAGINATION + INFO — Figma 14557-12414 match
   - Info: 18px / 30px, dark-forest #0f2318
   - Page tiles: 44x49 white, soft drop-shadow, #0f2318 text, gap 7px
   - Active page: mist #eaf3ec, no shadow
   - Prev / Next: 24px chevron icons (button text hidden)
   ========================================================= */
/* Info + pagination share one row (the .dt-foot wrapper from the JS dom) */
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper .dt-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 30px 0 0px;
  clear: both;
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper .dt-foot .dataTables_info {
  font-size: 18px;
  line-height: 30px;
  color: #0f2318;
  padding: 0 !important;
  margin: 0;
  float: none;
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper .dt-foot .dataTables_paginate {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 !important;
  margin: 0;
  float: none;
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper .dataTables_paginate span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 49px;
  padding: 10px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #0f2318 !important;
  font-size: 18px;
  line-height: 30px;
  box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.05) !important;
}
/* Active page tile → mist green, no shadow */
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button.current {
  background: #eaf3ec !important;
  box-shadow: none !important;
}
/* Prev / Next → chevron icons; hide the "Previous"/"Next" text */
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button.previous,
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button.next {
  font-size: 0 !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button.previous {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='%230f2318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button.next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%230f2318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_wrapper a.paginate_button.disabled {
  opacity: 0.35;
}
/* Drop the legacy green ::before arrow on prev/next */
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .field--name-field-table-one .tablefield-wrapper .dataTables_paginate .paginate_button.next::before,
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .field--name-field-table-one .tablefield-wrapper .dataTables_paginate .paginate_button.previous::before {
  content: none;
}

/* Customizer overrides */
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .tablefield thead tr th {
  background-color: rgb(15, 35, 24); font-size: 18px !important;
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody tr:nth-child(2n) td {
  background-color: rgb(234, 243, 236);
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody tr:nth-child(2n+1) td {
  background-color: rgb(255, 255, 255);
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one.service-table .dataTables_length {
  padding: 30px 0 !important;
}

/* =========================================================
   AVAILABLE TARGETS TABLE — Figma 14478-9063 match
   - Header: dark-forest #0f2318, bold white text
   - Body rows striped: #f4fbf8 (odd) / #f9f9f9 (even)
   - Body text: dark-forest #0f2318, 18px / 30px
   - Panel column: "view panel" link rendered as a dark-green
     #066938 pill (white arrow) + "View Panel" label
   ========================================================= */

/* Header */
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .tablefield thead tr th {
  background-color: #0f2318;
  color: #fff;
  font-size: 18px !important;
  line-height: 30px;
  font-weight: 700;
  padding: 10px;
}

/* Striped body rows */
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody tr:nth-child(2n+1) td {
  background-color: #f4fbf8;
  color: #0f2318;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  padding: 10px;
}
.page-template-template-service-redesign.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody tr:nth-child(2n) td {
  background-color: #f9f9f9;
  color: #0f2318;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  padding: 10px;
}
.color-scheme-turquoise .table-section tr.odd td,
.color-scheme-turquoise .table-section tr.even td { color: #0f2318 !important; }

/* Panel column → green pill (white arrow) + "View Panel" label */
.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody td:last-child a.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0f2318 !important;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody td:last-child a.link::before {
  content: "";
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  border-radius: 99px;
  background-color: #066938;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7h8.5M7 3.5 10.5 7 7 10.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.2s ease;
}
.color-scheme-turquoise .paragraph--type--table-one .tablefield tbody td:last-child a.link:hover::before {
  background-color: #2395FF;
}

/* =========================================================
   KINASE PANEL SCREENING — filter bar (Figma 14478-9063)
   Scoped to .kps-table (added by kinase-panel-table.js on this page only).
   ========================================================= */

/* Hide the "Show N entries" length control. */
.kps-table .dataTables_length {
  display: none !important;
}

/* Control bar: filter dropdowns on the left, search on the right. */
.kps-table .dataTables_filter,
#kps-table-2_filter {
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  float: none;
  margin: 0 0 0px;
  padding: 0;
  text-align: left;
}

/* Left group: the two column filter dropdowns. */
.kps-table .dataTables_filter .io-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.kps-table .dataTables_filter .io-filters .filter_wrapper {
  position: relative;
  display: block;
  width: 212px;
  margin: 0;
  padding: 0;
}

/* The descriptive option text ("All Panel sizes") acts as the field label,
   so the separate <label> is hidden to match the Figma boxes. */
.kps-table .dataTables_filter .io-filters .filter_wrapper > label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kps-table .dataTables_filter .io-filters select {
  width: 212px;
  height: auto !important;
  min-height: 40px;
  margin: 0;
  padding: 4px 34px 4px 12px;
  border: 1px solid #2b2b2b !important;
  border-radius: 8px;
  color: #2b2b2b;
  font-family: inherit;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* `background` shorthand (no-repeat right) wins over data-table.css `background:#fff`. */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 7px !important;
  box-shadow: none !important;
}

.kps-table .dataTables_filter .io-filters select:focus {
  outline: none;
  border-color: #066938;
}

/* Right group: "Search" label + search input. */
.kps-table .dataTables_filter > label {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  flex: 0 1 26% !important;
  width: 26%;
  min-width: 0;
  margin: 0 0 0 12px;
  color: #252525;
}

.kps-table .dataTables_filter > label::after {
  display: none !important;
  content: none !important;
}

.kps-table .dataTables_filter input[type="search"] {
  width: 457px;
  max-width: 100%;
  height: auto !important;
  min-height: 40px;
  margin: 0;
  padding: 4px 40px 4px 12px;
  border: 1px solid #2b2b2b !important;
  border-radius: 8px;
  color: #2b2b2b;
  font-family: inherit;
  font-size: 18px;
  line-height: 30px;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  /* `background` shorthand (Figma filled magnifier) wins over data-table.css `background:#fff`. */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16.821 16.8317' fill='none'%3E%3Cpath d='M6.5 13C4.68333 13 3.146 12.3707 1.888 11.112C0.63 9.85333 0.000667196 8.316 0 6.5C0 4.684 0.628667 3.14667 1.888 1.888C3.14733 0.629333 4.68467 0 6.5 0C8.31533 0 9.853 0.629333 11.113 1.888C12.373 3.14667 13.002 4.684 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L16.546 15.1567C16.7294 15.3401 16.821 15.5734 16.821 15.8567C16.821 16.1401 16.7294 16.3734 16.546 16.5567C16.3627 16.7401 16.1294 16.8317 15.846 16.8317C15.5627 16.8317 15.3294 16.7401 15.146 16.5567L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13ZM6.5 11C7.75 11 8.81267 10.5627 9.688 9.688C10.5633 8.81333 11.0007 7.75067 11 6.5C10.9993 5.24933 10.562 4.187 9.688 3.313C8.814 2.439 7.75133 2.00133 6.5 2C5.24867 1.99867 4.18633 2.43633 3.313 3.313C2.43967 4.18967 2.002 5.252 2 6.5C1.998 7.748 2.43567 8.81067 3.313 9.688C4.19033 10.5653 5.25267 11.0027 6.5 11Z' fill='%232b2b2b'/%3E%3C/svg%3E") no-repeat right 14px center / 17px 17px !important;
}

/* Remove the native search field clear/decoration so the magnifier shows clean. */
.kps-table .dataTables_filter input[type="search"]::-webkit-search-decoration,
.kps-table .dataTables_filter input[type="search"]::-webkit-search-cancel-button,
.kps-table .dataTables_filter input[type="search"]::-webkit-search-results-button,
.kps-table .dataTables_filter input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.kps-table .dataTables_filter input[type="search"]:focus {
  outline: none;
  border-color: #066938;
}

/* Responsive: stack the controls on smaller screens. */
@media (max-width: 980px) {
  .kps-table .dataTables_filter {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .kps-table .dataTables_filter .io-filters,
  .kps-table .dataTables_filter .io-filters .filter_wrapper,
  .kps-table .dataTables_filter .io-filters select {
    width: 100%;
  }
  .kps-table .dataTables_filter > label {
    width: 100%;
  }
  .kps-table .dataTables_filter input[type="search"] {
    width: 100%;
    flex: 1 1 auto;
  }
}

/* The KPS tables in #selectivity_panels should fit the content area (~1113px),
   not the global Divi rule .page-template-template-service-redesign table {min-width:1240px}
   which forces horizontal scroll. Scoped to this section so the wider overview
   table (in its own section, with .mobile-scroll) keeps its scroll. */
/* Desktop (≥ 835px): sidebar visible, content area is wide enough that the
   table fits at 100% — no horizontal scroll needed. */
@media screen and (min-width: 835px) {
  #selectivity_panels table {
    min-width: 0 !important;
    width: 100% !important;
  }
  #selectivity_panels .mobile-scroll {
    overflow-x: hidden !important;   /* table fits – no scrollbar */
  }
  #selectivity_panels .dataTables_wrapper {
    overflow: visible !important;
  }
}

/* Tablet & mobile (≤ 834px): sidebar collapses, main goes full width but the
   container can drop below the table's ~732px min-content width — re-enable
   horizontal scroll so columns stay readable instead of overflowing the page. */
@media screen and (max-width: 834px) {
  #selectivity_panels table {
    min-width: 0 !important;         /* still override Divi's 1240px */
    width: 100% !important;
  }
  #selectivity_panels .mobile-scroll {
    overflow-x: auto;     /* scroll only when content overflows */
    -webkit-overflow-scrolling: touch;
  }
  #selectivity_panels .dataTables_wrapper {
    overflow: visible !important;
  }
}
.page-template-template-service-redesign table {
  min-width: 1240px;
}

/* Fix: Table inside service-overview-section — no horizontal scroll at 1680px */
@media (min-width: 1280px) {
  /* Enables horizontal scroll for all tables on mobile/iPad */
  .mobile-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS/iPad */
  }
  /* Remove horizontal scrollbar on the table wrapper */
  .service-overview-section .mobile-scroll {
    overflow-x: hidden !important;
  }
  
  /* Override Divi's min-width: 1240px — force table to fit within its container */
  .page-template-template-service-redesign .service-overview-section .mobile-scroll table,
  .service-overview-section .mobile-scroll table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  
  /* Allow cells to wrap text rather than push the table wider */
  .service-overview-section .mobile-scroll table th,
  .service-overview-section .mobile-scroll table td {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
}

/* =========================================================
   COMPARISON TABLE — Figma 14580-12604
   Heading + full-width table with a dark-forest header row and
   alternating light-green / off-white body rows separated by 5px
   white gaps. Content comes from the `comparison_table_description`
   WYSIWYG (its inline table styles are stripped in the template so
   these rules fully control the look).
   ========================================================= */
.page-template-template-service-redesign .comparison-table-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.page-template-template-service-redesign .comparison-table-heading {
  font-size: 38px;
  line-height: 65px;
  font-weight: 500;
  color: #252525;
  margin-bottom: 0px;
}
.page-template-template-service-redesign .comparison-table-wrapper {
  border-radius: 8px;
  overflow: hidden;
}
/* Override the global `.page-template-... table { min-width: 1240px }` so the
   comparison table fits its container instead of forcing a horizontal scroll. */
.page-template-template-service-redesign .comparison-table-wrapper table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: auto;
}
.page-template-template-service-redesign .comparison-table-wrapper th,
.page-template-template-service-redesign .comparison-table-wrapper td {
  padding: 10px;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
  vertical-align: top;
}
/* Header row — dark forest, white bold text. Covers both a real <thead> and a
   header expressed as <th> cells inside the first <tbody> row. */
.page-template-template-service-redesign .comparison-table-wrapper thead th,
.page-template-template-service-redesign .comparison-table-wrapper thead td,
.page-template-template-service-redesign .comparison-table-wrapper tbody tr th {
  background: #0F2318;
  color: #fff;
  font-weight: 700;
}
.page-template-template-service-redesign .comparison-table-wrapper thead th:first-child {
  border-top-left-radius: var(--border-radius-border-radius-8, 8px);
}
.page-template-template-service-redesign .comparison-table-wrapper thead th:last-child {
  border-top-right-radius: var(--border-radius-border-radius-8, 8px);
}
/* Body cells — dark-forest text, regular weight. */
.page-template-template-service-redesign .comparison-table-wrapper tbody td {
  color: #0F2318;
  font-weight: 400;
}
/* Alternating body rows (Figma: light-green then off-white). */
.page-template-template-service-redesign .comparison-table-wrapper tbody tr:nth-child(odd) td {
  background: #F4FBF8;
}
.page-template-template-service-redesign .comparison-table-wrapper tbody tr:nth-child(even) td {
  background: #F9F9F9;
}
/* 5px white gaps between the header and body rows (Figma spacing). */
.page-template-template-service-redesign .comparison-table-wrapper thead tr,
.page-template-template-service-redesign .comparison-table-wrapper tbody tr:not(:last-child) {
  border-bottom: 5px solid #fff;
}
.page-template-template-service-redesign .comparison-table-wrapper tbody tr a {
  color: #066938;
}

/* Fix: round the corners of the actual Targets and Panels table
   (id="srt-1"), matching the 8px used on the filter dropdowns and search box */
.mobile-scroll {
  border-radius: 8px;
  overflow-x: auto;   /* preserved so the wide table still scrolls horizontally */
  overflow-y: hidden;  /* needed so border-radius actually clips the corners */
}

/* Keep the dropdown filters and search box consistent at the same radius */
#select_panel_1-t1,
#select_panel_2-t1,
.ais-SearchBox-input.form-control {
  border-radius: 8px;
}

@media (max-width: 992px) {
  .page-template-template-service-redesign .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-template-template-service-redesign .comparison-table-heading {
    font-size: 24px;
    line-height: 30px;
  }
}

/* =========================================================
   KINASE PANEL — top-right pager (count + Rows + prev/next)
   Built by template-service-redesign.js (.kps-toppg). Replaces
   the default bottom info/pagination foot on this template.
   Every selector is scoped to
   .page-template-template-service-redesign .kps-table so no
   other template/table is affected.
   ========================================================= */

/* Hide the default bottom info + pagination row (.dt-foot) ONLY on tables where
   the JS has built a custom top-pager (it flags the foot with .kps-foot-hidden).
   Unfiltered tables have no top-pager and must keep their default bottom
   pagination, so this stays scoped to .kps-foot-hidden — do not add an unscoped
   .dt-foot variant here or paging breaks on those tables (e.g. Specialty Profilers US). */
.page-template-template-service-redesign .kps-table .dt-foot.kps-foot-hidden {
  display: none !important;
}

/* Control bar: right-aligned, above the table. */
.page-template-template-service-redesign .kps-table .kps-toppg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 18px;
  line-height: 30px;
  color: #0f2318;
}

/* "1-5 of 876" row count (rows, not pages). */
.page-template-template-service-redesign .kps-table .kps-toppg__info {
  color: #066938;
  font-weight: 600;
  white-space: nowrap;
}

/* Rows dropdown ------------------------------------------------ */
.page-template-template-service-redesign .kps-table .kps-toppg__rows {
  position: relative;
}
.page-template-template-service-redesign .kps-table .kps-toppg__rows-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 12px;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  background: #fff;
  color: #2b2b2b;
  font-family: inherit;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
}
.page-template-template-service-redesign .kps-table .kps-toppg__rows-btn:focus {
  outline: none;
  border-color: #066938;
}
.page-template-template-service-redesign .kps-table .kps-toppg__caret {
  width: 12px;
  height: 7px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 7px;
  transition: transform 0.15s ease;
}
.page-template-template-service-redesign .kps-table .kps-toppg__rows-btn[aria-expanded="true"] .kps-toppg__caret {
  transform: rotate(180deg);
}
.page-template-template-service-redesign .kps-table .kps-toppg__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.page-template-template-service-redesign .kps-table .kps-toppg__menu.is-open {
  display: block;
}
.page-template-template-service-redesign .kps-table .kps-toppg__menu-head {
  padding: 4px 14px;
  font-size: 13px;
  line-height: 20px;
  color: #8a8a8a;
}
.page-template-template-service-redesign .kps-table .kps-toppg__opt {
  padding: 6px 14px;
  font-size: 16px;
  line-height: 24px;
  color: #2b2b2b;
  cursor: pointer;
}
.page-template-template-service-redesign .kps-table .kps-toppg__opt:hover {
  background: #eaf3ec;
  color: #066938;
}
/* Visible keyboard focus for the row-count options (WCAG 2.4.7). */
.page-template-template-service-redesign .kps-table .kps-toppg__opt:focus,
.page-template-template-service-redesign .kps-table .kps-toppg__opt:focus-visible {
  background: #eaf3ec;
  color: #066938;
  outline: 2px solid #066938;
  outline-offset: -2px;
}
/* Mark the currently-applied row count in the list. */
.page-template-template-service-redesign .kps-table .kps-toppg__opt[aria-selected="true"] {
  font-weight: 600;
  color: #066938;
}

/* Prev / next arrows ----------------------------------------- */
.page-template-template-service-redesign .kps-table .kps-toppg__nav {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.page-template-template-service-redesign .kps-table .kps-toppg__prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='%230f2318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-template-template-service-redesign .kps-table .kps-toppg__next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%230f2318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-template-template-service-redesign .kps-table .kps-toppg__nav.is-disabled {
  opacity: 0.35;
  cursor: default;
}

/* Stack neatly on small screens. */
@media (max-width: 767px) {
  .page-template-template-service-redesign .kps-table .kps-toppg {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }
}

/* =========================================================
   Expandable Target rows — "Targets and Panels" table (#srt-1)
   Clicking the leftmost (Target) column reveals HGNC Reference /
   Uniprot # / Additional Synonyms via DataTables row().child().
   JS lives in js/template-service-redesign.js and binds only to
   #srt-1, so these styles are scoped to that id.
   ========================================================= */
#srt-1 tbody tr:not(.rb-detail-row) td:nth-child(1) {
  cursor: pointer;
  position: relative;
  padding-left: 22px !important;/* no grey tap flash on touch */
}
/* Force the cell background transparent in every interaction state so the site's
   own default cell/focus background can't tint the cell on hover/focus/click —
   only the icon reacts. !important beats the (non-important) striped-row td rule. */
/* Drop the default focus outline; keep a visible ring for keyboard focus only. */
#srt-1 tbody tr:not(.rb-detail-row) td:nth-child(1):focus {
  outline: none !important;
}
#srt-1 tbody tr:not(.rb-detail-row) td:nth-child(1):focus-visible {
  outline: 2px solid rgba(10, 122, 77, 0.5) !important;
  outline-offset: 2px !important;
}
/* Plus/minus disclosure toggle: "+" when collapsed, "-" when expanded — a clean
   content swap (no rotation). Hover adds a subtle green glow + slight scale in
   BOTH states. The collapsed hover nudges up (-60%) then the expanded-hover rule
   that follows re-centres it (-50%); expanded rules come later so they win on the
   expanded row (equal specificity, source order decides). */
#srt-1 tbody tr:not(.rb-detail-row) td:nth-child(1)::before {
  content: "+";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #0a7a4d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
  transform-origin: center center;
}
#srt-1 tbody tr.rb-row-expanded td:nth-child(1)::before {
  content: "-";
  transform: translateY(-50%);
}
#srt-1 tbody tr:not(.rb-detail-row) td:nth-child(1):hover::before {
  color: rgb(10, 122, 77);
  text-shadow: 0 0 4px rgba(10, 122, 77, 0.4);
  transform: translateY(-60%) scale(1.15);
}
#srt-1 tbody tr.rb-row-expanded td:nth-child(1):hover::before {
  transform: translateY(-50%) scale(1.15);
  text-shadow: 0 0 4px rgba(10, 122, 77, 0.4);
}
#srt-1 tr.rb-detail-row td {
  background: #f4f9f7;
  padding: 14px 24px !important;
  border-top: 1px dashed #cfe3da;
}
#srt-1 tr.rb-detail-row .rb-detail-grid {
  display: grid;
  grid-template-columns: 170px 1fr;
  row-gap: 8px;
  column-gap: 14px;
  font-size: 13px;
  max-width: 700px;
}
#srt-1 tr.rb-detail-row .rb-detail-label {
  font-weight: 600;
  color: #0a7a4d;
}
/* Row-expand detail: two columns side by side — left = references, right =
   "Assay Formats" (US / Germany). Each column is a .rb-detail-grid; the
   "Assay Formats" heading spans that grid. The right column is only present
   when the target has US/Germany data (built in template-service-redesign.js). */
#srt-1 tr.rb-detail-row .rb-detail-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}
#srt-1 tr.rb-detail-row .rb-detail-col-left {
  flex: 0 0 auto;
}
#srt-1 tr.rb-detail-row .rb-detail-col-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#srt-1 tr.rb-detail-row .rb-assay-formats-header {
  margin: 0;
}
/* "US: value" / "Germany: value" lines — bold inline label, value after. */
#srt-1 tr.rb-detail-row .rb-assay-line {
  color: #333;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
#srt-1 tr.rb-detail-row .rb-assay-line strong {
  color: #000;
}

/* =========================================================
   Selectivity "Schedule Dropdowns" — collapsible accordions under the
   Selectivity panel tables (from the schedule_dropdowns ACF repeater).
   ========================================================= */
.rb-schedule-dropdowns { font-family: 'Figtree', sans-serif; margin: 10px 0 30px 0; }
/* border-color:transparent (not `border:0`) on the base so the OPEN and CLOSED
   states are the same height — the closed state below only recolours this border
   rather than adding one, which would otherwise shift the bar by 2px on toggle. */
.rb-sched-item {
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #173523;
  border: 1px solid transparent;
}
.rb-sched-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; cursor: pointer; color: #fff; font-weight: 700; font-size: 16px;
}
.rb-sched-head:hover { background: #173523; }

/* CLOSED (default) state — outlined rather than filled: no background, a
   dark-forest outline, and dark-forest text. The chevron follows via
   `currentColor`. Hover keeps the dark-green fill (.rb-sched-head:hover above),
   so the text flips back to white to stay readable against it.
   `:not(.open)` gives these a higher specificity than the base rules, so they
   win by the cascade — no !important needed. The OPEN state is unchanged
   (filled dark-forest bar, white text). */
.rb-sched-item:not(.open) {
  background: transparent;
  border-color: #0f2318;
}
.rb-sched-item:not(.open) .rb-sched-head {
  color: #0f2318;
}
.rb-sched-item:not(.open) .rb-sched-head:hover {
  color: #fff;
}
.rb-sched-chevron { transition: transform 0.25s ease; flex-shrink: 0; margin-left: 12px; }
.rb-sched-item.open .rb-sched-chevron { transform: rotate(180deg); }
.rb-sched-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #e8f3ec; }
.rb-sched-item.open .rb-sched-body { max-height: 2000px; }
.rb-sched-body-inner { padding: 18px 24px 22px 24px; }
.rb-sched-applicable { font-weight: 700; color: #0f2318; margin-bottom: 12px; font-size: 14px; }
.rb-sched-table-wrap { overflow-x: auto; }
table.rb-sched-table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
table.rb-sched-table th {
  background: #0f2318; color: #fff; text-align: left; padding: 8px 12px;
  white-space: nowrap; font-weight: 700;
}
table.rb-sched-table td {
  padding: 7px 12px; border-bottom: 1px solid #d7e6dc; white-space: nowrap; color: #2b2b2b;
}
table.rb-sched-table tr:nth-child(even) td { background: #f4f9f6; }
.rb-sched-disclaimer { margin-top: 14px; font-size: 12.5px; color: #2b2b2b; line-height: 1.5; }
.rb-sched-disclaimer p { margin: 0 0 8px 0; }

/* =========================================================
   Service-table links ("View Panel" / "Data sheet") — hover affordance.
   Every link inside a DataTable on this template gets a slightly larger hit
   area and a dark-forest + underline hover, so it reads as clickable.

   The negative margin cancels the padding, so the enlarged tap target does NOT
   change the cell's layout or row height.

   `!important` on the colours is required, not cosmetic: the base link colours
   are themselves set with !important (e.g. the turquoise
   ".tablefield tbody td:last-child a.link { color: … !important }" rule at ~3812),
   and an !important declaration can only be overridden by another !important.
   ========================================================= */
.page-template-template-service-redesign table.dataTable a {
  display: inline-block;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  transition: color 0.2s ease;
}
.page-template-template-service-redesign table.dataTable a:hover {
  color: #0f2318 !important;
  text-decoration: underline;
}
.page-template-template-service-redesign table.dataTable a:active {
  color: #0f2318 !important;
}

/* === Targets and Panels table (#srt-1) — lock column widths ===
   With table-layout: fixed but no explicit column widths, the browser sizes each
   column from whichever row happens to render first, so widths shift on every
   sort/paginate. Explicit per-column percentages lock the layout regardless of
   content; ellipsis/word-break keep long values from breaking the cells. These
   percentages were verified live by sorting the table (fully changing row
   content) with column widths staying identical. */
#srt-1 { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; }
/* Visible columns after the restructure (US Assay Format, Germany Assay Format
   and Country are hidden via DataTables, so nth-child now counts only the 4
   remaining columns). */
#srt-1 th:nth-child(1), #srt-1 td:nth-child(1) { width: 16% !important; } /* Target */
#srt-1 th:nth-child(2), #srt-1 td:nth-child(2) { width: 28% !important; } /* Classification */
#srt-1 th:nth-child(3), #srt-1 td:nth-child(3) { width: 28% !important; } /* US Panels */
#srt-1 th:nth-child(4), #srt-1 td:nth-child(4) { width: 28% !important; } /* Germany Panels */
/* nowrap keeps each cell on ONE line, which is what makes text-overflow:ellipsis
   actually engage — long values are truncated with "…" rather than wrapping.
   (No word-break here: it's inert once nowrap is set.) */
#srt-1 th, #srt-1 td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Below 1024px the locked fixed layout squeezes the 7 columns. Unlock ALL of
   them (table-layout + every per-column width, not just the first) and give the
   table a min-width so it sizes to its content and scrolls horizontally inside
   .mobile-scroll instead of cramming. The nth-child resets repeat the base
   selectors so they match specificity and this media block wins by source order. */
@media (max-width: 1024px) {
  /* Table sizes to its content (auto width, no fixed layout / no locked column
     widths). white-space:nowrap keeps each cell on one line so the table grows
     past the container and the .mobile-scroll wrapper scrolls it. min-width:100%
     keeps it filling the container when content is short (no fixed pixel width). */
  #srt-1 {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  #srt-1 th:nth-child(1), #srt-1 td:nth-child(1),
  #srt-1 th:nth-child(2), #srt-1 td:nth-child(2),
  #srt-1 th:nth-child(3), #srt-1 td:nth-child(3),
  #srt-1 th:nth-child(4), #srt-1 td:nth-child(4),
  #srt-1 th:nth-child(5), #srt-1 td:nth-child(5),
  #srt-1 th:nth-child(6), #srt-1 td:nth-child(6),
  #srt-1 th:nth-child(7), #srt-1 td:nth-child(7) {
    width: auto !important;
  }
  #srt-1 th, #srt-1 td {
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    white-space: nowrap;
  }
  /* Scroll container: scoped to the standalone table section (holds #srt-1), so
     it matches no matter how .mobile-scroll nests around the DataTable — and it
     beats the ≤767px `.mobile-scroll { overflow-x: visible }` rule that was
     killing the scroll on phones. */
  .page-template-template-service-redesign .table-section-standalone .mobile-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* === Filter bar: filters ~80% / Search ~20% on one row ===
   The proto-ms dropdowns were a fixed 212px each and wouldn't shrink, pushing the
   Algolia "Search" box onto its own line. The filter holder is given ~76% and the
   search label ~20% so the four dropdowns and the search box share the first row;
   .kps-toppg (pagination) is forced onto its own row below, right-aligned, via
   flex: 1 0 100%.
   NOTE: the filter holder must be targeted as #targets_filters_wrap.io-filters —
   that ID+class combo (set inline by the kinase-filters JS) has higher specificity
   than a plain .io-filters selector and otherwise wins, keeping the filters from
   growing. 76%/20% (not 80%/20%) leaves a buffer for gaps/margins; at a true 80+20
   the row overflowed and the search box wrapped. */
/* .dataTables_filter {
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0;
} */
#targets_filters_wrap.io-filters {
  flex: 0 1 71% !important;
  width: 71% !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px;
}
.dataTables_filter > .io-filters > .filter_wrapper {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  margin-right: 8px !important;
}
.dataTables_filter > .io-filters > .filter_wrapper .proto-ms-btn {
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px 8px !important;
}
.dataTables_filter > label input {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* Kinase filter dropdown checkboxes must NOT inherit the site-wide custom
   form-checkbox styling in style.css. That global rule hides the native box
   (input[type=checkbox]{opacity:0;position:absolute}) and paints a fake box on
   the adjacent span via ::before — including a crownbio "ios-checkmark.svg"
   background when checked. Scope all of that out and render our own clean custom
   checkbox (rounded-square box with a thin 45° tick) for the filter options only.
   NOTE: position/opacity/z-index carry !important to beat the global
   input[type=checkbox] reset; the .proto-ms-panel prefix raises specificity so
   these win over the earlier scoped rules. */
.proto-ms-panel .proto-opt-row .proto-opt-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative !important;
  opacity: 1 !important;
  z-index: auto !important;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0 10px 0 0;
  flex-shrink: 0;
  border: 1.5px solid #8a8a8a;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.proto-ms-panel .proto-opt-row .proto-opt-checkbox:checked {
  background: #fff;
  border-color: #2B2B2B;
}
.proto-ms-panel .proto-opt-row .proto-opt-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #2B2B2B;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
/* Neutralise the global fake-box + injected image on the adjacent label span. */
.proto-opt-row .proto-opt-checkbox + .proto-opt-text {
  padding-left: 0 !important;
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.proto-opt-row .proto-opt-checkbox + .proto-opt-text::before,
.proto-opt-row .proto-opt-checkbox:checked + .proto-opt-text::before {
  content: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   "Excel File Report" export button — one per service table.
   Injected after each table's .dataTables_wrapper by
   js/template-service-redesign.js (addExportButton). A round,
   light-grey pill at the bottom-right that turns dark-green on
   hover; clicking it exports the visible columns + filtered rows
   of that table to .xlsx via SheetJS.
   ========================================================= */
.excel-report-footer {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 28px;
}

.excel-report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #3c3c3b;
  background: #ffffff;  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  padding: 10px 20px;
  border-radius: 99px;
  border: 1px solid #3c3c3b;  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease;
}

.excel-report-btn:hover {
  background: #04502a;
  color: #ffffff;
}

/* When the button is placed INSIDE the top pager (.kps-toppg, added by the JS on
   filtered / #srt-1 tables), keep the pager controls on the left and push the
   Excel button to the far right so both share one line. flex-wrap lets the button
   drop below on very small screens. */
.page-template-template-service-redesign .kps-table .kps-toppg--has-excel {
  flex-wrap: wrap;
}
.page-template-template-service-redesign .kps-table .kps-toppg--has-excel .excel-report-btn {
  margin-left: auto;
}

/* =========================================================
   Targets and Panels filter bar (#srt-1_filter) — responsive
   Desktop keeps everything on one line (the 76% / 20% rule above).
   At ≤992px the column dropdowns auto-flow (wrap) across the top row
   and the Search box drops to its own FULL-WIDTH line below. id-scoped
   so it beats the earlier .dataTables_filter 76/20 rule AND the older
   .kps-table @media(980px) column-stack.
   ========================================================= */
@media (max-width: 992px) {
  #srt-1_filter {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  /* Dropdown holder spans the full width and lets its filters wrap. */
  #srt-1_filter .io-filters {
    flex: 1 1 100% !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  /* Each dropdown auto-sizes and wraps (min basis 180px) instead of stacking. */
  #srt-1_filter .io-filters .filter_wrapper {
    flex: 1 1 180px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* Search box → its own full-width line beneath the filters. */
  #srt-1_filter > label {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
  }
  #srt-1_filter > label input[type="search"] {
    width: 100% !important;
  }
}

/* =========================================================
   IO SERVICE BANNER — layered background with decorative ellipses
   Layer 1 (base): solid dark-green banner.
   Layer 2 (middle): two decorative ellipse PNGs (top-left + bottom-left),
     served from the theme's own /images folder.
   Layer 3 (top): heading / text.
   Appended (does not modify any existing .io-service-banner rules).
   ========================================================= */

/* ===== LAYER 1 (base): solid green ===== */
.io-service-banner {
  position: relative;
  overflow: hidden;
  background-color: #0F2318;
}

/* Make the left content block transparent so the base green + shapes show through */
.io-service-banner .field.service-hero-content-block {
  background-color: transparent;
}

/* ===== LAYER 3 (top): text / headings ===== */
.io-service-banner .container.center.hero-block {
  position: relative;
  z-index: 2;
}

/* ===== LAYER 2 (middle): decorative shapes ===== */
.io-service-banner::before,
.io-service-banner::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* Top-left: Ellipse-14 PNG (local theme /images) */
.io-service-banner::before {
  top: -20px;
  left: 0;
  width: 217px;
  height: 300px;
  background-image: url("../images/Ellipse-14.png");
  background-size: contain;
  background-position: top left;
}

/* Bottom-left: Ellipse-13 PNG (local theme /images) */
.io-service-banner::after {
  bottom: 0;
  left: 0;
  width: 171px;
  height: 230px;
  background-image: url("../images/Ellipse-13.png");
  background-size: contain;
  background-position: bottom left;
}