html,body{
    --color-bg: #f4f4f4;
    --color-primary: #1989fa;
    --color-success: #07c160;
    --color-error: #ee0a24;
    --color-warning: #ff976a;
    --color-text: #323233;
    --color-text-sub: #646566;
    --color-border: #ebedf0;
    --mp:16px;
    --gradient-bg: linear-gradient(to top, #8e2de2, #4a00e0);

    height: 100vh;
    width: 100vw;
    background-color: var(--color-bg);
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/** loading spin **/
.loading-wrap {
    margin: 40vh auto;
    width: 64px;
    height: 64px;
}

img{
    display: block;
    line-height: 0px;
    font-size: 0px;
}

.page-ctx{
    padding-bottom: 25vh;
}

.btns-col{
    display: flex;
    flex-direction: column;
}
.btns-col > button {
    margin-bottom: var(--mp);
}
.btns-col > button:last-child{
    margin-bottom: 0px;
}

.btns-row{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.btns-row > button {
    margin-right: 5px;
    margin-left: 0px;
}
.btns-row > button:last-child{
    margin-right: 0px;
}



.notice{
    padding: var(--mp);
}
.notice .notice-title{
    color: var(--color-warning);
    font-size: 1rem;
    font-weight: bold;
}
.notice ol, .notice ul{
    list-style-type: decimal;
    color: var(--color-text-sub);
    font-size: 0.875rem;

    padding-inline-start:1rem;
    margin-block-start: .875rem;
    margin-block-end: .875rem;
}
.notice li{
    margin-bottom: .625rem;
}


.progress{
    width: calc((100vw - 6px) / 7 * 0.618);
    height: 4px;
    background-color: var(--color-success);
}
.progress > span{
    display: block;
    height: 4px;
    background-color: var(--color-error);
}

/* cell group 自定义标题 */
.cell-group-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cell-group-title > span:last-child{
    color: var(--color-primary);
}