@charset "utf-8";

/* ==========================
   Custom brand fonts (Assets)
   ========================== */

@font-face {
  font-family: "NTBau";
  src: url("$assets/NTBau-Regular.otf") format("opentype");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Degular";
  src: url("$assets/Degular.otf") format("opentype");
  font-style: normal;
  font-display: swap;
}

.fa-icon,
blockquote:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
}

/**********
 Variables
 **********/
body {
  /* Text */
  --text-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
  --heading-font-family: 'Lato', sans-serif;
  --text-font-size: 16px;
  --text-font-size-large: calc(16px + 2px);
  --heading-1-font-size: 48px;
  --heading-2-font-size: 32px;
  --heading-3-font-size: 24px;
  --heading-4-font-size: 20px;
  --heading-5-font-size: 16px;
  --heading-6-font-size: calc(16px - 2px);
  /* Other */
  --border-radius-base: 25px;
  --border-radius-small: calc(25px / 2);
  --border-radius-button: 100px;
  --logo-height: 40px;
  /* Assets */
  --assets-check-svg: url(/hc/theming_assets/01JKR5537G8Y77SD0RKMGWZSAS);
  --assets-circle-svg: url(/hc/theming_assets/01JKR553A13W4M1CW26V2HVWRH);
}

/* ==========================
   Force brand fonts globally
   ========================== */
body {
  --text-font-family: "NTBau", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heading-font-family: "Degular", "NTBau", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/**********
 Light mode
 **********/
body {
  --primary-color: rgba(26, 26, 26, 1);
  --secondary-color: rgba(95, 97, 255, 1);
  --primary-bg-color: #FFFFFF;
  --primary-bg-color-always: #FFFFFF;
  --secondary-bg-color: rgba(244, 242, 245, 1);
  --secondary-bg-color-always: rgba(244, 242, 245, 1);
  --primary-text-color: rgba(26, 26, 26, 1);
  --body-text-color: #1A1A1A;
  --secondary-text-color: rgba(119, 119, 119, 1);
  --border-color: rgba(255, 147, 113, 1);
  --info-color: rgba(197, 234, 255, 1);
  --success-color: rgba(134, 162, 33, 1);
  --warning-color: rgba(255, 192, 108, 1);
  --danger-color: rgba(255, 147, 113, 1);
  --primary-color-light-hover: #0b0b0b;
  --primary-color-hover: #000;
  --primary-color-active: #000;
  --secondary-color-hover: #2225ff;
  --secondary-color-active: #1315ff;
  --secondary-bg-color-hover: #eae6ec;
  --secondary-bg-color-active: #e5e1e8;
  --secondary-text-color-hover: #6d6d6d;
  --secondary-text-color-active: #686868;
  --link-color: #5F61FF;
  --link-color-hover: #1429ff;
  --link-color-active: #051cff;
  --bg-image-opacity: 0.5;
  --bg-image-opacity-dark: 0.5;
  --bg-image-color: var(--primary-text-color);
}

.layout--style-filled .section:nth-child(even),
.layout--style-invert .section:nth-child(odd),
.section--secondary {
  /* Invert colors */
  --primary-bg-color: rgba(244, 242, 245, 1);
  --secondary-bg-color: #FFFFFF;
}

/*********
 Dark mode
 *********/
.ui-dark body {
  /* UI dark colors */
  --primary-color: rgba(95, 97, 255, 1);
  --secondary-color: #fac63c;
  --primary-bg-color: rgba(26, 26, 26, 1);
  --primary-bg-color-always: rgba(26, 26, 26, 1);
  --secondary-bg-color: rgba(42, 42, 42, 1);
  --secondary-bg-color-always: rgba(42, 42, 42, 1);
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #a9a9ab;
  --link-color: rgba(255, 147, 113, 1);
  --border-color: rgba(255, 147, 113, 1);
  --info-color: rgba(197, 234, 255, 1);
  --success-color: rgba(134, 162, 33, 1);
  --warning-color: rgba(255, 192, 108, 1);
  --danger-color: rgba(255, 147, 113, 1);
  --primary-color-light-hover: #7e7fff;
  --primary-color-hover: #9c9dff;
  --primary-color-active: #acadff;
  --secondary-color-hover: #fcd778;
  --secondary-color-active: #fcdc87;
  --secondary-bg-color-hover: #494949;
  --secondary-bg-color-active: #505050;
  --link-color-hover: #ffd9cd;
  --link-color-active: #ffe4dc;
  --bg-image-opacity: 0.5;
  --bg-image-opacity-dark: 0.75;
  --bg-image-color: var(--primary-bg-color);


}

.ui-dark .layout--style-filled .section:nth-child(even),
.ui-dark .layout--style-invert .section:nth-child(odd),
.ui-dark .section--secondary {
  /* Invert colors */
  --primary-bg-color: rgba(42, 42, 42, 1);
  --secondary-bg-color: rgba(26, 26, 26, 1);
}

/***********
 Base styles
 ***********/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
html {
  min-height: 100vh;
}

[dir] body,
[dir] html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--text-font-family);
  font-size: var(--text-font-size);
  line-height: 1.5;
  color: var(--primary-text-color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[dir] body {
  background-color: var(--secondary-bg-color);
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--primary-text-color);
  border: none;
  background-color: var(--secondary-bg-color-always);
  border-radius: var(--border-radius-button);
  padding: 11px 31px;
}

a {
  color: var(--link-color);
  font-weight: 500;
}

a:hover {
  color: var(--link-color-hover);
}

a:active,
a.is-active {
  color: var(--link-color-active);
}

[dir] a.is-disabled {
  cursor: default;
}

a.is-disabled,
a.is-disabled:hover,
a.is-disabled:active,
a.is-disabled.is-active {
  color: var(--secondary-text-color);
}

[dir] a,
[dir] button,
[dir] [type=submit],
[dir] [type=button],
[dir] [type=reset] {
  cursor: pointer;
}

a,
input,
button,
select,
textarea,
label {
  transition: all 400ms cubic-bezier(0.17, 0.67, 0.54, 1);
}

a:focus,
input:focus,
button:focus,
select:focus,
textarea:focus,
label:focus {
  outline: none;
}

a.focus-visible,
input.focus-visible,
button.focus-visible,
select.focus-visible,
textarea.focus-visible,
label.focus-visible {
  outline: auto 5px -webkit-focus-ring-color;
}

[dir] figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.markdown img{
  border: 1px solid #000000;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

[dir] .header--style-1 .header__avatar {
  border: none;
}

html {
  scroll-behavior: smooth;
}

/********
 Headings
 ********/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--heading-font-family);
}

h1,
.h1 {
  font-size: var(--heading-2-font-size);
  line-height: 1.2;
}

[dir] h1,
[dir] .h1 {
  margin: 0 0 1.2em;
}

