/*---------------------------------

WE NEED THESE TO REFERENCE VARIABLES, MIXINS AND SUCH. DO NOT REMOVE!
Thanks, Friend :)

---------------------------------*/
.anchor-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  margin-bottom: 2.5rem;
  max-width: 83.333%;
}
.anchor-nav a {
  color: #fff;
  display: block;
  margin-right: 1.5rem;
  line-height: 1.2;
  padding: 0.5rem 0;
  border-bottom: solid 3px white;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 0;
  -moz-box-flex: 1;
  flex: 1 0 0;
  opacity: 0.85;
  -webkit-transition: opacity 200ms linear;
  -moz-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
.anchor-nav a:hover {
  opacity: 1;
}
@media (max-width: 1200px) {
  .anchor-nav {
    max-width: 100%;
  }
}

select.anchor-nav-mobile {
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-appearance: none;
  border: solid 1px #fff;
  background: transparent url(../../../content/dam/illumina-marketing/images/covid-19/chevron-down-white.svg) right center no-repeat;
  color: #fff;
  padding: 0.25rem 0.5rem;
  opacity: 0.85;
  width: 100%;
}
select.anchor-nav-mobile option {
  color: #000;
}
select.anchor-nav-mobile:focus {
  opacity: 1;
  outline: 0;
}

.tile-section__col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  margin-bottom: 1.5rem;
}
.tile-section__col .tile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1;
  flex: 1 0 auto;
}
.tile-section__col .tile__content {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1;
  flex: 1 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
}
.tile-section__col .tile__text {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1;
  flex: 1 0 auto;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .tile-section .tile {
    min-height: 1px;
  }
  .tile-section .tile__image {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
}

.tile {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 2px;
  -webkit-box-shadow: 0 0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.025), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  box-shadow: 0 0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.025), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.tile__image {
  max-width: 100%;
  height: auto;
  display: block;
}
.tile__content {
  padding: 1.25rem;
}

/*--- TYPE ---*/
h2, h3, h4, h5, h6, p {
  -webkit-font-smoothing: antialiased;
}

h2, .h2, .d1, .d2 {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  line-height: 1.125;
}

h3, h4, h5, .h3, .h4, .h5 {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  line-height: 1.25;
}

h4, h5, h6 {
  color: #000;
}

.show-hide-item h5 {
  color: #0077C8;
}

p {
  color: #595b5c;
}

.d1 {
  font-size: 6rem;
}
@media (max-width: 991.98px) {
  .d1 {
    font-size: 4rem;
  }
}
@media (max-width: 767.98px) {
  .d1 {
    font-size: 3rem;
  }
}

.d2 {
  font-size: 5rem;
}
@media (max-width: 991.98px) {
  .d2 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: 3.5rem;
}
@media (max-width: 991.98px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: 2.75rem;
}
@media (max-width: 991.98px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: 2rem;
}
@media (max-width: 991.98px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.5rem;
}
@media (max-width: 991.98px) {
  h5, .h5 {
    font-size: 1.25rem;
  }
}

h6, .h6 {
  font-size: 1.25rem;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}
@media (max-width: 991.98px) {
  h6, .h6 {
    font-size: 1.125rem;
  }
}

.subheading {
  font-size: 0.875rem;
  text-transform: uppercase;
}

.lead {
  font-size: 1.25rem;
}
@media (max-width: 991.98px) {
  .lead {
    font-size: 1.125rem;
  }
}

.small {
  font-size: 0.875rem;
}

.black-txt {
  color: #000;
}

.white-txt {
  color: #fff;
}

/*--- END TYPE ---*/
.banner-gradient {
  position: relative;
  overflow: hidden;
}
.banner-gradient.banner-large {
  height: -webkit-calc(100vh - 300px);
  height: -moz-calc(100vh - 300px);
  height: calc(100vh - 300px);
}
@media (max-width: 767.98px) {
  .banner-gradient.banner-large {
    height: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    background-size: cover;
    background-position: left top;
  }
}
@media (max-width: 767.98px) {
  .banner-gradient.banner-large.banner-image {
    padding-top: 2rem;
  }
  .banner-gradient.banner-large.banner-image h2.d1 {
    font-size: 3rem;
  }
  .banner-gradient.banner-large.banner-image h3.h5 {
    font-size: 1.25rem;
  }
}
@media (min-width: 768px) {
  .banner-gradient.banner-large.banner-image {
    min-height: 650px;
  }
}

.btn-primary-light {
  color: #885087;
  background-color: #fff;
  border-color: #fff;
}

