body {
	margin: 0;
}

body, button, input, textarea, select, option {
	font-size: 16px;
	font-family: "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", "Microsoft JhengHei UI", "Noto Sans CJK TC", "PingFang TC", "Microsoft YaHei UI", "Noto Sans CJK SC", "PingFang SC", "Malgun Gothic", "Namum Gothic", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Yu Gothic UI", "Noto Sans CJK JP", "Hiragino Kaku Gothic Pro", "TakaoPGothic";
}

html[lang="ko"] body, html[lang="ko"] button, html[lang="ko"] input, html[lang="ko"] textarea, html[lang="ko"] select, html[lang="ko"] option {
	font-family: "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", "Malgun Gothic", "Namum Gothic", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Microsoft JhengHei UI", "Noto Sans CJK TC", "PingFang TC", "Yu Gothic UI", "Noto Sans CJK JP", "Hiragino Kaku Gothic Pro", "TakaoPGothic";
}

html[lang="zh"] body, html[lang="zh"] button, html[lang="zh"] input, html[lang="zh"] textarea, html[lang="zh"] select, html[lang="zh"] option {
	font-family: "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", "Microsoft YaHei UI", "Noto Sans CJK SC", "PingFang SC", "Microsoft JhengHei UI", "Noto Sans CJK TC", "PingFang TC", "Malgun Gothic", "Namum Gothic", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Yu Gothic UI", "Noto Sans CJK JP", "Hiragino Kaku Gothic Pro", "TakaoPGothic";
}

html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] textarea, html[lang="ja"] select, html[lang="ja"] option {
	font-family: "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", "Yu Gothic UI", "Noto Sans CJK JP", "Hiragino Kaku Gothic Pro", "TakaoPGothic", "Apple SD Gothic Neo", "Microsoft JhengHei UI", "Noto Sans CJK TC", "PingFang TC", "Malgun Gothic", "Namum Gothic", "Noto Sans CJK KR";
}