[dir] .markdown h1,
[dir] .markdown .h1 {
  margin-top: 1.2em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {

  h1,
  .h1 {
    font-size: var(--heading-1-font-size);
    line-height: 1.1;
  }

  [dir] h1,
  [dir] .h1 {
    margin: 0 0 1em;
  }

  [dir] .markdown h1,
  [dir] .markdown .h1 {
    margin-top: 1em;
  }
}

h2,
.h2 {
  font-size: var(--heading-3-font-size);
  line-height: 1.3;
}

[dir] h2,
[dir] .h2 {
  margin: 0 0 1.3em;
}

[dir] .markdown h2,
[dir] .markdown .h2 {
  margin-top: 1.3em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {

  h2,
  .h2 {
    font-size: var(--heading-2-font-size);
    line-height: 1.2;
  }

  [dir] h2,
  [dir] .h2 {
    margin: 0 0 1.2em;
  }

  [dir] .markdown h2,
  [dir] .markdown .h2 {
    margin-top: 1.2em;
  }
}

h3,
.h3 {
  font-size: var(--heading-4-font-size);
  line-height: 1.4;
}

[dir] h3,
[dir] .h3 {
  margin: 0 0 1.4em;
}

[dir] .markdown h3,
[dir] .markdown .h3 {
  margin-top: 1.4em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {

  h3,
  .h3 {
    font-size: var(--heading-3-font-size);
    line-height: 1.3;
  }

  [dir] h3,
  [dir] .h3 {
    margin: 0 0 1.3em;
  }

  [dir] .markdown h3,
  [dir] .markdown .h3 {
    margin-top: 1.3em;
  }
}

h4,
.h4 {
  font-size: var(--heading-4-font-size);
  line-height: 1.4;
}

[dir] h4,
[dir] .h4 {
  margin: 0 0 1.4em;
}

[dir] .markdown h4,
[dir] .markdown .h4 {
  margin-top: 1.4em;
}

h5,
.h5 {
  font-size: var(--heading-5-font-size);
  line-height: 1.5;
}

[dir] h5,
[dir] .h5 {
  margin: 0 0 1.5em;
}

[dir] .markdown h5,
[dir] .markdown .h5 {
  margin-top: 1.5em;
}

h6,
.h6 {
  font-size: var(--heading-6-font-size);
  line-height: 1.5;
}

[dir] h6,
[dir] .h6 {
  margin: 0 0 1.5em;
}

[dir] .markdown h6,
[dir] .markdown .h6 {
  margin-top: 1.5em;
}

/**********************
 Other default elements
 *********************/
[dir] p,
[dir] ul,
[dir] ol,
[dir] dl,
[dir] pre,
[dir] table,
[dir] blockquote {
  margin: 1.5em 0 1.5em;
}

[dir] li {
  margin: 0.75em 0 0.75em;
}

small,
.small {
  font-size: var(--heading-6-font-size);
}

[role="main"] {
  flex-grow: 1;
  position: relative;
}

hr {
  display: block;
  height: 0;
}

[dir] hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  color: #1a1a1a;
}

[dir] pre {
  padding: 16px 20px;
  border-radius: 20px;
  background-color: #f3f4f6;
  border: 1px solid rgba(0,0,0,0.08);
}

/* Dark mode */
.ui-dark pre {
  color: rgba(255,255,255,0.88);
}

[dir].ui-dark pre {
  background-color: #2a2a2d;
  border: 1px solid rgba(255,255,255,0.08);
}

blockquote {
  display: block;
  position: relative;
  z-index: 2;
}

[dir=ltr] blockquote {
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}

[dir=rtl] blockquote {
  padding-right: 16px;
  border-right: 1px solid var(--border-color);
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {
  [dir=ltr] blockquote {
    padding-left: 24px;
  }

  [dir=rtl] blockquote {
    padding-right: 24px;
  }
}

@media only screen and (min-width: 980px) {
  [dir=ltr] blockquote {
    padding-left: 32px;
  }

  [dir=rtl] blockquote {
    padding-right: 32px;
  }
}

blockquote:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -4px;
  font-size: 60px;
  color: var(--secondary-bg-color);
}

[dir=ltr] blockquote:before {
  left: 8px;
}

[dir=rtl] blockquote:before {
  right: 8px;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9) and (max-width: 979px),
only screen and (min-width: 668px) and (min-height: 416px) and (max-width: 979px) {
  [dir=ltr] blockquote:before {
    left: 12px;
  }

  [dir=rtl] blockquote:before {
    right: 12px;
  }
}

@media only screen and (min-width: 980px) {
  [dir=ltr] blockquote:before {
    left: 16px;
  }

  [dir=rtl] blockquote:before {
    right: 16px;
  }
}

.list-unstyled {
  list-style: none;
}

[dir=ltr] .list-unstyled {
  padding-left: 0;
}

[dir=rtl] .list-unstyled {
  padding-right: 0;
}

dl.details {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}

[dir] dl.details {
  margin-bottom: 32px;
  margin-top: 0;
}

dl.details > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

dl.details > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

dl.details > dt {
  font-weight: 700;
}

[dir] dl.details > dt {
  margin-bottom: 12px;
}

[dir=ltr] dl.details > dt {
  margin-right: 8px;
}

[dir=rtl] dl.details > dt {
  margin-left: 8px;
}

[dir] dl.details > dd {
  margin-bottom: 12px;
}

dl.details > div {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

[dir] dl.details > div {
  margin-bottom: 12px;
}

dl.details--type-2 {
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

[dir] dl.details--type-2 {
  margin-bottom: 0;
}

dl.details--type-2 > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

dl.details--type-2 > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

dl.details--type-2 > dd {
  color: var(--secondary-text-color);
}

@media only screen and (min-width: 980px),
only screen and (max-width: 567px) and (max-aspect-ratio: 13 / 9) {
  [dir=ltr] dl.details--type-2 > dd {
    text-align: right;
  }

  [dir=rtl] dl.details--type-2 > dd {
    text-align: left;
  }
}

[dir] dl.details--no-margin {
  margin-bottom: 0;
}

.text-secondary {
  font-size: var(--heading-6-font-size);
  line-height: 1.5;
  color: var(--secondary-text-color);
}


/******
 Tables
 ******/
.table-container {
  display: block;
}

[dir] .table-container {

}

.table-container table:not(.pika-table) {
  width: calc(100% + 3px);
  max-width: calc(100% + 3px);
}

[dir] .table-container table:not(.pika-table) {
  margin: -1px;
}

table:not(.pika-table) {
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table:not(.pika-table) thead {
  font-weight: 700;
}

[dir] table:not(.pika-table) thead {
  background-color: var(--secondary-bg-color);
}

[dir] table:not(.pika-table) tfoot {
  background-color: var(--secondary-bg-color);
}

table:not(.pika-table) thead,
table:not(.pika-table) tbody,
table:not(.pika-table) tfoot {
  width: 100%;
  max-width: 100%;
}

[dir=ltr] table:not(.pika-table) th {
  border-left: 1px solid var(--border-color);
}

[dir=rtl] table:not(.pika-table) th {
  border-right: 1px solid var(--border-color);
}

[dir] table:not(.pika-table) td {
  padding: 8px;
  border: 1px solid var(--border-color);
}

/*******
 Iframes
 *******/
.iframe {
  display: block;
  width: 100%;
  height: 0;
  position: relative;
}

.iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

[dir=ltr] .iframe iframe {
  left: 0;
}

[dir=rtl] .iframe iframe {
  right: 0;
}

[dir] .markdown > * {
  margin: 1.5em 0 1.5em;
}






/******
keyfactor-additional-customization
 ******/

.keyfactor-request-form-area-row {
  display: flex;
  flex-wrap: wrap;
}

.keyfactor-request-form-area-column {
  flex-basis: 50%;
  padding: 30px;
}


.btn--md {
  padding: 0;
}

.nesty-panel {
  max-height: 350px
}

.btnsuserprofile {
  padding-top: 11px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* change search button background color */
[dir="ltr"] .search [type="submit"] {
  background-color: #424242;
  border: 0;
}

/* change search button background color - hover */
[dir="ltr"] .search [type="submit"]:hover {
  background-color: #FAC63C !important;
}

/* fix checkbox in form */
[dir] .form-field ul,
[dir] .form-field.boolean input {
  padding: 10px;
}

/* Fix long text disappearing under absolutely positioned Search button */
.welcome__content .search {
  position: relative;
  width: 100%;
  max-width: 680px;
}

.welcome__content .search input[type="search"] {
  width: 100%;
  padding-right: 150px; /* must be wider than the Search button */
  box-sizing: border-box;
}

.welcome__content .search [type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  white-space: nowrap;
}

/* Make the native search clear "X" flatter and gray */
.welcome__content .search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  margin-right: 8px;
  cursor: pointer;

  background:
    linear-gradient(45deg, transparent 46%, #777 46%, #777 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #777 46%, #777 54%, transparent 54%);
  border-radius: 0;
  box-shadow: none;
  opacity: 0.75;
}

.welcome__content .search input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
}


/*******
 Webinar Divs
 *******/

.link-container {
  background-color: #F5F4F6;
  margin: 10px;
  width: 50%;
  border-radius: 25px;
}

.link-container a {
  display: block;
  background: #F5F4F6;
  height: 100%;
  text-align: center;
  border-radius: 25px;
  color: #1a1a1a;
}

.link-container a:hover {
  background: #1A1A1A;
  color: #FFFFFF;
}


/*****
Announcement banner
*****/
.announcement {
  display: inline-block;
  height: 100%;
  text-align: center;
  width: 100%;
  background: #FFC06C;
  color: #1A1A1A;
  font-family: var(--text-font-family);
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 1em;
}

/*****
Welcome container
*****/

.welcome__bg {

  background-size: cover;
  height: 100%;
  color: $white;
  text-align: center;
}

body,
html {
  min-height: 100%;
}

/*COLOR MACROS*/

/*Code block*/
span[style*="color: #723609"] {
  color: var(--primary-text-color) !important;
  font-family: monospace, monospace !important;
  font-size: 1em !important;
  background-color: #e9ebed !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  padding: 0 5px !important;
  margin: 2px !important;
}

html.ui-dark span[style*="color: #723609"],
.ui-dark span[style*="color: #723609"] {
  color: rgba(255,255,255,0.88) !important;
  background-color: #2b2b2f !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/*Warning*/
span[style*="color: #7D1905"] {
  background-color: #ffe1d8;
  border-left: 4px solid #ff3a00;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  font-size: 1rem;
  color: #000000 !important;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

span[style*="color: #7D1905"]::before {
  content: "Warning: ";
  font-weight: bold;
  color: #000000; /* darker accent color */
}


/*Note*/
span[style*="color: #054580"] {
  background-color: #d8f1ff;
  border-left: 4px solid #5f61ff;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  font-size: 1rem;
  color: #000 !important;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

span[style*="color: #054580"]::before {
  content: "Note: ";
  font-weight: bold;
  color: #000000; /* darker accent color */
}


/*Tip*/
span[style*="color: #01512A"] {
  background-color: #e2ffd8;
  border-left: 4px solid #34e590;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  font-size: 1rem;
  color: #000 !important;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

span[style*="color: #01512A"]::before {
  content: "Tip: ";
  font-weight: bold;
  color: #000000; /* darker accent color */
}


/*Important*/
span[style*="color: #8B1379"] {
  background-color: #fff4d8;
  border-left: 4px solid #ffba00;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  font-size: 1rem;
  color: #000 !important;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

span[style*="color: #8B1379"]::before {
  content: "Important: ";
  font-weight: bold;
  color: #000000; /* darker accent color */
}


/*Versions*/
span[style*="color: #640A8E"] {
  background-color: #D8D9FF;
  border-left: 4px solid #0003ff;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  font-size: 1rem;
  color: #000 !important;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

span[style*="color: #640A8E"]::before {
  content: "Versions: ";
  font-weight: bold;
  color: #000000; /* darker accent color */
}



/*MW-Notification Banner CSS */
/* Common, default styles for the notification box */

/* change the background color by editing "background"  */
/* change the text color by editing "color"  */
.ns-box {
  position: relative;
  background: rgba(192, 57, 43, 0.85);
  padding: 10px 20px 20px 20px;
  line-height: 1.4;
  z-index: 1000;
  pointer-events: none;
  color: rgba(250, 251, 255, 0.95);
  font-size: 85%;
  border-bottom: 1px solid #DDD;
}

.ns-box.ns-show {
  pointer-events: auto;
}

.ns-box a {
  color: inherit;
  opacity: 0.7;
  font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
  opacity: 1;
}

.ns-box p {
  margin: 0;
}

.ns-box.ns-show,
.ns-box.ns-visible {
  pointer-events: auto;
}

.ns-close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 4px;
  top: 4px;
  overflow: hidden;
  text-indent: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ns-close:hover,
.ns-close:focus {
  outline: none;
}

.ns-close::before,
.ns-close::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 60%;
  top: 50%;
  left: 50%;
  background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
  background: #fff;
}

.ns-close::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.ns-close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ns-box-inner i {
  color: #fff;
  font-size: 3.8em;
}

.megaphone:before {
  content: '\1F4E3';
  font-family: "entypo";
  font-size: 2.2em;
}

/* Top bar notifications */
.ns-box.ns-bar {
  top: 0;
  left: 0;
  width: 100%;
}

.ns-bar .ns-close {
  background: transparent;
  margin-top: 15px;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ns-bar .ns-close::before,
.ns-bar .ns-close::after {
  background: #b7b5b3;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}



/* Slide on top */
.ns-effect-slidetop {
  box-shadow: inset 5.4em 0 rgba(0, 0, 0, 0.1);
}

.ns-effect-slidetop .icon {
  position: absolute;
  display: block;
  font-size: 109%;
  top: 50%;
  left: 1em;
  -webkit-transform: translate3d(0, -20%, 0);
  transform: translate3d(0, -20%, 0);
}

.ns-effect-slidetop p {
  padding: 0 3.2em;
  font-size: 1.2em;
  display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
  width: 2px;
  background: #fff;
}

.ns-effect-slidetop .ns-close:hover::before,
.ns-effect-slidetop .ns-close:hover::after {
  background: #fff;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animScaleUp;
  animation-name: animScaleUp;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animFade;
  animation-name: animFade;
}

@-webkit-keyframes animScaleUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0) scale3d(0, 0, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0) scale3d(1, 1, 1);
  }
}

@keyframes animScaleUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0) scale3d(0, 0, 1);
    transform: translate3d(0, -50%, 0) scale3d(0, 0, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0) scale3d(1, 1, 1);
    transform: translate3d(0, -50%, 0) scale3d(1, 1, 1);
  }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
  -webkit-animation-name: animSlideTop;
  animation-name: animSlideTop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

@-webkit-keyframes animSlideTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes animSlideTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/*category browse button*/
.button-34 {
  background: #5f61ff;
  border-radius: 999px;
  margin-bottom: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: var(--text-font-family);
  font-size: calc(16px - 2px);
  font-weight: 600;
  line-height: 15px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;
}

/** Everything else after subject and cc and before footer **/
.form-field ~ .form-field {
  order: 5;
}

/** Form Footer at the very bottom **/
form footer {
  order: 11;
}

/** Set CC as the tenth field **/
div.form-field.request_collaborators_ {
  order: 10;
}




/** Article vote buttons **/
.article-vote-button {
  background-color: #04AA6D;
  /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.article-vote-up {
  background-color: white;
  color: black;
  border: 2px solid #1A1A1A;
}

.article-vote-up:hover {
  background-color: #5F61FF;
  color: white;
}

.article-vote-down {
  background-color: white;
  color: black;
  border: 2px solid #1A1A1A;
}

.article-vote-down:hover {
  background-color: #dfe0e0;
  color: white;
}


/**Article vote centering**/
.article-vote {
  margin: 15px;
}

.article-vote-question {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 5px;
  padding-bottom: 5px;
  font-weight: bold;
}

.article-vote-controls {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.article-vote-count {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 13px;
  padding-top: 5px;
  font-size: small;
}

/* ---- negative followup ----------- */
.negative-followup {
  display: block;
  border: 2px;
  border-color: #5f61ff;
  border-style: none;
  border-radius: 10px;
  padding: 25px;
  margin-top: 35px;
  margin-left: 50px;
  width: 100%;
  text-align: center;
  background: #F4F2F5;
}

/* Tooltip */
[dir] .tooltip {
  display: block;
  padding: 8px 24px;
  width: 100%;
  border-radius: var(--border-radius-small);
  background-color: var(--primary-text-color);
  color: var(--primary-bg-color-always);
  font-size: var(--heading-6-font-size);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  transition: all .3s ease;
  opacity: 0;
  visibility: hidden;
}

[dir] .tooltip::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: var(--primary-text-color) transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

[dir] .tooltip-hover {
  overflow: unset;
  position: relative;
}

[dir] .tooltip-hover:hover .tooltip {
  transform: translate(-50%, -10px);
  opacity: 1;
  visibility: visible;
}

.alertbox {
  position: sticky;
  top: 0;
  z-index: 99;
}



/*TABLE OF CONTENTS*/

#toc-container {
  float: right;
  width: 250px;
  margin: 0 0 1rem 1.5rem;
  background-color: #f9f9f9;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* TOC Heading */
#toc-container h2 {
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
}

/* Nested indentation for TOC heading levels */
#toc-container ul ul {
  padding-left: 1rem; /* H2 */
}

#toc-container ul ul ul {
  padding-left: 1.5rem; /* H3 */
}

#toc-container ul ul ul ul {
  padding-left: 2rem; /* H4 */
}


/* Remove bullets and reduce padding */
#toc-container ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Tighten up spacing between items */
#toc-container li {
  margin: 0.1rem 0;
  line-height: 1.2;
}

/* TOC links */
#toc-container a {
  text-decoration: none;
  color: rgba(81, 97, 255, 1);
  font-size: 0.85rem;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
}

/* Hover effect */
#toc-container a {
  color: #5F61FF;
  transition: color 0.15s ease, transform 0.15s ease;
}

#toc-container a:hover {
  color: #1429ff;           /* slightly deeper purple */
  transform: translateX(2px);
  text-decoration: none;    /* remove underline for cleaner look */
}

/* Responsive: hide TOC on small screens */
@media (max-width: 768px) {
  #toc-container {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ==============================
   Dark mode – Table of Contents
   ============================== */

html.ui-dark #toc-container,
.ui-dark #toc-container {
  background: #1d1d1f;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Heading */
html.ui-dark #toc-container h2,
.ui-dark #toc-container h2 {
  color: #FF9371 !important;
  font-weight: 600;
}

/* Links */
html.ui-dark #toc-container a,
.ui-dark #toc-container a {
  color: rgba(255,255,255,0.75);
}

