/*******************************************************************************
 * Font Family
 ******************************************************************************/
@font-face {
	font-family: "GiveWhyte";
	src: url("https://cdn.staging.givepayments.com/fonts/GiveWhyte-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "GiveWhyte";
	src: url("https://cdn.staging.givepayments.com/fonts/GiveWhyte-Medium.woff") format("woff");
	font-weight: 350;
	font-style: normal;
}

@font-face {
	font-family: "GiveWhyte";
	src: url("https://cdn.staging.givepayments.com/fonts/GiveWhyte-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "GiveWhyte";
	src: url("https://cdn.staging.givepayments.com/fonts/GiveWhyte-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "GiveWhyte";
	src: url("https://cdn.staging.givepayments.com/fonts/GiveWhyte-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Menlo";
	src: url("https://cdn.staging.givepayments.com/fonts/Menlo-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

* {
	font-family: "GiveWhyte", sans-serif;
}

:root {
	--ff-sans: -apple-system, "GiveWhyte", sans-serif;
	--ff-serif: "GiveWhyte", sans-serif;
	--ff-mono: "GiveWhyte", sans-serif;
	--ff-code: "Menlo", monospace;

	/* colors palette */
	--colour-analytics-blue: #6d9cf8;
	--colour-analytics-blue-dark: #326ec5;
	--colour-analytics-blue-light: #9ec8ff;
	--colour-analytics-blue-very-dark: #16488f;
	--colour-analytics-purple: #cd87e1;
	--colour-analytics-red: #ff8ba6;
	--colour-analytics-yellow: #ffc373;
	--colour-border-active: var(--primitive-neutral-90);
	--colour-border-primary: var(--primitive-neutral-10);
	--colour-border-secondary: var(--primitive-neutral-10);
	--colour-border-tertiary: var(--primitive-neutral-30);
	--colour-border-transparent-10: #0000001a;
	--colour-buttons-default: var(--primitive-neutral-95);
	--colour-buttons-default---hover: var(--primitive-neutral-70);
	--colour-icon-icon-primary: var(--primitive-neutral-90);
	--colour-icon-icon-secondary: var(--primitive-neutral-60);
	--colour-icon-remain-dark: var(--primitive-neutral-90);
	--colour-icon-remain-light: var(--primitive-neutral-0);
	--colour-surface-invert: var(--primitive-neutral-100);
	--colour-surface-overlay: #12121280;
	--colour-surface-primary: var(--primitive-neutral-0);
	--colour-surface-primary-transparent: #ffffffb2;
	--colour-surface-secondary: var(--primitive-neutral-5);
	--colour-surface-secondary-transparent: #f5f5f3b2;
	--colour-surface-tertiary: var(--primitive-neutral-10);
	--colour-surface-tertiary-transparent: #e5e5e3b2;
	--colour-text-invert: var(--primitive-neutral-0);
	--colour-text-primary: var(--primitive-neutral-90);
	--colour-text-remain-white: var(--primitive-neutral-0);
	--colour-text-secondary: var(--primitive-neutral-60);
	--colour-text-tertiary: var(--primitive-neutral-50);
	--primitive-blue-10: #e5f1ff;
	--primitive-blue-100: #2860b2;
	--primitive-blue-25: #d1e5ff;
	--primitive-blue-50: #6d9cf8;
	--primitive-citrus-peel-100: #cf375f;
	--primitive-error-100: #bb1111;
	--primitive-error-25: #f5e0df;
	--primitive-error-50: #ED4545;
	--primitive-gradients-citrus-peel-end: #e04d79;
	--primitive-gradients-citrus-peel-end-transparent: #e04d7933;
	--primitive-gradients-citrus-peel-start: #ffaa6c;
	--primitive-gradients-citrus-peel-start-transparent: #ffaa6c33;
	--primitive-gradients-gradient-banner-bg-end: #ffffff;
	--primitive-gradients-gradient-banner-bg-start: #ffffff4d;
	--primitive-gradients-gradient-primary-end: #ffffff00;
	--primitive-gradients-gradient-primary-start: #ffffff;
	--primitive-gradients-gradient-secondary-end: #f5f5f300;
	--primitive-gradients-gradient-secondary-start: #f5f5f3;
	--primitive-gradients-moon-purple-end: #7459e9;
	--primitive-gradients-moon-purple-end-transparent: #7459e933;
	--primitive-gradients-moon-purple-start: #89a4ea;
	--primitive-gradients-moon-purple-start-transparent: #89a4ea33;
	--primitive-gradients-ocean-blue-end: #4d449e;
	--primitive-gradients-ocean-blue-end-light: #e8f9fc;
	--primitive-gradients-ocean-blue-end-light-hover: #b4e9f2;
	--primitive-gradients-ocean-blue-start: #28c0d9;
	--primitive-gradients-ocean-blue-start-light: #e9e8f7;
	--primitive-gradients-ocean-blue-start-light-hover: #c1bedd;
	--primitive-moon-purple-100: #6047d9;
	--primitive-neutral-0: #fffffd;
	--primitive-neutral-10: #e5e5e3;
	--primitive-neutral-100: #000000;
	--primitive-neutral-20: #ccccc9;
	--primitive-neutral-30: #b2b2b1;
	--primitive-neutral-40: #999997;
	--primitive-neutral-5: #f5f5f3;
	--primitive-neutral-50: #80807e;
	--primitive-neutral-60: #666665;
	--primitive-neutral-70: #4d4d4c;
	--primitive-neutral-80: #333332;
	--primitive-neutral-90: #292928;
	--primitive-neutral-95: #121212;
	--primitive-shadow-shadow-left: #00000014;
	--primitive-shadow-shadow-small: #0000001a;
	--primitive-success-100: #004f2c;
	--primitive-success-25: #e6f3ec;
	--primitive-success-50: #088750;
	--primitive-transparent-darken-10: #0000001a;
	--primitive-transparent-darken-2: #00000005;
	--primitive-transparent-darken-25: #00000040;
	--primitive-transparent-darken-5: #0000000d;
	--primitive-warning-10: #fff3eb;
	--primitive-warning-100: #a65e00;
	--primitive-warning-25: #ffe1cc;
	--primitive-warning-50: #ffb24e;

}

/*******************************************************************************
 * Scrollbar
 ******************************************************************************/

*::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

*::-webkit-scrollbar-button {
	width: 0;
	height: 0;
}

*::-webkit-scrollbar-thumb {
	background: var(--colour-analytics-blue);
	border: 0 none var(--colour-analytics-blue);
	border-radius: 50px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--colour-analytics-blue-dark);
}

*::-webkit-scrollbar-thumb:active {
	background: var(--colour-analytics-blue-dark);
}

*::-webkit-scrollbar-track {
	border: 0 none var(--primitive-neutral-0);
	border-radius: 50px;
}

*::-webkit-scrollbar-corner {
	background: transparent;
}

article {
	background-color: var(--primitive-neutral-0);
}

.article-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background-color: var(--primitive-neutral-5);
}

/*******************************************************************************
 * Typography
 ******************************************************************************/

h1 {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 300;
	font-size: 44px;
	line-height: 48px;
	letter-spacing: -0.03em;
}

h2,
h2.article-section-lead-title {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 300;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: -0.03em;
}

h3,
h3.article-section-lead-title {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 300;
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.03em;
}

h4 {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 300;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.01em;
}

h5 {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
}

p.body-l {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
}

p.body-m,
li.body-m {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}

p.body-s {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
}

p.body-xs,
.sidebar-item {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
}

h5.sidebar-list-title {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
}

code {
	font-family: var(--ff-code);
	letter-spacing: 0px;
}

.field-name,
.field-heading,
.field-setting,
.field-text.text-box,
.field-path {
	font-family: var(--ff-code);
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0px;
}

.field-text {
	color: var(--colour-text-secondary)
}

p.body-xxs,
.sidebar-list-title {
	font-family: var(--ff-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
}

.sidebar-list-item {
	padding: 4px 0px 4px 0px;
}

.sidebar-item {
	padding: 8px;
}


.sidebar-list-item ul {
	position: relative;
	margin-left: 8px;
}

.sidebar-list-item ul::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 0;
	border-left: var(--colour-border-secondary) solid 1px;
}

.sidebar {
	margin-top: 16px;
	padding-top: 8px;
}

.sidebar-banner-box {
	padding-top: 32px;
	padding-left: 20px;
	flex-direction: column;
	align-items: start;
}

.sidebar-list-item.active {
	background-color: var(--primitive-blue-10);
}

.sidebar-list-title {
	padding-left: 12px;
	padding-top: 20px;
	padding-bottom: 0px;
}

.field-type {
	font-family: var(--ff-code);
	color: var(--primitive-blue-100);
	background-color: var(--primitive-blue-10);
	border: var(--primitive-blue-50) 1px solid;
	padding: 6px;
	letter-spacing: 0px;
}

.field-setting.required {
	color: var(--primitive-warning-100);
	background-color: var(--primitive-warning-10);
	border: var(--primitive-warning-50) 1px solid;
	padding: 6px;
}

.field-setting.optional {
	color: var(--primitive-neutral-60);
	background-color: var(--primitive-neutral-5);
	border: var(--primitive-neutral-40) 1px solid;
	padding: 6px;
}

.xs-response-topbar,
.xs-request-topbar {
	background-color: var(--primitive-neutral-95);
	border-bottom: var(--primitive-neutral-60) solid 1px;
	font-family: var(--ff-code);
	letter-spacing: 0px;
}


.xs-response-body,
.xs-request-body {
	background-color: var(--primitive-neutral-95);
	font-family: var(--ff-code);
	letter-spacing: 0px;
}

.xs-response-title {
	font-family: var(--ff-code);
	letter-spacing: 0px;
}

.xs-request-lang-select-container>select {
	border: none;
	outline: none;
	background-color: var(--primitive-neutral-70);
	color: var(--primitive-neutral-0);
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D'14px'%20height%3D'14px'%20viewBox%3D'0%200%2017%2017'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke%3D'none'%20stroke-width%3D'1'%20fill%3D'none'%20fill-rule%3D'evenodd'%3E%3Cpath%20d%3D'M2.16%2C6.246%20C2.385%2C6.246%202.61%2C6.308%202.81%2C6.442%20L9.039%2C10.598%20L15.076%2C6.401%20C15.617%2C6.042%2016.346%2C6.188%2016.705%2C6.729%20C17.065%2C7.268%2016.92%2C8%2016.38%2C8.359%20L9.692%2C12.989%20C9.298%2C13.253%208.784%2C13.254%208.388%2C12.991%20L1.508%2C8.402%20C0.966%2C8.042%200.82%2C7.31%201.179%2C6.77%20C1.407%2C6.429%201.78%2C6.246%202.16%2C6.246%20Z'%20fill%3D'%23FFFFFF'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position-x: 90%;
	background-position-y: 50%;
	border-radius: 8px;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	font-family: var(--ff-code);
	letter-spacing: 0px;
	padding: 4px 26px 4px 8px;
}

.xs-request-title,
.xs-request-endpoint-method,
.xs-request-endpoint-pattern {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--primitive-neutral-30);
	font-family: var(--ff-code);
	letter-spacing: 0px;
}
.xs-response-header-key{
	color: var(--primitive-neutral-30);
}
.xs-response-header-value {
	color: var(--primitive-warning-50);
	font-family: var(--ff-code);
	letter-spacing: 0px;
}

.token.json-key-t {
	color: var(--primitive-error-50);
	font-family: var(--ff-code);
	letter-spacing: 0px;
}

.token.json-num {
	color: var(--primitive-blue-50);
	font-family: var(--ff-code);
	letter-spacing: 0px;
}

.token.json-str {
	color: var(--primitive-warning-50);
	font-family: var(--ff-code);
	letter-spacing: 0px;
}
.token.json-tru, .token.json-fal{
	color: var(--colour-analytics-blue);
}
.enum-value>code {
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
	line-height: 14px;
	color: var(--primitive-neutral-60);
	background-color: var(--primitive-neutral-5);
	border: var(--primitive-neutral-40) 1px solid;
	font-family: var(--ff-code);
	letter-spacing: 0px;
	padding: 6px;
}

.enum-list-heading,
.field-list-heading.child {
	background-color: var(--primitive-blue-10) !important;
	position: relative;
	font-size: 12px;
}

.enum-list-container .enum-list-heading::after,
.field-list-container.child .field-list-heading::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 12px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D'12px'%20height%3D'14px'%20viewBox%3D'0%200%2017%2017'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke%3D'none'%20stroke-width%3D'1'%20fill%3D'none'%20fill-rule%3D'evenodd'%3E%3Cpath%20d%3D'M2.16%2C6.246%20C2.385%2C6.246%202.61%2C6.308%202.81%2C6.442%20L9.039%2C10.598%20L15.076%2C6.401%20C15.617%2C6.042%2016.346%2C6.188%2016.705%2C6.729%20C17.065%2C7.268%2016.92%2C8%2016.38%2C8.359%20L9.692%2C12.989%20C9.298%2C13.253%208.784%2C13.254%208.388%2C12.991%20L1.508%2C8.402%20C0.966%2C8.042%200.82%2C7.31%201.179%2C6.77%20C1.407%2C6.429%201.78%2C6.246%202.16%2C6.246%20Z'%20fill%3D'%23292928'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	transform: translateY(-50%) rotate(-180deg);
	transition: transform .1s ease-in;
}

.enum-list-container.collapsed .enum-list-heading::after,
.field-list-container.child.collapsed .field-list-heading::after {
	transform: translateY(-50%) rotate(0deg);
}

.code-snippet-container {
	background-color: transparent;
}

.field-validation {
	padding: 10px 12px;
}

.field-validation.text-box {
	font-family: var(--ff-code);
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	color: var(--primitive-neutral-95);
	background-color: var(--primitive-neutral-5);
	margin-left: 0px;
	border: 0;
}

.test-card-table {
	display: table;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	font-size: 14px;
}

.test-card-table-header {
	display: table-row;
	background-color: #f7f7f7;
	font-weight: bold;
}

.test-card-table-header.cell {
	display: table-cell;
	padding: 12px;
	border-bottom: 1px solid #ddd;
	text-align: left;
}

.test-card-table-row {
	display: table-row;
}

.test-card-table-row.cell {
	display: table-cell;
	padding: 12px;
	border-bottom: 1px solid #eee;
	text-align: left;
}

.article-example-column {
	padding-top: 40px;
}

.code-font {
	font-family: var(--ff-code) !important;
	letter-spacing: 0px;
}

.token {
	font-family: var(--ff-code) !important;
	letter-spacing: 0px;
}

.xs-endpoint-list-title,
.xs-endpoint-item {
	font-family: var(--ff-code) !important;
	letter-spacing: 0px;
}
.token .http-uri{
	color: #21c36f;
}
.token .http-header-key{
	   font-family: var(--ff-code) !important;
	   color: #ffffff;
}
.token .http-header-value{
	   font-family: var(--ff-code) !important;
	   color: #ffb24e;
}