:root {
	--ff-sans: -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
	--ff-serif: Georgia,Times New Roman,Times,serif;
	--ff-mono: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;

	/* primary */
	--cp-navy10: #f5faff;
	--cp-navy100: #97c7f6;
	--cp-navy200: #84baed;
	--cp-navy300: #59a1e4;
	--cp-navy400: #3e8ed9;
	--cp-navy500: #0a6cc9;
	--cp-navy600: #0759a7;
	--cp-navy700: #0d457a;
	--cp-navy800: #063562;
	--cp-navy900: #042e56;

	--cp-grey5: #f8fbff;
	--cp-grey10: #edf1f7;
	--cp-grey15: #e7ebf0;
	--cp-grey50: #e1e6ec;
	--cp-grey100: #d0d8e0;
	--cp-grey200: #c6cdd4;
	--cp-grey300: #b1b8be;
	--cp-grey400: #9ea4a9;
	--cp-grey500: #8b9196;
	--cp-grey600: #7b7f84;
	--cp-grey700: #686c6f;
	--cp-grey800: #545759;
	--cp-grey900: #3f4143;

	--cp-orange10: #fdf4ec;
	--cp-orange300: #e6b081;
	--cp-orange900: #b05a0e;

	
	--cp-code10: #f4f4f4;
	--cp-code100: #c8c8c8;
	--cp-code200: #aeaeae;
	--cp-code210: #aaaaaa;
	--cp-code300: #7f7f7f;
	--cp-code600: #3e3e3e;
	--cp-code800: #2d2d2d;
	--cp-code900: #1c1c1c;

	--cp-code-keyword: #f44375;
	--cp-code-constant: #a17fff;
	--cp-code-string: #fffd99;
	--cp-code-type: #6fdef0;
	--cp-code-func: #9df06f;

	--cp-method-get: #47ac2a;
	--cp-method-post: #307df4;
	--cp-method-patch: #e38915;
	--cp-method-put: #a353d0;
	--cp-method-delete: #df3232;
	--cp-method-head: #dbbb0c;
	--cp-method-connect: #76c6ca;
	--cp-method-options: #bbb;
	--cp-method-trace: #cad00d;
	--cp-method-custom: #45a3d0;
	
	--cp-primary: var(--cp-navy500);

	--sidebar-header-height: 80px;
	--sidebar-footer-height: 40px;
}

body {
	margin: 0;
	font-family: sans-serif;
	font-size: 14px;
	font-weight: 400;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type:none;
}

article {
	font-family: var(--ff-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.003em;
	border-top: 1px solid var(--cp-grey50);
}

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

.hidden {
	display: none;
}

/*******************************************************************************
 * TextBox
 ******************************************************************************/

.text-box code {
	font-family: var(--ff-mono);
	background-color: var(--cp-grey10);
	border: 1px solid var(--cp-grey100);
	border-radius: 2px;
	padding-left: 3px;
	padding-right: 3px;
	font-size: 10px;
}

/*******************************************************************************
 * Sidebar
 ******************************************************************************/

.sidebar-container {
	width: 280px;
	height: 100%;
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 3;

	border-right-style: dashed;
	border-width: 1px;
	border-color: var(--cp-grey50);
}

.sidebar-header {
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	word-wrap: break-word;
	z-index: 100;
	margin: 0 auto;
	width: 100%;
	height: var(--sidebar-header-height);
}

.sidebar-banner-box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
}

.sidebar {
	position: absolute;
	width: 100%;
	top: var(--sidebar-header-height);
	bottom: var(--sidebar-footer-height);
	overflow-y: auto;
}

.sidebar-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
	margin: 0 auto;
	width: 100%;
	height: var(--sidebar-footer-height);
}

.sidebar-list-title {
	margin: 0;
	padding-left: 20px;
	padding-top: 25px;
	padding-bottom: 10px;
	padding-right: 10px;

	color: var(--cp-grey400);
	font-family: var(--ff-sans);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.04em;
	pointer-events: none;
}

.sidebar-list-item {
	margin-left: 8px;
	margin-right: 3px;
	border-radius: 8px;
}

.sidebar-list-item.active {
	background-color: var(--cp-navy10);
}

.sidebar-list-item.active > .sidebar-item {
	color: var(--cp-navy600);
}

.sidebar-item {
	display: block;
	color: black;
	font-family: var(--ff-sans);
	font-size: 13px;
	font-weight: 450;
	text-decoration: none;
	padding: 4px 4px 4px 24px;
	line-height: 20px;
}

