.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" ||
			text === "VBA"
		) {
			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();
		}
	);
});


Get started with documentation and APIs to start integrating Cashfree Payment's Products

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.

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

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

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.

Account Overview - Cashfree Payments

Account Overview

Account FAQs

Account Activation

Account Management FAQs

Account Management

Pricing FAQs

Pricing

Terms & Conditions FAQs

Onboarding related FAQs

General FAQs

Disputes & Chargebacks FAQs

Disputes & Chargebacks

Order & Delivery FAQs

Order & Delivery

Payment FAQs

Payment

Refunds FAQs

Refunds

Report a Fraud FAQs

Report a Fraud

Transactions

Settlements

Instant Settlement

Integrations

Orders and Payments

Transaction Reports

Offers

QR Code

Product Walkthrough

Payment Links FAQs

Payment Links

Payment Forms FAQs

Payment Forms

Easy Split FAQs

Easy Split

Subscriptions FAQs

Subscriptions

Router related Frequently Asked Questions.

Router FAQs

Router

Payouts: General FAQs

Cashgram FAQs

Cashgram

IP Whitelist and Public Key

IP Whitelist and Public Key FAQs

Aadhaar Verification FAQs

Aadhaar Verification

PAN Verification FAQs

PAN Verification

BAV FAQs

GSTIN Verification FAQs

GSTIN Verification

Dynamic QR

Payment Link

Cash

Reports

Cashfree Policies

Learn about the web integration for a Cashfree hosted payment page

Cashfree Hosted Checkout

Integration

Learn in detail about our custom checkout integration for android.

Custom Checkout Integration - Android

Learn in detail about our custom checkout integration for iOS.

Custom Checkout Integration - iOS

Learn more about the android sdk integration in your app

Android Integration

Learn more about integrating Cashfree SDK in your react native app

React Native Integration

Learn more about integrating Cashfree Flutter SDK in your mobile app

Flutter Integration

Learn more about the sdk integration in your iOS app

iOS Integration

Learn more about the cordova sdk integration in your app

Cordova Integration

Introducing Cashfree.js

Understand how to customize a component as per your requirements

Component Customization

Customize a Component

Configuring Payment Options

Complete code examples for building a payment page

Examples

No Code

Listen on your webhook endpoint so your integration can automatically trigger updates.

Payments

Hosted Solution

No Code

Developers

Payouts

Secure ID