.help-drawer-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; pointer-events: none; }
.help-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .15); opacity: 0; transition: opacity .2s; }
.help-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%;
  background: #fff; box-shadow: -4px 0 16px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s;
}
.help-open { pointer-events: auto; }
.help-open .help-mask { opacity: 1; }
.help-open .help-drawer { transform: translateX(0); }

.help-head { display: flex; align-items: center; height: 48px; padding: 0 8px 0 4px; border-bottom: 1px solid #e8eaec; flex: none; }
.help-head a { color: #515a6e; }
.help-head a:hover { color: #2d8cf0; }
.help-back { width: 32px; text-align: center; font-size: 20px; }
.help-title { flex: 1; font-size: 15px; font-weight: bold; color: #17233d; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.help-btn { margin-left: 12px; font-size: 13px; white-space: nowrap; }
.help-btn .ivu-icon { font-size: 16px; vertical-align: -2px; }
.help-close { margin-left: 12px; font-size: 26px; line-height: 1; }

.help-search { padding: 10px 16px 0; flex: none; }
.help-search input { width: 100%; height: 30px; padding: 0 8px; border: 1px solid #dcdee2; border-radius: 4px; outline: none; }
.help-search input:focus { border-color: #57a3f3; }

.help-body { flex: 1; overflow-y: auto; padding: 12px 20px 32px; }
.help-loading, .help-empty { color: #808695; padding: 20px 0; list-style: none; }
.help-missing { color: #515a6e; padding: 24px 0; line-height: 2; }
.help-key { color: #c5c8ce; font-size: 12px; }

.help-toc, .help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc ul { padding-left: 16px; }
.help-toc li { line-height: 30px; }
.help-toc-d0 > a, .help-toc-d0 > span { font-weight: bold; color: #17233d; }
.help-toc-d0 { margin-top: 6px; }
.help-toc a { color: #515a6e; }
.help-toc a:hover { color: #2d8cf0; }
.help-cur > a { color: #2d8cf0; }

.help-doc { font-size: 14px; line-height: 1.8; color: #333; }
.help-doc h1 { font-size: 20px; margin: 8px 0 12px; color: #17233d; }
.help-doc h2 { font-size: 16px; margin: 20px 0 8px; padding-left: 8px; border-left: 3px solid #2d8cf0; color: #17233d; }
.help-doc h3 { font-size: 14px; margin: 14px 0 6px; color: #17233d; }
.help-doc h4 { font-size: 14px; margin: 10px 0 4px; color: #515a6e; }
.help-doc p { margin: 6px 0; }
.help-doc ul, .help-doc ol { margin: 6px 0; padding-left: 22px; }
.help-doc li { margin: 2px 0; }
.help-doc ul { list-style: disc; }
.help-doc ol { list-style: decimal; }
.help-doc code { background: #f3f3f3; padding: 0 4px; border-radius: 3px; font-size: 13px; color: #c7254e; }
.help-doc pre { background: #f7f7f7; padding: 8px 10px; border-radius: 4px; white-space: pre-wrap; font-size: 13px; }
.help-doc table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.help-doc th, .help-doc td { border: 1px solid #e8eaec; padding: 4px 8px; text-align: left; vertical-align: top; }
.help-doc th { background: #f8f8f9; white-space: nowrap; }
.help-doc img { max-width: 100%; border: 1px solid #e8eaec; border-radius: 4px; margin: 6px 0; }
.help-doc a { color: #2d8cf0; }
.help-doc hr { border: none; border-top: 1px solid #e8eaec; margin: 16px 0; }
.help-tip { background: #f0faff; border-left: 3px solid #2d8cf0; padding: 6px 12px; margin: 8px 0; border-radius: 0 4px 4px 0; }
.help-tip.help-warn { background: #fff9e6; border-left-color: #ff9900; }
.help-tip p { margin: 2px 0; }

.list-help-btn.ivu-btn { margin-left: auto; font-size: 20px; color: #515a6e; padding: 0 6px; }
.list-help-btn.ivu-btn:hover { color: #2d8cf0; background: transparent; }