/* Add to custom CSS */
html {
  transition: opacity 0.3s ease-in !important;
}

/* Default */
.article__content .confluence-embedded-file-wrapper .confluence-embedded-image,
.vp-article :where(.vp-article__content, .contentLayout2, .columnLayout.fixed-width .innerCell, .vp-article__integration) img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important; 
    margin: 2em auto !important;
    object-fit: contain;
}

/* Remove forced grid layout */
.vp-article :where(.vp-article__content, .contentLayout2, .columnLayout.fixed-width .innerCell, .vp-article__integration) {
    display: block !important; 
    width: 100% !important;
}

/* Desktop */
@media screen and (min-width: 1920px) {
    .article__content .confluence-embedded-file-wrapper .confluence-embedded-image {
        /* Optional overrides */
    }
}

/* Tablet */
@media screen and (max-width: 1023px) {
    .article__content .confluence-embedded-file-wrapper .confluence-embedded-image,
    .vp-article :where(.vp-article__content, .contentLayout2, .columnLayout.fixed-width .innerCell, .vp-article__integration) img {
        width: 90% !important;
        height: auto !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    .article__content .confluence-embedded-file-wrapper .confluence-embedded-image,
    .vp-article :where(.vp-article__content, .contentLayout2, .columnLayout.fixed-width .innerCell, .vp-article__integration) img {
        width: 100% !important;
        height: auto !important;
    }
}

/* Text - Left Align */
.article_content p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    text-align: left !important; 
    margin-bottom: 15px; 
}

/* Numbered steps - Left align */
.article__content ol {
    padding-left: 20px;
    margin-top: 30px;
    text-align: left !important; 

}

.article_content ol li {
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left !important; 
}

/* Header style - Center */
.vp-article__heading {
    max-width: 600px;
    text-align: center !important;
    margin: 5px auto;
    font-weight: bold;
  	margin-bottom: 30px;
}

.article__content h2 {
    font-size: 20px; 
    font-weight: 600; 
    color: #444; 
    text-align: center !important;
    margin: 15px auto; 
    padding: 5px 0;
    display: block;
    width: fit-content; 
}

/* Breadcrumbs */
.vp-breadcrumbs {
    display: none !important;
}

/* Ensures everything except the headers is left-aligned */
.article__content p,
.article__content ol,
.article__content ol li,
.vp-article__heading,
.article__content h2 {
    text-align: left !important;
}

/* Center Headers */
.vp-article__heading,
.article__content h2 {
    text-align: center !important;
}

/* Left side menu */
.vp-tree-item .vp-tree-item__header a {
    font-size: 15px !important;
    padding-left: 5px !important;   
    padding-right: 5px !important;  
    font-weight: lighter;
    color: #333333;
}

/* Image blockquote cleanup */
.article__content blockquote {
    padding: 0 !important; 
    margin: 0 !important;   
    border: none !important; 
    background: none !important; 
    box-shadow: none !important; 
    font-style: normal !important; 
}

.vp-tree-item .vp-tree-item__header__expand-button:before {
    display: inline-block !important; 
    font-size: 24px !important; 
    height: auto !important; 
    width: auto !important; 
    margin-right: 8px !important; 
    vertical-align: middle !important; 
}

/* Space around images */
.vp-article img {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}

/* Navigation and header tweaks */
form[role="search"] {
    position: absolute;
    left: 136px;
    top: 30px;
  
  	padding-right: 51px;
}

.header__navigation {
    position: fixed;
}

.header__navigation,
.top-bar,
.top-bar-left,
#site-navigation {
    max-height: 0;
    padding: 0;
}

.top-bar-left {
    display: none;
}

/* PAGE CENTERING FIX */
.vp-article {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 20px;
}

.footer {
    display: none;
}

/* Left nav icons */
.vp-tree-item__header__icon {
    display: none;
}

/* Rounded corners */
:root {
    --K15t-radius-2x-small: 8px;
    --K15t-radius-small: 8px;
}

/* Right nav (TOC) base style */
vp-toc {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    color: #333333;
}

/* TOC active link */
.toc-link.is-active-link {
    border-radius: var(--K15t-radius-small);
}

