@font-face {
    font-family: "Infra";
    src: url(../fonts/Infra-Light.woff2) format("woff2"), url(../fonts/Infra-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Infra";
    src: url(../fonts/Infra-Regular.woff2) format("woff2"), url(../fonts/Infra-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Infra";
    src: url(../fonts/Infra-RegularItalic.woff2) format("woff2"), url(../fonts/Infra-RegularItalic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Infra";
    src: url(../fonts/Infra-Medium.woff2) format("woff2"), url(../fonts/Infra-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Infra";
    src: url(../fonts/Infra-MediumItalic.woff2) format("woff2"), url(../fonts/Infra-MediumItalic.woff) format("woff");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Infra";
    src: url(../fonts/Infra-Bold.woff2) format("woff2"), url(../fonts/Infra-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
}

:root,
html[data-bs-theme="light"] {
    --color-foreground: rgb(29, 31, 72);
    --color-navbar: rgb(29, 31, 72);
    --color-breadcrumb: #4a4a4a;
    --color-border: #1d1f48;
    --color-toc-hover: #4c4c4c;
    --color-background: #ffffff;
    --color-background-subnav: #f0f0f0;
    --color-background-dark: #fefefe;
    --color-background-table-alt: #f9f9f9;
    --color-background-quote: #69696e;
    --color-underline: #ddd;
    --color-background-code: rgb(243 243 243);
    --color-sana: #d72344;
}

html[data-bs-theme="dark"] {
    --color-foreground: #e4e4e4;
    --color-navbar: #e4e4e4;
    --color-breadcrumb: #999;
    --color-border: #f0f0f0;
    --color-toc-hover: #fff;
    --color-background: #2d2d30;
    --color-background-subnav: #333337;
    --color-background-dark: #202124;
    --color-background-table-alt: #212123;
    --color-background-code: #202124;
}

.partnerbutton {
    height: 44px;
    padding-top: 13px !important;
}

.partnerbutton i {
    font-size: 20px;
    margin-left: 6px;
    margin-top: -2px;
}

.gettingStartedBtn {
    height: 48px;
}

.gettingStartedBtn i {
    font-size: 20px;
    margin-left: 6px;
    margin-top: -2px;
}


.btn.focus,
.btn:focus,
.btn:hover {
    color: var(--color-foreground);
}

h1 {
    font-weight: 600;
    font-size: 32px;
}

h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.8;
}

h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.8;
}

h5 {
    font-size: 14px;
    padding: 10px 0px;
}

article h1,
article h2,
article h3,
article h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}

article h1 {
    margin-top: 35px;
    margin-bottom: 35px;
}

.keyvisual h1 {
    font-size: 40px !important;
}

.keyvisual p {
    font-size: 17px !important;
    font-weight: 400;
}

.keyvisual.extended .foreground-image {
    position: absolute;
    bottom: 0 !important;
    left: 0;
    right: 0;
    margin: 0;
    top: 2rem !important;
    width: 500px;
    height: 450px;
    margin-left: auto;
    margin-right: 70px;
}

.keyvisual.extended {
    min-height: 35.2rem !important;
    padding: 6.25rem 0;
}

.keyvisual-up {
    margin: -4rem 0 0;
}

.keyvisual .grid-margin-x > .large-6 {
    width: calc(65% - 2rem);
}

.keyvisual-cta a {
    padding: 0.65rem 2.5rem 0.65rem 1.25rem !important;
    height: 96px;
}

.keyvisual-cta.with-icon.keyvisual-up + div[style*="height: 100px;"] {
    display: none;
}

.homepage .keyvisual-cta .cell.box-item {
    margin-bottom: 0px !important;
}

article h4 {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-underline);
}

body {
    font-family: "Infra" !important;
    color: var(--color-foreground) !important;
    line-height: 1.5;
    font-weight: 400;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    background-color: var(--color-background);
}

a {
    color: var(--color-sana);
    text-decoration: none;
}

strong {
    font-weight: 500;
}

header {
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .3);
}

.emphasized {
    color: var(--color-sana) !important;
}

#_content > a {
    margin-top: 1px;
    margin-bottom: 20px;
}

img {
    max-width: 100%;
}

a:hover,
a:focus {
    color: var(--color-sana);
}

.navbar .navbar-brand {
    margin-bottom: 10px;
    padding-top: 10px;
}

.body-content a:not(.anchorjs-link):hover,
.body-content a:not(.anchorjs-link):focus {
    text-decoration: underline;
}

