/* ===== 1. CSS Reset (modern minimal) ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* ===== 2. Design Tokens (Variables) ===== */
:root {
  /* Colors */
  --color-bg: hsl(228, 45%, 98%);
  --color-text: hsl(0, 0%, 0%);
  --color-primary: var(--colour-brand-pink-700);
  --color-accent: var(--colour-brand-purple-700);

  --color-white: white;
  --color-black: black;

  --colour-brand-pink-700: hsl(339, 80%, 48%);
  --colour-brand-purple-500: hsl(320, 48%, 46%);
  --colour-brand-purple-700: hsl(318, 63%, 37%);
  --colour-brand-teal-900: hsl(178, 48%, 15%);
  --colour-brand-teal-700: hsl(178, 100%, 35%);
  --colour-brand-teal-100: hsl(178, 37%, 87%);
  --colour-brand-blue-900: hsl(194, 54%, 18%);
  --colour-brand-blue-100: hsl(195, 59%, 88%);
  --colour-brand-blue-50: hsla(195, 59%, 88%, 0.5);

  --colour-footer-blue: hsl(224, 68%, 15%);

  /* Typography */
  --font-base: var(--font-sans);
  --font-sans: "Helvetica Neue", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);

  /* Spacing scale */
  --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-lg: clamp(2rem, 1.5rem + 1vw, 3rem);

  /* Radius */
  --radius: 0.5rem;

  /* Container */
  --max-width: 1100px;

  /* Transition */
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

/* Dark mode automatically */
@media (prefers-color-scheme: dark) {
  :root {
    /*--color-bg: hsl(210 15% 10%);*/
    /*--color-text: hsl(210 15% 90%);*/
  }
}

/* ===== 3. Base styles ===== */

body {
  font-family: var(--font-base), sans-serif;
  font-size: var(--font-size);
  background: var(--color-bg);
  color: var(--color-text);
  /*padding: var(--space-md);*/
  margin: 0;
  padding: 0;
}

/* Low-specificity styling */
:where(h1, h2, h3) {
  /*line-height: 1.2;*/
}

:where(p) {
  /*max-width: 65ch;*/
}

/* ===== 4. Layout utilities ===== */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
}

.stack > * + * {
  margin-block-start: var(--space-md);
}

/* Grid utility */
.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}


/* Links */
a {
  color: var(--colour-brand-purple-500);
  text-decoration: underline;
}


/* ===== 5. Components ===== */
.card {
  padding: var(--space-md);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 10px 20px hsl(0 0% 0% / 0.05);
}

@media (prefers-color-scheme: dark) {
  .card {
    background: hsl(210 15% 15%);
  }
}

.button {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: white;
  text-decoration: none;
}

.button:hover {
  background: color-mix(in srgb, var(--color-primary), black 15%);
}


a.kb-help-tab-link-container {
  background: #ff0066;
  border-radius: 14px 14px 0 0;
  border: none;
  color: #ffffff;
  display: block;
  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: 16px;
    font-weight: 600;
  }

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


.main-menu-dropdown {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

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

#productMenu, #supportMenu, #mtdMenu {
  background: #293033;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  padding: 56px 0 40px;
  position: absolute;
  top: 87px;
  width: 100%;
  z-index: 80;
}

#productMenu {
  box-sizing: content-box;
  padding: 0;
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #30393d 50%, #30393d 100%);
}

.productMenuText a {
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6em;
  text-decoration: none;
}

.productMenuText a:visited a:link {
  text-decoration: none;
}

.productMenuText a:hover {
  text-decoration: underline;
}

.productMenuTitle {
  vertical-align: top;
}

.productMenuTitle, .productMenuTitle a {
  color: #ffffff !important;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.4em;
  text-decoration: none;
}

.productMenuTitle a:link a:visited a:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6em;
  text-decoration: none;
}

.productMenuApplicationGroup {
  padding-bottom: 10px;
  color: #828c8e;
  padding-right: 30px;
}

a.productMenuApplications {
  color: #ffffff !important;
  line-height: 1.7em;
  font-size: 14px;
}

