/* Animation */

@keyframes navbarFlyout {
  from {
    opacity: 0;
    transform: scale(.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Base */

.nav {
  position: relative;
}

.nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  position: relative;
}

/*-------------Sync Adjust for Top Tool Nav--------------*/
.header__nav 
.nav__list--level1  {
font-size: .75rem;
}

#hs_cos_wrapper_header_nav .nav--light.nav--arrows .nav__list--level1 > .nav__item--branch > a{
font-weight: bold;
}
/*-------------End Sync Adjust--------------*/
.nav__link {
  display: inline-block; /*-------------Sync Adjust--------------*/
  padding-top: .56rem;
  padding-bottom: .56rem;
  position: relative;
  text-decoration: none;
}

.nav__link:hover {
  text-decoration: none;
}

/* Top level */

.nav__list--level1 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;


}

.nav__list--level1 > li:not(:last-child) {
  margin-inline-end: 2rem;
}

.nav--arrows .nav__list--level1 > li:not(:last-child) {
  margin-inline-end: calc(2rem - 22px + 16px);/* default margin-right, minus padding-right from the a, plus the width of the svg => space looks consistent with or w/o arrows */
}

.nav__list--level1 > li > a::before {
  content: '';
  display: block;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 4px;
  background: linear-gradient(111.02deg, #0076FF 0%, #00B5E2 100%);
  opacity: 0;
  transform: scale(.2,1) translateY(2px) translateZ(0);
  transition: .3s ease-out;
}

.nav__list--level1 > li:hover > a::before,
.nav__list--level1 > .nav__item--expanded > a::before,
.nav__list--level1 > .nav__item--active-branch > a::before,
.nav__list--level1 > .nav__item--active > a::before {
  transform: scale(1,1) translateY(0) translateZ(0);
  opacity: 1;
}

.nav__item--mega-branch > a {
  position: relative;
}

.nav__mega-hover-extender {
  display: none;
  position: absolute;
  left: -30px;
  right: -30px;
  top: 100%;
  height: 100px;
}

.nav__item--mega-branch:hover > a .nav__mega-hover-extender {
  display: block;
}

.nav__link .badge {
  margin-inline-start: 4px;
}

/* Regular flyouts */

.nav__list--flyout {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 10px 0;
  position: absolute;
  z-index: 6;
  box-shadow: 0px 32px 64px rgba(39, 47, 61, 0.05), 0px 16px 32px rgba(39, 47, 61, 0.05);
  border-radius: 20px;
}

.nav__list--level2 li:hover > .nav__list--flyout,
.nav--on-hover li:hover > .nav__list--flyout,
.nav--on-hover .nav__item--expanded > .nav__list--flyout,
.nav--on-click .nav__list--level1 > .nav__item--expanded > .nav__list--flyout {
  width: 220px;
  height: auto;
  overflow: visible;
  opacity: 1;
  animation: .2s ease-in-out forwards uiPop;
}

.hs-inline-edit .nav__list--flyout {
  display: none;
}

.hs-inline-edit .nav--on-hover li:hover > .nav__list--flyout {
  display: block;
}

.nav__list--flyout a {
  padding: .56rem 1.11rem;
  font-size: .89rem;
}

.nav__list--flyout li:not(:first-child) > a {
  border-top: 1px none; /*-------------Sync Adjust- theme Default: 1px solid;--------------*/
}

.nav__list--flyout .nav__item--active-branch > a,
.nav__list--flyout .nav__item--active > a {
  font-family: var(--strong-font-family);
  font-style: var(--strong-font-style);
  font-weight: var(--strong-font-weight);
}

.nav__list--flyout .nav__item--active-branch > a:before,
.nav__list--flyout .nav__item--active > a:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: .44rem;
  top: 50%;
  margin-top: -2px;
  background: linear-gradient(111.02deg, #0076FF 0%, #00B5E2 100%);
  border-radius: 4px;
}



.nav__list--level2 {
  top: 100%;
  margin-inline-start: -20px;
}

.nav__list--level3,
.nav__list--level3 .nav__list--flyout {
  top: 0;
  left: 100%;
  margin-top: -10px;
}



/* Mega flyouts */

.nav__item--mega-branch {
  position: static;
}

.nav__mega {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 6;
  box-shadow: 0px 32px 64px rgba(39, 47, 61, 0.05), 0px 16px 32px rgba(39, 47, 61, 0.05);
  border-radius: 24px;
  transform-origin: center top;
}

.nav--on-hover li:hover > .nav__mega,
.nav--on-hover .nav__item--expanded > .nav__mega,
.nav--on-click .nav__item--expanded > .nav__mega {
  width: auto;
  height: auto;
  opacity: 1;
  animation: .2s ease-in-out forwards navbarFlyout;
  max-height: calc(100vh - 115px);
  overflow-y: auto;
  /*-----------------------Sync Edits---------------------*/
  max-width: 1140px;
  padding: 10px 0px; /*-----theme original setting: 43.2px 24px;---------------------*/
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #0D1A36;
}

.hs-inline-edit .nav__mega {
  display: none;
}

.hs-inline-edit .nav--on-hover li:hover > .nav__mega {
  display: block;
}

.nav__mega-cols {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0; /*---------Sync Adjust to match XD replaced var.gutter------------*/
/*   margin-bottom: 24px; */
}

/* .nav__mega-col {
  margin-bottom: 0px; /*---------theme original setting: 24px------------*/
} */

