:root {
	--bg: #ffffff;
	--text: #333333;
	--link: #007bff;

	--nav-bg: #f2f2f6;

	--sidecode-bg: #424248;
	--sidecode-text: #ffffff;
}

body { padding:0px; margin:0px; font-family: "Roboto", Arial, Helvetica, sans-serif; background-color: var(--bg); color: var(--text); font-size:13px; box-sizing: border-box; overflow-y:scroll; overflow-x:hidden;  }

h1 { color:#e34c00; font-family: "Ubuntu", Arial, Helvetica, sans-serif; letter-spacing: -1px; font-size:3em; scroll-margin-top: 87px;}
h2, h3, h4 { font-family: "Ubuntu", Arial, Helvetica, sans-serif; letter-spacing: -0.685px;}

.bold {font-weight: bold;}
.tip {background-color: #f2f2f4; padding:10px; border-radius:5px;}

body > nav { position:fixed; left:0px; top:0px; width:280px; height:100vh; background-color: var(--nav-bg); overflow-y: scroll; overflow-x: hidden;}
body > nav menu, body > nav ul {list-style: none; padding: 0; margin: 0;}
body > nav menu {padding-left: 20px;}
body > nav menu:last-of-type {margin-bottom:15px;}
body > nav > menu {padding-left: 0; display: block;}
body > nav li {line-height: 1.5;}
body > nav a {display: inline-block; color: #333; text-decoration: none; cursor: pointer; font-size: 13px; white-space: nowrap; width: 100%;}
body > nav a:hover {background-color: #00000011;}
body > nav li > menu, li > ul { transition: all 0.2s ease-in-out;}

a.folder {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px 15px; box-sizing: border-box; font-weight: 500;}
a.folder::before {content: '';}
a.folder::after {content: '❮'; display: inline-block; transform: rotate(180deg); transition: transform 0.15s ease-in-out; margin-left: auto; font-weight: bold;}
a.folder.expanded::after {transform: rotate(270deg);}

a.element {padding-left: 20px;}
a.element b {font-weight: normal; color:#e34c00; }
a.empty b {font-weight: normal; color:#bcbcc3; }
body > main { margin-left:280px; min-height: 100vh; position: relative; z-index:1; }
body > main > .currpath { background-color: #eaeaefee; padding:15px 30px; color: #99999C; position: sticky; top:0px; font-weight: 500; }
body > main > section { width: 100%; display: flex; flex-wrap: wrap; border-bottom: solid 1px #00000022; padding:30px 0px 50px; }
body > main > section > article { width: calc(57vw - 165px); }
body > main > section > article > div { padding:0 30px 20px 30px; }
body > main > section > article > div.element-description { font-size:1.15em; line-height: 1.5em; }
body > main > section > article > div.element-description h1 { margin-top:10px; }
body > main > section > article a { color:#e34c00; text-decoration: none; }
body > main > section > article a:hover { border-bottom: dashed 1px #e34c00; }
body > main > section > article a.sml::before { content:'<'; color:#e34c00; }
body > main > section > article a.sml::after { content:'>'; color:#e34c00; }
body > main > section > article code { display: inline-block; padding:0px 3px; background-color: var(--nav-bg); }
body > main > section > aside { width: calc(43vw - 190px); padding: 0 30px; background-color: var(--sidecode-bg); color: var(--sidecode-text); }
body > main > section > aside:first-of-type { margin-top: 60px; }
body > main > section > aside a { color:#ffa579; text-decoration: none; }
body > main > section > aside a:hover { border-bottom: dashed 1px #ffa579; }
body > main > section > aside a.sml::before { content:'<'; color:#ffa579; }
body > main > section > aside a.sml::after { content:'>'; color:#ffa579; }
body > main > section > aside h2 { margin-bottom:40px; }
body > main > section > aside pre { margin-bottom:40px; }
body > main > section > aside pre code { padding: 1em; }

body > .sidecode { position:fixed; right:0px; top:0px; z-index:0; width: calc(43vw - 130px); height:100vh; background-color: var(--sidecode-bg); }

table { font-size:13px; border-collapse: separate; border-spacing: 1px; width: 100%; overflow: hidden; font-family: Arial, sans-serif; }
table th, table td { padding: 5px 15px; text-align: left; border: none; }
table th { background-color: #bbbbbf; color: white; font-weight: bold; }
table tbody tr:nth-child(even) { background-color: #f2f2f4; }
table tbody tr:nth-child(odd) { background-color: #fafafd; }
table tbody tr:hover { background-color: #ececef; cursor: pointer; }
table .desc { width:40%; }
table .cond { width:30%; }
table .val { width:30%; }
table .req { width:1%; text-align: center; }

body > main > section > aside pre code::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		cursor: default;
		scrollbar-gutter: stable;
	}
body > main > section > aside pre code::-webkit-scrollbar-corner {
		background-color: transparent;
	}
body > main > section > aside pre code::-webkit-scrollbar-track {
		background-color: transparent;
	}
body > main > section > aside pre code::-webkit-scrollbar-thumb {
		background-color: #666669;
	}