/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}

@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

html, body {
   margin: 0;
}

body {
	background-color: #fff;
	color: #333;
	font: 400 75%/1.25em Inter, Helvetica, Arial, sans-serif;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

header {
	background-color: #fff;
	border-bottom: 1px solid #ebebeb;
	box-sizing: border-box;
	left: 0;
	overflow: hidden;
	padding: .5em 2em .5em;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;

	h1 {
		margin-right: 1em;
		overflow: hidden;

		a {
			background: no-repeat url(https://www.tuyu.io/images/logo_blue.svg);
			display: block;
			height: 5em;
			text-indent: -9999px;
		}
	}

	.label {
		font: 200 2em Inter, Helvetica, Arial, sans-serif;
		position: absolute;
		left: 5.5em;
		top: 1.25em;
	}

	.urlCustomizer {
		background-color: #ebebeb;
		border-radius: .4166em;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
		border-bottom: 2px solid #ccc;
		padding: .5em 1em;
		position: absolute;
		right: 2em;
		bottom: 0;

		p {
			font: 600 1em Inter, Helvetica, Arial, sans-serif;
			margin-bottom: .5em;
		}

		.url {
			font: 400 1em Inter, Helvetica, Arial, sans-serif;

			input {
				font: 400 1em Inter, Helvetica, Arial, sans-serif;
				height: 1.5em;
				padding: 0 1em;
			}

			select {
				appearance: base-select;
	      	/* Add your custom styles here */
	      	background-color: #fff;
				color: #333; /*sw*/
				font: 400 .833em 'Inter', Arial, Helvetica; /*sw*/
	      	border: 1px solid #888;
	      	padding: .5em .833em .25em;
	      	border-radius: .4166em;
	      	width: auto;
			}

			button {
				background-color: rgba(94, 110, 180, 1);
				border: none;
				border-radius: .4166em;
				color: #fff;
				font: 400 1em Inter, Helvetica, Arial, sans-serif;
				margin-left: .5em;
				padding: .25em 1em;
			}
		}
	}
}

a { 
	color: rgba(94, 110, 180, 1);
	text-decoration: none; 
}

#mainContent {
	margin-top: 7em;
	min-height: 50vh;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 9999;

	nav {
		box-sizing: border-box;
		clear: both;
		float: left;
		padding: 2em;
		position: fixed;
		width: 20%;

		ul {
			li {
				margin-bottom: 2em;

				a {
					color: #000;
					font: 200 1.5em Inter, Helvetica, Arial, sans-serif;
					text-decoration: none;

					&.on {
						font-weight: 600;
					}
				}
			}
		}
	}

	article {
		box-sizing: border-box;
		float: left;
		margin: 0 5% 0 20%;
		overflow: hidden;
		padding: 2em;
		width: 75%;
		z-index: 9998;

		.text {
			box-sizing: border-box;
			float: left;
			width: 75%;
		}

		.methodNav {
			box-sizing: border-box;
			position: fixed;
			margin-left: calc(55% + 2em);
			width: calc(20% - 2em);

			ul {
				li {
					list-style: none;
					margin: 0 0 1em;

					a {
						border: 1px solid #ebebeb;
						border-radius: .4166em;
						color: #000;
						display: block;
						font: 600 1em Inter, Helvetica, Arial, sans-serif;
						padding: .5em 1em;

						span {
							padding-right: 1em;
						}
					}
				}
			}
		}

		h2 {
			color: #888;
			font: 600 2em Inter, Helvetica, Arial, sans-serif;
			margin-bottom: 1em;

			span { 
				font-size: .75em;
				padding-left: 2em 
			}
		}

		h3 {
			color: #000;
			font: 400 1.5em Inter, Helvetica, Arial, sans-serif;
			margin-bottom: 1em;
		}

		h4 {
			color: #4b4b4b;
			font: 600 1.25em Inter, Helvetica, Arial, sans-serif;
			margin: 2em 0 1em;
		}

		ol {
			li {
				font: 400 1.166em/1.5em Inter, Helvetica, Arial, sans-serif;
				list-style: decimal;
				margin: 0 0 1em 1em;
				padding-left: 1em;

				li { font-size: 1em; }
			}

			pre, p, ol { font-size: 1em; }
		}

		ul {
			margin-top: .5em;

			li {
				font: 400 1em/1.5em Inter, Helvetica, Arial, sans-serif;
				list-style: disc;
				padding-left: 0;

				li { font-size: 1em; }
			}

			pre, p, ol { font-size: 1em; }
		}

		p {
			font: 400 1.166em/1.5em Inter, Helvetica, Arial, sans-serif;
			margin-bottom: 1em;
		}

		pre {
			background-color: #ebebeb;
			border-radius: .4166em;
			font: 400 1.166em/1.5em Inter, Helvetica, Arial, sans-serif;
			margin-bottom: 1em;
			padding: .5em 1em;
			white-space: pre-wrap;

			code {
				font: 400 1.166em/1.5em monospace;
			}
		}

		strong { font-weight: 600; }

		em { font-style: italic; }

		section {
			border-bottom: 1px solid #ebebeb;
			clear: both;
			margin-bottom: 1em;
			overflow: hidden;
			padding-bottom: 1em;
			width: 100%;

			&:last-of-type {
				border: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}
	}

	.methodGroup {
		float: left;
		margin-right: 5%;
		width: 45%;

		h4 { 
			margin-top: 0; 
		}

		li { 
			margin: 0 0 1em 2em;
			padding-left: 0; 

			a {
				font: 400 1.25em Inter, Helvetica, Arial, sans-serif;
			}
		}
	}

	.headerLabel {
		color: #888;
		font: 400 1.166em Inter, Helvetica, Arial, sans-serif;
		margin-bottom: .25em;
	}

	.get { color: green; }

	.post { color: blue; }

	.delete { color: red; }

	.restrictions {
		li {
			font: 400 1.166em Inter, Helvetica, Arial, sans-serif;
			margin: 0 0 1em 2em;
		}
	}

	.params {
		background-color: #ebebeb;
		border-radius: .4166em;
		width: 100%;

		thead, tr {
			border-bottom: 1px solid #ccc;
		}

		tr:last-of-type { border: none; }
		
		th {
			color: #000;
			font: 200 1.166em Inter, Helvetica, Arial, sans-serif;
			text-align: left;
		}

		th, td {
			padding: .5em 1em;
		}
		
		td { 
			font: 400 1.166em Inter, Helvetica, Arial, sans-serif;
			width: auto; 

			&.param { width: 25%; }
		}
	}
}

footer {
	border-top: 1px solid #ebebeb;
	font: 400 1em Inter, Helvetica, Arial, sans-serif;
	margin: 3em 0 0 0;
	padding: 1em 2em 1em 2em;
}