@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* =========================================== */

/* ===== INJECTION 25 ===== */ 
/* ===== INJECTION 24 ===== */ 
/* ===== INJECTION 23 ===== */ 

/* ===== INJECTION 22 ===== */ 

nav.vp-desktop-navigation__page-tree {
  display: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* ===== INJECTION 21 ===== */ 

/* Targets all <img> elements inside <figure> tags with the class "vp-image" */
figure.vp-image img {
  /* Removes any border from the image, overriding other rules if necessary */
  border: none !important;
}

/* ===== INJECTION 20 ===== */ 
/* First-level unordered list (default): solid circle bullet */
ul {
  list-style-type: disc;
}

/* Second-level unordered list: hollow circle bullet */
ul ul {
  list-style-type: circle;
}

/* Third-level unordered list: solid square bullet */
ul ul ul {
  list-style-type: square;
}

/* Fourth-level unordered list: solid circle bullet again */
ul ul ul ul {
  list-style-type: disc;
}

/* Fifth-level unordered list: hollow circle bullet again */
ul ul ul ul ul {
  list-style-type: circle;
}

/* Sixth-level unordered list: solid square bullet again */
ul ul ul ul ul ul {
  list-style-type: square;
}

/* ===== INJECTION 19 ===== */ 

/* Outer container: apply purple border and styling for both article and search templates */
.vp-search-input,
.vp-search-input {
  border: 1px solid #6600ff;
  border-radius: 999px;
  padding: 2px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  background: white;
}

/* Add subtle shadow on hover */
.vp-search-input:hover,
.vp-search-input:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Add purple glow effect when any child (e.g. input) is focused */
.vp-search-input:focus-within,
.vp-search-input:focus-within {
  border-color: #6600ff;
  box-shadow: 0 0 0 2px rgba(102, 0, 255, 0.3);
}

/* Remove inner input's border, outline, shadow, and background */
.vp-search-input__input,
.vp-search-input__input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Remove visual borders and backgrounds from internal wrapper and icon elements */
.vp-search-input__slot,
.vp-search-input__slot,
.vp-search-input__submit,
.vp-search-input__submit,
.vp-search-bar__input-container,
.vp-search-bar__input-container {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ===== INJECTION 18 ===== ✅ */ 

/* Hide scrollbar in the left sidebar */
nav.vp-desktop-navigation__page-tree.vp-scrollable-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

nav.vp-desktop-navigation__page-tree.vp-scrollable-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

/* ===== INJECTION 17 ===== ✅*/ 

.vp-article__aside-left {
    border-right: 1px solid #6600ff;
}

.vp-article__aside-left .vp-article__aside-left__inner > button {
  border: 1px solid #6600ff;
}


/* ===== INJECTION 16 ===== ✅ */ 

html[data-vp-page-template="article"] h2 {
  /* Set the text color to purple */
  color: #6600ff;
}

html[data-vp-page-template="article"] h3 {
  /* Set the text color to violet */
  color: #983bfa;
}
html[data-vp-page-template="article"] h4 {
  /* Set the text color to a dark gray */
  color: #666666;
  /* Make the font size slightly smaller than the default, to visually distinguish it from h3 */
  font-size: 0.95rem;
}


/* ===== INJECTION 15 ===== ✅ */ 
/* Target the element where the 'data-vp-page-template' attribute equals 'error' */
[data-vp-page-template="error"] body {
    /* Hiding the body using CSS initially before using JavaScript to set opacity: 1 */
    opacity: 0;
}

/* ===== INJECTION 14 ===== ✅ */ 

/* Left-aligns images that are direct children of column layout cells */
.columnLayout .innerCell > figure.vp-image[data-width-type=pixel]:is([data-layout=center],[data-layout=wide],[data-layout=full-width]) {
    margin-inline: unset;
}

/* ===== INJECTION 13 ===== ✅ */ 

/* Left-aligns images that are direct children of /expand macros (accordion sections) */

.expand-content > figure.vp-image[data-width-type=pixel]:is([data-layout=center],[data-layout=wide],[data-layout=full-width]) {
    margin-inline: unset;
  }

/* ===== INJECTION 12 ===== ✅*/ 

/* Left-aligns images that are direct children of /info macros (but not inside /expand Macros) */

.panel-macro__content > figure.vp-image[data-width-type=pixel]:is([data-layout=center],[data-layout=wide],[data-layout=full-width]) {
    margin-inline: unset;
}

/* ===== INJECTION 11 =====✅*/ 

/* Left Aligning Normal (Non-List, Non-Accordion-Nested) Images */
figure.vp-image[data-width-type=pixel] {
  grid-column: 3 / 5;
}

/* ===== INJECTION 10 ===== ✅ */ 
/*
  When a user hovers their mouse over an item in the version dropdown menu,
  it highlights with a soft purple background.
*/
.vp-version-picker .vp-picker__menu__item:hover {
  background-color: #F5F0FF;
}

/*
  This styles the version item that is currently selected.
  It uses the same soft purple background to show which version is active.
*/
.vp-version-picker .vp-picker__menu__item--selected {
  background-color: #F5F0FF;
}

/*
  This changes the background of the selected item and the indicator bar (usually a vertical line)
  to a stronger purple color, making it easier to see which version is selected.
*/
.vp-version-picker .vp-picker__menu__item--selected:before,
.vp-picker__menu__item--selected {
  background-color: #977EF8;
}


/* ===== INJECTION 9 ===== ✅ */ 

/*
  Hides the sidebar until the ::part pseudoselector has appeared in the DOM
*/

vp-toc {
   opacity: 0;
   transition: all ease-in 0.3s;
}

/*
  Styles the navigation container inside the TOC component.
  Adds a thin left border to visually separate it from the content.
*/
vp-toc::part(shadow_toc-nav) {
    border-width: unset;
    border-style: unset;
}
  
  /*
    Styles the active link directly (the <a> element with part).
    Applies color and background to highlight the current section.
  */
vp-toc::part(shadow_toc-link) {
    color: #5243A3;
    background-color: #F5F0FF;
}
  
  /*
    Adds a visual indicator (a vertical bar) using the ::before pseudo-element.
    Since it's part of the <a>, and that <a> has a part, this works.
  */
vp-toc::part(shadow_toc-link)::before {
    height: 100%;
    background-color: #977EF8;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/* ===== INJECTION 8 ===== ✅ */ 

/* Hides the entire Hyvor Talk comments container initially (e.g., during loading or before conditions are met) */
hyvor-talk-comments {
   opacity: 0;
   transition: all ease-in 0.3s;
}

/* Completely hides the attribution badge inside the shadow DOM of the Hyvor Talk comments widget */
hyvor-talk-comments::part(shadow_hyvor_attribution_badge) {
  display: none;
}

/* =========================================== */
/* =========================================== */

/* ===== INJECTION 7 ===== ✅ */ 

.vp-picker__button {
    background-color: #ffffff;
    color: #3b2a60;
    font-weight: bold;
    border: 0;
    border-radius: 6px;
    box-shadow: 0px 0px 5px 1px #c4afe4;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

/* Slightly enhanced evil purple concentric glow on hover and active state */
.vp-picker__button:hover,
.vp-picker__button:active,
.vp-picker__button[aria-expanded="true"] {
    background-color: #ffffff;
    color: #3b2a60;
    box-shadow: 0px 0px 7px 2px rgba(138, 107, 200, 0.7);
    font-size: 1rem;
}

.vp-picker__button:hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: -1;
}

/* Futuristic outline to SVG paths, excluding keyboard-focused elements */
path:not(:focus-visible) {
    stroke: #3b2a60;
    filter: unset;
}

/* ===== INJECTION 6 ===== ✅ */ 
/* Style Starts */

/* ARTICLE NAVIGATION STYLES */

/* Set the default text color for all links inside the desktop navigation menu */
nav div.vp-tree ul.vp-tree__container li div.vp-tree-item__header a {
    color: #8e8e8e;
}

/* sets the color of all chevrons */ 
path:not(:focus-visible) {
    stroke: #3e3e3e;
}


/* Make links darker when they belong to top-level items in the desktop navigation menu */
nav div.vp-tree ul.vp-tree__container > li > div.vp-tree-item__header > a {
    color: #000c34;
}

/* Highlight the link of the currently active item in the desktop navigation menu */
nav div.vp-tree ul.vp-tree__container li.vp-tree-item--active a.vp-tree-item__header__title[aria-current="page"] {
    color: #4A3A9E;
}

/* Add a purple border around the header of the active item in the desktop navigation menu */
nav div.vp-tree ul.vp-tree__container li.vp-tree-item--active > div.vp-tree-item__header {
    border: 1px solid #977EF8;
    background-color: #BB99FF47;
}

/* ===== INJECTION 5 ===== */ /* WORKING*/

/* Adding a smooth scroll effect to the page */

html {
    scroll-behavior: smooth;
}

/* ===== INJECTION 4 ===== */ /* WORKING */

/* Styles the Nav links in the header */

/* Base link styling */
header li a.hc-header-font-color {
    position: relative;
    color: #000;
    text-decoration: none;
    background-color: #fff;
    padding: 0.5rem 1rem;
    transition: background-color 250ms ease-in-out;
    border: 2.5px solid transparent; /* Initially invisible */
    border-radius: 6px;
}

/* Hover effect */
header li a.hc-header-font-color:hover {
    background-color: #F7F7F9;
    text-decoration: none;
    animation: borderFadeIn 3.3s forwards, borderFadeOut 2.5s 1.5s ease-out forwards;
}

/* Keyframes for smooth clockwise border fade-in */
@keyframes borderFadeIn {
    0% {
        border-color: transparent;
    }
    20% {
        border-top-color: #6600ff;
    }
    40% {
        border-top-color: #6600ff;
        border-right-color: #6600ff;
    }
    60% {
        border-top-color: #6600ff;
        border-right-color: #6600ff;
        border-bottom-color: #6600ff;
    }
    80% {
        border-top-color: #6600ff;
        border-right-color: #6600ff;
        border-bottom-color: #6600ff;
        border-left-color: #6600ff;
    }
    100% {
        border-color: #6600ff; /* All sides fully visible */
    }
}

/* Keyframes for slower fade-out effect */
@keyframes borderFadeOut {
    0% {
        border-color: #6600ff;
    }
    50% {
        border-color: #875cff; /* Slightly lighter purple */
    }
    100% {
        border-color: transparent;
    }
}

/* ===== INJECTION 3 ===== */ /* WORKING */

/* */

/* 
   Footer container styling 
   - Uses flexbox for layout
   - Arranges child elements in a column direction
*/
footer div.grid.lg\:flex.grid.footer--alignment.hc-footer-font-color.vp-container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    footer div.grid.lg\:flex.grid.footer--alignment.hc-footer-font-color.vp-container {
        flex-direction: row;
        justify-content: center;
    }
}

/* 
   Footer links section (mobile-first) 
   - Uses flexbox for layout
   - Reverses the column direction for link arrangement
   - Centers the items horizontally
*/
footer div.grid.footer--alignment.hc-footer-font-color.vp-container .grid .footer__links {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

/* 
   Tablet breakpoint (768px and above)
   - Changes the `.footer__links` layout to block to prevent flex behavior
*/
@media (min-width: 768px) {
    footer div.grid.footer--alignment.hc-footer-font-color.vp-container .grid .footer__links {
        display: block;
    }
}

/* ===== INJECTION 2 ===== ✅ */ 

/* Aligns images with number / bullet list */

section#main-content li figure.confluence-embedded-image.vp-image.image-center {
    margin-inline: 0;
}

/* ======= DEFAULT ======= */ 

:root {
  --K15t-font-family-headline: "Inter", ui-serif, sans-serif;
  --K15t-font-family-body: "Inter", ui-sans-serif, sans-serif;
  --K15t-font-family-code: var(--vp-font-family-code);
  --K15t-font-weight-regular: 400;
  --K15t-font-weight-medium: 500;
  --K15t-font-weight-bold: 700;
  --K15t-font-size-2x-small: 0.625rem;
  --K15t-font-size-x-small: 0.75rem;
  --K15t-font-size-small: 0.8125rem;
  --K15t-font-size-medium: 1rem;
  --K15t-font-size-medium-large: 1.125rem;
  --K15t-font-size-large: 1.25rem;
  --K15t-font-size-x-large: 1.5rem;
  --K15t-font-size-2x-large: 2rem;
  --K15t-font-size-3x-large: 3rem;
  --K15t-line-height-x-small: 1.1;
  --K15t-line-height-small: 1.3;
  --K15t-line-height-medium: 1.5;
  --K15t-line-height-large: 1.7;
  --K15t-radius-factor: 1;
  --K15t-radius-2x-small: calc(1px*var(--K15t-radius-factor));
  --K15t-radius-x-small: calc(2px*var(--K15t-radius-factor));
  --K15t-radius-small: calc(var(--vp-border-radius-small)*var(--K15t-radius-factor));
  --K15t-radius-medium: calc(5px*var(--K15t-radius-factor));
  --K15t-radius-large: calc(var(--vp-border-radius-big)*var(--K15t-radius-factor));
  --K15t-radius-circle: 50%;
  --K15t-radius-pill: calc(1000px*(var(--K15t-radius-factor)*0.0375));
  --K15t-color-neutral-0: #fff;
  --K15t-color-neutral-25: #f7f7f9;
  --K15t-color-neutral-50: #eff0f4;
  --K15t-color-neutral-75: #e2e5eb;
  --K15t-color-neutral-100: #b7bdcf;
  --K15t-color-neutral-200: #8993af;
  --K15t-color-neutral-300: #5d6b8f;
  --K15t-color-neutral-400: #3d4e7b;
  --K15t-color-neutral-500: #193468;
  --K15t-color-neutral-600: #132e60;
  --K15t-color-neutral-700: #0a2656;
  --K15t-color-neutral-800: #021d4a;
  --K15t-color-neutral-850: #000e3d;
  --K15t-color-neutral-900: #000c34;
  --K15t-color-neutral-950: #000b2e;
  --K15t-color-neutral-1000: #000;
  --K15t-color-brand-25: var(--K15t-color-neutral-25);
  --K15t-color-brand-50: var(--K15t-color-neutral-50);
  --K15t-color-brand-100: var(--K15t-color-neutral-100);
  --K15t-color-brand-200: var(--K15t-color-neutral-200);
  --K15t-color-brand-300: var(--K15t-color-neutral-300);
  --K15t-color-brand-400: var(--K15t-color-neutral-400);
  --K15t-color-brand-500: var(--K15t-color-neutral-500);
  --K15t-color-brand-600: var(--K15t-color-neutral-600);
  --K15t-color-brand-700: var(--K15t-color-neutral-700);
  --K15t-color-brand-800: var(--K15t-color-neutral-800);
  --K15t-color-brand-900: var(--K15t-color-neutral-900);
  --K15t-color-blue-100: #e7efff;
  --K15t-color-blue-400: #1062fb;
  --K15t-color-blue-500: #0d0dfc;
  --K15t-color-blue-600: #0404a3;
  --K15t-color-yellow-100: #fff6de;
  --K15t-color-yellow-400: #ffc420;
  --K15t-color-green-100: #d4ffee;
  --K15t-color-green-400: #008756;
  --K15t-color-green-900: #004938;
  --K15t-color-red-100: #feedec;
  --K15t-color-red-400: #d12a3a;
  --K15t-color-red-700: #931536;
  --K15t-color-teal-100: #ccf6fd;
  --K15t-color-teal-400: #00d4f5;
  --K15t-color-purple-100: #eae3ff;
  --K15t-color-purple-400: #5d07a0;
  --K15t-color-purple-700: #45057c;
  --K15t-radius-factor:3;
  
.footer{padding: 1.5rem !important; min-height: initial !important; height:auto;}
.footer__attribution-line--copyright{height: 0px; overflow: hidden;}
.footer__links{text-align:center;}
.footer__links--separator{opacity:0;}
.footer__links--separator {
  opacity: 0;
}
.footer--alignment {
  align-items: center;
}
  
  
h1 {
    font-weight: 700;
}

.vp-article :where(.vp-article__content,.contentLayout2,.columnLayout.fixed-width .innerCell)>* {
    grid-column: 3 / 5;
}

.vp-article .article-header {
    max-width: var(--_content-spread-width);
}

.vp-breadcrumbs {
    max-width: var(--_content-spread-width);
}

.expand-container + .expand-container {
    margin-top: 0;
}
  
.vp-search-bar {
    min-width: 100px;
    position: relative;
    width: 100%;
}