a.kb-help-tab-link-container {
  background: #ff0066;
  border-radius: 14px 14px 0 0;
  border: none;
  color: #ffffff;
  display: none;
  padding: 9px 18px;
  position: fixed;
  right: 0;
  text-decoration: none;
  top: calc(50% - 50px);
  transform-origin: right bottom;
  transform: rotate(270deg) translateX(50%);
  transition: var(--default-transition-duration) var(--default-transition-timing-function) all;
  z-index: 100;

  .kbHelpTab {
    font-size: var(--font-size-md);
    font-weight: 600;
  }

  &:hover, &:focus, &:focus-visible {
    background-color: black;
    outline: none;
    text-decoration: none;
  }
}

@media (min-width: 576px) {
  a.kb-help-tab-link-container {
    display: block;
  }
}

#header {
  background: linear-gradient(45deg, var(--colour-bg), var(--colour-bg-50));
  backdrop-filter: blur(24px);
  width: 100%;
  z-index: 2000;
}

/* Sticky Header */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  z-index: 1000;
}

/* Only used during snapping */
#header.snap {
  transition: transform 0.2s ease-out;
}

/* End Sticky Header */

#header-container {
  max-width: var(--max-width);
  /*min-width: var(--min-width);*/
  margin: auto;
  position: relative;
  display: flex;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  padding: var(--container-padding);
}

@media (min-width: 576px) {
  #header-container {
    padding: 24px var(--container-padding);
  }
}

#headerLoginBasket {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.header__basket-button__container {
  display: flex;
  border: 1px solid transparent;
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) padding-box,
  var(--button-primary-background) border-box;

  &, &:hover, &:active {
    text-decoration: none;
  }

  .header__basket-button__icon {
    background: url('/images/ecom-assets/basket_pink.svg') 50% / 20px no-repeat var(--colour-bg);
    height: 38px;
    width: 38px;
  }

  .header__basket-button__core-product-count {
    background: var(--colour-brand-pink-100);
    color: var(--colour-brand-pink-900);
    font-weight: 500;
    height: 38px;
    line-height: 38px;
    min-width: 38px;
    padding: 0 10px;
    text-align: center;
  }
}

#myAccountMenu,
#basketMenu {
  width: 100vw;
  max-width: 375px;
  max-height: calc(100vh - 175px);
  height: auto;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--colour-menu-background);
  color: var(--colour-brand-purple-600);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 101;
}

.main-menu-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.main-menu-dropdown-menu.is-visible {
  opacity: 1;
  visibility: visible;
}

#basketButton {
  cursor: pointer;
}

#basketButton img {
  width: 25px;
  height: 25px;
  margin-top: 2px;
}

#basketMenu .basketWidgetLink {
  text-decoration: none;
  color: white;
  background: #ff0066;
  border-radius: 5px;
  font-weight: 600;
  display: block;
  text-align: center;
  padding: 7px;
  margin-top: 5px;
}

#basketMenu .basketWidget {
  padding: 15px;
  background: #293033;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#basketMenu .basketWidgetSummary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#basketMenu .basketWidgetHeading {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin: 0 0 5px;
  color: #828c8e;
}

#basketMenu a.basketWidgetMessageLink,
#basketMenu a.basketWidgetMessageLink:hover,
#basketMenu a.basketWidgetMessageLink:active,
#basketMenu a.basketWidgetMessageLink:visited {
  color: #8bc3ff;
}

#basketMenu .basketWidgetVatLabel {
  color: #ccc;
}

.blackLoginButton {
  color: var(--button-primary-text-color);
  background-image: var(--button-primary-background);
  background-size: 100%;
  font: var(--button-primary-font);
  letter-spacing: var(--button-primary-letter-spacing);
  text-decoration: var(--button-primary-text-decoration);
  text-align: var(--button-primary-text-align);
  line-height: var(--button-primary-line-height);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  padding: 12px 22px;
  cursor: pointer;
  text-transform: none;
  border: none;
  user-select: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-xs);

  &:hover {
    background-size: 1000%;
  }
}