/* Hover */
html.ui-dark #toc-container a:hover,
.ui-dark #toc-container a:hover {
  color: #FF9371; /* matches your accent */
}

/* Subtle spacing polish */
html.ui-dark #toc-container li,
.ui-dark #toc-container li {
  margin: 0.2rem 0;
}





/* Looking for My Requests? */


.ticket-card {
  border: 1px solid #e0e0e0;
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  margin: 32px 0;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.ticket-card h3 {
  margin-bottom: 12px;
  font-size: 18px;
  color: #222;
}

.ticket-card p {
  margin-bottom: 16px;
  font-size: 15px;
  color: #555;
}

.ticket-card a.btn {
  font-size: 15px;
  padding: 10px 18px;
}




/*=========KNOWLEDGE HUB=============*/

/* ========= Base layout ========= */
.kf-kbhub{padding:24px 0}
.kf-kbhub__wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.kf-kbhub__title{font-size:28px;line-height:1.2;margin:0 0 16px}

/* ========= Segmented tabs ========= */
:root{
  --kf-brand: #5f61ff;
  --kf-tab-bg: #f3f4f8;
  --kf-tab-border: #e6e7ef;
  --kf-tab-text: #444;
}

/* Make the tab row look like one segmented control */
.kf-kbhub__tabs{
  display: flex;          
  column-gap: 4px;
  row-gap: 12px;
  padding: 6px;
  background: #000;
  border: 1px solid var(--kf-tab-border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
  overflow-x: auto;
}

/* Pills inside the segmented container (remove per-tab borders) */
.kf-kbhub__tab{
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    background: transparent;
    color: rgba(255,255,255,.9);
    padding: 10px 4px;
    border-radius: 10px;
    font: inherit;
    word-break: break-word;
  	line-height: 1;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
    border: 1px solid rgba(15,23,42,0.12);
  	letter-spacing: 0px;
}

/* Active tab = filled */
.kf-kbhub__tab[aria-selected="true"]{
  background: var(--kf-brand);
  color: #fff;
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 -1px 0 rgba(0,0,0,.25) inset, 0 4px 10px rgba(106,99,255,.25);
  transform: none;
}

/* Hover only on non-active tabs */
.kf-kbhub__tab:not([aria-selected="true"]):hover{
  background: #151515;
  border-color: rgba(255,255,255,.14);
  color: #fff;
  transform: translateY(-1px) scale(1.02);
}

/* Keyboard focus */
.kf-kbhub__tab:focus-visible{
  outline: 2px solid var(--kf-brand);
  outline-offset: 2px;
  border-radius: 10px;
}


/* ========= Panels ========= */
.kf-kbhub__panel{display:none}
.kf-kbhub__panel.is-active{display:block}

/* ========= Section headers ========= */
.kf-sec{margin:28px 0 0}
.kf-sec__hd{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.kf-sec__title{font-size:20px;margin:0}
.kf-sec__more{
  font-size:13px;                
  text-decoration:none;
  color:#374151;                 
  background:#fff;
  border:1px solid #e5e7eb;       
  border-radius:9999px;             
  padding:10px 14px;              
  display:inline-flex;            
  align-items:center;
  gap:6px;                       
  line-height:1.2;
}
.kf-sec__more::after{
  content:"›";
  font-size:16px;
  line-height:1;
  display:inline-block;          
  transform: translateY(-2px);  
}
.kf-sec__more:hover{
  background:#f9fafb;
  border-color:#d1d5db;
  color:#111;                     
  text-decoration:none;           
}
.kf-sec__more:hover::after{
  transform: translate(2px, -1px);  
}
.kf-sec__more:focus-visible{
  outline:2px solid #bfb7ff;      
  outline-offset:2px;
}

/*========Section divider lines========*/

.kf-sec + .kf-sec {
  border-top: 1px solid #e6e6e6;
  margin-top: 32px;
  padding-top: 24px;
}


/* ========= Highlight cards (3 across) ========= */

.kf-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 12px;
}

.kf-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:20px;
  padding:18px;
  min-height:96px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 28px rgba(17, 24, 39, 0.08);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
  overflow:hidden;
  position:relative;
}

.kf-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(17, 24, 39, 0.10);
  border-color:rgba(95, 97, 255, 0.22);
}

