.styleguide_wrapper .contentMain .offset-check, .styleguide_wrapper .contentMain .checklist-grid, .styleguide_wrapper .contentMain .column-row, .styleguide_wrapper {
  display: grid;
}

.styleguide_wrapper .contentMain .factoid, .styleguide_wrapper .contentMain ._card, .styleguide_wrapper .contentMain .styleguide_hero {
  border-radius: 5px;
}

.styleguide_wrapper .contentMain .factoid, .styleguide_wrapper .contentMain ._card-caption, .styleguide_wrapper .contentMain ._card ._card-hdr {
  font-size: 14px;
  line-height: 20px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-main);
}

h2 {
  font-weight: 500;
  border-bottom: 3px solid rgb(0, 0, 0);
  padding-bottom: 15px;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  h2 {
    font-size: 28px;
    line-height: 32px;
  }
}

h3 {
  font-weight: 400;
}

h4 {
  font-weight: 700;
  color: rgb(0, 0, 0);
}

.type-specimen {
  font-size: 64px;
  line-height: normal;
}

.character-set {
  font-size: 20px;
  display: block;
  word-spacing: -2px;
  margin-bottom: 1rem;
}

.color-correct-green {
  color: rgb(33, 154, 9);
}

.color-incorrect-red {
  color: red;
}

.copyBtn {
  position: relative;
  box-sizing: border-box;
  border: 0;
  outline: none;
  cursor: pointer;
  user-select: none;
  background: transparent;
}
.copyBtn i {
  color: rgba(0, 0, 0, 0.2);
}
.copyBtn:before {
  content: "";
  width: 16px;
  height: 16px;
  bottom: -10px;
  left: -1px;
  clip-path: polygon(50% 40%, 0% 100%, 100% 100%);
}
.copyBtn:after {
  content: attr(tooltip);
  width: 115px;
  bottom: -40px;
  left: -50.5px;
  padding: 5px;
  border-radius: 4px;
  font-size: 11px;
}
.copyBtn:before, .copyBtn:after {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  box-sizing: border-box;
  background-color: rgb(11, 89, 206);
  color: rgb(255, 255, 255);
  transform: translateY(-10px);
  transition: all 300ms ease;
}
.copyBtn:hover:before, .copyBtn:hover:after {
  opacity: 1;
  transform: translateY(0);
}

.accordionParent {
  padding: 40px 0;
}
.accordionParent .collapse p, .accordionParent .collapsing p {
  margin-left: 0;
}
.accordionParent > a h3 {
  display: flex;
  justify-content: space-between;
  color: rgb(0, 0, 0);
  border-bottom: 1px solid rgb(219, 223, 234);
  padding-bottom: 10px;
  margin-bottom: 25px;
}
.accordionParent > a.collapsed h3::after {
  content: "+";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
}
.accordionParent > a:not(.collapsed) h3::after {
  content: "\f068";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
}

.site-nav .navbar-toggle {
  border-color: #ddd;
}
.site-nav .navbar-toggle .icon-bar {
  background-color: #888;
}
.site-nav .logo-wrapper {
  padding-left: 15px;
}
@media (min-width: 768px) {
  .site-nav .logo-wrapper {
    padding-left: 30px;
  }
}