.productMenuNewPill {
  background-color: #ff0066;
  border-radius: 1px;
  color: white;
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  height: 15px;
  margin-left: 8px;
  margin-top: 2px;
  text-align: center;
  vertical-align: text-top;
  width: 29px;

}

.productMenuTableCell {
  padding-right: 40px;
  padding-top: 30px;
  vertical-align: top;
}

.productMenuTitle a:hover {
  text-decoration: underline;
}

.productMenuSubHeading {
  color: #828c8e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6em;
  padding-bottom: 10px;
}

.productMenuText .productMenuSubHeading a {
  color: #828c8e !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6em;
}


h2.productMenuTitle {
  margin: 0;
  padding: 0 0 1rem;
}

.main-menu-list-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
}

.main-menu-list {
  flex-grow: 1;
}

.main-menu-list-with-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-menu-list ul {
  padding: 0 0 16px 0;
  margin: 0 0 30px;
}

.main-menu-list ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu-list ul li a {
  display: block;
}

.main-menu-list ul li a .productMenuNewPill {
  height: auto;
  line-height: 1.6em;
  padding: 0 1px;
  vertical-align: text-top;
}

a.main-menu-footer-call-to-action {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: inline-block;
  font-size: 14px;
  margin: 24px 0 40px; /* 16px ul padding + 24px = 40px */
  padding: 0.9em 1.35em;
  text-align: center;
}

a.main-menu-footer-call-to-action:hover {
  background-color: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

a.main-menu-footer-call-to-action span {
  background-image: url("data:image/svg+xml;utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M6.22%203.22a.75.75%200%200%201%201.06%200l4.25%204.25a.75.75%200%200%201%200%201.06l-4.25%204.25a.751.751%200%200%201-1.042-.018.751.751%200%200%201-.018-1.042L9.94%208%206.22%204.28a.75.75%200%200%201%200-1.06Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  background-position: 100% 80%;
  background-repeat: no-repeat;
  padding-right: 18px;
}

.main-menu-split-container {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
}

.main-menu-split-section {
  padding: 56px 40px 0 0;
  background-color: #293033;
}

h3.productMenuSubHeading {
  margin: 1.4em 0 0.7em;
  text-transform: uppercase;
  padding: 0;
}

h4.productMenuSubHeading {
  color: #6c767a;
  font-size: 12px;
  text-transform: uppercase;
  border: none;
  padding: 0;
  margin: 0.6em 0 0.4em;
}

h2.productMenuTitleSmaller {
  font-size: 16px;
  line-height: 24px !important;
}

.split-section-light {
  background-color: #30393d;
  padding: 56px 0 0 40px;
}

#myAccountMenu,
#basketMenu {
  width: 375px;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 87px;
  background: #293033;
  color: #fff;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 101;
}


#header {
  height: 87px;
  background: #fff;
  width: 100%;
  z-index: 2000;
}

#header-container {
  max-width: 1000px;
  height: 87px;
  margin: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#headerLoginBasket {
  display: flex;
  gap: 10px;
}

#headerLogin {
}

#customerInfoPanel {
  color: #919191;
  text-align: right;
  padding-top: 3px;
}

#customerInfoPanel a {
  color: #919191;
  text-decoration: none;
}

#customerInfoPanel a:hover a:active {
  color: #919191;
  text-decoration: underline;
}

#basketButton {
  padding: 6px 4px 3px 8px;
  border: 1px solid #c6ced1;
  border-radius: 3px;
  cursor: pointer;
  width: 28px;
}

#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: 16px;
  font-weight: 600;
  margin: 0 0 5px;
  color: #828c8e;
}

.sidebar-box .basketWidgetLink {
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%; /* 18px */
  letter-spacing: -0.18px;
  width: 100%;
  padding: 10px 20px;
  background: linear-gradient(95deg, var(--colour-brand-pink-700) -1.82%, var(--colour-brand-purple-700) 102.47%);
}

.sidebar-box .basketWidget {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-box .basketWidgetSummary {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-white);
  border: 1px solid var(--colour-brand-blue-100);
  margin-bottom: var(--space-md);
}