.blackLoginButtonActive .tc-caret {
  background: url(/images/dropmenu-arrow-white.svg) no-repeat !important;
}


#loginForm {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  padding: var(--space-md);
  z-index: 101;
  display: block;
  background: var(--colour-brand-pink-100);
  color: var(--colour-brand-purple-600);
  max-width: 380px;
  width: 100vw;

  .loginForm__form-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  h3 {
    text-align: center;
    font-size: var(--font-size-xlp);
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  label {
    font-size: var(--font-size-sm);
    color: var(--colour-brand-blue-900);
    font-weight: 400;
    margin: 0;
  }

  a {
    color: var(--colour-brand-purple-600);
    text-decoration: underline;
  }

  input[type=text],
  input[type=password] {
    width: 100%;
  }

  .login-form__footer {
    display: flex;
    flex-direction: row;
    gap: var(--space-sm);
    align-items: end;
    justify-content: space-between;

    .login-form__buttons {
      display: flex;
      gap: var(--space-sm);
      flex-direction: column;
      align-items: start;

      .login-form__remember-me {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--font-size-sm);
        flex-direction: row;

        label {
          text-wrap: nowrap;
        }
      }
    }
  }

  .login-form__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: end;
    text-align: end;
    font-size: var(--font-size-sm);

    a {
      text-wrap: nowrap;
    }
  }
}

@media (min-width: 576px) {
  #headerLogin {
    position: relative;
  }
}

#header .logo a {
  height: clamp(20px, 10vw, 50px);
  width: clamp(20px, 10vw, 50px);
  background: url(/images/ecom-assets/tc-logo-cube.svg) no-repeat 50% / contain;
  display: block;
}

@media (min-width: 768px) {
  #header .logo a {
    position: relative;
    top: 3px;
    display: inline-block;
    background: url(/images/logos/taxcalc-logo-animated.gif) no-repeat 50% / 100%;
    height: 50px;
    width: 210px;
  }
}

/* Legacy Nav, AML-only */

.nav_text {
  font-size: var(--font-size-sm);
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  height: 40px;
  border-collapse: collapse;
}

.nav_text tbody {
  margin: 0;
  padding: 0;
  border: 0;
}

.nav_text td:hover {
  cursor: pointer;
  text-decoration: none;
}

.nav_text a:visited, .nav_text a:hover {
  color: inherit;
}

#header .nav_cell,
.nav_cell {
  padding: 4px 10px;
  font-size: var(--font-size-md);
  font-weight: 600;
  white-space: nowrap;
  color: #293033;
}

#header .nav_cell.caret_holder,
.nav_cell.caret_holder {
  position: relative;
  padding-right: 27px;
  user-select: none;
}

#basketButton.caret_holder {
  position: relative;
  padding: 6px 21px 3px 8px;
  user-select: none;
}

.nav_cell a {
  color: #293033;
  text-decoration: none;
  margin-right: 30px;
}

.nav_cell a:visited a:link {
  color: #ffffff;
  text-decoration: none;
}

.tc-caret {
  width: 11px;
  height: 6px;
  background: url(/images/dropmenu-arrow.svg) no-repeat;
  background-size: 11px;
  display: inline-block;
  transform: rotate(0deg);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);

  &.myAccountCaret {
    transition: all var(--default-transition-duration) var(--default-transition-timing-function), background 0ms;
    transform-origin: 50% 50%;
    background: url(/images/dropmenu-arrow-white.svg) no-repeat;
  }

  &.open {
    transform: rotate(-180deg);
    transition: all var(--default-transition-duration) var(--default-transition-timing-function);
    top: 6px;

    &.myAccountCaret {
      transition: all var(--default-transition-duration) var(--default-transition-timing-function), background 0ms;
      transform-origin: 50% 50%;
    }
  }
}