.kf-card__logo{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:0;
}

.kf-card__logo img{
  width:40px;
  height:40px;
  display:block;
  object-fit:contain;
}

.kf-card__title{
  margin-top:1px;
  margin-bottom:0;
  font-weight:620;
  font-size:17px;
  line-height:1.2;
  color:#111827;
}

/* =======Hide "Get Started" section======*/
.kf-sec--getstarted { display: none; }    /*change to "block" when you want to show*/

/* ========= Hairline inner-grid lists ========= */
.kf-gridlist{ 
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  align-items: start;
}
.kf-gridlist > li{
  box-sizing:border-box;
  padding:8px 14px;  
  border-right:1px solid #e6e6e6; 
}

.kf-gridlist > li:nth-child(3n){
  border-right:0;
}
/* Base: assume last up to 3 items are the last row */
.kf-gridlist > li:nth-child(-n+3){
  border-top:0;
}

/* Fixes when the last row has 2 items (re-add under the one above) */
.kf-gridlist > li:nth-last-child(3):nth-child(3n){ border-bottom: 1px solid #e6e6e6; }

/* Fixes when the last row has 1 item (re-add under the two above) */
.kf-gridlist > li:nth-last-child(3):nth-child(3n+2),
.kf-gridlist > li:nth-last-child(2):nth-child(3n){
  border-bottom: 1px solid #e6e6e6;
}

.kf-article-link{display:inline-block;text-decoration:none}
.kf-article-link:hover{text-decoration:underline}

/* ===== Two-line body preview under each title ===== */
.kf-article-excerpt{
  margin:4px 0 0;
  font-size:15px; line-height:1.3; color:#555;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; max-height:2.6em;
}

/* ========= Sign-in nudge ========= */
.kf-kbhub__signin{margin:28px 0 10px}
.kf-kbhub__signin-inner{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:25px;border:1px solid #dcdcdc;border-radius:12px;background: transparent;
}
/*title*/
.kf-kbhub__signin-text strong{
  display:block;        
  font-size: 20px;      
  line-height: 1.35;
  margin-bottom: 4px;   
}
/*text*/
.kf-kbhub__signin-text p{margin:4px 0 0}

.kf-kbhub__signin,
.kf-kbhub__signin-inner {
  position: relative;
  z-index: 20;
}

#kf-home-signin-btn {
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

/* ========= Buttons ========= */
.kf-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:10px;text-decoration:none}
.kf-btn--primary{
  background: #5f61ff;   
  color:#fff;          
  border-radius:9999px;   
  transition:background-color .15s ease, color .15s ease, border-radius .15s ease;
}
.kf-btn--primary:hover,
.kf-btn--primary:focus{
  background:#FF9371;   
  color:#fff;           
}


/* ========= Responsive ========= */
@media (max-width: 900px){
  .kf-cards{grid-template-columns:1fr 1fr}
  .kf-gridlist{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .kf-cards{grid-template-columns:1fr}
  .kf-gridlist{grid-template-columns:1fr}
}

@media (max-width: 900px){
  .kf-kbhub__tabs{
    flex-wrap: wrap;          
    justify-content: flex-start;
    gap:8px;                   
    padding:6px;              
  }
}
@media (max-width: 900px){
  .kf-kbhub__tab{
    font-size:15px;          
    line-height:1.3;
    padding:10px 18px;
    flex: 0 0 auto;    
    min-width: max-content; 
  }
}
@media (max-width: 560px){
  .kf-kbhub__tab{
    font-size:14px;
    line-height:1.25;
    padding:8px 14px;
  }
}



/* ===========================
   DARK MODE – Knowledge Hub
   =========================== */

html.ui-dark .kf-kbhub__tabs {
  background: #1d1d1f;                  /* Keyfactor black, not pure #000 */
  border-color: rgba(255,255,255,0.10);
  box-shadow: none;
}

html.ui-dark .kf-kbhub__tab {
  background: transparent;               /* no individual “boxed” tabs */
  color: rgba(255,255,255,0.88);
  border: 0;                             /* IMPORTANT: remove per-tab borders */
  box-shadow: none;
}


html.ui-dark .kf-kbhub__tab[aria-selected="true"] {
  background: var(--kf-brand);
  color: #fff;
  border-color: #000;
}

html.ui-dark .kf-kbhub__tab:not([aria-selected="true"]):hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}


html.ui-dark .kf-sec__title {
  color: #fff;
}

html.ui-dark .kf-sec__more {
  background: #1d1d1f;
  border-color: #B6FF9F;     /* 1px green border */
  color: rgba(255,255,255,0.90);
}
html.ui-dark .kf-sec__more:hover {
  background: #262626;
  color: #fff;
  border-color: #B6FF9F;
}

html.ui-dark .kf-sec + .kf-sec {
  border-top-color: #333;
}

html.ui-dark .kf-card {
  background: #16181d;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.34);
  color: #ffffff;
}

html.ui-dark .kf-card:hover {
  border-color: rgba(95,97,255,0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.46);
  background: #16181d;
}

html.ui-dark .kf-card__logo {
  background: transparent;
  border: 0;
}

html.ui-dark .kf-card__logo img {
  filter: none;
  opacity: 1;
}

html.ui-dark .kf-card__title {
  color: #ffffff;
}

html.ui-dark .kf-gridlist > li {
  border-right-color: #333;
  border-bottom-color: #333;
}

html.ui-dark .kf-article-link {
  color: #FF9371;
}
html.ui-dark .kf-article-link:hover {
  color: #ffb08f;
}

html.ui-dark .kf-article-excerpt {
  color: #aaa;
}

html.ui-dark .kf-kbhub__signin-inner {
  background: #1d1d1f;
  border-color: #333;
}
html.ui-dark .kf-kbhub__signin-text strong {
  color: #fff;
}
html.ui-dark .kf-kbhub__signin-text p {
  color: #ccc;
}

html.ui-dark .kf-btn--primary {
  background: #5f61ff;
  color: #fff;
}
html.ui-dark .kf-btn--primary:hover,
html.ui-dark .kf-btn--primary:focus {
  background: #FF9371;
  color: #fff;
}




/* ==============================
   Hero height override
   ============================== */

@media only screen and (min-width: 568px), (min-aspect-ratio: 13 / 9) {
  [dir] #welcome.welcome--size-small .welcome__section {
    padding-top: 140px;
    padding-bottom: 36px;
    background-color: var(--secondary-bg-color);
   border-bottom: 1px solid rgba(0,0,0,0.05);
  }
}

/* ==============================
   Dark mode – subtle divider under hero
   ============================== */

html.ui-dark #welcome.welcome--size-small .welcome__section,
.ui-dark #welcome.welcome--size-small .welcome__section{
  border-bottom: 1px solid rgba(255,255,255,0.1);
}



/* ============
Helpers
========= */

.kf-helpers {
  margin-top: 0;
  margin-bottom: 0;
  padding: 26px 0 16px;
  background: transparent;
}

.kf-helpers__panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0 auto;
  width: min(1200px, calc(100vw - 48px));
  transform: none;
}

.kf-helpers .kf-helpers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .kf-helpers .kf-helpers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .kf-helpers .kf-helpers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Base card */
.kf-helpers .kf-helpers__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 118px;
  padding: 18px 10px 18px 10px;
  border-radius: 20px;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
  overflow: hidden;
  position: relative;
}

.kf-helpers .kf-helpers__grid > a {
  min-width: 0;
}

.kf-helpers .kf-helpers__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.10);
  border-color: rgba(95, 97, 255, 0.22);
}

/* Primary cards */
.kf-helpers .kf-helpers__card--primary {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
  border-color: rgba(95, 97, 255, 0.16);
  box-shadow: 0 14px 36px rgba(95, 97, 255, 0.10);
}

@media (min-width: 980px) {
  .kf-helpers .kf-helpers__card--primary {
    grid-column: span 2;
  }
}

/* ==============================
   Featured helper card (Important notice)
   ============================== */

.kf-helpers .kf-helpers__grid > a:first-child{
  border: 2px solid #FFC06C;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  background: rgba(255, 192, 108, 0.18);
  padding-left: 24px;
}

.kf-helpers .kf-helpers__grid > a:first-child .kf-helpers__title{
  font-size: 18px;
  font-weight: 700;
}

.kf-helpers .kf-helpers__grid > a:first-child .kf-helpers__desc{
  font-size: 15px;
  color: #111827;
}

.kf-helpers .kf-helpers__grid > a:first-child .kf-helpers__icon{
  display: none;
}


/* Icon styling */
.kf-helpers .kf-helpers__icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.kf-helpers .kf-helpers__icon img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

.kf-helpers .kf-helpers__content {
  flex: 1 1 auto;
  min-width: 0;
}

