:root{
    --wrap-min:320px;
    --wrap-max:1200px;
    --color-background:#fafbfc;
    --color-text:#000;
    --color-text-hover:#F00;
    --color-primary:#090;
    --color-error:#F00;
    --color-span:#999;
    --font-size:12px;
    --font-height:1.8rem;
    --font-family:-apple-system,"Helvetica Neue","Helvetica","Arial","Microsoft YaHei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    --space-size:1rem;
    --radius-size:3px;
    --style-face:rgba(255,255,255,0.9);
    --style-input:rgba(255,255,255,0.5);
    --style-light:rgba(125,125,125,0.08);
    --style-normal:rgba(125,125,125,0.15);
    --style-dark:rgba(125,125,125,0.3);
    --style-deep:rgba(125,125,125,0.5);
    --style-trans:rgba(0,0,0,0);
    --style-primary:rgb(255,250,240,0.9);
}
@media screen and (max-width:768px){
    :root{
        --font-size:12px;
        --space-size:0.5rem;
    }
}
*{
    margin:0px;
    padding:0px;
    position:relative;
    box-sizing:border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
html{
    height:100%;
}
html,body{
    font-size:var(--font-size);
    font-family:var(--font-family);
    line-height:var(--font-height);
    color:var(--color-text);
    min-width:var(--wrap-min);
    min-height:100%;
    background-color:var(--color-background);
    display:contents;
} body.mobi{font-size:14px;}
a{
    color:var(--color-text);
    text-decoration:none;
    cursor:pointer;
    position:relative;
}
a:hover{
    color:var(--color-text-hover);
    text-decoration:none;
}
a:not([href]):not([data-href]):not([data-tab]):not([data-switch]){
    cursor:default;
}
[data-href]{
    cursor:pointer;
}
[data-href=""],a[href=""]{
    color:var(--color-span);
    cursor:default;
}
p{
    padding:0.5rem 0;
}
hr{
    margin:1rem 0;
    background-color:var(--style-normal);
    height:1px;
    border:0;
}
pre{
    max-width:100%;
    overflow-x:auto;
}
img{
    vertical-align:middle;
    max-width:100%;
    max-height:100%;
    border:0;
    &.zoom{
        cursor:pointer;
    }
}
video{
    background-color:#000;
    max-width:100%;
    max-height:100%;
    &.zoom{
        cursor:pointer;
    }
}
ol, ul, li{
    list-style:none;
    padding:0px;
    margin:0px;
}
pre{
    white-space:pre-wrap;
    word-break:break-word;
}
label{
    cursor:pointer;
    white-space:nowrap;
}
input, textarea, button, select{
    font-size:1em;
    font-family:var(--font-family);
    vertical-align:middle;
    line-height:1em;
    color:var(--color-text);
    background-color:var(--style-input);
    height:32px;
    min-height:32px;
    max-width:100%;
    padding:0.5rem;
    border:1px solid var(--style-normal);
    border-radius:0px;
    box-shadow:none;
    outline:0;
    display:inline-block;
}
input:focus, textarea:focus, button:focus, select:focus{
    border:1px solid var(--style-dark);
}
textarea{
    padding:0.5rem;
    height:auto;
}
select{
    padding:0.3rem;
    &[multiple]{height:auto;}
}
input[type="color"]{
    padding:0 0.2rem;
}
input[type="radio"], input[type="checkbox"]{
    border:0;
    padding:0;
    margin:0;
}
input[type="file"]{
    padding:0.2em;
}
input::placeholder, textarea::placeholder{
    color:var(--color-text);
    opacity:0.5;
}
input::-webkit-file-upload-button{
    height:100%;
    border:1px solid var(--style-normal);
}
input::-webkit-search-cancel-button, input::-webkit-calendar-picker-indicator{
    margin-right:0;
    padding-right:0;
}
input[type=number][class]::-webkit-inner-spin-button,input[type=number][class]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}
a:not([herf])>input[type="file"]{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:100% !important;
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    opacity:0;
}
*:has(>input.multi){position:relative}
*:has(>input.multi)>input{padding-left:1.5em;position:relative;z-index:1}
*:has(>input.multi)>:not(input):first-child{position:absolute;z-index:2;display:inline-block;height:32px;line-height:32px;min-width:1.2em;text-align:center;padding:0 2px}
*:has(>input.multi)>:not(input):last-child{position:absolute;z-index:2;display:inline-block;height:32px;line-height:32px;min-width:1.2em;text-align:center;padding:0 2px;right:0px}
.button, button, input[type="button"], input[type="submit"], input[type="reset"]{
    align-content:center;
    align-items:center;
    align-self:center;
    vertical-align:middle;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--color-text);
    background-color:var(--style-normal);
    padding:0 var(--space-size);
    border:none;
    border-radius:0;
    background-clip:padding-box;
    cursor:pointer;
    display:inline-block;
}
.button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover{
    text-decoration:none;
    background-color:var(--style-dark);
}
.button:focus, button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus{
    border:none;
}
.float{
    position:fixed;
    right:calc(var(--space-size) / 2);
    bottom:calc(var(--space-size) / 2);
    z-index:20;
}
.float.left{
    left:calc(var(--space-size) / 2);
    right:unset;
}
.float>a{
    margin:calc(var(--space-size) / 2);
    cursor:pointer;
    display:block;
    width:32px;
    height:32px;
    line-height:32px;
    font-size:16px;
    color:#fff;
    text-align:center;
    border-radius:100%;
    background-color:var(--style-deep);
    transform:translate3d(0,0,0);
    transition-duration:300ms;
    transition-property:all;
    transition-timing-function:cubic-bezier(0.7,1,0.7,1);
    opacity:0.8;
}
.float>a:hover,.float>a.active{
    opacity:1;
}
.pager{
    background-color:var(--color-background);
    margin:0.5rem 0;
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
    zoom:1;
    float:right;
}
.pager:after{
    content:"";
    height:0;
    clear:both;
    display:block;
}
.pager>ul{
    background-color:var(--style-light);
    border:solid 1px var(--style-light);
    border-radius:var(--radius-size);
    display:inline-block;
}
.pager>ul>li{
    text-align:center;
    min-width:2.5rem;
    line-height:2.5rem;
    border-right:1px solid var(--style-light);
    display:inline-block;
}
.pager>ul>li:last-child{
    border-right:unset;
}
.pager>ul>li>a{
    text-align:center;
    text-decoration:none;
    padding:0 0.5rem;
    display:block;
}
.pager>ul>li>a:hover{
    background-color:var(--style-light);
}
.pager>ul>li.active>a{
    background-color:var(--style-light);
    cursor:default;
}
.pager>ul>li.total>a{
    padding:0 0.8rem;
    cursor:default;
}
.icon{
    min-width:1.2em;
    text-align:center;
    display:inline-block;
    opacity:.5;
}
.badge{
    font-size:12px;
    line-height:1;
    font-weight:normal;
    font-style:normal;
    text-align:center;
    vertical-align:middle;
    background-color:var(--style-normal);
    min-width:1rem;
    min-height:1rem;
    border-radius:1rem;
    padding:0.15rem 0.4rem;
    display:inline-block;
    opacity:.9;
}
.badge.float{
    white-space:nowrap;
    position:absolute;
    top:-1em;
    right:-1em;
    bottom:unset;
    z-index:unset;
} *>:has(>.badge.float){position:relative;}
.red{
    color:#FFF !important;
    background-color:#ff3b30 !important;
} .red:hover, .red.active{
    color:#FFF !important;
    background-color:#fc5f57 !important;
}
.green{
    color:#FFF !important;
    background-color:#4cd964 !important;
} .green:hover, .green.active{
    color:#FFF !important;
    background-color:#6ddd81 !important;
}
.brown{
    color:#FFF !important;
    background-color:#a5673f !important;
} .brown:hover, .brown.active{
    color:#FFF !important;
    background-color:#b3754c !important;
}
.blue{
    color:#FFF !important;
    background-color:#007aff !important;
} .blue:hover, .blue.active{
    color:#FFF !important;
    background-color:#3091fd !important;
}
.pink{
    color:#FFF !important;
    background-color:#ff2d55 !important;
} .pink:hover, .pink.active{
    color:#FFF !important;
    background-color:#fc5475 !important;
}
.yellow{
    color:#000 !important;
    background-color:#ffcc00 !important;
} .yellow:hover, .yellow.active{
    color:#000 !important;
    background-color:#fcd331 !important;
}
.orange{
    color:#FFF !important;
    background-color:#ff9500 !important;
} .orange:hover, .orange.active{
    color:#FFF !important;
    background-color:#fca731 !important;
}
.white{
    color:#000 !important;
    background-color:#ffffff !important;
} .white:hover, .white.active{
    color:#000 !important;
    background-color:#f5f5f5 !important;
}
.gray{
    color:#FFF !important;
    background-color:#999 !important;
} .gray:hover, .gray.active{
    color:#FFF !important;
    background-color:#888 !important;
}
.black{
    color:#FFF !important;
    background-color:#000 !important;
} .black:hover, .black.active{
    color:#FFF !important;
    background-color:#222 !important;
}
.trans{
    background-color:unset !important;
} .trans:hover, .trans.active{
    background-color:unset !important;
}
.primary, .primary a{
    color:var(--color-primary);
}
.error, .error a{
    color:var(--color-error);
}
.span, .span a{
    color:var(--color-span);
}
.disabled, .disabled a{
    color:var(--color-span);
}
.radius{
    border-radius:var(--radius-size);
    display:inline-block;
}
.shadow{
    box-shadow:0 0 0.5em 0.1em var(--style-light);
}
.flex{
    justify-content:space-between;
    align-items:center;
    display:flex;
}
.flex.center>*{
    flex-direction:column;
}
.vcl{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.vcr{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.vcc{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.vcsa{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.m{
    margin:var(--space-size);
}
.ml{
    margin-left:var(--space-size);
}
.mr{
    margin-right:var(--space-size);
}
.mt{
    margin-top:var(--space-size);
}
.mb{
    margin-bottom:var(--space-size);
}
.mx{
    margin-left:var(--space-size);
    margin-right:var(--space-size);
}
.my{
    margin-top:var(--space-size);
    margin-bottom:var(--space-size);
}
.mu{
    margin:unset;
}
.p{
    padding:var(--space-size);
}
.pl{
    padding-left:var(--space-size);
}
.pr{
    padding-right:var(--space-size);
}
.pt{
    padding-top:var(--space-size);
}
.pb{
    padding-bottom:var(--space-size);
}
.px{
    padding-left:var(--space-size);
    padding-right:var(--space-size);
}
.py{
    padding-top:var(--space-size);
    padding-bottom:var(--space-size);
}
.pu{
    padding:unset;
}
.b{
    border:solid 1px var(--style-normal);
}
.bl{
    border-left:solid 1px var(--style-normal);
}
.br{
    border-right:solid 1px var(--style-normal);
}
.bt{
    border-top:solid 1px var(--style-normal);
}
.bb{
    border-bottom:solid 1px var(--style-normal);
}
.bx{
    border-left:solid 1px var(--style-normal);
    border-right:solid 1px var(--style-normal);
}
.by{
    border-top:solid 1px var(--style-normal);
    border-bottom:solid 1px var(--style-normal);
}
.bu,.bu:hover,.bu:focus{
    border:unset;
}
.bg{
    background-color:var(--color-background);
}
.breakword{
    word-break:break-word;
}
.breakall{
    word-break:break-all;
}
.nowrap{
    white-space:nowrap;
}
.to{
    overflow:hidden;
    word-break:break-all;
    text-overflow:ellipsis;
    display:-webkit-inline-box !important;
    line-clamp:1;
    box-orient:vertical;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
}
.to.line2{
    line-clamp:2;
    -webkit-line-clamp:2;
}
.to.line3{
    line-clamp:3;
    -webkit-line-clamp:3;
}
.tl{
    text-align:left;
}
.tr{
    text-align:right;
}
.tc{
    text-align:center;
}
.vt{
    vertical-align:top;
    align-items:normal;
}
.vm{
    vertical-align:middle;
}
.vb{
    vertical-align:bottom;
}
.bold{
    font-weight:bold;
}
.italic{
    font-style:italic;
}
.underline, .underline a{
    text-decoration:underline;
}
.throughline, .throughline a{
    text-decoration:line-through;
}
.overline, .overline a{
    text-decoration:overline;
}
.mini{
    zoom:0.7;
}
.tiny{
    zoom:0.8;
}
.small{
    zoom:0.9;
}
.medium{
    font-size:1em;
}
.large{
    font-size:1.1em;
}
.big{
    font-size:1.2em;
}
.huge{
    font-size:1.4em;
}
.massive{
    font-size:1.6em;
}
.block{
    display:block;
}
.inline{
    display:inline-block;
}
.none{
    display:none;
}
.left{
    float:left;
}
.right{
    float:right;
}
.clear{
    zoom:1;
}
.clear:after{
    content:"";
    height:0;
    clear:both;
    display:block;
}
.goup,.goto{
    cursor:pointer;
    position:fixed;
    right:10px;
    bottom:10px;
    z-index:9;
    display:inline-block;
    width:35px;
    height:35px;
    line-height:35px;
    font-size:16px;
    color:#fff;
    text-align:center;
    border-radius:100%;
    background-color:rgba(125,125,125,0.5);
    transform:translate3d(0,0,0);
    transition-duration:300ms;
    transition-property:all;
    transition-timing-function:cubic-bezier(0.7,1,0.7,1);
    opacity:0.5;
}
.goup:hover,.goto:hover{
    opacity:1;
}
.cols{
    vertical-align:top;
    display:inline-block;
    position:relative;
}
@media screen and (max-width:768px){
    .cols.resp.pl{
        padding-left:unset;
    }
    .cols.resp.pr{
        padding-right:unset;
    }
    .cols.resp.ml{
        margin-left:unset;
    }
    .cols.resp.mr{
        margin-right:unset;
    }
}
.onlymobi{
    display:none;
} @media screen and (max-width:768px){
    .onlydesk{
        display:none;
    }
    .onlymobi{
        display:unset;
    }
}

.mask{
    background-color:rgba(0,0,0,0.25);
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:10000;
    animation:fadein 0.5s, fadeout 0.5s 2.5s;
    opacity:0;
}
.dialog{
    max-width:100%;
    max-height:100%;
    background-color:var(--color-background);
    border:1px solid var(--style-light);
    box-shadow:0 0 0.5em 0.1em var(--style-light);
    border-radius:var(--radius-size);
    position:fixed;
    z-index:1;
}
.dialog>.dialog-head{
    font-size:1.2rem;
    padding:10px;
    border-bottom:solid 1px var(--style-light);
    justify-content:space-between;
    align-items:center;
    display:flex;
}
.dialog>.dialog-head>.dialog-title{
    font-size:1em;
    font-weight:normal;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    display:inline-block;
    margin:0;
}
.dialog>.dialog-head>.dialog-menu{
    font-size:1.1rem;
    white-space:nowrap;
    margin:0;
}
.dialog>.dialog-body{
    padding:10px;
    width:100%;
    height:100%;
}
.dialog.fill>.dialog-body{
    padding:0;
}
.dialog.fill>.dialog-body>iframe{
    border-bottom-left-radius:var(--radius-size);
    border-bottom-right-radius:var(--radius-size);
}
.dialog.dark>.dialog-head,.dialog.dark>.dialog-head>.dialog-menu>a{
    color:#fff;
}
.dialog.clean>.dialog-head{
    position:absolute;
    top:0;
    right:0;
    z-index:1;
    width:100%;
    border-bottom:unset;
}
.dialog.clean>.dialog-head>.dialog-title{
    opacity:0;
}
.dialog.clean>.dialog-body>iframe{
    border-radius:var(--radius-size);
}
.dialog.left,.dialog.right,.dialog.left>.dialog-body>iframe,.dialog.right>.dialog-body>iframe{
    border-radius:0;
}
.dialog.resize{
    resize:both;
    overflow:hidden;
}
.pop{
    position:relative;
}
.pop>.popup{
    background-color:var(--style-face);
    box-shadow:0 0 0.5em 0.1em var(--style-light);
    border-radius:var(--radius-size);
    padding: calc(var(--space-size) / 2) var(--space-size);
    white-space:nowrap;
    opacity:.95;
    position:absolute;
    z-index:10;
    left:0;
    bottom:100%;
    display:none;
    max-height:80vh;
    overflow-y:auto;
}
.pop>.popdown{
    background-color:var(--style-face);
    box-shadow:0 0 0.5em 0.1em var(--style-light);
    border-radius:var(--radius-size);
    padding: calc(var(--space-size) / 2) var(--space-size);
    white-space:nowrap;
    opacity:.95;
    position:absolute;
    z-index:10;
    left:0;
    top:100%;
    display:none;
    max-height:80vh;
    overflow-y:auto;
}
.pop>.popleft{
    background-color:var(--style-face);
    box-shadow:0 0 0.5em 0.1em var(--style-light);
    border-radius:var(--radius-size);
    padding: calc(var(--space-size) / 2) var(--space-size);
    white-space:nowrap;
    opacity:.95;
    position:absolute;
    z-index:10;
    right:100%;
    top:-100%;
    display:none;
    max-width:80vh;
    overflow-x:auto;
}
.pop>.popright{
    background-color:var(--style-face);
    box-shadow:0 0 0.5em 0.1em var(--style-light);
    border-radius:var(--radius-size);
    padding: calc(var(--space-size) / 2) var(--space-size);
    white-space:nowrap;
    opacity:.95;
    position:absolute;
    z-index:10;
    left:100%;
    top:-100%;
    display:none;
    max-width:80vh;
    overflow-x:auto;
}
.pop>.right{
    float:none;
    left:auto;
    right:0;
}
.pop:hover>.popup,.pop:hover>.popdown,.pop:hover>.popleft,.pop:hover>.popright{
    display:block;
}
.popquick:hover .pop>.popup,.popquick:hover .pop>.popdown,.popquick:hover .pop>.popleft,.popquick:hover .pop>.popright{
    display:block;
}

.head{
    font-size:1.2rem;
    width:100%;
    height:50px;
    backdrop-filter:blur(3px);
    background-color:var(--style-face);
    border-bottom:solid 1px var(--style-light);
    padding:0 var(--space-size);
    justify-content:space-between;
    align-items:center;
    display:flex;
    position:fixed;
    z-index:10;
    top:0;
}
.head .logo{
    font-weight:normal;
    white-space:nowrap;
    height:100%;
    display:flex;
}
.head .logo .name, .head .logo .brand, .head .logo .bar, .head .logo .bar>i{
    height:100%;
    display:flex;
    align-items:center;
} @media screen and (max-width:768px){
    .head .logo .name{
        display:none;
    }
}
.head .logo .brand{
    color:#F60;
}
.head .logo .bar{
    padding:0 var(--space-size);
    position:fixed;
    top:0;
    right:0px;
    display:none;
}
.head .nav{
    margin:0 0 0 var(--space-size);
    height:100%;
    display:inline-block;
    white-space:nowrap;
} @media screen and (max-width:768px){
    .head .nav{overflow-y:auto;}
    .head .nav::-webkit-scrollbar{width:2px;height:2px}
    .head .nav::-webkit-scrollbar-thumb{background-color:var(--style-normal)}
    .head .nav::-webkit-scrollbar-track{background-color:var(--style-light)}
    .head .nav>ul>li:last-child>a>span{display:none}
}
.head .nav>ul{
    height:100%;
    display:flex;
}
.head .nav>ul>li{
    height:100%;
    flex:auto;
    position:relative;
    z-index:1;
}
.head .nav>ul>li>a{
    height:100%;
    display:flex;
    align-items:center;
    padding:0 0 0 2rem;
}
.head .nav ul>li>a:hover, .head .nav ul>li.active>a{
    color:var(--color-primary);
    text-decoration:none;
}
.head .nav>ul>li>ul{
    text-align:center;
    white-space:nowrap;
    min-width:7em;
    background-color:var(--style-face);
    border:solid 1px var(--style-light);
    box-shadow:0 1rem 1rem 0.1rem var(--style-light);
    padding:0.5rem;
    position:absolute;
    z-index:2;
    top:100%;
    right:0;
    display:none;
}
.head .nav>ul>li:hover>ul{
    display:block;
}
.head .nav>ul>li>ul>li{
    padding:0.5rem 1rem;
}

.side{
    vertical-align:top;
    padding:var(--space-size) 0 var(--space-size) var(--space-size);
    width:10em;
    min-height:calc(100% - 50px);
    max-height:calc(100% - 50px);
    display:inline-block;
} .head~.side{
    margin-top:50px;
} @media screen and (max-width:768px){
    .side{
        font-size:1.2rem;
        padding:var(--space-size) 0 var(--space-size) var(--space-size);
        backdrop-filter:blur(3px);
        background-color:var(--style-face);
        border-left:solid 1px var(--style-light);
        position:fixed;
        z-index:2;
        top:50px;
        right:0;
        overflow-x:auto;
    } .head~.side{
        margin-top:0;
    }
}
.side ul>li, .side ul>li>ul>li{
    padding:0.3em 0;
}
.side ul>li i{
    margin-right:0.2em;
}
.side ul>li>a{
    line-height:1;
    word-break:break-all;
    display:inline-block;
}
.side ul>li a:hover, .side ul>li.active>a{
    color:var(--color-primary);
    text-decoration:none;
}
.side ul>li a:hover:not([href]){
    cursor:default;
}
.side ul>li>ul{
    padding:0 0 var(--space-size) calc(var(--space-size) / 2);
}

.main{
    vertical-align:top;
    padding:var(--space-size);
    width:100%;
    height:100%;
    position:relative;
    display:inline-block;
} .head~.main{
    height:calc(100% - 50px);
    margin-top:50px;
} .side~.main{
    width:calc(100% - 10em);
} @media screen and (max-width:768px){
    .side~.main{
        width:100%;
    }
}
.main .side{
    padding:0;
    width:9em;
}
.main .main{
    padding:0 0 0 var(--space-size);
    width:calc(100% - 9em);
}
.main .taskbar{
    width:100%;
    height:35px;
    line-height:35px;
    backdrop-filter:blur(3px);
    background-color:var(--color-background);
    position:fixed;
    z-index:1;
    bottom:0;
}
@media screen and (max-width:768px){
    .main .side{
        width:10em;
        padding:var(--space-size) 0 var(--space-size) var(--space-size);
    }
    .main .main{
        padding:0;
        width:100%;
    }
}

.main h1{
    font-size:1.2rem;
    font-weight:normal;
    line-height:2.8rem;
    margin-right:1rem;
    display:inline-block;
}
.main h2{
    font-size:1.1rem;
    font-weight:normal;
    line-height:2.8rem;
    margin-right:1rem;
    display:inline-block;
}
.main .grids{
    border-radius:var(--radius-size);
    width:100%;
    overflow-x:auto;
}
.main .grid{
    min-width:100%;
    background-color:var(--style-light);
    border:1px solid var(--style-light);
    border-radius:var(--radius-size);
    border-collapse:separate;
    border-spacing:0;
}
.main .grid tr>th, .main .grid tr>td{
    word-break:break-word;
    padding:var(--space-size);
    position:relative;
} .main .grid.mini tr>th, .main .grid.mini tr>td{
    padding:var(--space-size) calc(var(--space-size) / 2);
} .main .grid.mini tbody>tr>th, .main .grid.mini tbody>tr>td{
    padding:calc(var(--space-size) / 2);
} @media screen and (max-width:768px){
    .main .grid tr>th, .main .grid tr>td{
        white-space:nowrap;
    }
}
.main .grid>thead>tr>th{
    font-weight:bold;
    text-align:left;
    white-space:nowrap;
}
.main .grid>tfoot>tr>th{
    font-weight:bold;
    text-align:left;
    white-space:nowrap;
    border-top:1px solid var(--style-light);
}
.main .grid>tbody>tr>td{
    border-bottom:1px solid var(--style-light);
}
.main .grid>tbody>tr:last-child>td{
    border-bottom:unset;
}
.main .grid>tbody>tr:nth-child(odd){
    background-color:var(--style-face);
}
.main .grid>tbody>tr:nth-child(even){
    background-color:rgba(125,125,125,0.02);
}
.main .grid>tbody>tr:hover, .main .grid>tbody>tr.active, .main .hover:hover{
    background-color:rgba(125,125,125,0.06);
}
.main table{
    border-radius:var(--radius-size);
    border-collapse:separate;
    border-spacing:0;
}
.main table tr>th{
    font-weight:normal;
    text-align:right;
    white-space:nowrap;
    padding:0.5em;
    position:relative;
} .main table tr>th.vt{
    padding-top:1em;
}
.main table>thead>tr>th{
    font-weight:bold;
    text-align:left;
}
.main table tr>td{
    padding:0.5em;
    position:relative;
}
.main .tabs a{
    white-space:nowrap;
    display:block;
}
.main .tabs a.active{
    font-weight:bold;
    color:var(--color-primary);
}
.main .tab{
    border-bottom:1px solid var(--style-light);
} @media screen and (max-width:768px){
    .main .tab{
        white-space:nowrap;
        overflow-y:auto;
    }
}
.main .tab>a{
    white-space:nowrap;
    text-decoration:none;
    padding:0.2em 1.2em;
    display:inline-block;
}
.main .tab>a.active{
    font-weight:bold;
    border-bottom:3px solid var(--style-light);
}
.main .tab~.grids, .main .tab~.grids>.grid, .main .tab~.grid, .main .tab~.b{
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.main .tips, .main fieldset{
    padding:var(--space-size);
    background-color:var(--style-light);
    border:solid 1px var(--style-light);
    border-radius:var(--radius-size);
} .main .tips.primary, .main fieldset.primary{
    color:unset;
    background-color:var(--style-primary);
}
.main fieldset.tips, .main fieldset{
    padding:calc(var(--space-size)/2) var(--space-size) var(--space-size) var(--space-size);
}
.main .tips>legend, .main fieldset>legend{
    background-color:var(--color-background);
    border:solid 1px var(--style-light);
    border-radius:var(--radius-size);
    padding:0.2em 1em;
}
.main .card{
    background-color:var(--style-face);
    border:solid 1px var(--style-light);
    border-radius:var(--radius-size);
    padding:1rem;
} .main .card.primary{
    color:unset;
    background-color:var(--style-primary);
}
.main .card header{
    font-size:1.2rem;
    font-weight:normal;
    padding-bottom:1rem;
    justify-content:space-between;
    align-items:center;
    display:flex;
}
.main .card footer{
    color:var(--color-span);
    padding-top:1rem;
    justify-content:space-between;
    align-items:center;
    display:flex;
}
.main .inputline{
    padding:0.5em 1.5em;
    border-bottom:1px solid var(--style-normal);
    position:relative;
}
.main .inputline>input, .main .inputline>textarea, .main .inputline>select{
    width:100%;
    background-color:unset;
    border:unset;
}
.main .inputline>*::placeholder{
    color:var(--color-text);
}
.main .inputline>i, .inputline>.icon{
    position:absolute;
    top:calc(50% - .5em);
    left:0;
    z-index:1;
}
.main .tox button{
    min-height:auto;
}
@media screen and (max-width:768px){
    .main form.right{
        float:unset;
    }
}