.sidebar-box .basketWidgetHeading {
  background-color: #d0eaf3;
  padding: 15px;
  color: #0c1a40;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

p.basketWidgetMessage {
  margin: 0 0 5px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
}

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

.basketWidgetApplicationName {
  font-size: 15px;
  font-weight: 600;
}

.basketWidgetProducts {
  margin: 0 0 5px;
  list-style: none;
  padding: 5px 8px;
}

.basketWidgetProduct {
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 2px;
  padding: 0;
}

.basketWidgetItemsContainer,
.basketWidgetValueContainer {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
}

.basketWidgetValuePrice {
  font-family: var(--font-mono);
}

.basketWidgetItems {
  padding: 3px;
  background: #fbced8;
  min-width: 1.3em;
  font-size: 1em;
  font-family: var(--font-mono);
  line-height: 1em;
  text-align: center;
  color: #461526;
  font-weight: 600;
}

#basketMenu .basketWidgetVatLabel {
  color: #ccc;
}

.loginButton {
  width: 115px;
  height: 34px;
  padding: 6px 0px 0px 0px;
  font-weight: 600;
  font-size: 18px;
  display: block;
  background-position: 50% 0%;
  background: #ff0066 url('/images/uniGrade.png');
  border-radius: 5px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  float: left;
  border: none;
  font-family: 'Open Sans', sans-serif;
}

.loginButtonModern {
  padding: 7px 19px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: none;
  font-family: 'Open Sans', sans-serif;
  background: #ff0066 linear-gradient(0deg, #e5005c 0%, #ff0066 100%);

}

.loginButtonModern:hover,
.loginButtonModern:focus,
.loginButtonModern:active {
  background: #ec005f;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.04);
}

.blackLoginButton {
  height: 25px;
  font-weight: 600;
  font-size: 15px;
  display: block;
  background-position: 50% 0%;
  background: transparent;
  border-radius: 5px;
  text-align: center;
  color: #293033;
  cursor: pointer;
  float: left;
  border: none;
  font-family: 'Open Sans', sans-serif;
  text-transform: none;
  border-radius: 0.2em;
  padding: 10px 14px 5px 15px;
  border: 1px solid #c6ced1;
  user-select: none;
}

.blackLoginButtonActive {
  background: #293033 !important;
  color: #fff;
  border: 1px solid #293033;
}

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

.blackLoginButton .tc-caret {
  /*background:url(/images/dropmenu-arrow-white.png) no-repeat;
  background:url(/images/dropmenu-arrow-white.svg) no-repeat;*/
  margin-top: 12px;
}

.loginButtonOutline {
  width: 104px;
  height: 40px;
  font-weight: 400;
  font-size: 18px;
  display: block;
  background-position: 50% 0%;
  background: transparent;
  border-radius: 5px;
  border: 1px solid #fff !important;
  text-align: center;
  color: #fff;
  cursor: pointer;
  float: left;
  border: none;
  font-family: 'Open Sans', sans-serif;
  text-transform: none;
  border-radius: 0.2em;
  padding: 7px 15px !important;
}

.loginButton:hover {
  background-position: 50% 50%;
}

#loginBox a {
  color: #ffffff;
}

#loginBox img {
  margin-right: 6px;
  margin-top: 2px;
}

#loginForm {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 87px;
  padding: 22px 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 101;
  display: block;
  background: #293033;
}

#loginForm p,
#loginForm p label {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  margin: 0;
}

#loginForm a {
  color: #ffffff;
  font-size: 11px;
  text-decoration: none;
}

#loginForm a:hover {
  text-decoration: underline;
}

#loginForm input[type=text] {
  font-size: 16px;
  padding: 10px 5px 10px 5px;
  width: 340px;
  background: #ffffff;
  color: #000000;
  border: 0;
  height: 15px;
  margin: 5px 0 10px 0;

}

#loginForm input[type=password] {
  font-size: 16px;
  padding: 10px 5px 10px 5px;
  width: 340px;
  background: #ffffff;
  color: #000000;
  border: 0;
  height: 15px;
  margin: 5px 0 10px 0;
}