.nav__mega-cols--fixed .nav__mega-col {
  min-width: 4.1rem;
  margin-inline-end: 3.64rem;
  margin-bottom: 24px;
}

.nav__mega-col:last-child {
  margin-inline-end: 0;
}

.nav__mega-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__mega-col ul a {
  display: block;
  margin-bottom: 1.5rem; /*---------Sync Adjust theme stock: 1.11rem; ------------*/
  position: relative;
  text-decoration: none;
  font-weight: 700;
}

.nav__mega-col ul ul {
  font-size: 0.89rem;
  margin-top: -18px; /*---------Sync Adjust ------------*/
}

.nav__mega-col ul ul a {
  margin-bottom: 0;
  padding-bottom: .4rem; /*---------Sync Adjust theme stock: 1.11rem; ------------*/
  font-size: .88rem;
  border-bottom: none;
 font-weight: 300;
}

/* Arrows */

.nav--arrows .nav__list--level1 > .nav__item--branch > a {
  padding-inline-end: 22px; /* 1 */
  background-position: right calc(50% + .056rem);
  background-repeat: no-repeat;
  background-size: 16px auto;
}

.nav--arrows .nav__list--level1 > .nav__item--branch > a::before {
  right: 22px; /* 1 */
}



/* Light scheme */

.nav--light .nav__link,
.nav--light .nav__link:hover,
.nav--light .nav__mega-col ul a {
  color: #272F3D;
}

.nav--light .nav__list--level1 > li > a::before {
  background-color: linear-gradient(111.02deg, #0076FF 0%, #00B5E2 100%);
}

.nav--light .nav__list--flyout,
.nav--light .nav__mega {
  background-color: #fff;
}

.nav--light .nav__list--flyout li:not(:first-child) > a {
  border-top-color: #84909A;
}

.nav--light .nav__list--flyout li:hover > a,
.nav--light .nav__list--flyout .nav__item--active-branch > a,
.nav--light .nav__list--flyout .nav__item--active > a {
  background-color: #E5E5E5;
  color: #272F3D;
}

.nav--light .nav__mega-col ul ul a {
  color: #000E33;
}

.nav--light .nav__mega-col ul a:hover,
.nav--light .nav__mega-col ul ul a:hover {
  color: #0076FF;
}

.nav--light.nav--arrows .nav__list--level1 > .nav__item--branch > a {
  background-image: url("data:image/svg+xml, <svg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'><path d='M3.60311 4.14644C3.40785 4.34171 3.40785 4.65829 3.60311 4.85356L6.60312 7.85355C6.79837 8.0488 7.11497 8.0488 7.31022 7.85355L10.3102 4.85356C10.5055 4.65829 10.5055 4.34171 10.3102 4.14644C10.115 3.95119 9.79837 3.95119 9.60312 4.14644L6.95667 6.7929L4.31022 4.14644C4.11496 3.95119 3.79838 3.95119 3.60311 4.14644Z' fill='%23000E33'></path></svg>");
}

/* Dark scheme */

.nav--dark .nav__link,
.nav--dark .nav__link:hover,
.nav--dark .nav__mega-col ul a {
  color: #fff;
}

.nav--dark .nav__list--level1 > li > a::before {
  background-color: linear-gradient(111.02deg, #0076FF 0%, #00B5E2 100%);
}

.nav--dark .nav__list--flyout,
.nav--dark .nav__mega {
  background-color: #272F3D;
}

.nav--dark .nav__list--flyout li:not(:first-child) > a {
  border-top-color: rgba(255, 255, 255, .2);
}

.nav--dark .nav__list--flyout li:hover > a,
.nav--dark .nav__list--flyout .nav__item--active-branch > a,
.nav--dark .nav__list--flyout .nav__item--active > a {
  background-color: rgba(255, 255, 255, .1);
  color: #fff;
}

.nav--dark .nav__mega-col ul ul a {
  color: rgba(255, 255, 255, 0.80);
}

.nav--dark .nav__mega-col ul a:hover,
.nav--dark .nav__mega-col ul ul a:hover {
  color: #0076FF;
}

.nav--dark.nav--arrows .nav__list--level1 > .nav__item--branch > a {
  background-image: url("data:image/svg+xml, <svg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'><path d='M3.60311 4.14644C3.40785 4.34171 3.40785 4.65829 3.60311 4.85356L6.60312 7.85355C6.79837 8.0488 7.11497 8.0488 7.31022 7.85355L10.3102 4.85356C10.5055 4.65829 10.5055 4.34171 10.3102 4.14644C10.115 3.95119 9.79837 3.95119 9.60312 4.14644L6.95667 6.7929L4.31022 4.14644C4.11496 3.95119 3.79838 3.95119 3.60311 4.14644Z' fill='%23ffffff' fill-opacity='0.80'></path></svg>");
}