#myAccountMenu .leftNav {
  background: transparent;
  list-style: none;
  margin: 0;
  padding: 0;

  li,
  li a {
    font-size: var(--font-size-sm);
    padding: 3px 10px 3px 15px;
    background: transparent;
    color: var(--colour-brand-purple-600);
    border: none;
  }

  li a {
    display: block;
    padding: 1px;
    font-size: var(--font-size-md);
    text-decoration: none;
  }

  li.leftNavSubHead {
    font-size: var(--font-size-md);
    padding: 0 9px 15px 0;
    color: var(--colour-brand-pink-900);
    font-weight: 300;
    border-bottom: 1px solid hsla(339, 54%, 18%, 0.15);
    margin: 15px 15px 15px 15px;
  }

  li.leftNavSubSurvey {
    margin-bottom: 15px;

    a {
      color: #0092b2;
      font-size: var(--font-size-md);
      font-weight: 600;
    }
  }

  li.has-children {
    padding: 0;

    h4 {
      display: none;
    }

    ul.advancedSecurityMenuItems {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        padding: 3px 10px 3px 15px;
        list-style: none;

        &:last-child {
          padding: 3px 10px 3px 15px;
          margin: inherit;
          border: none;
        }
      }
    }
  }

  li:last-child,
  li.section-border-top {
    border-top: 1px solid hsla(339, 54%, 18%, 0.15);
    font-weight: 400;
  }

  li.section-border-top {
    padding: 16px 0 0 0;
    margin: 18px 10px 0 15px;
  }

  li:last-child {
    padding: 14px 9px 15px 0;
    margin: 20px 10px 5px 15px;
  }
}

@media (min-width: 576px) {
  #myAccountMenu .server-info {
    display: none;
  }
}


/* Nav Main Menu */

.nav-wrapper {
  flex: 1;
  display: flex;
  justify-content: end;
}

.nav-menu,
.main-menu-dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: var(--colour-white);
  padding: var(--space-sm);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--font-size-md);
  width: 100%;

  &.active {
    opacity: 1;
    visibility: visible;
  }

  .main-menu-dropdown-menu {
    opacity: 1;
    visibility: visible;
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }

  .main-menu-dropdown.active > .main-menu-dropdown-menu {
    display: flex;
  }
}

.nav-menu a,
.nav-toggle,
.main-menu-dropdown-toggle {
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
  color: #293033;
  border: 1px solid transparent;

  &:hover,
  &[aria-expanded="true"] {
    color: #293033;
    text-decoration: none;
    background-color: rgba(162, 169, 189, 0.174);
    border-color: rgba(208, 212, 223, 0.379);
  }
}

.nav-menu a,
.main-menu-dropdown-toggle {
  width: 100%;
  display: flex;
}

.nav-toggle,
.main-menu-dropdown-toggle {
  --chevron-width: 12px;
  --chevron-offset: 9px;

  cursor: pointer;
  position: relative;
  padding-right: calc(var(--space-sm) + var(--chevron-width) + var(--chevron-offset));

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: var(--space-sm);
    width: var(--chevron-width);
    height: 100%;
    background: url(/images/ecom-assets/arrow-down.svg) 50% / var(--chevron-width) no-repeat transparent;
    border: none;
    margin: 0;
    transition: transform var(--default-transition-duration) var(--default-transition-timing-function);
  }

  &[aria-expanded="true"]::after {
    transform: rotate(-180deg);
  }
}

.nav-toggle {
  height: 40px;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: var(--space-sm);
}

@media (min-width: 576px) {
  #nav {
    position: relative;
  }

  .nav-menu {
    width: auto;
  }
}

@media (min-width: 992px) {
  .nav-wrapper {
    justify-content: center;
  }

  .nav {
    flex-wrap: nowrap;
  }

  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    width: auto;
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    position: static;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;

    & > li {
      position: relative;
    }

    .main-menu-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      background: var(--colour-white);
      padding: var(--space-sm);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      border-radius: 0;
      margin-top: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
      display: flex;

      .main-menu-dropdown.active > & {
        opacity: 1;
        visibility: visible;
      }

      .main-menu-dropdown {
        position: relative;
      }

      .main-menu-dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: var(--space-sm);
        padding-left: var(--space-sm);
      }
    }
  }

}