body > header {
	height: 50px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

body > header > ul {
	list-style: none;
	display: table;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
}

body > header > ul > li:first-child {
	display: table-cell;
	padding: 5px;
	min-width: 197px;
	height: 40px;
	background-image: url("../images/restful_client.png");
	background-repeat: no-repeat;
	background-position: 10px;
	background-size: 197px 40px;
}

body > header > ul > li:last-child {
	display: table-cell;
	padding: 10px;
	text-align: right;
}

body > header > ul > li:last-child > button {
	padding: 3px;
	width: 75px;
	height: 30px;
	line-height: 22px;
	border-radius: 15px;
	text-align: left;
}

body > header > ul > li:last-child > button > span {
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 0;
	vertical-align: top;
	border-radius: 10px;
	border-width: 1px;
	border-style: solid;
	background-image: url("../images/light.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

body > header > ul > li:last-child > button::after {
	display: inline-block;
	content: "Light";
	padding-left: 4px;
	height: 22px;
	vertical-align: top;
}

body > section {
	overflow-x: hidden;
}

body > section > ul {
	list-style: none;
	display: table;
	margin: 0;
	padding: 0;
	table-layout: fixed;
}

body > section > ul > li {
	display: table-cell;
	position: relative;
	width: 50%;
	height: calc(100vh - 51px);
	vertical-align: top;
}

body > section > ul > li:first-child {
	border-right-width: 1px;
	border-right-style: solid;
}

body > section > ul > li > aside {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(128, 128, 128, 0.4);
	background-repeat: no-repeat;
	background-size: 30px 30px;
}

body > section > ul > li:first-child > aside {
	background-image: url("../images/to_request_light.png");
	background-position: right;
}

body > section > ul > li:last-child > aside {
	background-image: url("../images/to_response_light.png");
	background-position: left;
}

body > section > ul > li > aside:hover {
	background-color: rgba(26, 115, 232, 0.4);
}

body > section > ul > li > ul {
	list-style: none;
	display: table;
	margin: 10px;
	padding: 0;
	height: 27px;
}

body > section > ul > li > ul > li {
	display: table-cell;
	font-weight: bold;
	vertical-align: top;
}

body > section > ul > li > ul > li > span {
	margin-left: 5px;
}

body > section > ul > li > ul > li:not(:last-child) > span {
	margin-right: 15px;
}

body > section > ul > li:last-child > article > fieldset > legend::after {
	display: block;
	content: "Body";
	height: 27px;
}

body > section > ul > li.error > ul > li > span {
	color: #FF3000;
}

body > section > ul > li.error > article > fieldset > legend::after {
	content: "Error";
}

body > section > ul > li.error > article > fieldset > code {
	color: #FF3000;
	font-weight: bold;
}

body > section > ul > li:first-child > ul {
	width: calc(100% - 20px);
}

body > section > ul > li:first-child > ul > li:nth-child(2) {
	padding: 0 4px;
	width: 100%;
}

body > section > ul > li:first-child > ul > li:nth-child(2) > input {
	width: 100%;
}

body > section > ul > li:first-child > ul > li:last-child > button {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #1A73E8;
}

body > section > ul > li > nav {
	margin: 0 5px;
	padding: 0 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

body > section > ul > li > nav > label {
	display: inline-block;
	width: 70px;
}

body > section > ul > li > nav > label > input {
	display: none;
}

body > section > ul > li > nav > label > input + span {
	display: block;
	height: 21px;
	line-height: 21px;
	text-align: center;
	border-bottom: 2px transparent solid;
	cursor: default;
}

body > section > ul > li > nav > label > input:checked + span {
	font-weight: bold;
	letter-spacing: -0.5px;
	border-color: #1A73E8;
}

body > section > ul > li > nav > label:not(:hover) > input:not(:checked) + span {
	color: #808080;
}

body > section > ul > li > nav > label:hover > input:disabled + span {
	color: #808080;
	cursor: not-allowed;
}

body > section > ul > li > article > fieldset {
	display: none;
	margin: 5px 10px 0 10px;
	padding: 0;
	border-width: 1px;
	border-style: solid;
}

body > section > ul > li > article > fieldset > legend {
	margin-left: 10px;
	height: 27px;
}

body > section > ul > li > article.query > fieldset.query,
body > section > ul > li > article.headers > fieldset.headers,
body > section > ul > li > article.auth > fieldset.auth,
body > section > ul > li > article.body > fieldset.body,
body > section > ul > li > article.response > fieldset.response {
	display: block;
}

body > section > ul > li > article > fieldset > div,
body > section > ul > li > article > fieldset > code {
	display: block;
	padding: 0 10px 6px 10px;
	height: calc(100vh - 171px);
	/* min-height: 250px; */
	overflow: auto;
}

body > section > ul > li > article > fieldset > code {
	position: relative;
	white-space: pre-wrap;
	tab-size: 4;
}

body > section > ul > li > article > fieldset > code.format {
	white-space: pre;
}

body > section > ul > li > article > fieldset > code > span.tab {
	background: url("../images/tab_4.png") no-repeat left;
	background-size: 30px 23px;
}
/*
body > section > ul > li > article > fieldset > code > span.tab::before {
	position: absolute;
	display: inline-block;
	content: "→";
	color: rgba(128, 128, 128, 0.5);
	text-indent: -1px;
	border-left: 1px rgba(128, 128, 128, 0.5) solid;
}
*/
body > section > ul > li > article > fieldset > div > table {
	display: none;
	width: 100%;
	border: none;
	border-spacing: 0;
}

body > section > ul > li > article > fieldset > div > table.query,
body > section > ul > li > article > fieldset > div.headers > table.headers,
body > section > ul > li > article > fieldset > div.formurl > table.formurl,
body > section > ul > li > article > fieldset > div.formdata > table.formdata {
	table-layout: fixed;
}

body > section > ul > li > article > fieldset > div.query > table.query,
body > section > ul > li > article > fieldset > div.headers > table.headers,
body > section > ul > li > article > fieldset > div.auth > table.auth,
body > section > ul > li > article > fieldset > div.formurl > table.formurl,
body > section > ul > li > article > fieldset > div.formdata > table.formdata,
body > section > ul > li > article > fieldset > div.json > table.json {
	display: table;
}

body > section > ul > li > article > fieldset > div > table.query > tbody > tr > td:first-child,
body > section > ul > li > article > fieldset > div > table.headers > tbody > tr > td:first-child,
body > section > ul > li > article > fieldset > div > table.formurl > tbody > tr > td:first-child,
body > section > ul > li > article > fieldset > div > table.formdata > tbody > tr > td:first-child {
	padding-bottom: 3px;
	width: 30px;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr:hover > th,
body > section > ul > li > article > fieldset > div > table:not(.json) > tbody > tr:hover > td {
	background-color: rgba(128, 128, 128, 0.08);
}

body > section > ul > li > article > fieldset > div > table.formdata > tbody > tr > td:nth-child(4) {
	width: 56px;
}

body > section > ul > li > article > fieldset > div > table.query > tbody > tr > td:last-child,
body > section > ul > li > article > fieldset > div > table.headers > tbody > tr > td:last-child,
body > section > ul > li > article > fieldset > div > table.formurl > tbody > tr > td:last-child,
body > section > ul > li > article > fieldset > div > table.formdata > tbody > tr > td:last-child {
	width: 32px;
	line-height: 0;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr:last-child > td:last-child > button {
	display: none;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > th,
body > section > ul > li > article > fieldset > div > table > tbody > tr > td {
	padding-top: 4px;
	vertical-align: bottom;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td:nth-child(2) {
	width: 38%;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td:nth-child(3) {
	width: 62%;
}

input::placeholder {
	color: rgba(128, 128, 128, 0.8);
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > div[data-jig-widget="resizabletext"][contenteditable="true"] {
	position: relative;
	width: 100%;
	vertical-align: bottom;
	background-color: transparent;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > div[data-jig-widget="resizabletext"][contenteditable="true"]::before {
	position: absolute;
	display: block;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: transparent;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > div[data-jig-widget="resizabletext"][contenteditable="true"]:hover {
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > div[data-jig-widget="resizabletext"][contenteditable="true"]:focus {
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	box-shadow: none;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > div[data-jig-widget="resizabletext"][contenteditable="true"]:focus::before {
	border-bottom-color: #4F4F4F;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td:last-child > button {
	padding: 0;
	width: 27px;
	border: none;
	background-image: url("../images/rm_dark.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

body > section > ul > li > article > fieldset.auth > div > table > tbody > tr > th + td {
	width: 100%;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td:not(:first-child) {
	padding-left: 4px;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > input {
	width: 100%;
	background-color: transparent !important;
	border-top-color: transparent !important;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-radius: 0;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td.field > input[type="file"] {
	display: none;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td.file > div[data-jig-widget="resizabletext"][contenteditable="true"] {
	display: none;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > textarea {
	width: 100%;
	height: calc(100vh - 181px);
	resize: none;
	box-sizing: border-box;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > textarea,
html[lang="ko"] body > section > ul > li > article > fieldset > div > table > tbody > tr > td > textarea,
html[lang="zh"] body > section > ul > li > article > fieldset > div > table > tbody > tr > td > textarea,
html[lang="ja"] body > section > ul > li > article > fieldset > div > table > tbody > tr > td > textarea {
	font-family: monospace;
	tab-size: 4;
}

body > section > ul > li > article > fieldset > div > table > tbody > tr > td > input:focus {
	box-shadow: none !important;
	border-bottom-width: 2px !important;
}

aside[data-jig-widget="loading"] > ul > li > div > div:first-child {
	background-image: url("../images/loading_rotate.png") !important;
}

aside[data-jig-widget="loading"] > ul > li > div > div:last-child {
	background-image: url("../images/loading_icon_light.png") !important;
}

html[data-jig-theme="dark"] > body > header > ul > li:last-child > button::after {
	content: "Dark";
}

html[data-jig-theme="dark"] > body > header > ul > li:last-child > button > span {
	background-image: url("../images/dark.png");
}

html[data-jig-theme="dark"] > body > section > ul > li:first-child > aside {
	background-image: url("../images/to_request_dark.png");
}

html[data-jig-theme="dark"] > body > section > ul > li:last-child > aside {
	background-image: url("../images/to_response_dark.png");
}

html[data-jig-theme="dark"] > body > section > ul > li > article > fieldset > div > table > tbody > tr > td:last-child > button {
	background-image: url("../images/rm_light.png");
}

html[data-jig-theme="dark"] > body > section > ul > li > article > fieldset > div > table > tbody > tr > td > div[data-jig-widget="resizabletext"][contenteditable="true"]:focus::before {
	border-bottom-color: #808080;
}

html[data-jig-theme="dark"] aside[data-jig-widget="loading"] > ul > li > div > div:last-child {
	background-image: url("../images/loading_icon_dark.png") !important;
}

@media (min-width: 736.1px) {
	body > section > ul {
		width: 100%;
	}

	body > section > ul > li > aside {
		display: none;
	}

	body > section > ul > li > article > fieldset.response > code {
		width: calc(50vw - 42px);
	}
}

@media (max-width: 736px) {
	body > section > ul {
		width: calc(200vw - 60px);
	}

	body > section.request {
		margin-left: 0;
		transition: margin-left 0.5s;
	}

	body > section.request > ul > li:first-child > aside {
		display: none;
	}

	body > section.response {
		margin-left: calc(60px - 100vw);
		transition: margin-left 0.5s;
	}

	body > section.response > ul > li:last-child > aside {
		display: none;
	}

	body > section > ul > li > article > fieldset.response > code {
		width: calc(100vw - 72px);
	}
}

@media (max-width: 480px),
(min-width: 736.1px) and (max-width: 900px) {
	body > section > ul > li > article > fieldset > code {
		tab-size: 2;
	}

	body > section > ul > li > article > fieldset > code > span.tab {
		background-image: url("../images/tab_2.png");
		background-size: 14px 23px;
	}
}