.container,
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.container-fluid {
    padding-right: 2rem;
    padding-left: 2rem;
}
.row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}
.row.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.col.reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.col-xs,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.col-xs {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
}
.col-xs-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
}
.col-xs-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
}
.col-xs-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}
.col-xs-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
}
.col-xs-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
}
.col-xs-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}
.col-xs-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
}
.col-xs-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
}
.col-xs-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
}
.col-xs-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
}
.col-xs-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
}
.col-xs-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.col-xs-offset-0 {
    margin-left: 0;
}
.col-xs-offset-1 {
    margin-left: 8.33333333%;
}
.col-xs-offset-2 {
    margin-left: 16.66666667%;
}
.col-xs-offset-3 {
    margin-left: 25%;
}
.col-xs-offset-4 {
    margin-left: 33.33333333%;
}
.col-xs-offset-5 {
    margin-left: 41.66666667%;
}
.col-xs-offset-6 {
    margin-left: 50%;
}
.col-xs-offset-7 {
    margin-left: 58.33333333%;
}
.col-xs-offset-8 {
    margin-left: 66.66666667%;
}
.col-xs-offset-9 {
    margin-left: 75%;
}
.col-xs-offset-10 {
    margin-left: 83.33333333%;
}
.col-xs-offset-11 {
    margin-left: 91.66666667%;
}
.start-xs {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
}
.center-xs {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}
.end-xs {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
}
.top-xs {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.middle-xs {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.bottom-xs {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.around-xs {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.between-xs {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.first-xs {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
}
.last-xs {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
@media only screen and (min-width: 48em) {
    .container {
        width: 49rem;
    }
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-offset-0,
    .col-sm-offset-1,
    .col-sm-offset-10,
    .col-sm-offset-11,
    .col-sm-offset-12,
    .col-sm-offset-2,
    .col-sm-offset-3,
    .col-sm-offset-4,
    .col-sm-offset-5,
    .col-sm-offset-6,
    .col-sm-offset-7,
    .col-sm-offset-8,
    .col-sm-offset-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .col-sm {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }
    .col-sm-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }
    .col-sm-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }
    .col-sm-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }
    .col-sm-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }
    .col-sm-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }
    .col-sm-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }
    .col-sm-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }
    .col-sm-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }
    .col-sm-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }
    .col-sm-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }
    .col-sm-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }
    .col-sm-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-3 {
        margin-left: 25%;
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-6 {
        margin-left: 50%;
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-9 {
        margin-left: 75%;
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .start-sm {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }
    .center-sm {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }
    .end-sm {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }
    .top-sm {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .middle-sm {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .bottom-sm {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    .around-sm {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    .between-sm {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .first-sm {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }
    .last-sm {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}
@media only screen and (min-width: 64em) {
    .container {
        width: 65rem;
    }
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-offset-0,
    .col-md-offset-1,
    .col-md-offset-10,
    .col-md-offset-11,
    .col-md-offset-12,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4,
    .col-md-offset-5,
    .col-md-offset-6,
    .col-md-offset-7,
    .col-md-offset-8,
    .col-md-offset-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .col-md {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }
    .col-md-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }
    .col-md-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }
    .col-md-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }
    .col-md-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }
    .col-md-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }
    .col-md-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }
    .col-md-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }
    .col-md-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }
    .col-md-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }
    .col-md-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }
    .col-md-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }
    .col-md-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    .col-md-offset-0 {
        margin-left: 0;
    }
    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-md-offset-3 {
        margin-left: 25%;
    }
    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-md-offset-6 {
        margin-left: 50%;
    }
    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-md-offset-9 {
        margin-left: 75%;
    }
    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }
    .start-md {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }
    .center-md {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }
    .end-md {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }
    .top-md {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .middle-md {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .bottom-md {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    .around-md {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    .between-md {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .first-md {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }
    .last-md {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}
@media only screen and (min-width: 75em) {
    .container {
        width: 76rem;
    }
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-offset-0,
    .col-lg-offset-1,
    .col-lg-offset-10,
    .col-lg-offset-11,
    .col-lg-offset-12,
    .col-lg-offset-2,
    .col-lg-offset-3,
    .col-lg-offset-4,
    .col-lg-offset-5,
    .col-lg-offset-6,
    .col-lg-offset-7,
    .col-lg-offset-8,
    .col-lg-offset-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .col-lg {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }
    .col-lg-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }
    .col-lg-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }
    .col-lg-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }
    .col-lg-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }
    .col-lg-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }
    .col-lg-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }
    .col-lg-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }
    .col-lg-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }
    .col-lg-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }
    .col-lg-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }
    .col-lg-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }
    .col-lg-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    .col-lg-offset-0 {
        margin-left: 0;
    }
    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-lg-offset-3 {
        margin-left: 25%;
    }
    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-lg-offset-6 {
        margin-left: 50%;
    }
    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-lg-offset-9 {
        margin-left: 75%;
    }
    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }
    .start-lg {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }
    .center-lg {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }
    .end-lg {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }
    .top-lg {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .middle-lg {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .bottom-lg {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    .around-lg {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    .between-lg {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .first-lg {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }
    .last-lg {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}


h1 {
    font-size: 2.4rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.6rem;
}
h4 {
    font-size: 1.2rem;
}
h5 {
    font-size: 1rem;
}
h6 {
    font-size: 0.8rem;
}

.bold {
    font-weight: bold;
}
.semibold {
    font-weight: 600;
}
.medium {
    font-weight: 500;
}
.regular {
    font-weight: 400;
}
.light {
    font-weight: 300;
}


//custom directive for table of contents
async function renderTableOfContents(path) {
	try {
		await waitForElement("[data-table-of-contents]");
	} catch (error) {
		return;
	}

	const extraTableOfContents = document.querySelectorAll(
		"[data-table-of-contents]"
	);

	const tableOfContents = document.querySelector("#table-of-contents-content");
	for (let i = 0; i < extraTableOfContents.length; i++) {
		const div = extraTableOfContents[i];
		const pos = div.getAttribute("data-table-of-contents");
		div.id = "table-of-contents-custom-" + i;
		const extraTableOfContentsClone = div.cloneNode(true);
		extraTableOfContentsClone.id = "table-of-contents-cloned-custom-" + i;
		extraTableOfContentsClone.removeAttribute("data-table-of-contents");
		const alreadyPresent =
			document.querySelector("#" + extraTableOfContentsClone.id) !== null;
		if (!alreadyPresent) {
			if (pos === "top") {
				tableOfContents.prepend(extraTableOfContentsClone);
			} else {
				tableOfContents.append(extraTableOfContentsClone);
			}
			extraTableOfContentsClone.classList.remove("hidden");
			div.remove();
		}
	}
}

//waits for element to be present in the DOM
function waitForElement(selector) {
	return new Promise((resolve, reject) => {
		const intervalId = setInterval(() => {
			const element = document.querySelector(selector);
			if (element) {
				clearInterval(intervalId);
				resolve(element);
			}
		}, 1000);
		//add a timeout to reject the promise
		setTimeout(() => {
			clearInterval(intervalId);
			reject("Element not found");
		}, 5000);
	});
}
//add custom js here. This will be executed on every page load or change. Each function is added twice, once
//for page load and once for route change
(function (history) {
	var pushState = history.pushState;
	history.pushState = function (state, key, path) {
		if (typeof history.onpushstate == "function") {
			history.onpushstate({ state: state, path: path });
		}
		pushState.apply(history, arguments);
	};

	window.onpopstate = history.onpushstate = function (e) {
		renderTableOfContents(e.path);
		initializeChecklistJS();
		underlineAPIReference(e.path);
	};
	renderTableOfContents(window.location.pathname);
	initializeChecklistJS();
	underlineAPIReference(window.location.pathname);
})(window.history);

async function initializeChecklistJS() {
	try {
		await waitForElement(".checklist-item");
	} catch (error) {
		return;
	}
	document.querySelectorAll(".checklist-item").forEach((item) => {
		const buttons = item.querySelectorAll(".checklist-btn");
		const circle = item.querySelector(".checklist-circle-icon");
		const warningBox = item.querySelector(".warning-box");

		buttons.forEach((button) => {
			button.addEventListener("click", () => {
				// Remove active classes from all buttons
				buttons.forEach((btn) => {
					btn.classList.remove("active-yes", "active-no", "active-na");
				});

				// Add active class to clicked button
				const value = button.dataset.value;
				button.classList.add(`active-${value}`);

				// Handle circle icon
				if (value === "yes") {
					circle.classList.add("checked");
				} else {
					circle.classList.remove("checked");
				}

				// Handle warning box
				if (warningBox) {
					warningBox.classList.toggle("show", value === "no");
				}
			});
		});
	});
	console.log("Feature initialized!");
}

function underlineAPIReference(path) {
	if (!path) return;
	const link = document.querySelector(
		'#navbar a[href^="/api-reference/overview"], #navbar a[href^="/docs/api-reference/overview"]'
	);
	if (!link) return;
	let underline = link.querySelector("div");
	if (!underline) return;

	let classList = underline.classList;

	if (path.includes("api-reference")) {
		setTimeout(() => {
			classList.add("bg-primary");
			classList.add("dark:bg-primary-light");
		}, 100);
	} else {
		setTimeout(() => {
			classList.remove("bg-primary");
			classList.remove("dark:bg-primary-light");
		}, 100);
	}
}

function navBarFunctions() {
	document.querySelectorAll("a").forEach(function (link) {
		const text = link.textContent.trim();
		if (
			text === "Payments APIs" ||
			text === "Payouts APIs" ||
			text === "Secure ID APIs" ||
			text === "Partners APIs" ||
			text === "Additional APIs" ||
			text === "Help"
		) {
			link.style.display = "none";
		}
	});
}

(async function () {
	try {
		navBarFunctions();
		await waitForElement("#navbar");
		navBarFunctions();
	} catch (e) {
		console.log(e);
	}
})();

// This script is a CLI tool to update MDX files by adding unique iframes to each accordion.
const fs = require("fs");
const readline = require("readline");

const rl = readline.createInterface({
	input: process.stdin,
	output: process.stdout,
});

// Function to add iframes to each accordion in the MDX file
function updateMdxFile(filePath, sectionTitle) {
	try {
		let content = fs.readFileSync(filePath, "utf8");

		// Match each Accordion block
		const accordionRegex =
			/<Accordion title=(?:"|\')(.*?)(?:"|\')>([\s\S]*?)<\/Accordion>/g;
		let match;
		let count = 1;

		// Replace each match with an updated block containing the iframe
		content = content.replace(accordionRegex, (fullMatch, title, body) => {
			const iframe = `\n    <iframe\n        src=\"https://www.cashfree.com/devstudio/preview/pg/embed/faqFeedback?section=${sectionTitle}-${count}\"\n        style={{ width: \"100%\", height: \"60px\", border: \"none\" }}\n        title=\"FAQs feedback component\"\n    ></iframe>`;
			count++;
			return `<Accordion title=\"${title}\">${body}${iframe}\n  </Accordion>`;
		});

		// Write the updated content back to the file
		fs.writeFileSync(filePath, content, "utf8");
		console.log("File updated successfully!");
	} catch (error) {
		console.error("Error updating the file:", error.message);
	}
}

// Prompt user for file path and section title
rl.question("Enter the path to the MDX file: ", (filePath) => {
	rl.question(
		"Enter the section title (e.g., Payouts-General-FAQ): ",
		(sectionTitle) => {
			updateMdxFile(filePath, sectionTitle);
			rl.close();
		}
	);
});


Prerequisites

Shopify Integration

Custom Websites

Integration Steps

Integrating One Click Checkout on your store

Integrations

Cashfree Payments Developer Documentation

Learn about the various products and integrations available for accepting payments.

Introduction

Easily manage checkout for your WooCommerce store with Cashfree Payments.

WooCommerce

Learn more about using multiple payment gateways for your online store

Overview

Learn about how to add new payment gateways to your flowwise account

Add a gateway

Our objective is to provide a safer business environment for you by mitigating risks that involve fraudulent transactions and chargebacks. With RiskShield, you can prevent financial losses because of frauds.

RiskShield

In this article, you will learn about the flagged and blocked transactions.

Risky Transactions

Cashfree Payments' other products for accepting payments

Co-Lending

Beneficiary Management

Downtimes

Create Virtual Account

Manage Virtual Account

Delete Virtual Account

Allocate Funds

Initiate Payout

Internal Fund Transfer

Whitelist Bank Account

Create Cashgram

Approve Batch Cashgrams

Verify Beneficiary Name

Redeem a Cashgram

Lifecycle

Payout Protect

Getting Started

My Blacklists

Smart Limits

Explore the new enhancements and improvements

Payouts Change Log

Secure ID Introduction

Account Aggregator

Embedded Payments - An Overview

Get Started with Embedded Payments

Get Started

Adding Merchants with Embedded Payments

Adding Merchants

In this article, you will learn about the various functionalities in the Embedded Payments dashboard.

Embedded Payments Dashboard

Dashboard

Commissions and Invoices

Affiliate Program - An Overview

An Overview

Become a Cashfree Affiliate

In this article, you will learn about the various functionalities in the Affiliate dashboard.

Affiliate Partner Dashboard

FAQs

Explore Cashfree Payment Gateway and products available as part of Cashfree Payments suite

Build your integration using Cashfree's SDK

Payment SDK

Learn how many number of API calls a user can make over a certain period of time.

API Limits

Enums

Follow these best practices when using Cashfree's API.

Best Practices

API Best Practices

Errors

Learn details about the 2023-08-01 version of our Payment APIs

End Points

Changes and Improvements made in the version 2023-08-01

Release Notes

Release Notes: v2023-08-01

Use the Payouts API to automate money transfers to any bank a/c, UPI ID, card, or other modes. Generate the keys in test or production modes. You can check the parameters required, success, & error responses.

In this article, you will learn the things to do before testing our Payouts APIs.

In this article, you will learn the benefits of using v2 APIs and the list of APIs that have the version 2 capabilities.

In this article, you will find information on webhook V2 events and the sample payload associated to each event type.

Webhooks Version V2

Response Codes

Webhook Version V1

Use this API to create a virtual account that helps streamline the management of funds, enhance tracking capabilities, and simplify the financial process.

Use this API to transfer funds between virtual accounts (VAs).

Transfer Funds Between VAs

Use this API to fetch the account statement of the virtual account in a paginated format using cursor-based pagination.

Get Account Statement

Use this API to recharge the OneEscrow account (notional credit) using a payment instrument.

Allocate Funds to Virtual Account

Use this API to get the details of the fund source.

Get Fund Source Details

Add Registered Recharge Account(Whitelist Bank Account)

Debit Connected Wallet

Postman Collection

Webhooks

Deactivate Cashgram

Use this API to get the status of the Cashgram created.

Get Cashgram Status

Use the Secure ID APIs to verify bank account information, PAN, GSTIN of your customers. You can check the required parameters, success, and error responses.

Use the Verification Suite APIs to verify bank account information, PAN, GSTIN of your customers. You can check the required parameters, success, and error responses.

In this article, you will learn the reasons to use our server-side software development kits (SDKs) and where to find them to integrate our Secure ID APIs.

Server side SDKs

In this article, you will find the rate limit for different Secure ID APIs.

API Rate Limits

Data to Test Integration

Signature Verification

Webhook Signature Verification

Signature Generation

2FA API Signature Generation

APIs to Implement

Next Steps for Biller

The check transaction status API allows billers to retrieve the current status of a transaction using the unique BBPS transaction ID associated with the bill. This endpoint serves as a reliable method for querying transaction details, providing merchants with real-time updates on payment status.

Check Transaction Status

NPCI Onboarding Configurations

Learn the basics of rate limiting for Cashfree APIs

Rate Limits

Authentication

Cashfree Payments FAQs

Let us learn how to create a Cashfree Payments account. Once you create an account, you have test and production environments in which the former helps you simulate the different features of our products.

Payments

Payment Gateway

Checkout

Cross Border Payments

Flowwise

RiskShield

Other Products

Developer updates

Integrations

Prerequisites

Integration Steps

Shopify Integration

Custom Websites

Payments

Payment Gateway

Checkout

Cross Border Payments

Flowwise

RiskShield

Other Products

Developer updates

​Prerequisites

​Integration Steps

​Shopify Integration

​Custom Websites

Prerequisites

Integration Steps

Shopify Integration

Custom Websites