#myAccountMenu .leftNav {
  background: transparent;

  li,
  li a {
    font-size: 13px;
    padding: 3px 10px 3px 15px;
    background: transparent;
    color: #fff;
    border: none;
  }

  li a {
    padding: 0px 10px 0px 0px;
    font-size: 15px;
  }

  li.leftNavSubHead {
    font-size: 15px;
    padding: 0px 9px 15px 0px;
    color: #828c8e;
    font-weight: 300;
    border-bottom: 1px solid #3c4344;
    margin: 15px 15px 15px 15px;
  }

  li.leftNavSubSurvey {
    margin-bottom: 15px;

    a {
      color: #0092b2;
      font-size: 15px;
      font-weight: 600;
    }
  }

  li:last-child,
  li.section-border-top {
    border-top: 1px solid #3c4344;
    font-weight: 400;
  }

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

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

  ul.advancedSecurityMenuItems {
    li {
      padding: 3px 0;

      a {
        padding: 0 10px 0 25px;
      }
    }
  }
}


.productContainer {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-areas: "sidebar main";
  gap: var(--space-md);
}

.productVersionsOpenerText {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;

  h2 {
    border: none;
    color: #461526;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    margin: 0;
    line-height: 100%;
  }

  p {
    font-size: 22px;
    font-weight: 300;
    margin: 1.5em 0 2.3em;
    padding: 0;
  }
}

.productSidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);

  .sidebar-box {
    padding: 0;

    .sidebar-header {
      background-color: var(--colour-brand-blue-100);
      padding: 15px;

      h3 {
        color: #0c1a40;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        margin: 0;
        padding: 0;
      }
    }

    .sidebar-body {
      padding: 10px;
      background: var(--color-white);
      border: 1px solid var(--colour-brand-blue-100);

      ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        li {
          list-style: none;
          margin: 0;

          a {
            display: flex;
            padding: 3px 10px;
            gap: var(--space-xs);
            align-items: flex-start;
            justify-content: space-between;
            text-decoration: none;
            color: var(--color-text);
            font-size: 1rem;

            &.active {
              background: var(--colour-brand-blue-50);
            }
          }
        }
      }

      span.application-indicator {
        display: block;
        padding: 3px;
        background: #fbced8;
        min-width: 1.3em;
        font-family: var(--font-mono);
        font-size: 1em;
        line-height: 1em;
        text-align: center;
        color: #461526;
        font-weight: 600;
      }
    }
  }
}

/* Status Page */

.supportServiceGroupHeading {
	font-size: 16px;
	padding: 10px 0;
	vertical-align: top;
	width: 145px;
}

.supportServiceGroup {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 0 10px;
}

.supportServiceStatusBox {
	align-items: center;
	background-color: rgba(0,0,0,0.04);
	border-radius: 21.5px;
	box-sizing: border-box;
	display: flex;
	min-width: 243px;
	padding: 10px 20px 10px 10px;
	text-align: left;
}

.supportServiceStatusBox .supportServiceStatusCircle {
	background-color: rgba(0,0,0,0.07);
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0px 1px 1px white, inset 0 0 0 2px white;
	display: inline-block;
	height: 20px;
	width: 20px;
 	flex: none;
}

.supportServiceStatusBox span {
	display: inline-block;
	font-size: 16px;
	line-height: 1.3em;
	margin-left: 15px;
}

.supportServiceStatusBox.serviceStatusGreen {
    background-color: #DCFBEE;
}

.supportServiceStatusBox.serviceStatusGreen .supportServiceStatusCircle {
	background-color: #11A96A;
	border-color: #11A96A;
}

.supportServiceStatusBox.serviceStatusAmber {
    background-color: #FCEDDE;
}

.supportServiceStatusBox.serviceStatusAmber .supportServiceStatusCircle {
	background-color: #D35B00;
	border-color: #D35B00;
}

.supportServiceStatusBox.serviceStatusRed {
    background-color: #FDE7E7;
}

.supportServiceStatusBox.serviceStatusRed .supportServiceStatusCircle {
	background-color: #C92100;
	border-color: #C92100;
}

.supportServiceGroupMessage {
	font-size: 14px;
}