header {
    height: auto;
}

body.dark-light .box-item img,
body.dark-theme .box-item img {
    background-color: #fff !important;
    border-radius: 8px;
}

.container-xxl.flex-nowrap {
    flex-direction: column;
}

.bg-body {
    background-color: var(--color-background-dark) !important;
    flex-direction: column;
    border-bottom: none !important;
    padding-top: 10px;
}

#search {
    border: none;
}

input#search-query:focus {
    color: var(--color-foreground);
}

input.form-control:focus {
    border-color: var(--color-sana);
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border: 1px solid var(--color-background-dark);
}

    .table-bordered > thead > tr > td,
    .table-bordered > thead > tr > th {
        background-color: var(--color-sana);
        color: var(--color-background-dark)
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--color-background-table-alt);
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 10px;
    font-size: 110%;
    border-left: 5px solid var(--color-background-quote);
    color: var(--color-background-quote);
}

.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
    background-color: var(--color-background-subnav);
    border-color: var(--color-background-subnav);
}

.breadcrumb > li,
.pagination {
    display: inline;
}

.tabGroup a[role="tab"] {
    font-weight: bold;
    color: var(--color-foreground);
    border-bottom: 0px;
}

    .tabGroup a[role="tab"]:hover,
    .tabGroup a[role="tab"]:focus {
        color: var(--color-foreground);
        text-decoration: none;
        outline: 0px;
    }

    .tabGroup a[role="tab"]:hover {
        color: var(--color-foreground);
        border-bottom: 2px solid var(--color-sana);
    }

    .tabGroup a[role="tab"][aria-selected="true"] {
        color: var(--color-foreground);
        border-bottom: 2px solid var(--color-sana);
        font-weight: bold;
    }

.button.icon-right.icon-arrow-right:after {
    content: "\2192";
}

.button.icon-left:after, .button.icon-left:before, .button.icon-right:after, .button.icon-right:before {
    top: 0.45rem;
}

body > header, body[data-layout=landing] > header {
    height: auto !important;
}

.nav-item {
    font-weight: 500 !important;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--color-sana) !important;
    background-color: var(--color-background-dark);
    border-bottom: 3px solid var(--color-sana) !important;
    transition: all ease 0.25s, background-color 0ms, color 0ms;
}

.navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover {
    color: var(--color-sana) !important;
    background-color: var(--color-background-dark);
    border-bottom: 3px solid var(--color-sana) !important;
}

.subnav.navbar.navbar-default {
    background-color: var(--color-background-subnav) !important;
}

.navbar > .container, .navbar > .container-fluid, .navbar > .container-xxl {
    justify-content: flex-start !important;
}

.dark-theme .offcanvas-body .form-control,
.dark-theme .search .form-control {
    border-radius: 20px;
    background-color: var(--color-background);
    border-color: var(--color-border);
    color: #fff;
}

.light-theme .offcanvas-body .form-control,
.light-theme .search .form-control {
    border-radius: 20px;
    border-color: #f0f0f0;
}

.breadcrumb {
    margin: 0;
    padding: 10px 0;
}
/* .breadcrumb li a {
    color: #e4e4e4 !important;
} */

.breadcrumb {
    background-color: var(--color-background-subnav);
}

    .breadcrumb .label.label-primary {
        background: #444;
        border-radius: 0;
        font-weight: normal;
        font-size: 100%;
    }

#breadcrumb .breadcrumb > li a,
#breadcrumb .breadcrumb > li span {
    border-radius: 0;
    font-weight: normal;
    font-size: 85%;
    display: inline;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    color: var(--color-foreground);
}

#breadcrumb .breadcrumb > li span {
    padding: 0 .6em 0;
}

#breadcrumb .breadcrumb > li a:hover {
    color: var(--color-sana);
    transition: all ease 0.25s;
}

.breadcrumb > li + li:before {
    display: inline-block;
    font-family: "Icomoon";
    transform: rotate(0deg) translate(1px, 5px);
    line-height: 1;
    margin-right: 0;
    transition: all .3s ease-in-out;
    transition-property: transform;
    content: "";
    font-weight: bolder;
    font-size: larger;
    margin-top: -2px;
    color: var(--color-background-dark);
}

.navbar-brand + div {
    margin-left: auto;
    margin-bottom: 20px;
}

.light-theme .breadcrumb > li + li:before {
    color: var(--color-foreground)
}

.toc .nav > li > a:hover,
.toc .nav > li > a:focus {
    color: var(--color-sana);
}