.kf-helpers .kf-helpers__title,
.kf-helpers .kf-helpers__desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kf-helpers .kf-helpers__title {
  margin-top: 1px;
  margin-bottom: 4px;
  font-weight: 620;
  font-size: 17px;
  line-height: 1.2;
  color: #111827;
}

.kf-helpers .kf-helpers__desc {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #667085;
  opacity: 1;
}

.kf-helpers .kf-helpers__chev {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 20px;
  line-height: 1;
  color: #98a2b3;
  opacity: 1;
  transform: translateY(2px);
  transition: transform .18s ease, color .18s ease;
}

.kf-helpers .kf-helpers__card:hover .kf-helpers__chev {
  transform: translate(2px, 2px);
  color: #5f61ff;
}

/* Tablet/mobile spacing */
@media (max-width: 600px) {
  .kf-helpers {
    padding: 20px 0 10px;
  }

  .kf-helpers__panel {
    width: min(1280px, calc(100vw - 24px));
  }

  .kf-helpers .kf-helpers__card {
    min-height: 104px;
    padding: 18px 16px;
    border-radius: 18px;
  }

  .kf-helpers .kf-helpers__title {
    font-size: 16px;
  }

  .kf-helpers .kf-helpers__desc {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .kf-helpers .kf-helpers__grid {
    grid-template-columns: 1fr;
  }
}

/* Dark mode */

html.ui-dark .kf-helpers .kf-helpers__grid > a:first-child .kf-helpers__title,
.ui-dark .kf-helpers .kf-helpers__grid > a:first-child .kf-helpers__title{
  color: #ffffff;
}

html.ui-dark .kf-helpers .kf-helpers__grid > a:first-child .kf-helpers__desc,
.ui-dark .kf-helpers .kf-helpers__grid > a:first-child .kf-helpers__desc{
  color: rgba(255,255,255,0.92);
}

html.ui-dark .kf-helpers .kf-helpers__grid > a.kf-helpers__card:first-child,
.ui-dark .kf-helpers .kf-helpers__grid > a.kf-helpers__card:first-child{
  border: 2px solid #FFC06C;
  background: rgba(255, 192, 108, 0.06);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
}

[data-theme="dark"] .kf-helpers .kf-helpers__card,
.ui-dark .kf-helpers .kf-helpers__card {
  background: #16181d;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.34);
}

[data-theme="dark"] .kf-helpers .kf-helpers__card--primary,
.ui-dark .kf-helpers .kf-helpers__card--primary {
  background: linear-gradient(180deg, #1a1d24 0%, #181b22 100%);
  border-color: rgba(95,97,255,0.32);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
}

[data-theme="dark"] .kf-helpers .kf-helpers__card:hover,
.ui-dark .kf-helpers .kf-helpers__card:hover {
  border-color: rgba(95,97,255,0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.46);
}

[data-theme="dark"] .kf-helpers .kf-helpers__icon,
.ui-dark .kf-helpers .kf-helpers__icon {
  background: transparent;
  border: 0;
}

/* ICON CONTAINER — make it blend into the card */
[data-theme="dark"] .kf-helpers .kf-helpers__icon,
.ui-dark .kf-helpers .kf-helpers__icon {
  background: transparent !important;
}

/* ICON IMAGE — strip background + make white */
[data-theme="dark"] .kf-helpers .kf-helpers__icon img,
.ui-dark .kf-helpers .kf-helpers__icon img {
  filter: brightness(0) invert(1); /* turns icon white */
  background: transparent !important;
}

[data-theme="dark"] .kf-helpers .kf-helpers__title,
.ui-dark .kf-helpers .kf-helpers__title {
  color: #ffffff;
}

[data-theme="dark"] .kf-helpers .kf-helpers__desc,
.ui-dark .kf-helpers .kf-helpers__desc {
  color: rgba(255,255,255,0.70);
  opacity: 1;
}

[data-theme="dark"] .kf-helpers .kf-helpers__chev,
.ui-dark .kf-helpers .kf-helpers__chev {
  color: rgba(255,255,255,0.42);
}

[data-theme="dark"] .kf-helpers .kf-helpers__card:hover .kf-helpers__chev,
.ui-dark .kf-helpers .kf-helpers__card:hover .kf-helpers__chev {
  color: #8f90ff;
}


/* ==============================
   Floating Feedback
   ============================== */

.kf-feedback {
  --kf-tab-w: 56px;
  --kf-panel-w: 386px;

    /* Theme tokens (light defaults) */
  --kf-panel-bg: #fff;
  --kf-panel-border: rgba(0,0,0,0.12);
  --kf-header-bg: #f9fafb;
  --kf-header-border: rgba(0,0,0,0.08);

  --kf-label: rgba(0,0,0,0.75);
  --kf-text: rgba(0,0,0,0.90);
  --kf-muted: rgba(0,0,0,0.70);

  --kf-field-bg: #fff;
  --kf-field-border: rgba(0,0,0,0.18);
  --kf-field-text: rgba(0,0,0,0.90);
  --kf-field-placeholder: rgba(0,0,0,0.45);

  --kf-btn-bg: #111827;
  --kf-btn-text: #fff;
  --kf-btn-border: rgba(0,0,0,0.15);
  --kf-close-hover: rgba(0,0,0,0.06);

  
  position: fixed;
  right: 0;
  top: 45%;
  transform: translateY(-50%);
  z-index: 9999;
  font-family: inherit;
}

/* Make widths predictable */
.kf-feedback,
.kf-feedback * {
  box-sizing: border-box;
}

/* TAB: always visible */
.kf-feedback__tab {
  width: var(--kf-tab-w);
  height: 140px;
  padding: 12px 10px;
  border: 1px solid rgba(0,0,0,0.15);
  border-right: none; /* seam with panel */
  background: #111827;
  color: #fff;
  cursor: pointer;
  margin-top: 20px;

  /* Rounded on the LEFT like a binder tab */
  border-radius: 14px 0 0 14px;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.5px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  transition: filter .15s ease;
}

.kf-feedback__tab:hover {
  filter: brightness(1.05);
}

/* Dark mode feedback tab color */
html.ui-dark .kf-feedback__tab,
.ui-dark .kf-feedback__tab{
  background: #FF9371;
  border-color: rgba(255,255,255,0.15);
  color: #000;
}

/* PANEL WRAP: centered with the tab; slides from off-screen */
.kf-feedback__panelWrap {
  position: absolute;
  right: 0;
  top: 0;                     /* anchor from top */
  display: flex;
  align-items: flex-start;    /* tab + panel align from top */
  width: calc(var(--kf-panel-w) + var(--kf-tab-w));

  /* CLOSED: hide everything except tab */
  transform: translateX(calc(100% - var(--kf-tab-w)));
  transition: transform 220ms ease;
  will-change: transform;

  z-index: 2;
  pointer-events: auto;
}

.kf-feedback__panelWrap.is-open {
  transform: translateX(0);
}


.kf-feedback__panelWrap.is-open .kf-feedback__panel {
  pointer-events: auto;
}

.kf-feedback__panel {
  width: var(--kf-panel-w);

    background: var(--kf-panel-bg);
  border: 1px solid var(--kf-panel-border);

  border-left: none; /* seam with tab */

  /* Rounded on the RIGHT (left is seam) */
  border-radius: 0 14px 14px 0;

  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  overflow: hidden;

  /* Prevent clicks when closed (tab still works) */
  pointer-events: none;
}

/* Header */
.kf-feedback__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px 14px;
    border-bottom: 1px solid var(--kf-header-border);
  background: var(--kf-header-bg);

}

.kf-feedback__title {
  font-size: 14px;
  margin: 0;
}

.kf-feedback__close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
}
.kf-feedback__close:hover {
   background: var(--kf-close-hover);
}

/* Form */
.kf-feedback__form {
  padding: 12px 14px 14px;
}

.kf-feedback__field {
  margin-bottom: 10px;
}

.kf-feedback__field label {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
    color: var(--kf-label);

}

.kf-feedback__field input,
.kf-feedback__field textarea,
.kf-feedback__field select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--kf-field-border);
  padding: 10px 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--kf-field-bg);
  color: var(--kf-field-text);
}

.kf-feedback__field textarea {
  resize: vertical;
  min-height: 110px;
}

.kf-feedback__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.kf-feedback__btn {
  border: 1px solid var(--kf-btn-border);
  background: var(--kf-btn-bg);
  color: var(--kf-btn-text);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.kf-feedback__btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.kf-feedback__status {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--kf-muted);
}

/* Signed-out locked state */
.kf-feedback__locked {
  padding: 12px;
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 12px;
  background: #fff;
}

.kf-feedback__lockedText {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: rgba(0,0,0,0.75);
}

.kf-feedback__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  text-decoration: none;
}

/*Mobile*/

