.noteBoxes
{
	border: 1px solid;
  	border-radius: 5px;
	padding: 10px;
	margin: 10px 0px;
	width: 100%;
    padding-top: 5px;
}

/* Note-box colours are the Vendor Center status colours, at the same 10% tint the VC
   status badges use (libs/shared/ui-vnp-theme/_styles/_status-colors.scss). */
.type1
{
	border-color: #DC4434;                        /* status-red */
	background-color: rgba(220, 68, 52, 0.1);
}

.type2
{
	border-color: #068888;                        /* status-green */
	background-color: rgba(6, 136, 136, 0.1);
}

.type3
{
	border-color: #002199;                        /* status-blue */
	background-color: rgba(0, 33, 153, 0.1);
}

.type4
{
	border-color: #F7931E;                        /* status-orange */
	background-color: rgba(247, 147, 30, 0.1);
}

.picture
{
	width: 17px; 
	padding-right: 10px;
    padding-top: 10px;
}

.picture1
{
	width: 25px;
	padding-right: 10px;
    padding-top: 10px;
    filter: invert(46%) sepia(90%) saturate(291%) hue-rotate(123deg) brightness(93%) contrast(101%);
}

/* ---------------------------------------------------------------------------
   Layout controls.

   Elements are tagged with data-vc by scripts/layout-controls.js rather than
   selected by ReDoc's styled-components class hashes, which change between
   releases. --vc-menu-w and --vc-panel-w are measured from the live DOM by the
   same script, so the handles stay on the panel edges whatever widths ReDoc uses.

   Breakpoints mirror ReDoc's own: below `small` (50rem) ReDoc switches the menu
   to a fixed drawer and renders its own floating menu button, and below `medium`
   (75rem) it stacks the sample panel under the text instead of beside it. A
   collapse handle only makes sense where the panel it controls is docked.
   --------------------------------------------------------------------------- */

:root {
	--vc-menu-w: 260px;
	--vc-panel-w: 40%;
	--vc-handle-w: 22px;
	--vc-handle-h: 46px;
	--vc-accent: #F68B1E;    /* VC orange, palette 500 */
	--vc-ink: #0B2137;       /* VC night, palette 900 */
}

/* ReDoc's "API docs by Redocly" link. ReDoc is MIT licensed, and MIT is satisfied by
   retaining the copyright and permission notice in copies of the software — the CDN
   serves redoc.standalone.js.LICENSE.txt alongside the bundle — not by showing a badge
   in the UI. If the bundle is ever self-hosted, that LICENSE.txt must be copied too. */
[data-vc="attribution"] {
	display: none !important;
}

/* ReDoc paints one full-height stripe in the right-panel colour behind the whole
   document, so the brown shows on pages that have no samples. Each operation renders
   its own panel, so hiding the stripe confines the colour to endpoints. */
[data-vc="stripe"] {
	display: none !important;
}

/* --- the handles -------------------------------------------------------- */