.form-control {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 14px;
}

    .form-control:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

input#search-query:focus {
    color: var(--color-foreground);
}

.toc ul {
    font-size: 12px;
    margin: 0;
}

.toc .flex-fill li:first-child.expander.expanded.active > a {
    font-weight: 600;
    font-size: 16px;
}

.toc .flex-fill li:first-child.expander.expanded.active > .expand-stub:before {
    top: 20px;
}

.toc .flex-fill li.expander.expanded > a {
    padding-bottom: 10px;
    display: block;
}


.dark-theme .toc .flex-fill li.expander > a {
    display: block;
    font-weight: 600;
    font-size: 16px;
    /* color: #fff; */
}

.toc .flex-fill li > ul > li {
    border-left: solid 3px transparent;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    padding-left: 0;
}

    .toc .flex-fill li > ul > li.active {
        color: var(--color-sana) !important;
        background-color: var(--color-background-code) !important;
        box-shadow: 0 0 2px 0 rgb(35 46 105 / 10%);
        border-left: solid 3px var(--color-sana);
    }

.toc .flex-fill > li > ul > li.active > a {
    color: var(--color-sana) !important;
}

.toc .flex-fill li ul li:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: lightgrey;
    margin-top: 5px;
    position: absolute;
    left: -3px;
    top: 0;
    z-index: -1;
}

.toc .flex-fill li.expander > ul li:has(ul) {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.toc .flex-fill li.expander > ul > li > a {
    color: var(--color-navbar);
    font-weight: 400 !important;
    font-size: 14px !important;
    background-color: transparent !important;
    display: block;
    padding: 9px 15px;
}

.toc .flex-fill li.expander > ul > li.active > a {
    color: var(--color-sana);
    font-weight: 450 !important;
}

.link-body-emphasis {
    color: var(--color-navbar) !important;
}

.offcanvas-body .toc .flex-fill li.expander.expanded.active > ul > li.expander.expanded.active > a {
    color: var(--color-sana) !important;
    background-color: transparent !important;
}

.offcanvas-body .toc .flex-fill li.expander.expanded.active > ul > li.expander.expanded.active {
    background-color: transparent !important;
}

.toc .flex-fill li.expander > ul > li > a:hover {
    color: var(--color-sana) !important;
    text-decoration: none;
}

.toc .flex-fill li.expander > ul > li:hover {
    color: var(--color-sana);
    border-left: solid 3px var(--color-sana);
}

.toc li.expander > .expand-stub:before {
    right: 15px;
    top: 9px;
}

.toc li.expanded > ul {
    margin-left: 15px;
}

.toc li {
    margin: 0;
}

.keyvisual-cta a p:last-child {
    margin-bottom: 0;
    line-height: 28px;
}

.toc li > a {
    font-size: 16px;
}

    .toc li > a:hover, .toc li > a:focus {
        text-decoration: none;
    }

.offcanvas-body .toc li.expander {
    padding: 9px 0;
    font-size: 16px;
    font-weight: 600;
}

.keyvisual-cta .cell {
    margin-top: 0;
}

.grid-margin-x > .cell {
    margin-bottom: 30px;
}

article h1 {
    font-size: 32px;
    font-weight: 600;
    margin-top: 35px;
    margin-bottom: 35px;
}

.affix h5 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0;
    border: none !important;
}

.affix ul > li.active > a, .affix ul > li.active > a:before {
    color: var(--color-sana);
}

.navbar .navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    margin-left: -20px;
}

body > footer, body[data-layout=landing] > footer {
    margin-top: auto;
}

.footer {
    border-top: none;
    background-color: var(--color-background-dark);
    padding: 15px 30px;
    font-size: 90%;
    height: 50px;
}

.footer-link:before {
    content: '|';
    margin-right: 20px;
}

.footer-link {
    padding-left: 20px;
}

footer.border-top.text-secondary {
    border-top: none;
    background-color: var(--color-background-dark);
    padding: 15px 0;
    font-size: 90%;
    font-weight: 600;
    border-top: none !important;
}

.grad-bottom {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
    height: 5px;
}