@media (max-width: 480px) {
  .kf-feedback {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .kf-feedback__panelWrap {
    width: min(92vw, calc(var(--kf-panel-w) + var(--kf-tab-w)));
  }

  .kf-feedback__panel {
    width: calc(100% - var(--kf-tab-w));
  }
}


/* ==============================
   Floating Feedback — Dark mode
   ============================== */

html.ui-dark .kf-feedback,
.ui-dark .kf-feedback{
  --kf-panel-bg: #121212;
  --kf-panel-border: rgba(255,255,255,0.18);
  --kf-header-bg: #171717;
  --kf-header-border: rgba(255,255,255,0.14);

  --kf-label: rgba(255,255,255,0.78);
  --kf-text: rgba(255,255,255,0.92);
  --kf-muted: rgba(255,255,255,0.65);

  --kf-field-bg: #1f1f1f;
  --kf-field-border: rgba(255,255,255,0.18);
  --kf-field-text: rgba(255,255,255,0.92);
  --kf-field-placeholder: rgba(255,255,255,0.50);

  --kf-btn-bg: #5F61FF;          /* brand purple */
  --kf-btn-text: #fff;
  --kf-btn-border: rgba(95,97,255,0.55);
  --kf-close-hover: rgba(255,255,255,0.08);
}

html.ui-dark .kf-feedback__panel,
.ui-dark .kf-feedback__panel{
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 25px 70px rgba(0,0,0,0.75);
}



/* Optional: placeholders (makes it feel polished) */
html.ui-dark .kf-feedback__field input::placeholder,
html.ui-dark .kf-feedback__field textarea::placeholder,
.ui-dark .kf-feedback__field input::placeholder,
.ui-dark .kf-feedback__field textarea::placeholder{
  color: var(--kf-field-placeholder);
}



/* ==============================
   Search Results Header + Filters
   ============================== */

.search-results__header {
  margin: 20px 0 10px;
}

.search-results__count {
  margin: 0; /* overrides default h1/h2 margins */
}

.search-filters__title {
  margin: 0 0 12px;
  font-size: var(--heading-4-font-size);
}


.search-filters__select{
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-button);
  background-color: var(--secondary-bg-color-always);
  color: var(--primary-text-color);
}

.search-filters__title{
  margin: 0 0 16px;
  font-size: var(--heading-3-font-size);
  letter-spacing: 0.2px;
}

.search-filters__box h4{
  margin: 0 0 10px;
  font-size: var(--heading-4-font-size);
  font-weight: 700;
  opacity: 0.9;
}



/* ===== Search filter dropdowns ===== */
.search-filters__select{
  width: 100%;
  padding: 11px 40px 11px 14px; /* extra right space for arrow */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-button);
  background-color: var(--secondary-bg-color-always);
  color: var(--primary-text-color);
  font: inherit;

  /* remove native chrome/safari styling so our arrow shows */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* custom down arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23666666' d='M5.25 7.5l4.75 5 4.75-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}

/* For IE/old Edge (harmless elsewhere) */
.search-filters__select::-ms-expand{ display:none; }



/* ==============================
   Search Results – Sleek + Wide
   ============================== */

@media (min-width: 980px){
  .col--lg-up-3.page-content__left-col{
    flex: 0 0 28% !important;
    max-width: 28% !important;
  }
  .col--lg-up-7.page-content__center-col{
    flex: 0 0 68% !important;
    max-width: 68% !important;
  }
}

/* ==============================
   Search results cards (clean)
   ============================== */

/* Base card styling (wins against Zendesk defaults) */
[dir] .articles--boxes .articles__item,
[dir] .articles--simple .articles__item{
  background-color: var(--primary-bg-color-always) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 12px;
  padding: 18px 18px !important;
  margin-top: 12px !important;

  box-shadow: none !important;
  transition: border-color .14s ease, transform .14s ease;
  position: relative;

  display: flex;
  flex-direction: column;
}

/* Hover (scoped to cards so it doesn't affect other .articles__item usage) */
[dir] .articles--boxes .articles__item:hover,
[dir] .articles--simple .articles__item:hover{
  transform: translateY(-1px);
  border: 1px solid !important;
}

/* Dark mode: make border white like hover */
.ui-dark .articles--boxes .articles__item,
.ui-dark .articles--simple .articles__item{
  border: 1px solid rgba(255,255,255,0.35) !important;
}


/* Dark mode hover: slightly brighter */
html.ui-dark [dir] .articles--boxes .articles__item:hover,
html.ui-dark [dir] .articles--simple .articles__item:hover,
.ui-dark [dir] .articles--boxes .articles__item:hover,
.ui-dark [dir] .articles--simple .articles__item:hover{
  border-color: rgba(255,255,255,0.34) !important;
}

/* ==============================
   Search result prompt card
   ============================== */

/* default = thinner coral border */
[dir] .articles--boxes .articles__item--prompt,
[dir] .articles--simple .articles__item--prompt{
  border: 1px solid #000000 !important;
  background-color: #ffffff !important;
}

/* hover = thicker coral border */
[dir] .articles--boxes .articles__item--prompt:hover,
[dir] .articles--simple .articles__item--prompt:hover{
  transform: none;
  border: 2px solid #ff6a5c !important;
}

.ui-dark .articles--boxes .articles__item--prompt,
.ui-dark .articles--simple .articles__item--prompt{
  background-color: var(--primary-bg-color-always) !important;
  border: 1px solid #ff6a5c !important;
}

html.ui-dark [dir] .articles--boxes .articles__item--prompt:hover,
html.ui-dark [dir] .articles--simple .articles__item--prompt:hover,
.ui-dark [dir] .articles--boxes .articles__item--prompt:hover,
.ui-dark [dir] .articles--simple .articles__item--prompt:hover{
  border: 2px solid #ff6a5c !important;
}

.sr-prompt-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-prompt-card__eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0;
}

.sr-prompt-card__title{
  margin: 0 !important;
  font-size: 20px;
  line-height: 1.25;
  color: #111111;
  font-weight: 500;
}

.sr-prompt-card__body{
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(0,0,0,0.72);
}

.sr-prompt-card__cta{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #5F61FF;
  text-decoration: underline;
}

.sr-prompt-card__cta:hover{
  color: #4b4de0;
}

html.ui-dark .sr-prompt-card__eyebrow,
.ui-dark .sr-prompt-card__eyebrow{
  color: rgba(255,255,255,0.58);
}

html.ui-dark .sr-prompt-card__title,
.ui-dark .sr-prompt-card__title{
  color: rgba(255,255,255,0.96);
}

html.ui-dark .sr-prompt-card__body,
.ui-dark .sr-prompt-card__body{
  color: rgba(255,255,255,0.74);
}


/* ==============================
   Card internals
   ============================== */

