
:root {
    --web-font-size: 16px;
    --web-font-color: #3d3d3d;
    --web-line-height: 1.2em;
    --web-bg-color: #fff;
    --nav-font-size: 16px;
    --nav-font-color: #363636;
    --nprogress-color: #dc143c;
    --checkbox-border-color: #dbdbdb;
    --checkbox-bg-color: #fff;
    --h3-color: #41e6d5;
    --input-color: #009688;
    --input-focus-color: #005338;
    --tips-bg-color: #f1c40f;
    --tips-font-color: #000000;
    --warning-color: #e74c3c;
    --scrollbar-track-color:#252525;
    --scrollbar-thumb-color:#4e4e4e;
    --a-color:#5a5a5a;
    --a-hover:#202020;
    --a-active:#5a5a5a;
}
body{background-color:#f6f6f6;color: var(--web-font-color);}
a{text-decoration: none;color:var(--a-color);}
a:active{color:var(--a-color);}
a:hover{color:var(--a-color);}
h2,h3,h4{margin:0 0 10px 0;padding:0}
h2{margin:0 0 20px 0}
h3 small{margin-left:10px;font-size:0.6em}
.wrapper{width:1400px;margin:0 auto}
.container{width:100%;display:flex}
.content{flex-grow:1;background-color:#fff;border-radius:2px;-webkit-box-shadow:0 1px 3px hsla(0,0%,7%,.1);box-shadow:0 1px 3px hsla(0,0%,7%,.1);-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:20px}
.content{padding:20px}
.content h2::before{content:"\1F6E0";display:inline-block;margin-right:5px;margin-left:5px}
.content h3{text-decoration:underline;text-decoration-color:var(--h3-color);text-decoration-skip-ink:none;text-decoration-thickness:0.4rem;text-underline-offset:-0.2rem;transition:text-decoration 0}
.sidebar{flex-basis:340px}
.header{color:#000;text-align:center;padding:10px;height:60px;margin-bottom:20px;background:#fff;display:grid;grid-template-columns:auto 1fr;grid-gap:10px;box-shadow:0 1px 3px hsla(0,0%,7%,.1)}
.logo img{width:225px}
.logo{align-self:center}
.menu{display:grid;grid-template-columns:repeat(3,auto);align-items:center}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{display:inline-block}
.menu a{text-decoration:none;color:black;padding:10px}
.footer{color:#000;text-align:center;padding:10px;font-size:0.8em;margin-top: 20px;}
.button{display:inline-flex;min-width:6rem;height:2rem;justify-content:center;align-items:center;margin:0.5rem 0;line-height:35px;border:1px solid var(--input-color);border-radius:5px;text-align:center;font-size:16px;color:var(--input-color);text-decoration:none;transition:all 0.35s;box-sizing:border-box}
.button:hover{box-shadow:inset 0 0 0.55em 0em var(--input-color);border-color:var(--input-color);color:var(--input-color)}
.sidebar-item{padding:20px;background-color:#fff;border-radius:2px;-webkit-box-shadow:0 1px 3px hsla(0,0%,7%,.1);box-shadow:0 1px 3px hsla(0,0%,7%,.1);-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:20px;overflow:hidden}
.sidebar-item:last-child{margin-bottom:0;}
.share-input-container{position:relative;display:inline-block;margin-top: 20px;}
#share-input{width:260px;border:1px solid var(--input-color);border-radius:4px;padding:5px;padding-right:30px}
#share-button{position:absolute;right:5px;top:50%;transform:translateY(-50%);background-color:transparent;border:none;cursor:pointer;font-size:20px}
.share-tool img{display:block;max-width:200px;max-height:200px;margin:0 auto}
.label{position:relative;margin:0.5rem;font-family:Arial,sans-serif;line-height:135%;cursor:pointer}
.input{border:1px solid var(--input-color);border-radius:3px;transition:box-shadow 0.4s;font-family:inherit;height:2rem;margin:10px 0 7px 0;width:20%;outline:none}
.input:focus{border:1px solid var(--input-color)}
.textarea{border:1px solid var(--input-color)}
.blockquote{position:relative;font-family:'Roboto',serif;font-size:1.5em;line-height:1.5em;font-weight:100;content:" "}
.blockquote:before,.blockquote:after{content:'\201C';color:#4d91b3}
.blockquote:after{content:'\201D'}
.table{border-collapse:collapse;width:100%}
.table th,.table td{padding:12px 15px;text-align:left}
.select{border:1px solid var(--input-color);height:2rem}
.checkbox{position:relative;margin:0 1rem 0 1rem;cursor:pointer}
.checkbox:before{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;content:"";position:absolute;left:0;z-index:1;width:1rem;height:1rem;border:2px solid var(--checkbox-border-color);background-color:#fff}
.checkbox:checked:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);height:0.5rem;border-color:#009688;border-top-style:none;border-right-style:none}
.checkbox:after{content:"";position:absolute;top:-0.125rem;left:0;width:1.1rem;height:1.1rem;background:#fff;cursor:pointer}
.input:focus,.textarea:focus,.select:focus,.checkbox:focus,.radio:focus{outline:none;border:1px solid var(--input-focus-color);}
@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(6.25rem);transform:translateY(6.25rem)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}@keyframes slideUp{0%{-webkit-transform:translateY(6.25rem);transform:translateY(6.25rem)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}h2 span{margin-left:30px;font-size:10px;background-color:#d9edf7;border-color:#bce8f1;color:#3a87ad;padding:7px 35px 8px 14px}
.panel{position:relative;padding:10px;background-color:#fff;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:5px;border-top-left-radius:0;margin-bottom:20px}
.panel-body{padding:5px}
.panel:after{width:20px;position:absolute;left:-40px;top:-1px;z-index:9999;writing-mode:vertical-lr;text-orientation:upright;white-space:nowrap;text-indent:10px;letter-spacing:10px;font-size:16px;background-color:#f6f6f6;padding:5px 10px 5px 9px;border:1px solid #ccc;border-right:none;border-top-left-radius:5px;border-bottom-left-radius:5px}
.panel-tools:after{content:"\5DE5\5177"}
.panel-manual:after{content:"\8BF4\660E"}
.panel-intro:after{content:"\7B80\4ECB"}
#xtable{position:relative}
.xtable{border-collapse:collapse;width:100%}
.xtable th,.xtable td{padding:12px 15px;text-align:left}
.xtable th{background-color:#f2f2f2;position:sticky;top:0}
.xtable tr:nth-child(even){background-color:#f2f2f2}
.xtable th.asc::after{content:"\25B2"}/*▲*//*▼*/
.xtable th.desc::after{content:"\25BC"}
.xtable tr:hover{background-color:#e0e0e0}
.xtable-sign{width:30px;position:absolute;left:-50px;top:0;z-index:999;writing-mode:vertical-lr;text-orientation:upright;white-space:nowrap;font-size:16px;line-height:1.5;background-color:#f6f6f6;padding:10px;border:1px solid #ccc;border-right:none}
.xinput{width:50%}
.showhtmlcar{display:none;background:#fafafa;color:#000;position:absolute;font-size:60px;padding:20px;-moz-box-shadow:0px 0px 10px #333333;-webkit-box-shadow:0px 0px 10px #333333;box-shadow:0px 0px 10px #333333;border-radius:0.2em}
#rmb .input{width:20rem}
#date-interval .input{width:10%;margin:0 5px;text-align:center}
.intro{margin:20px 0}
.sidebar-tools-list {display: flex;align-items: center;height: 50px; line-height: 50px;}
.sidebar-tools-list a {display: flex;align-items: center;text-decoration: none;}
.sidebar-tools-list img {vertical-align: middle; margin-right: 10px;}
.sidebar-tools-list img{width:20px; height: 20px;}

.input + .copybutton {border:1px solid var(--input-color);border-radius:3px;transition:box-shadow 0.4s;font-family:inherit;height:2rem;margin:10px 0 7px 10px;outline:none;cursor: pointer;}

html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color)}
html::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:10px}