.styleguide_wrapper {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  overflow: hidden;
}
@media (min-width: 768px) {
  .styleguide_wrapper {
    grid-template-columns: 220px 1fr;
  }
}
@media (min-width: 1200px) {
  .styleguide_wrapper {
    grid-template-columns: 280px 1fr;
  }
}
.styleguide_wrapper .sideBar {
  background-color: rgb(248, 249, 251);
  padding: 50px 15px;
}
@media (max-width: 767px) {
  .styleguide_wrapper .sideBar {
    padding: 0;
    background-color: rgb(255, 255, 255);
    position: fixed;
    width: 100%;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }
}
.styleguide_wrapper .sideBar .navbar {
  margin-bottom: 0;
  min-height: auto;
}
.styleguide_wrapper .sideBar .navbar-default {
  background-color: transparent;
  border-color: transparent;
}
@media (min-width: 768px) {
  .styleguide_wrapper .sideBar .navbar-default {
    position: fixed;
  }
}
@media (min-width: 1200px) {
  .styleguide_wrapper .sideBar .navbar-default {
    width: 250px;
  }
}
.styleguide_wrapper .sideBar .navbar-default .navbar-toggle {
  float: none;
}
.styleguide_wrapper .sideBar .navbar-default .navbar-collapse {
  border-color: transparent;
}
@media (max-width: 767px) {
  .styleguide_wrapper .sideBar .navbar-default .navbar-collapse {
    padding: 15px;
  }
}
.styleguide_wrapper .sideBar .nav-pills > li.active > a, .styleguide_wrapper .sideBar .nav-pills > li.active > a:focus {
  background: rgb(0, 160, 255);
}
.styleguide_wrapper .sideBar .nav-pills > li.active > a:hover {
  background: rgb(31, 91, 142);
}
.styleguide_wrapper .sideBar .nav-pills > li > a:hover {
  background: rgb(218, 236, 249);
}
.styleguide_wrapper .contentMain {
  padding: 50px 0;
}
@media (min-width: 768px) {
  .styleguide_wrapper .contentMain {
    padding: 50px 15px;
  }
}
.styleguide_wrapper .contentMain section + section {
  padding-top: 80px;
}
.styleguide_wrapper .contentMain section .sectionItem + .sectionItem {
  margin-top: 3rem;
}
.styleguide_wrapper .contentMain ul {
  margin-left: 0;
  margin-bottom: 1.5em;
}
.styleguide_wrapper .contentMain ul li {
  margin: 0 0 0.75em 16px;
  padding: 0 0 0 0.5em;
  line-height: 1.5em;
}
.styleguide_wrapper .contentMain ul li:last-child {
  margin-bottom: 0;
}
.styleguide_wrapper .contentMain ul li::marker {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: rgb(0, 160, 255);
}
.styleguide_wrapper .contentMain ul li.correct::marker {
  content: "\f058";
  color: rgb(33, 154, 9);
}
.styleguide_wrapper .contentMain ul li.incorrect::marker {
  content: "\f057";
  color: red;
}
.styleguide_wrapper .contentMain .container-fluid {
  max-width: 1100px;
}
@media (min-width: 1600px) {
  .styleguide_wrapper .contentMain .container-fluid {
    max-width: 1200px;
  }
}
.styleguide_wrapper .contentMain .styleguide_hero {
  background: url(img/hero-illustration.svg) no-repeat 0 0/cover;
  display: flex;
  min-height: 230px;
  padding: 10px 30px;
  align-items: center;
  align-self: stretch;
  margin-bottom: 80px;
}
.styleguide_wrapper .contentMain .styleguide_hero h1 {
  color: rgb(255, 255, 255);
  margin: 0;
}
.styleguide_wrapper .contentMain .styleguide_hero h1 span {
  display: block;
  font-size: 22px;
  margin-top: 5px;
  line-height: normal;
}
.styleguide_wrapper .contentMain .column-row {
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  gap: 15px;
}
@media (min-width: 992px) {
  .styleguide_wrapper .contentMain .column-row {
    gap: 30px;
  }
  .styleguide_wrapper .contentMain .column-row.gap-more {
    gap: 60px;
  }
}
@media (min-width: 992px) {
  .styleguide_wrapper .contentMain .column-row.grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .styleguide_wrapper .contentMain .column-row.grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .styleguide_wrapper .contentMain .column-row.grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 991px) {
  .styleguide_wrapper .contentMain .column-row.grid-4.collapse-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .styleguide_wrapper .contentMain .column-row.grid-4.collapse-2 {
    grid-template-columns: 1fr;
  }
}
.styleguide_wrapper .contentMain .checklist-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
@media (min-width: 576px) {
  .styleguide_wrapper .contentMain .checklist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.styleguide_wrapper .contentMain .offset-check {
  grid-template-columns: max-content 1fr;
  gap: 10px;
}
.styleguide_wrapper .contentMain .offset-check .fa-check {
  color: rgb(0, 160, 255);
  font-size: 18px;
  line-height: 25px;
}
@media (min-width: 768px) {
  .styleguide_wrapper .contentMain .offset-check .fa-check {
    font-size: 20px;
    line-height: 30px;
  }
}
.styleguide_wrapper .contentMain ._card {
  border: 1px solid rgb(219, 223, 234);
}
.styleguide_wrapper .contentMain ._card ._card-hdr {
  padding: 10px 25px;
  background: rgb(243, 244, 247);
  font-weight: 700;
  border-radius: 5px 5px 0 0;
  display: flex;
  justify-content: space-between;
}
.styleguide_wrapper .contentMain ._card ._card-body {
  padding: 25px;
}
.styleguide_wrapper .contentMain ._card ._card-body img {
  margin: 0 auto;
  max-width: 100%;
  display: block;
  padding: 1rem;
}
.styleguide_wrapper .contentMain ._card ._card-body .logo {
  width: 350px;
}
.styleguide_wrapper .contentMain ._card ._card-body .logo._prod-logo {
  width: auto;
  height: 90px;
}
.styleguide_wrapper .contentMain ._card ._card-body p:last-child, .styleguide_wrapper .contentMain ._card ._card-body ul {
  margin-bottom: 0;
}
.styleguide_wrapper .contentMain ._card ._card-body.bg-light-blue {
  background: rgba(0, 160, 255, 0.05);
}
.styleguide_wrapper .contentMain ._card-caption {
  margin: 0.5rem 0 1rem;
}
.styleguide_wrapper .contentMain .color-swatch {
  padding: 25px;
  display: flex;
  align-items: flex-end;
  min-height: 170px;
  color: rgb(255, 255, 255);
  font-weight: 700;
}
.styleguide_wrapper .contentMain .color-swatch.bg-oxford {
  background: rgb(0, 33, 71);
}
.styleguide_wrapper .contentMain .color-swatch.bg-fresh-green {
  background: rgb(64, 198, 167);
}
.styleguide_wrapper .contentMain .color-swatch.bg-purple {
  background: rgb(151, 71, 255);
}
.styleguide_wrapper .contentMain .color-swatch span {
  user-select: all;
  display: block;
}
.styleguide_wrapper .contentMain .factoid {
  border: 1px solid rgb(219, 223, 234);
  background: rgb(243, 244, 247);
  text-align: center;
  margin: 1.5rem 0;
}
.styleguide_wrapper .contentMain .prevNextSection {
  padding: 60px 0;
  display: flex;
  justify-content: space-between;
}
.styleguide_wrapper .contentMain .prevNextSection .prev {
  text-align: right;
}
.styleguide_wrapper .contentMain .prevNextSection .prev a.simple.arrow {
  background-position: 2px center;
  padding-left: 32px;
  padding-right: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="12" viewBox="0 0 26 12" fill="none"><g clip-path="url(%23clip0_400_2)"><path d="M25 6.75C25.4142 6.75 25.75 6.41421 25.75 6C25.75 5.58579 25.4142 5.25 25 5.25V6.75ZM0.4697 5.46967C0.1768 5.76256 0.1768 6.23743 0.4697 6.53033L5.2426 11.3033C5.5355 11.5962 6.0104 11.5962 6.3033 11.3033C6.5962 11.0104 6.5962 10.5355 6.3033 10.2426L2.0607 6L6.3033 1.7574C6.5962 1.4645 6.5962 0.989601 6.3033 0.696701C6.0104 0.403801 5.5355 0.403801 5.2426 0.696701L0.4697 5.46967ZM25 5.25L1 5.25V6.75L25 6.75V5.25Z" fill="%2300A0FF"/></g><defs><clipPath id="clip0_400_2"><rect width="26" height="12" fill="white" transform="matrix(-1 0 0 -1 26 12)"/></clipPath></defs></svg>');
}
.styleguide_wrapper .contentMain .prevNextSection .prev a.simple.arrow:hover {
  background-position: left 0 center;
}
.styleguide_wrapper .contentMain .prevNextSection a {
  font-size: 20px;
}