/* Title + date on one line */
.sr-card__top{
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.sr-card__title{
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.25;
  color: #5F61FF;
  text-decoration: underline;
}

.sr-card__title:hover{
  color: #4b4de0;
}

/* Date: low profile */
.sr-card__date{
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  white-space: nowrap;
}
html.ui-dark .sr-card__date,
.ui-dark .sr-card__date{
  color: rgba(255,255,255,0.55);
}

/* Breadcrumbs: low profile, inline, no pills */
.sr-card__crumbs{
  margin: 3px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sr-card__crumbs li{
  margin: 0 !important;
}

.sr-card__crumbs li + li::before{
  content: "›";
  margin-right: 6px;
  opacity: 0.35;
}

.sr-card__crumbs a{
  font-size: 11px;
  color: #6b7280;
  opacity: 1;
  text-decoration: none;
  font-weight: 400;
}

.sr-card__crumbs a:hover{
  color: #374151;
  text-decoration: none;
}

html.ui-dark .sr-card__crumbs a,
.ui-dark .sr-card__crumbs a{
  color: rgba(255,255,255,0.55);
}

html.ui-dark .sr-card__crumbs a:hover,
.ui-dark .sr-card__crumbs a:hover{
  color: rgba(255,255,255,0.80);
}

/* Excerpt: compact + clamped */
.sr-card__excerpt{
  margin-top: 6px !important;
  color: rgba(0,0,0,0.70);
  font-size: 14px;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.ui-dark .sr-card__excerpt,
.ui-dark .sr-card__excerpt{
  color: rgba(255,255,255,0.70);
}

/* Order: title → excerpt → breadcrumbs */
.sr-card__top{ order: 1; }
.sr-card__excerpt{ order: 2; }
.sr-card__crumbs{
  order: 3;
  margin-top: 6px !important;
}




/* ==============================
   Search results – header override
   ============================== */

.kf-search-header{
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

html.ui-dark .kf-search-header,
.ui-dark .kf-search-header{
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.kf-search-header__inner{
  padding: 75px 16px 75px;           /* slim band */
  display:flex;
  justify-content:center;       /* center the search bar */
}

.kf-search-header__search{
  width: min(820px, 100%);      /* nice centered max width */
}

/* Make the input feel centered + clean */
.kf-search-header .search{
  width:100%;
}

/* Optional: tighten spacing around results since hero is gone */
.search-results__header{
  margin-top: 16px;
}



/********** Federated search taglines *********/
.kf-search-scope {
  margin: 0em 0em 2em;
  font-size: 14px;
  color: #6b7280; /* soft gray */
}


/* Search results header + tagline spacing */
.page-content > h1.h2 {
  margin-bottom: 6px;   /* pulls tagline closer to the results header */
}

/* Federated search tagline — override Zendesk base [dir] p margin */
[dir] .kf-search-scope {
  margin: 0 0 2em !important;
}

/* Filter header taglines */
.search-filters__tagline{
  margin: 0.35rem 0 0.9rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  opacity: 0.75;
}


/* Slightly tighter under h4s inside boxes */
.search-filters__box h4 + .search-filters__tagline{
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}





/* ==============================
   Federated search source chips (Home hero)
   ============================== */

.welcome__content .kf-search-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;     /* space under search bar */
  margin-bottom: 0;     /* keep tight above anything else */
}


.welcome__content .kf-chip{
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;     
  border-radius: 999px;
  font-size: 11px;       
  line-height: 1;
  color: #111;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
  user-select: none;
  pointer-events: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .welcome__content .kf-chip{
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
  }
}





/* No results panel */

.kf-no-results {
  margin-top: 24px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100vw; /* prevents overflow but avoids the scrollbar-centering bug */
}


.kf-no-results__panel {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: #fff;
  width: min(1200px, calc(100vw - 80px));
  margin: 0 auto;
  padding: 0px 32px 32px;
}


.kf-no-results__title { margin: 0 0 6px; }
.kf-no-results__subtitle { margin: 0 0 18px; opacity: .8; }

.kf-no-results__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}

@media (min-width: 980px) {
  .kf-no-results__grid {
    grid-template-columns: 2fr 3fr; 
  }
}


.kf-no-results__card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 25px;
  background: #fafafa;
}

.kf-no-results__cardtitle { margin: 0 0 10px; }

.kf-no-results__tips { margin: 0; padding-left: 50px; }
.kf-no-results__suggestions { margin: 0; padding-left: 50px; }
.kf-no-results__loading { opacity: .75; }

/* CTA block */

.kf-no-results__cta {
  grid-column: 1 / -1;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap; /* keeps it clean on smaller screens */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.kf-no-results__cta-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;      /* IMPORTANT */
  display: flex;         /* makes vertical alignment cleaner */
  align-items: center;   /* aligns with buttons */
}

.kf-no-results__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

[dir] .kf-no-results__cta h2.kf-no-results__cta-title {
  margin: 0;
}






/* When there are no results, hide Filters column */
.kf-search--no-results .page-content__left-col {
  display: none;
}

/* When filters are hidden, let results column breathe */
.kf-search--no-results .page-content__center-col {
  width: 100%;
}

/* Safety for grid systems that rely on flex */
.kf-search--no-results .page-content__center-col {
  flex: 0 0 100%;
  max-width: 100%;
}


.kf-no-results__popular-list { margin: 0; padding-left: 50px; }
.kf-no-results__popular { margin-top: 14px; }


/* Make the center column truly full width when no results (col class safety) */
.kf-search--no-results .col--lg-up-7.page-content__center-col {
  flex: 0 0 100%;
  max-width: none;
  width: 100%;
}


.kf-no-results__tips li::marker,
.kf-no-results__suggestions li::marker,
.kf-no-results__popular-list li::marker {
  color: rgba(0,0,0,0.7);
}

/* ==============================
   Dark mode – No results panel
   ============================== */

html.ui-dark .kf-no-results__panel,
.ui-dark .kf-no-results__panel {
  background: #16181d;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

html.ui-dark .kf-no-results__subtitle,
.ui-dark .kf-no-results__subtitle {
  color: rgba(255,255,255,0.76);
}

html.ui-dark .kf-no-results__card,
.ui-dark .kf-no-results__card {
  background: #1d1f24;
  border: 1px solid rgba(255,255,255,0.10);
}

html.ui-dark .kf-no-results__cardtitle,
.ui-dark .kf-no-results__cardtitle {
  color: #ffffff;
}

html.ui-dark .kf-no-results__tips,
html.ui-dark .kf-no-results__suggestions,
html.ui-dark .kf-no-results__popular-list,
.ui-dark .kf-no-results__tips,
.ui-dark .kf-no-results__suggestions,
.ui-dark .kf-no-results__popular-list {
  color: rgba(255,255,255,0.82);
}

html.ui-dark .kf-no-results__loading,
.ui-dark .kf-no-results__loading {
  color: rgba(255,255,255,0.68);
  opacity: 1;
}

html.ui-dark .kf-no-results__empty,
.ui-dark .kf-no-results__empty {
  color: rgba(255,255,255,0.68);
}

html.ui-dark .kf-no-results__cta,
.ui-dark .kf-no-results__cta {
  border-top: 1px solid rgba(255,255,255,0.10);
}

html.ui-dark .kf-no-results__cta-title,
.ui-dark .kf-no-results__cta-title {
  color: #ffffff;
}

html.ui-dark .kf-no-results__tips li::marker,
html.ui-dark .kf-no-results__suggestions li::marker,
html.ui-dark .kf-no-results__popular-list li::marker,
.ui-dark .kf-no-results__tips li::marker,
.ui-dark .kf-no-results__suggestions li::marker,
.ui-dark .kf-no-results__popular-list li::marker {
  color: rgba(255,255,255,0.55);
}


/* ==============================
   Search Filters – Alignment Fix
   ============================== */

/* Move Filters title down slightly to align with results header */
.search-filters__title{
  margin-top: 10px !important;   /* adjust to taste (6–12px range) */
}


/* ==============================
   Search Filters – Spacing Fix
   ============================== */

/* Kill Zendesk's default <p> spacing inside filter column */
.page-content__left-col .search-filters__tagline{
  margin: 4px 0 12px !important;
}

/* Slight alignment tweak for Filters title */
.page-content__left-col .search-filters__title{
  margin-top: 8px !important;
  margin-bottom: 4px !important;
}


/* ==============================
Twitter > X update
============================== */

#footer-twitter .footer-x-icon{
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  align-items: center;
  justify-content: center;
}

/* ==============================
/* No link underlinining anywhere ever
============================== */

a,
a:visited,
a:hover,
a:focus,
a:active{
  text-decoration: none !important;
}

a{
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover{
  color: #2c2fb3;
}



/* ==============================
   Category page cards
   ============================== */

/* spacing between card columns/rows */
.sections {
  row-gap: 28px !important;
  margin-bottom: 40px !important;
}

/* fallback in case row-gap isn't honored in this layout */
.sections > .col {
  margin-bottom: 28px !important;
}

.sections .sections__item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 20px 20px 0px !important;
  height: 100% !important;
  transition: border-color .14s ease, transform .14s ease;
}

.sections .sections__item:hover {
  border-color: rgba(0, 0, 0, 0.14) !important;
  transform: translateY(-1px);
}

/* tighten inner spacing a little */
.sections .sections__item .categories__title {
  margin: 0 0 10px !important;
}

.sections .sections__item .categories__description {
  margin: 0 0 14px !important;
}

/* fix long article links wrapping inside category cards */
.sections .sections__item .articles__item {
  min-width: 0 !important;
}

.sections .sections__item .articles__link,
.sections .sections__item .articles__item a {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* keep button from floating too high */
.sections .sections__item .articles__more {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* dark mode */
html.ui-dark .sections .sections__item,
.ui-dark .sections .sections__item {
  background: var(--primary-bg-color-always) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
}

html.ui-dark .sections .sections__item:hover,
.ui-dark .sections .sections__item:hover {
  border-color: rgba(255,255,255,0.22) !important;
}

/* tighten space under the See all button on category cards */
.sections .sections__item .articles {
  margin-bottom: 0 !important;
}

.sections .sections__item .articles__more {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.sections .sections__item .articles__more .btn {
  margin-bottom: 0 !important;
}


/* ==============================
   Anonymous submit-request modal
   ============================== */

body.kf-auth-required-open {
  overflow: hidden;
}

.kf-auth-required {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.kf-auth-required.is-open {
  display: block;
}

.kf-auth-required__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.kf-auth-required__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92vw, 520px);
  transform: translate(-50%, -50%);
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.kf-auth-required__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.kf-auth-required__close:hover {
  opacity: 0.7;
}

.kf-auth-required__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f61ff;
  margin-bottom: 10px;
}

.kf-auth-required__title {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.15;
  color: #111827;
}

.kf-auth-required__body {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
}

.kf-auth-required__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.kf-auth-required__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none !important;
  border: 2px solid transparent;
}

.kf-auth-required__btn--primary {
  background: #5f61ff;
  border-color: #5f61ff;
  color: #ffffff !important;
}

.kf-auth-required__btn--primary:hover {
  background: #4f52e0;
  border-color: #4f52e0;
  color: #ffffff !important;
}

.kf-auth-required__btn--secondary {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  color: #1a1a1a;
}

.kf-auth-required__btn--secondary:hover {
  background: #f5f5f5;
}

/* Dark mode */
html.ui-dark .kf-auth-required__dialog,
.ui-dark .kf-auth-required__dialog {
  background: #1a1a1a;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

html.ui-dark .kf-auth-required__close,
.ui-dark .kf-auth-required__close {
  color: #ffffff;
}

html.ui-dark .kf-auth-required__eyebrow,
.ui-dark .kf-auth-required__eyebrow {
  color: #ff9371;
}

html.ui-dark .kf-auth-required__title,
.ui-dark .kf-auth-required__title {
  color: #ffffff;
}

html.ui-dark .kf-auth-required__body,
.ui-dark .kf-auth-required__body {
  color: rgba(255, 255, 255, 0.78);
}

html.ui-dark .kf-auth-required__btn--secondary,
.ui-dark .kf-auth-required__btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

html.ui-dark .kf-auth-required__btn--secondary:hover,
.ui-dark .kf-auth-required__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}


/* ==============================
   Keyfactor Insider popup
   ============================== */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kf-insider-popup {
  position: relative;
  width: min(92vw, 520px);
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
}

.kf-insider-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.kf-insider-popup__close:hover {
  opacity: 0.7;
}

.kf-insider-popup__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f61ff;
  margin-bottom: 10px;
}

.kf-insider-popup__title {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.15;
  color: #111827;
}

.kf-insider-popup__body {
  margin: 0 0 22px !important;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
}

.kf-insider-popup__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  justify-content: center;
}

.kf-insider-popup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none !important;
  border: 2px solid transparent;
  cursor: pointer;
}

.kf-insider-popup__btn--primary {
  background: #5f61ff;
  border-color: #5f61ff;
  color: #ffffff !important;
}

.kf-insider-popup__btn--primary:hover {
  background: #4f52e0;
  border-color: #4f52e0;
  color: #ffffff !important;
}

.kf-insider-popup__btn--secondary {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  color: #1a1a1a;
}

.kf-insider-popup__btn--secondary:hover {
  background: #f5f5f5;
}