footer.border-top.text-secondary {
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

    footer.border-top.text-secondary span {
        color: var(--color-navbar);
    }

.link-secondary {
    padding-left: 10px;
    color: var(--color-navbar) !important;
    font-size: 14px;
    line-height: 22px;
}

.affix a.link-secondary::before {
    content: "• ";
}

.link-secondary:hover {
    padding-left: 10px;
    border-color: var(--color-sana);
    border-left: 2px solid var(--color-sana);
    color: var(--color-sana) !important;
    text-decoration: none !important;
}

.link-body-emphasis:hover {
    padding-left: 5px;
    border-color: var(--color-sana);
    border-left: 2px solid var(--color-sana);
    color: var(--color-sana) !important;
    text-decoration: none !important;
}

.link-secondary.active-affix {
    padding-left: 10px;
    color: var(--color-sana) !important;
    border-left: 2px solid var(--color-sana);
    font-weight: 450;
}

.link-body-emphasis.active-affix {
    padding-left: 5px;
    color: var(--color-sana) !important;
    border-left: 2px solid var(--color-sana);
    font-weight: 450;
}


.affix ul li {
    margin: 5px 0 !important;
}

    .affix ul li a {
        font-size: 13px;
        display: inline-block;
    }

.light-theme .affix ul > li > a {
    color: var(--color-navbar) !important;
}

.light-theme .breadcrumb li a {
    color: var(--color-foreground) !important;
}

.light-theme .offcanvas-body .form-control, .light-theme .search .form-control {
    background-color: #fff;
    color: #666666;
    border-color: var(--color-border);
}

.light-theme .toc .flex-fill li.expander.expanded.active a {
    color: var(--color-navbar);
    background-color: transparent;
    font-size: 16px;
    font-weight: 600;
}

.light-theme .toc .flex-fill li.expander > ul li.active {
    background-color: var(--color-background-code);
    box-shadow: 0 0 2px 0 rgb(35 46 105 / 10%);
    border-bottom: 1px solid rgba(35, 46, 105, 0);
    border-left: solid 3px var(--color-sana);
}

    .light-theme .toc .flex-fill li.expander > ul li.active a {
        color: var(--color-sana);
    }

.light-theme .toc li > a {
    color: var(--color-navbar);
    background-color: transparent;
    font-size: 16px;
    font-weight: 600;
}

.light-theme .toc li.expanded > ul {
    display: block;
    margin-top: 15px;
}

.dark-theme .navbar-expand-lg .navbar-nav .nav-link {
    color: var(--color-navbar) !important;
    padding: 10px 20px;
}

    .dark-theme .navbar-expand-lg .navbar-nav .nav-link.active {
        color: var(--color-sana) !important;
    }

.breadcrumb-item + .breadcrumb-item {
    padding-left: 15px;
}

#breadcrumb .breadcrumb > li a, #breadcrumb .breadcrumb > li span {
    font-size: 14px;
}

.breadcrumb-item + .breadcrumb-item:before {
    padding-right: 15px;
}

.dark-theme .breadcrumb-item + .breadcrumb-item:before {
    color: var(--color-navbar) !important;
}

.dark-theme .offcanvas-body input.form-control::placeholder,
.dark-theme .search input.form-control::placeholder {
    color: #666 !important;
}

.navbar #navbar form > input {
    margin-top: -10px;
}

.navbar #navbar form > i.bi {
    top: 5px;
}

*:not(pre) > code {
    color: var(--color-foreground);
    background-color: var(--color-background-code);
    padding: 5px 10px;
}

html[data-bs-theme="light"] *:not(pre) > code {
    color: var(--color-foreground);
    background-color: #fffadd;
    font-style: oblique;
    font-weight: 700;
}

.dark-theme .toc .flex-fill li.expander > ul > li.active {
    background-color: var(--color-background-code);
    box-shadow: 0 0 2px 0 rgb(35 46 105 / 10%);
    border-left: solid 3px var(--color-sana);
}

.dark-theme .toc .flex-fill li.expander > ul > li > a {
    padding: 0px 1px;
}

.dark-theme .toc .flex-fill li.expander.expanded > ul > li.expander.expanded > a {
    padding-bottom: 10px;
}

.dark-theme .toc .flex-fill li.expander > ul > li.active > a {
    color: var(--color-sana) !important;
}

.next-article {
    border-top: none !important;
}

.dark-theme .toc .flex-fill li.expander.expanded.active > ul > li:has(ul) {
    background-color: transparent;
}

.dark-theme .toc .flex-fill li.expander.expanded.active > ul > li > ul > li.active {
    background-color: var(--color-background-code);
}

.dark-theme .toc .flex-fill li.expander > a:hover {
    color: var(--color-sana);
    text-decoration: none;
}

