* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: #f2f4f7;
    color: #24292f;
    font: 14px/1.65 -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
a { color: #22558f; text-decoration: none; }
a:hover { text-decoration: underline; }
h2.pt { font-size: 18px; margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid #e3e7ec; font-weight: 600; }
h3.sub { font-size: 15px; margin: 18px 0 8px; color: #444; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.topbar { background: #22303f; }
.topbar:after { content: ""; display: block; clear: both; }
.logo { float: left; color: #fff; font-size: 18px; line-height: 54px; font-weight: 600; }
.logo:hover { text-decoration: none; }
.topnav { float: right; line-height: 54px; }
.topnav a { color: #c5cfda; margin-left: 18px; font-size: 14px; }
.topnav a:hover { color: #fff; }
.topnav .me { color: #8fa3b8; margin-left: 18px; }

.main { padding: 22px 16px 40px; }
.flash { padding: 10px 14px; border-radius: 4px; margin: 14px 0; background: #e8f4ea; border: 1px solid #bcdfc4; color: #276b34; }
.flash.err { background: #fdeaea; border-color: #f1c2c2; color: #a63b3b; }

.layout { padding: 22px 16px 40px; display: flex; align-items: flex-start; }
.side { width: 168px; flex: 0 0 168px; background: #fff; border: 1px solid #e3e7ec; border-radius: 4px; margin-right: 16px; }
.side ul { list-style: none; margin: 6px 0; padding: 0; }
.side li a { display: block; padding: 8px 14px; color: #333; border-left: 3px solid transparent; }
.side li a:hover { background: #f5f8fb; text-decoration: none; }
.side li.on a { border-left-color: #22558f; background: #f0f5fb; color: #22558f; font-weight: 600; }
.content { flex: 1 1 auto; min-width: 0; }

.card { background: #fff; border: 1px solid #e3e7ec; border-radius: 4px; padding: 18px; margin-bottom: 16px; }
.grid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.grid .col { flex: 1 1 200px; padding: 0 8px; margin-bottom: 14px; }
.stat { background: #fff; border: 1px solid #e3e7ec; border-radius: 4px; padding: 14px 16px; }
.stat b { display: block; font-size: 24px; line-height: 1.3; font-weight: 600; }
.stat span { color: #7a828c; font-size: 13px; }

table.tb { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
table.tb th, table.tb td { border: 1px solid #e6eaee; padding: 8px 10px; text-align: left; vertical-align: top; }
table.tb th { background: #f7f9fb; font-weight: 600; white-space: nowrap; }
table.tb tr:hover td { background: #fbfcfe; }
.tb small { color: #7a828c; }

.btn { display: inline-block; padding: 6px 14px; background: #22558f; color: #fff; border: 1px solid #22558f; border-radius: 3px; font-size: 13px; cursor: pointer; }
.btn:hover { background: #1c4676; color: #fff; text-decoration: none; }
.btn.gray { background: #fff; color: #444; border-color: #cfd6de; }
.btn.gray:hover { background: #f2f4f7; color: #222; }
.btn.red { background: #a63b3b; border-color: #a63b3b; }
.btn.sm { padding: 3px 9px; font-size: 12px; }

label { display: block; margin-bottom: 10px; color: #555; font-size: 13px; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid #d3dae1; border-radius: 3px; font-size: 14px; font-family: inherit; }
label textarea { min-height: 90px; }
input.keybox { width: 100%; padding: 7px 9px; border: 1px solid #d3dae1; border-radius: 3px; font-family: Menlo, Consolas, monospace; font-size: 12px; background: #fbfcfd; }
textarea.keybox { width: 100%; min-height: 120px; border: 1px solid #d3dae1; border-radius: 3px; padding: 8px; font-family: Menlo, Consolas, monospace; font-size: 12px; background: #fbfcfd; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid transparent; }
.tag.green { background: #e8f4ea; color: #276b34; border-color: #c6e2cd; }
.tag.red { background: #fdeaea; color: #a63b3b; border-color: #f2cccc; }
.tag.yellow { background: #fdf6e3; color: #8a6d1a; border-color: #ecdfb6; }
.tag.gray { background: #f1f3f5; color: #666; border-color: #e0e4e8; }

.pager { margin: 14px 0; }
.pager a { display: inline-block; padding: 4px 10px; margin-right: 5px; border: 1px solid #dde2e7; background: #fff; border-radius: 3px; }
.pager a.on { background: #22558f; border-color: #22558f; color: #fff; }

.foot { padding: 20px 16px 30px; color: #8b939c; font-size: 13px; border-top: 1px solid #e3e7ec; margin-top: 20px; }
.tip { background: #fbfaf3; border: 1px solid #ece5c4; padding: 10px 12px; border-radius: 3px; color: #6f5f22; font-size: 13px; }
.muted { color: #8b939c; }
.nowrap { white-space: nowrap; }
pre.code { background: #2b323b; color: #d8e0e8; padding: 14px; border-radius: 4px; overflow-x: auto; font: 12px/1.7 Menlo, Consolas, monospace; }
.doc h3 { margin-top: 26px; font-size: 16px; }
.doc h4 { margin-top: 18px; font-size: 14px; }
.doc table.tb td code { background: #f2f4f7; padding: 1px 5px; border-radius: 3px; }
.hero { background: #fff; border: 1px solid #e3e7ec; border-radius: 4px; padding: 28px; text-align: center; }
.hero h1 { font-size: 26px; margin: 0 0 10px; }
.hero p { color: #5b636c; margin: 0 0 18px; }

@media (max-width: 720px) {
    .layout { flex-direction: column; }
    .side { width: 100%; flex: none; margin: 0 0 14px; }
    .side ul { display: flex; flex-wrap: wrap; }
    .side li a { padding: 6px 10px; }
    .topnav { float: none; clear: both; line-height: 40px; padding-bottom: 6px; }
    .topnav a { margin-left: 0; margin-right: 14px; }
}