.toc-link.is-active-link.no-before::before {
    content: none;
}

.vp-collapse-button {
    display: none !important;
}

/* Fonts and layout left menu */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

.vp-tree-item .vp-tree-item__header a {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    color: #333333;
    font-size: 15px;
}

:root {
    --_spacing: 0rem; 
} 

.vp-article__aside-left .vp-desktop-navigation__page-tree {
    --_spacing: 0rem; 
    padding-left: 5px !important;  
    padding-right: 5px !important; 
}

/* Adjusting the left navigation container width */
.vp-article__aside-left {
    max-width: 250px !important;  
    padding-left: 5px !important;  
}


.vp-tree-item {
    margin-left: 0px !important;  /* Ensure no extra margin */
    margin-right: 0px !important; /* Ensure no extra margin */
}

:root {
    --K15t-radius-pill: 8px;
    --border-width: 2px;
}

.vp-search-bar__input-container {
    --border-width: 2px;
    width: 220px;
    margin: 0 auto;
    height: 33px;
}

.vp-tree__container {
   
    padding-right: 28px;
    --_row-gap: 14px;
}

:root {
    --_row-gap: 14px;
}

.vp-tree-item .vp-tree-item__header__icon [data-vp-component=icon][data-vp-id^=dot-icon-tree-item] {
    display: none;
}

.vp-tree-item .vp-tree-item__header__expand-button {
    align-items: initial;
}

.vp-search-input__input::placeholder {
    font-size: 15px;  
    color: #64748B;      
    opacity: 3;       
}

svg[data-vp-id="magnifier-icon"] path {
    fill: #64748B; 
    opacity: 0.7; 
}

svg[data-vp-id^="chevron-right-icon-tree-item"] {
    width: 14px; 
    vertical-align: middle; 
    fill: #94A3B8;
    margin-top: 2.75px; 
    opacity: 0.4; 
}

:root {
    --K15t-background-neutral-hovered: transparent;
}

.vp-tree-item--with-hover-effect .vp-tree-item__header__expand-button:focus-visible,
.vp-tree-item--with-hover-effect .vp-tree-item__header__expand-button:hover {
    background-color: transparent !important;
}

/* Make sure containers allow overflow */
.vp-article,
.vp-article__content,
.contentLayout2,
.columnLayout.fixed-width .innerCell,
.vp-article__integration,
.article__content {
    overflow: visible !important;
    max-width: 100% !important;
}

/* Remove max-width on image containers */
.confluence-embedded-file-wrapper,
.article__content .confluence-embedded-file-wrapper {
    max-width: none !important;
    overflow: visible !important;
}

/* Prevent clipping for full-size images */
.vp-article img,
.article__content img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 2em auto !important;
    object-fit: contain;
}

/* Active OR Hovered items get 220px */
.vp-tree-item--with-hover-effect.vp-tree-item--active > .vp-tree-item__header,
.vp-tree-item--with-hover-effect > .vp-tree-item__header:hover {
  width: 220px !important;
}

.header [data-vp-component=search-bar] {
    padding-left: 5px;
}

/* GLOBAL TEXT STYLING */
.article__content,
.article__content *:not(svg):not(path):not(b):not(strong) {
  font-family: 'Montserrat', sans-serif !important;
  color: #333333 !important;
  font-weight: 400 !important;
}

/* Let bold tags be bold */
.article__content b,
.article__content strong {
  font-weight: 700 !important;
}


/* Headers: Bold + Bigger */
.article__content h1,
.article__content h2,
.article__content h3
 {
  font-weight: 800 !important;
  color: #333333 !important;
  font-size: 1.5em !important;
}
/* Add this to your origin site's custom CSS */
html, body {
  display: none !important;
}

html.page-ready, body.page-ready {
  display: block !important;
}

/* Image fade-in */
.vp-article img,
.article__content img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.vp-article img.loaded,
.article__content img.loaded {
  opacity: 1;
}

/* Prevent layout shift */
.vp-tree-item .vp-tree-item__header a {
  min-height: 1.5em;
  display: inline-block;
}