.light-theme .navbar-expand-lg .navbar-nav .nav-link {
    color: var(--color-navbar);
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
    border-bottom: 3px solid var(--color-sana);
}

.breadcrumb li a:hover {
    color: var(--color-sana) !important;
    text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item:before {
    content: "›";
}

.toc form.filter > input {
    border-radius: 20px;
}

.navbar #navbar form > input {
    margin-top: -10px;
    border-radius: 20px;
}

.alert {
    background-color: inherit;
    border: none;
    padding: 0;
    border-radius: 0;
    /* box-shadow: 0px 1px 6px 0 var(--color-navbar); */
}

    .alert > p:last-child {
        margin-bottom: 0;
        padding: 5px 10px;
        background-color: var(--color-background-dark);
    }

    .alert > p:last-child {
        border-bottom: 1px solid;
    }

    .alert > h5:first-child {
        padding: 10px 15px;
        margin-top: 0;
        margin-bottom: 0;
        text-transform: uppercase;
        font-weight: bold;
        border-top: 2px solid;
        background-color: var(--color-background-dark);
        border-radius: none;
    }

    .alert > ul {
        margin-bottom: 0;
        padding: 5px 40px;
    }

.alert-info {
    color: #1976d2;
}

.alert-warning {
    color: #f57f17;
}

.alert-danger {
    color: #d32f2f;
}

pre {
    padding: 9.5px;
    margin: 4px 0 10px;
    font-size: 13px;
    word-break: break-all;
    word-wrap: break-word;
    background-color: var(--color-background-code);
    border-radius: 5px;
    border: none;
}

    pre > code {
        background: transparent;
    }

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Optional: Apply to specific elements */
.scrollable-element {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.toc form.filter {
    display: flex;
    position: relative;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.keyvisual-cta .cell {
    margin-top: 0 !important;
}



.navbar-expand-md .navbar-nav .nav-link {
    /* color: #fff; */
    padding: 8px 20px;
    border-bottom: 3px solid transparent;
}

    .navbar-expand-md .navbar-nav .nav-link:hover {
        color: var(--color-sana) !important;
        border-color: var(--color-sana);
    }

.keyvisual-cta.in-article a {
    height: 100%;
}

.button.icon-right.icon-arrow-right:after {
    font-family: 'IcoMoon';
    content: "\e70b" !important;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    speak: none;
}

body:not([data-search])[data-layout=""] > main > .affix, body:not([data-search])[data-layout=conceptual] > main > .affix {
    display: block;
    width: 320px;
    margin-top: -26px;
    padding-top: 26px;
    overflow-x: hidden;
    overflow-y: hidden;
    max-height: calc(100vh - 160px - 5.6rem);
}

#affix > ul {
    overflow-y: auto;
    max-height: calc(100vh - 233px - 5.6rem);
}

body:not([data-search])[data-layout=""] > main > .toc-offcanvas, body:not([data-search])[data-layout=conceptual] > main > .toc-offcanvas {
    flex: .35;
    display: block;
    overflow: hidden;
    max-width: 360px;
    margin-top: -26px;
    padding-top: 26px;
    max-height: calc(100vh - 160px - 5.6rem);
}

.toc li > a {
    display: block;
}

#see-also {
    margin-top: 100px;
    background-color: var(--color-sana);
    color: white;
    padding-left: 30px;
    display: inline-block;
    text-align: center;
}

    #see-also a {
        color: white;
    }

        #see-also a:hover {
            padding-right: 26px !important;
        }

.keyvisual-cta a img {
    background-color: #fff;
    height: 4rem !important;
    width: 4rem !important;
    border-radius: 8px;
}

.keyvisual-cta a {
    box-shadow: 0 4px 10px 0 rgb(35 46 105 / 10%);
}

html[data-bs-theme="dark"] .keyvisual-cta a {
    box-shadow: 0 2px 10px 0 white;
}

.keyvisual-cta a:hover {
    border: 1px solid var(--color-sana);
    transition: all .3s ease-in-out;
    box-shadow: 0 2px 10px 0 var(--color-sana) !important;
}

.search-results .pagination {
    display: flex;
    justify-content: center;
}

.search-results .pagination .page-link {
    color: var(--color-sana);
}

.search-results .pagination .page-link:hover {
    border-color: 1px solid var(--color-sana);
}

.search-results .pagination .page-link.active {
    background-color: var(--color-sana);
    border-color: 1px solid var(--color-sana);
    color: white;
}

.search-results .sr-item b {
    color: var(--color-sana);
    background-color: #fffadd;
    font-weight: 700;
}

