html, body, #app {
    height: 100%;
    background-color: #F1F5F8;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* 滚动条凹槽的颜色，还可以设置边框属性 */
    &::-webkit-scrollbar-track-piece {
        background-color: #f8f8f8;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
    /* 滚动条的宽度 */
    &::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }
    /* 滚动条的设置 */
    &::-webkit-scrollbar-thumb {
        background-color: #ddd;
        background-clip: padding-box;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
    /* 滚动条鼠标移上去 */
    &::-webkit-scrollbar-thumb:hover {
        background-color: #bbb;
    }
}

.us-se-no {
    user-select: none;
}

.lr-dialog-footer {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .left {
        .el-button + .el-button {
            margin-left: 10px;
        }
    }
}

.hc-flex-column {
    display: flex;
    flex-direction: column;
}


.hc-sticky-box {
    position: sticky;
    z-index: 99;
    top: 0;
}


.pover-menu-list {
    position: relative;
    .list-item {
        position: relative;
        border-radius: 5px;
        padding: 10px 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: color 0.3s, background-color 0.3s;
        .text {
            flex: auto;
            margin-left: 0;
            margin-right: 20px;
        }
        i {
            font-size: 22px;
        }
        &:hover {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-7);
        }
    }
}

#toolPanel, #optionPanel {
    border-radius: 5px;
    box-shadow: 0 .5em 1em rgba(0,0,0,0.15);
}

.el-radio-group .el-radio {
    margin-right: 10px;
}

.bg-card-main {
    background-color: var(--hc-bg-color);
}

.hc-list-box {
    position: relative;
    .item {
        position: relative;
        display: flex;
        align-items: center;
        .label {
            flex: 1;
        }
        &.item {
            margin-top: 15px;
        }
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter-from {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}