.article-list {
  background-image: url(../../../content/dam/illumina-marketing/images/covid-19/blue-purple-lightfield-bkg-web-graphic.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #885087;
}
@media (max-width: 767.98px) {
  .article-list {
    background: -webkit-linear-gradient(30deg, #e4adc4 6%, #b794e7 82%, #b59fde 100%) !important;
    background: -moz- oldlinear-gradient(30deg, #e4adc4 6%, #b794e7 82%, #b59fde 100%) !important;
    background: linear-gradient(60deg, #e4adc4 6%, #b794e7 82%, #b59fde 100%) !important;
  }
}
.article-list .page-heading h4 {
  color: #fff;
}
.article-list__item h5 {
  color: #fff;
}
@media (max-width: 767.98px) {
  .article-list__item {
    margin-bottom: 2rem;
  }
}
.article-list__country {
  color: #fff;
  font-size: 0.875rem;
  text-transform: uppercase;
}
.article-list__link {
  font-size: 0.85rem;
  text-decoration: underline;
  color: #fff;
  display: inline-block;
}
.article-list__link:hover {
  color: #fff;
}

.table .thead-light th {
  color: #000000;
  -webkit-font-smoothing: antialiased;
}
.table th, .table td {
  color: #000000;
  -webkit-font-smoothing: antialiased;
}

.recommended-workflow .icon-system {
  background-image: url(../../../content/dam/illumina-marketing/images/icons/nextseq-1000-2000-web-icon.svg), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));
  background-image: url(../../../content/dam/illumina-marketing/images/icons/nextseq-1000-2000-web-icon.svg), -webkit-linear-gradient(transparent, transparent);
  background-image: url(../../../content/dam/illumina-marketing/images/icons/nextseq-1000-2000-web-icon.svg), -moz- oldlinear-gradient(transparent, transparent);
  background-image: url(../../../content/dam/illumina-marketing/images/icons/nextseq-1000-2000-web-icon.svg), linear-gradient(transparent, transparent);
}

.workflow-comparison-table {
  -webkit-font-smoothing: antialiased;
}
.workflow-comparison-table table {
  min-width: 768px;
}
.workflow-comparison-table th, .workflow-comparison-table td {
  padding: 1.5em 0.5em;
  font-size: 0.85rem;
  color: #000;
}
.workflow-comparison-table th:first-child, .workflow-comparison-table td:first-child {
  font-weight: 700;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff;
  left: 0;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .workflow-comparison-table th:first-child:after, .workflow-comparison-table td:first-child:after {
    content: " ";
    background: #e5e5e5;
    height: 100%;
    width: 1px;
    position: absolute;
    right: -1px;
    top: 0;
  }
}
.workflow-comparison-table thead th {
  text-align: center;
}
.workflow-comparison-table thead th small {
  display: block;
}
.workflow-comparison-table thead tr:last-child th:first-child {
  text-align: left;
}
.workflow-comparison-table tbody tr {
  border-top: 1px solid #d8d8d8;
}
.workflow-comparison-table tbody tr:last-child {
  border-bottom: 1px solid #d8d8d8;
}

.dragen-analysis-solutions-table li {
  margin-bottom: 0;
}

table .table-labels th {
  padding: 0.25em;
}
table .table-labels th:before {
  display: none;
}
table .table-labels span {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
  font-size: 0.8rem;
  padding: 0.25em 0.5em;
  display: block;
  font-weight: 400;
}
table .table-dot {
  width: 1rem;
  height: 1rem;
  background: #666;
  border-radius: 1rem;
  margin: 0 auto;
  position: relative;
  display: block;
}
table .table-dot--inline {
  display: inline-block;
  margin: 0 6px 0 0;
}
table .table-dot--primary {
  background: #a2c037;
}
table .table-dot--secondary {
  background: #ffba3d;
}
table .table-dot--purple {
  background: #885087;
}
table .table-dot--blue {
  background: #3e7ebe;
}

.table-legend p {
  font-size: 0.65rem;
  display: inline-block;
  color: #000;
}
.table-legend__dot {
  width: 1rem;
  height: 1rem;
  background: #666;
  border-radius: 1rem;
  margin: 0 6px 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.table-legend__dot--primary {
  background: #a2c037;
}
.table-legend__dot--secondary {
  background: #ffba3d;
}
.table-legend__dot--purple {
  background: #885087;
}
.table-legend__dot--blue {
  background: #3e7ebe;
}

.nav-tabs--light {
  border-bottom: 1px solid #000;
  margin-bottom: 2.5rem;
}
.nav-tabs--light .nav-item {
  color: #000;
  font-size: 1rem;
  background: transparent;
  border: none;
  border-bottom: 5px solid transparent;
}
.nav-tabs--light .nav-item:not(.active) {
  color: #999;
}
.nav-tabs--light .nav-item:not(.active):hover {
  background: transparent;
  border-color: transparent;
  color: #000;
}
.nav-tabs--light .nav-item.active {
  border-bottom-color: #000;
  color: #000;
}
.nav-tabs--raspberry .nav-item.active {
  border-bottom-color: #DE1B76;
}

.tab-content--light .item__description {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -moz-box-ordinal-group: 3;
  order: 2;
}
.tab-content--light .item__name {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -moz-box-ordinal-group: 4;
  order: 3;
}
.tab-content--light .item__name h5 {
  margin: 0 0 7px;
}
.tab-content--light .item__features {
  -webkit-box-ordinal-group: 5;
  -webkit-order: 4;
  -moz-box-ordinal-group: 5;
  order: 4;
}
.tab-content--light .recommended-workflow-icon {
  margin: 0 auto 30px;
}
.tab-content--light .recommended-workflow-step-indicator {
  margin: 0 0 30px;
}

.card-body a[target=_blank]:after,
.tile__footer a[target=_blank]:after,
#how-we-help a[target=_blank]:after {
  content: "\f08e";
  font-family: "Font Awesome 5 Pro";
  margin: 0 0 0 6px;
  font-size: 0.875rem;
}

#how-we-help a[target=_blank] {
  position: relative;
  padding-right: 1.3rem;
}
#how-we-help a[target=_blank]:after {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
}

.card-section .card-col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
}
.card-section .card {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  flex-grow: 1;
}
.card-section .card .card-body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
}
.card-section .card .card-body .card-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 0;
  -moz-box-flex: 1;
  flex: 1 0 0;
}

[data-anchor]:focus {
  outline: none;
}