.graphqlBtn {
    margin-bottom: 30px;
}

/* #region Homepage */
@media (max-width: 1280px) {
    body: not([data-search])[data-layout=""] > main > .toc-offcanvas, body:not([data-search])[data-layout=conceptual] > main > .toc-offcanvas {
        flex: 0.55;
    }

    .keyvisual-cta.with-borders a {
        padding: 1.25rem 0.5rem 1.25rem 0.5rem;
    }

    .keyvisual-cta a img {
        margin: 0 0.5rem 0 0 !important;
        width: 4rem !important;
        height: 4rem !important;
    }

    .keyvisual-cta a p:last-child {
        line-height: 25px;
    }

    .grid-margin-x > .large-6 {
        width: calc(51% - 3rem) !important;
    }

    .keyvisual.extended .foreground-image {
        top: 3rem !important;
    }
}

@media (min-width: 991px) and (max-width: 1280px) {
    body:not([data-search])[data-layout=""] > main > .affix,
    body:not([data-search])[data-layout=conceptual] > main > .affix {
        width: 250px;
    }

    body:not([data-search])[data-layout=""] > main > .toc-offcanvas, body:not([data-search])[data-layout=conceptual] > main > .toc-offcanvas {
        min-width: 210px;
    }
}

@media (min-width: 1280px) {
    .container, .container-fluid, .container-xxl {
        padding-right: 70px !important;
        padding-left: 70px !important;
    }
}

@media (max-width: 1023px) {
    .keyvisual.extended .foreground-image {
        position: relative;
        width: 500px;
        height: 330px;
        margin-left: auto;
        margin-right: auto;
        top: -60px !important;
    }

    .keyvisual.extended .grid-margin-x > .large-6 {
        width: 100% !important;
    }
}

@media (max-width: 991px) {

    .keyvisual-cta.in-article a {
        min-height: 150px;
    }

    .offcanvas-body .toc li.expander {
        padding: 9px 7px;
    }

    .toc .flex-fill li:first-child.expander.expanded.active > .expand-stub:before {
        right: 24px;
    }

    body:not([data-search])[data-layout=""] > main > .affix, body:not([data-search])[data-layout=conceptual] > main > .affix {
        display: none;
    }

    body:not([data-search])[data-layout=""] > main > .content, body:not([data-search])[data-layout=conceptual] > main > .content {
        margin-right: 0 !important;
    }

    article h1 {
        font-size: 26px;
    }
}

@media (max-width: 900px) {
    .keyvisual-cta .grid-container {
        padding-bottom: 0px;
    }

    .keyvisual-cta .medium-8.large-6.cell.text-column.box-item {
        width: calc(100% - 34px) !important;
        margin-bottom: 13px !important;
    }
}

@media (min-width: 768px) {

    .partnerbutton {
        margin-top: 14px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        float: right !important;
        font-size: 14px !important;
    }

    .container, .container-fluid, .container-xxl {
        padding-right: 50px;
        padding-left: 50px;
    }

    body:not([data-search])[data-layout=""] > main > .toc-offcanvas, body:not([data-search])[data-layout=conceptual] > main > .toc-offcanvas {
        min-width: 210px;
    }
}

@media (max-width: 767px) {
    .partnerbutton {
        display: none !important;
    }

    .toc li > a {
        font-size: 14px;
        font-weight: 500;
    }
}

@media (min-width: 768px) {
    body:not([data-search])[data-layout=""] > main > .affix, body:not([data-search])[data-layout=conceptual] > main > .affix {
        position: sticky;
        top: calc(150px + 1.6rem);
    }
}

@media (min-width: 768px) {
    body:not([data-search])[data-layout=""] > main > .toc-offcanvas, body:not([data-search])[data-layout=conceptual] > main > .toc-offcanvas {
        position: sticky;
        top: calc(150px + 1.6rem);
    }
}

@media (max-width: 768px) {
    body:not([data-search])[data-layout=""] > main > .toc-offcanvas, body:not([data-search])[data-layout=conceptual] > main > .toc-offcanvas {
        flex: 0;
    }

    #autocollapse .btn.btn-lg {
        position: absolute;
        top: 0;
        right: 0;
    }

    .navbar #navbar form > i.bi {
        top: -3px;
    }

    .navbar #navbar form.search {
        order: inherit;
    }

    .navbar #navbar {
        align-items: center;
    }

    .nav-item {
        text-align: center;
    }
}