.sidebar-item:hover {
	color: var(--cp-navy500);
}

.sidebar-item-subitems {
	padding-left: 8px;
}

/*******************************************************************************
 * Content
 ******************************************************************************/

.content-container {
	position: absolute;
	top: 0;
	left: 280px;
	bottom: 0;
	right: 0;
	box-sizing: border-box;
	overflow-y: scroll;
	background: #fff;
	outline: none !important;
	overflow-x: hidden;
}

/*******************************************************************************
 * Articles
 ******************************************************************************/
article {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.article-content {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1264px;
	padding: 3vw;
	box-sizing: border-box;
}

.article-children {
	width: 100%;
}

.article-primary-column {
	width: 50%;
	margin-right: 8.5%;
}

.article-section-lead-title {
	line-height: 40px;
	font-weight: 500;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--ff-serif);
	text-decoration: none;
}

.article-section-lead-subtitle {
	margin: 0;
    color: #333333;
    font-size: 16px;
}

h2.article-section-lead-title {
	font-size: 33px;
	margin-bottom: 7px;
}

h3.article-section-lead-title {
	font-size: 25px;
}

.article-section-lead-title > a {
	color: black;
}

.article-section-field-list-title {
}

/*******************************************************************************
 * Fields
 ******************************************************************************/

.field-item {
	border-top: 1px solid var(--cp-grey50);
}