.kf-insider-popup__footnote {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

/* Dark mode */
html.ui-dark .kf-insider-popup,
.ui-dark .kf-insider-popup {
  background: #1a1a1a;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

html.ui-dark .kf-insider-popup__close,
.ui-dark .kf-insider-popup__close {
  color: #ffffff;
}

html.ui-dark .kf-insider-popup__eyebrow,
.ui-dark .kf-insider-popup__eyebrow {
  color: #ff9371;
}

html.ui-dark .kf-insider-popup__title,
.ui-dark .kf-insider-popup__title {
  color: #ffffff;
}

html.ui-dark .kf-insider-popup__body,
.ui-dark .kf-insider-popup__body {
  color: rgba(255, 255, 255, 0.78);
}

html.ui-dark .kf-insider-popup__btn--secondary,
.ui-dark .kf-insider-popup__btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

html.ui-dark .kf-insider-popup__btn--secondary:hover,
.ui-dark .kf-insider-popup__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

html.ui-dark .kf-insider-popup__footnote,
.ui-dark .kf-insider-popup__footnote {
  color: rgba(255, 255, 255, 0.62);
}



/* ==============================
   Inline header search
   ============================== */

.kf-inline-search {
  position: relative;
  align-items: center;
  width: 40px;
  overflow: hidden;
  transition: width 0.24s ease;
  flex: 0 0 auto;
}

.kf-inline-search__form {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}

.kf-inline-search__input {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  height: 48px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: none !important;
  transition: width 0.24s ease, opacity 0.18s ease, padding 0.24s ease;
}

/* Search icon in header */
.kf-inline-search__toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  cursor: pointer;
  position: relative;
  z-index: 2;
  flex: 0 0 40px;
}

.kf-inline-search__toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.kf-inline-search__toggle:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* Close button hidden until open */
.kf-inline-search__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.kf-inline-search__close:hover {
  background: rgba(0,0,0,0.06) !important;
}

/* Open state */
.kf-inline-search.is-open {
  width: 420px;
}

.kf-inline-search.is-open .kf-inline-search__input {
  width: 372px;
  opacity: 1;
  pointer-events: auto;
  padding: 0 44px 0 18px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}

.kf-inline-search.is-open .kf-inline-search__toggle {
  opacity: 0;
  pointer-events: none;
}

.kf-inline-search.is-open .kf-inline-search__close {
  opacity: 1;
  pointer-events: auto;
}

.kf-inline-search__input::placeholder {
  color: #6b7280;
}

/* Dark mode */
html.ui-dark .kf-inline-search__input,
.ui-dark .kf-inline-search__input {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: rgba(255,255,255,0.18) !important;
}

html.ui-dark .kf-inline-search__toggle,
.ui-dark .kf-inline-search__toggle {
  color: #ffffff !important;
}

html.ui-dark .kf-inline-search__toggle:hover,
.ui-dark .kf-inline-search__toggle:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .kf-inline-search.is-open {
    width: 320px;
  }

  .kf-inline-search.is-open .kf-inline-search__input {
    width: 272px;
  }
}

@media (max-width: 1024px) {
  .kf-inline-search {
    display: none;
  }
}




/*======Header sign in=====*/

/* Keep header sign-in above the inline search layer */
.kf-siteheader__actions {
  position: relative;
}

.kf-siteheader__actions > .btn.btn--md.btn--light {
  position: relative;
  z-index: 30;
  pointer-events: auto;
}

/* Keep the search from sitting on top of the sign-in button */
.kf-inline-search {
  position: relative;
  z-index: 21;
  flex: 0 0 auto;
}

.kf-inline-search__form {
  flex: 0 0 auto;
}


/* ==============================
   Escalate modal
   ============================== */

.kf-escalate-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.kf-escalate-modal.is-active {
  display: block;
}

.kf-escalate-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.kf-escalate-modal__dialog {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  margin: 10vh auto 0;
  background: #ffffff;
  color: #1A1A1A;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
  z-index: 1;
}

.kf-escalate-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
  color: #1A1A1A;
}

.kf-escalate-modal__title {
  margin: 0 0 8px;
}

.kf-escalate-modal__subtitle {
  margin: 0 0 18px;
  color: rgba(0, 0, 0, 0.72);
}

.kf-escalate-modal__select {
  width: 100%;
  padding: 11px 40px 11px 14px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  background-color: #ffffff;
  color: #1A1A1A;
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23666666' d='M5.25 7.5l4.75 5 4.75-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}

.kf-escalate-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.kf-escalate-modal__status {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.72);
}

.kf-escalate-modal__status.is-error {
  color: #c0392b;
}

.kf-escalate-modal__status.is-success {
  color: #1f7a3d;
}

/* Dark mode */
html.ui-dark .kf-escalate-modal__dialog,
.ui-dark .kf-escalate-modal__dialog {
  background: #16181d;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html.ui-dark .kf-escalate-modal__close,
.ui-dark .kf-escalate-modal__close {
  color: #ffffff;
}

html.ui-dark .kf-escalate-modal__subtitle,
.ui-dark .kf-escalate-modal__subtitle {
  color: rgba(255, 255, 255, 0.72);
}

html.ui-dark .kf-escalate-modal__select,
.ui-dark .kf-escalate-modal__select {
  background-color: #1f1f1f;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23cfcfcf' d='M5.25 7.5l4.75 5 4.75-5'/%3E%3C/svg%3E");
}

html.ui-dark .kf-escalate-modal__status,
.ui-dark .kf-escalate-modal__status {
  color: rgba(255, 255, 255, 0.72);
}

.kf-escalate-modal__textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  background-color: #ffffff;
  color: #1A1A1A;
  font: inherit;
  line-height: 1.45;
}

html.ui-dark .kf-escalate-modal__textarea,
.ui-dark .kf-escalate-modal__textarea {
  background-color: #1f1f1f;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}



/* Escalated badge in Request ID column */

.request-id-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.escalated-cell--id-badge {
  display: inline-flex;
  align-items: center;
}

.escalated-cell--id-badge:empty {
  display: none;
}

.escalated-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffe5e5;
  color: #d92d20;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}



/* Compact request status pills on My Requests table */
.table--my-activities .request-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: 120px;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  font-size: 14px;
}




/*Back to My Requests*/

.request-nav {
  margin-bottom: 30px;
}

.kf-back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;

  border: 1px solid rgba(95, 97, 255, 0.25);
  background: rgba(95, 97, 255, 0.10);
  color: #5F61FF;

  font-weight: 500;
  text-decoration: none;

  transition: all 0.15s ease;
}

.kf-back-button:hover,
.kf-back-button:focus {
  background: rgba(95, 97, 255, 0.18);
  border-color: rgba(95, 97, 255, 0.4);
  color: #4f51e8;
  transform: translateY(-1px);
}

.kf-back-arrow {
  font-size: 15px;
  line-height: 1;
}




/*==========Customer Success page==============*/

.kf-cs-page {
  max-width: 1180px;
  margin: 0 auto;
 padding: 16px 24px 72px;
}

.kf-cs-hero {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  color: #fff;
  border-radius: 24px;
  padding: 48px;
  margin-bottom: 28px;
}

.kf-cs-eyebrow {
  margin: 0 0 12px;
  color: #ff7a59;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}

.kf-cs-hero h1 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
}

.kf-cs-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 18px;
  line-height: 1.6;
}

.kf-cs-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 24px;
}

.kf-cs-card {
  background: #fff;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 14px 34px rgba(17,24,39,.08);
}

.kf-cs-card h2,
.kf-cs-card h3 {
  margin-top: 0;
  color: #111827;
}

.kf-cs-card p,
.kf-cs-card li {
  color: #4b5563;
  line-height: 1.6;
}

.kf-cs-side ul {
  padding-left: 50px;
  margin-bottom: 0;
}

.kf-cs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #5161ff;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.kf-cs-button:hover,
.kf-cs-button:focus {
  background: #3f4fe0; 
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 800px) {
  .kf-cs-page {
    padding: 24px 16px 56px;
  }

  .kf-cs-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .kf-cs-card {
    padding: 24px;
    border-radius: 18px;
  }

  .kf-cs-card h3 {
    font-size: 22px;
    line-height: 1.2;
  }

  .kf-cs-card p,
  .kf-cs-card li {
    font-size: 15px;
    line-height: 1.55;
  }

  .kf-cs-side ul {
    padding-left: 22px;
  }

  .kf-cs-button {
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
  }
}

/* Dark mode */
.ui-dark .kf-cs-card,
[data-ui-color-mode="dark"] .kf-cs-card,
[data-theme="dark"] .kf-cs-card {
  background: #1f2937;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.ui-dark .kf-cs-card h2,
.ui-dark .kf-cs-card h3,
[data-ui-color-mode="dark"] .kf-cs-card h2,
[data-ui-color-mode="dark"] .kf-cs-card h3,
[data-theme="dark"] .kf-cs-card h2,
[data-theme="dark"] .kf-cs-card h3 {
  color: #fff;
}

.ui-dark .kf-cs-card p,
.ui-dark .kf-cs-card li,
[data-ui-color-mode="dark"] .kf-cs-card p,
[data-ui-color-mode="dark"] .kf-cs-card li,
[data-theme="dark"] .kf-cs-card p,
[data-theme="dark"] .kf-cs-card li {
  color: rgba(255,255,255,.78);
}


.kf-cs-form-card {
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .12);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 14px 34px rgba(17, 24, 39, .08);
}

.kf-cs-form-frame {
  width: 100%;
  min-height: 900px;
  border: 0;
}



/* Escalate button visibility check */
.js-escalate-open.kf-escalate-checking,
html.kf-hide-escalate .js-escalate-open {
  display: none !important;
}