.vc-toggle {
	position: fixed;
	top: 50%;
	z-index: 100;
	width: var(--vc-handle-w);
	height: var(--vc-handle-h);
	display: none;                 /* enabled per breakpoint above */
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	color: var(--vc-ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
	transition: left 0.18s ease, right 0.18s ease, background 0.12s ease, color 0.12s ease;
}

.vc-toggle:hover {
	background: var(--vc-accent);
	border-color: var(--vc-accent);
	color: #ffffff;
}

.vc-toggle:focus-visible {
	outline: 2px solid var(--vc-accent);
	outline-offset: 2px;
}

/* menu handle rides the right edge of the navigation column */
.vc-toggle-menu {
	left: var(--vc-menu-w);
	transform: translate(-50%, -50%);
	border-radius: 3px;
}

.vc-menu-collapsed .vc-toggle-menu {
	left: 0;
	transform: translate(0, -50%);
	border-radius: 0 3px 3px 0;
	border-left: 0;
}

/* samples handle mirrors it on the left edge of the samples column */
.vc-toggle-samples {
	right: var(--vc-panel-w);
	transform: translate(50%, -50%);
	border-radius: 3px;
}

.vc-samples-collapsed .vc-toggle-samples {
	right: 0;
	transform: translate(0, -50%);
	border-radius: 3px 0 0 3px;
	border-right: 0;
}

/* chevron points toward the movement the click will cause */
.vc-chev {
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transition: transform 0.18s ease;
}

.vc-toggle-menu .vc-chev                          { transform: rotate(135deg); }
.vc-menu-collapsed .vc-toggle-menu .vc-chev       { transform: rotate(-45deg); }
.vc-toggle-samples .vc-chev                       { transform: rotate(-45deg); }
.vc-samples-collapsed .vc-toggle-samples .vc-chev { transform: rotate(135deg); }

/* --- collapsed states ---------------------------------------------------
   Each collapse rule lives in the same min-width block as the handle that controls
   it. Below that width the rule does not apply at all, so a state set on a wide
   screen cannot strand a panel hidden with no control to restore it — and below
   `small` it cannot fight ReDoc's own mobile drawer. */

@media (min-width: 50rem) {
	.vc-toggle-menu {
		display: flex;
	}

	/* The "API docs by Redocly" badge inside the menu is position:fixed, so overflow
	   cannot clip it. visibility is inherited by fixed descendants, which hides the
	   whole menu without depending on ReDoc's generated class names. */
	.vc-menu-collapsed .menu-content {
		width: 0 !important;
		min-width: 0 !important;
		overflow: hidden !important;
		border: 0 !important;
		visibility: hidden !important;
	}

	/* ReDoc gives .api-content an explicit width that already excludes the menu, so
	   collapsing the menu alone would leave the menu's width dead on the right instead
	   of handing it to the content. */
	.vc-menu-collapsed .api-content {
		width: 100% !important;
	}
}

@media (min-width: 75rem) {
	.vc-toggle-samples {
		display: flex;
	}

	.vc-samples-collapsed [data-vc="samples"] {
		display: none !important;
	}

	/* An operation's text column and a markdown-only section's text column are both
	   sized for the two-column layout, so both reclaim the sample column's width. */
	.vc-samples-collapsed [data-vc="middle"],
	.vc-samples-collapsed [data-vc="prose"] {
		width: 100% !important;
		max-width: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc-toggle,
	.vc-chev {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Light code panel.

   ReDoc's own syntax colours are built for a dark right panel — on a light
   ground its string token measures 1.04:1, effectively invisible. The panel is
   light (VC uses neutral surfaces with orange as an accent), so the Prism tokens
   are restyled here.

   Hues are the Vendor Center ones from
   libs/shared/ui-vnp-theme/src/lib/_styles/_status-colors.scss. Teal, orange and
   grey are darkened from their VC values, which are tuned for coloured text on
   white and fall to 2.9–4.1:1 on the code ground; the darker variants keep the
   hue and clear AA. Ratios below are against the #EBEBEB code block.
   --------------------------------------------------------------------------- */

:root {
	--vc-code-ink:      #243B53;   /*  9.65:1                               */
	--vc-code-string:   #057575;   /*  4.63:1  VC teal #068888, darkened    */
	--vc-code-number:   #002199;   /* 10.50:1  VC status-blue               */
	--vc-code-property: #3653A3;   /*  6.03:1  VC secondary-blue            */
	--vc-code-operator: #B34408;   /*  4.70:1  VC orange #EF5B0A, darkened  */
	--vc-code-comment:  #696969;   /*  4.61:1  VC grey #757575, darkened    */
}

[data-vc="samples"] pre,
[data-vc="samples"] code {
	color: var(--vc-code-ink) !important;
}

[data-vc="samples"] .token.punctuation,
[data-vc="samples"] .token.plain-text {
	color: var(--vc-code-ink) !important;
}

[data-vc="samples"] .token.string,
[data-vc="samples"] .token.char,
[data-vc="samples"] .token.attr-value,
[data-vc="samples"] .token.regex {
	color: var(--vc-code-string) !important;
}

[data-vc="samples"] .token.number,
[data-vc="samples"] .token.boolean,
[data-vc="samples"] .token.constant,
[data-vc="samples"] .token.symbol {
	color: var(--vc-code-number) !important;
}

[data-vc="samples"] .token.property,
[data-vc="samples"] .token.attr-name,
[data-vc="samples"] .token.tag,
[data-vc="samples"] .token.selector,
[data-vc="samples"] .token.function,
[data-vc="samples"] .token.class-name {
	color: var(--vc-code-property) !important;
}

[data-vc="samples"] .token.operator,
[data-vc="samples"] .token.keyword,
[data-vc="samples"] .token.variable,
[data-vc="samples"] .token.builtin,
[data-vc="samples"] .token.url {
	color: var(--vc-code-operator) !important;
}

[data-vc="samples"] .token.comment,
[data-vc="samples"] .token.prolog,
[data-vc="samples"] .token.doctype,
[data-vc="samples"] .token.cdata {
	color: var(--vc-code-comment) !important;
}

/* --- response tabs, coloured by status family --------------------------------
   ReDoc gives every tab from 400 up the same `tab-error` class, so 400 and 500 cannot
   be told apart in CSS. scripts/layout-controls.js tags each one data-vc-status by its
   code: 2xx succeeded, 4xx is the caller's request, 5xx is ours.

   These are saturated chips rather than coloured text, because yellow cannot be both
   readable and yellow as text: to clear AA on the #EBEBEB panel a yellow has to drop
   below ~0.13 luminance, which turns it olive (#6B6B00 at pure-yellow hue, #8F5A00
   shifted toward amber). As a fill under dark ink, #F7C948 stays genuinely yellow at
   7.34:1. Chips are applied to all three families so the row stays consistent.

   Selection is the deeper tone of the same hue, so the family reads the same either
   way. Ratios below are text against its own fill.

   The hues are not from the VC palette: VC has no yellow, and its only green (#068888)
   is a teal. HTTP status convention wins here over palette fidelity — it is a signal
   readers already know. Note VC's own badge pattern (10% tint + saturated text) cannot
   work for yellow either; it lands near 2.4:1.

   react-tabs supplies aria-selected and stable class names, so no ReDoc class hashes
   are involved. */

[data-vc="samples"] [data-vc-status] {
	border: 1px solid transparent !important;
	font-weight: 600 !important;
}

/* 2xx — succeeded */
[data-vc="samples"] [data-vc-status="success"] {
	background-color: #158443 !important;
	border-color: #0F6633 !important;
	color: #FFFFFF !important;                              /* 4.76:1 */
}

[data-vc="samples"] [data-vc-status="success"][aria-selected="true"] {
	background-color: #0C5727 !important;
	border-color: #08401D !important;
	color: #FFFFFF !important;                              /* 8.72:1 */
}

/* 4xx — the caller's request */
[data-vc="samples"] [data-vc-status="client"] {
	background-color: #F7C948 !important;
	border-color: #DCA50A !important;                       /* defines the chip edge */
	color: #243B53 !important;                              /* 7.34:1 */
}

[data-vc="samples"] [data-vc-status="client"][aria-selected="true"] {
	background-color: #D9A400 !important;
	border-color: #9C7600 !important;
	color: #243B53 !important;                              /* 5.07:1 */
}

/* 5xx — ours */
[data-vc="samples"] [data-vc-status="server"] {
	background-color: #C93826 !important;
	border-color: #9E2B1D !important;
	color: #FFFFFF !important;                              /* 5.15:1 */
}

[data-vc="samples"] [data-vc-status="server"][aria-selected="true"] {
	background-color: #8C2318 !important;
	border-color: #6B1A12 !important;
	color: #FFFFFF !important;                              /* 8.87:1 */
}

/* Tabs with no status code (curl / python / Payload) keep ReDoc's own chip. */
[data-vc="samples"] [role="tab"][aria-selected="true"]:not([data-vc-status]) {
	color: #FFFFFF !important;                              /* 11.50:1 on #243B53 */
}