.field-heading {
	margin: 10px 0px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.field-anchor {
	position: absolute;
	width: 0px;
}

.field-anchor-icon {
	position: relative;
	display: block;
	left: -16px;
	width: 13px;
	opacity: 0;
	font-size: 13px;
	font-family: var(--ff-mono);
	font-weight: 100;
	background-color: white;
}

.field-heading:hover .field-anchor-icon {
	opacity: 1;
}

.field-anchor-icon:hover {
	opacity: 1;
}

.field-path {
	color: var(--cp-grey600);
	font-family: var(--ff-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
}

.field-name {
	font-size: 12px;
	font-family: var(--ff-mono);
	margin-right: 8px;
}

.field-type {
	color: var(--cp-navy700);
	background-color: var(--cp-navy10);
	font-size: 11px;
	font-family: var(--ff-mono);
	font-weight: normal;
	padding: 0px 3px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--cp-navy100);
	margin-right: 8px;
}

.field-setting {
	font-size: 11px;
	font-family: var(--ff-mono);
	font-weight: normal;
	padding: 0px 3px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	margin-right: 8px;
}

.field-setting.required {
	color: var(--cp-orange900);
	background-color: var(--cp-orange10);
	border-color: var(--cp-orange300);
}

.field-setting.optional {
	color: var(--cp-grey700);
	background-color: var(--cp-grey10);
	border-color: var(--cp-grey100);
}

.field-expandability {
	font-size: 11px;
	font-family: var(--ff-mono);
	font-weight: normal;
	padding: 0px 3px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	margin-right: 8px;
}

.field-expandability.expandable {
	color: var(--cp-grey700);
	background-color: var(--cp-grey10);
	border-color: var(--cp-grey100);
}

.field-text {
	font-size: 13px;
	color: var(--cp-grey800);
}

.field-text > p:first-child {
    margin-top: 0px;
}

.field-list-container.child {
	border: 1px solid var(--cp-grey50);
	border-radius: 6px;
	margin-bottom: 15px;
	overflow: hidden;
}

.field-list-container.child.collapsed > .field-list-heading.child {
	background-color: white;
}

.field-list-container.child.collapsed > .field-list-heading.child:hover {
	background-color: var(--cp-grey5);
}

.field-list-container.child.collapsed > .field-list.child {
	display: none;
}

.field-list-heading {
	color: var(--cp-grey400);
	font-family: var(--ff-sans);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	pointer-events: none;
	user-select: none;
}

.field-list-heading.child {
	background-color: var(--cp-grey5);
	color: var(--cp-grey900);
	font-family: var(--ff-mono);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0;
	padding: 5px 10px;
	pointer-events: inherit;
	cursor: pointer;
}

.field-list.child > .field-item {
	padding: 0px 11px;
}

.field-source-link {
	color: var(--cp-grey300);
	font-size: 15px;
	font-weight: 400;
	line-height: 15px;
	margin-left: auto;
	margin-right: 2%;
	opacity: 0;
	height: 16px;
	width: 16px;
}

.field-heading:hover .field-source-link {
	opacity: 1;
}

.field-source-link:hover {
	color: var(--cp-primary);
	opacity: 1;
}

.field-validation {
	margin: 10px;
	padding: 5px 10px 5px 10px;
	font-size: 12px;
	font-weight: 500;
	background-color: var(--cp-grey5);
	border: 1px solid var(--cp-grey15);
	border-radius: 4px;
}

/*******************************************************************************
 * Enum List
 ******************************************************************************/
.enum-list-container {
	border: 1px solid var(--cp-grey50);
	border-radius: 6px;
	margin-bottom: 15px;
	overflow: hidden;
}

.enum-list-heading {
	color: var(--cp-grey900);
	font-family: var(--ff-mono);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0;
	padding: 5px 10px;
	background-color: var(--cp-grey5);
	user-select: none;
	cursor: pointer;
}

.enum-list-container.collapsed > .enum-list-heading {
	background-color: white;
}

.enum-list-container.collapsed > .enum-list-heading:hover {
	background-color: var(--cp-grey5);
}

.enum-list-container.collapsed > .enum-list {
	display: none;
}

.enum-item {
	padding: 10px 11px;
	border-top: 1px solid var(--cp-grey50);
}

.enum-item:last-child {
	border-bottom: none;
}

.enum-heading {
	margin: 10px 0px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.enum-value {
	display: inline-flex;
	margin: 0px 0px 3px 0px;
}

.enum-value > code {
	color: var(--cp-grey700);
	background-color: var(--cp-grey10);
	border-color: var(--cp-grey100);

	font-size: 11px;
	font-family: var(--ff-mono);
	font-weight: normal;
	padding: 1px 4px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	margin-right: 8px;
}

.enum-source-link {
	color: var(--cp-grey300);
	text-align: center;
	margin-left: auto;
	padding: 0px 6px 2px 6px;
	border-radius: 3px;
	height: 16px;
	width: 16px;
	opacity: 0;
}

.enum-heading:hover > .enum-source-link {
	opacity: 1;
}

.enum-source-link:hover {
	color: var(--cp-primary);
	opacity: 1;
}

.enum-text {
	display: flex;
	font-size: 13px;
	align-items: center;
	flex-direction: row;
}

/*******************************************************************************
 * Example Sections
 ******************************************************************************/
.article-example-column {
	width: 50%;
	padding-top: 60px;
	position: sticky;
	align-self: flex-start;
	top: 0;

	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-height: 100vh;
}

.article-example-column > section {
	margin-bottom: 30px;
}

.example-section-request {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    max-height: 50vh;
    overflow: hidden;
}

.example-section-response {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*******************************************************************************
 * Example Endpoint List
 ******************************************************************************/
.xs-endpoint-list-container {
	border: 1px solid var(--cp-grey15);
	border-radius: 10px;
	overflow: hidden;
}

.xs-endpoint-list-topbar {
	background-color: white;
	border-bottom: 1px solid var(--cp-grey15);
	padding: 10px 12px;
}

.xs-endpoint-list-title {
	margin: 0;
	color: var(--cp-grey600);
	font-family: var(--ff-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	user-select: none;
	pointer-events: none;
}

.xs-endpoint-list {
	background-color: white;
	font-family: var(--ff-mono);
	font-size: 13px;
	font-weight: 100;
	line-height: 20px;
	overflow: scroll;
	padding: 20px 30px;
}

.xs-endpoint-item {
	border-radius: 5px;
}

.xs-endpoint-item > a {
	text-decoration: none;
}

.xs-endpoint-method {
	width: 55px;
	display: block;
	margin-right: 5px;
	padding-left: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: ellipsis;
	text-align: right;
	float: left;
}

.xs-endpoint-item > a > .xs-endpoint-method {
	color: var(--cp-navy400);
}

.xs-endpoint-item:hover > a > .xs-endpoint-method {
	color: var(--cp-navy700);
}

.xs-endpoint-item > a > .xs-endpoint-pattern {
	color: var(--cp-grey700);
}

.xs-endpoint-item:hover > a > .xs-endpoint-pattern {
	color: black;
}

.xs-endpoint-pattern {
	padding-right: 10px;
}

/*******************************************************************************
 * Example Request
 ******************************************************************************/
.xs-request-container {
	overflow: hidden;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}

.xs-request-topbar {
	background-color: var(--cp-code600);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.xs-request-title {
	margin: 0;
	font-family: var(--ff-mono);
	font-size: 12px;
	font-weight: 100;
	pointer-events: none;
}

.xs-request-endpoint-method {
	color: var(--cp-code210);
}

.xs-request-endpoint-pattern {
	color: var(--cp-code210);
}

.xs-request-lang-select-container {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.xs-request-lang-select-container > select {
	color: white;
    font-family: var(--ff-mono);
	font-size: 12px;
	font-weight: 100;
    letter-spacing: 0.04em;
	padding: 4px 28px 4px 8px;
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.xs-request-lang-select-container > select > option {
	color: black;
}

.xs-request-body {
	background: var(--cp-code800);
	padding: 8px 0px;
	overflow: scroll;
}

.code-snippet-container {
	display: none;
	flex-direction: row;
	background: var(--cp-code800);
	padding: 8px 0px;
	color: var(--cp-code10);
	font-family: var(--ff-mono);
	font-size: 12px;
	font-weight: 100;
	line-height: 16px;
}

.code-snippet-container.selected {
	display: flex;
}

.cs-lines-container {
	user-select: none;
	pointer-events: none;
	width: 24px;
	padding-right: 8px;
	color: var(--cp-code300);
	letter-spacing: -1px;
	text-align: right;
	font-family: var(--ff-mono);
}

.cs-pre {
	margin: 0;
	height: 100%;
	padding: 0 12px;
	font-family: var(--ff-mono);
}


/*******************************************************************************
 * Example Response
 ******************************************************************************/
.xs-response-container {
	overflow: hidden;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}

.xs-response-topbar {
	background-color: var(--cp-code600);
	padding: 10px 12px;
}

.xs-response-title {
	margin: 0;
	color: var(--cp-code200);
	font-family: var(--ff-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	user-select: none;
	pointer-events: none;
}

.xs-response-status {
	font-family: var(--ff-mono);
	color: white;
}

.xs-response-header-list {
	padding: 5px 0px;
	font-size: 12px;
}

.xs-response-header-key {
	color: var(--cp-code100);
}

.xs-response-header-value {
	color: var(--cp-code-string);
}

.xs-response-body {
	color: var(--cp-code10);
	background-color: var(--cp-code800);
	font-family: var(--ff-mono);
	font-size: 12px;
	font-weight: 100;
	line-height: 16px;
	overflow: scroll;
	padding: 12px 20px;
}

.code-block-pre {
	width: 0;
	min-width: 100%;
}

.cs-pre {
	width: 0;
	min-width: 100%;
}

/*******************************************************************************
 * JSON colors
 ******************************************************************************/
.token.json-num {
	color: var(--cp-code-constant);
}
.token.json-fal {
	color: var(--cp-code-constant);
}
.token.json-tru {
	color: var(--cp-code-constant);
}
.token.json-nul {
	color: var(--cp-code-constant);
}
.token.json-key-t {
	color: var(--cp-code-keyword);
}
.token.json-str {
	color: var(--cp-code-string);
}
/*******************************************************************************
 * CSV colors
 ******************************************************************************/
.token.csv-com {
	color: white;
}
.token.csv-header {
	color: var(--cp-code-keyword);
}
.token.csv-field {
	color: var(--cp-code-string);
}
/*******************************************************************************
 * HTTP colors
 ******************************************************************************/
.token.http-uri {
	color: var(--cp-code-type);
}
.token.http-header-value {
	color: var(--cp-code-string);
}
.token.http-version {
	color: var(--cp-code300);
}
.token.http-body {
	color: var(--cp-code200);
}
/*******************************************************************************
 * cURL colors
 ******************************************************************************/
.token.curl-cmd {
	color: var(--cp-code-type);
}
.token.curl-url {
	color: var(--cp-code-string);
}
.token.curl-flag {
	color: white;
}
.token.curl-flag-value.method {
	color: var(--cp-code-func);
}
.token.curl-header-value {
	color: var(--cp-code-string);
}
.token.curl-data-text {
	color: var(--cp-code-string);
}
/*******************************************************************************
 * method colors
 ******************************************************************************/
.token.method-get {
	color: var(--cp-method-get);
}
.token.method-post {
	color: var(--cp-method-post);
}
.token.method-patch {
	color: var(--cp-method-patch);
}
.token.method-put {
	color: var(--cp-method-put);
}
.token.method-delete {
	color: var(--cp-method-delete);
}
.token.method-head {
	color: var(--cp-method-head);
}
.token.method-connect {
	color: var(--cp-method-connect);
}
.token.method-options {
	color: var(--cp-method-options);
}
.token.method-trace {
	color: var(--cp-method-trace);
}
.token.method-custom {
	color: var(--cp-method-custom);
}