html, body, #app {
    height: 100%;
    background-color: #EBF4F6;
}
*:focus-visible {
    outline: none;
}
.el-message {
    max-width: 400px;
}
.el-scrollbar.hc-main-scrollbar .el-scrollbar__bar {
    right: -18px;
}

.el-scrollbar:not(.hc-main-scrollbar) .el-scrollbar__bar {
    right: 0;
}
.el-scrollbar.hc--right-15 .el-scrollbar__bar {
    right: -15px;
}

.hc-main-row {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hc-sb-table .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
    background: #f1f5f8;
}
.hc-sb-table .el-tabs .el-tabs__active-bar {
    background: white;
}
.hc-sb-table .el-tabs .el-tabs__active-bar:after,
.hc-sb-table .el-tabs .el-tabs__active-bar:before {
    background: white;
}

.hac-card-title {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 8px;
    &::before {
        content: '';
        position: relative;
        display: inline-block;
        width: 5px;
        height: 18px;
        border-radius: 10px;
        background-color: var(--el-color-primary-dark-2);
        right: 8px;
    }
}

.bg-orange-gradient {
    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
    color: white;
}
.bg-red-gradient {
    background-image: linear-gradient(45deg, #f33a41, #ed0586);
    color: white;
}
.bg-pink-gradient {
    background-image: linear-gradient(45deg, #fea894, #ff1047);
    color: white;
}
.bg-mauve-gradient {
    background-image: linear-gradient(45deg, #c01f95, #7115cc);
    color: white;
}
.bg-purple-gradient {
    background-image: linear-gradient(45deg, #9829ea, #5908fb);
    color: white;
}
.bg-blue-gradient {
    background-image: linear-gradient(45deg, #00b8f9, #0166eb);
    color: white;
}
.bg-cyan-gradient {
    background-image: linear-gradient(45deg, #06edfe, #48b2fe);
    color: white;
}
.bg-green-gradient {
    background-image: linear-gradient(45deg, #3ab54a, #8cc63f);
    color: white;
}
.bg-olive-gradient {
    background-image: linear-gradient(45deg, #90e630, #39d266);
    color: white;
}
.bg-grey-gradient {
    background-image: linear-gradient(45deg, #9aadb9, #354855);
    color: white;
}
.bg-brown-gradient {
    background-image: linear-gradient(45deg, #ca6f2e, #cb1413);
    color: white;
}
.hc-table-ref-box {
    border-color: #f3f3f3;
}

.el-card.hc-card-box {
    --el-card-bg-color: white;
}
.el-card.hc-card-box .el-card__body .hc-card-action-box {
    background-color: white;
}
.el-card .el-card__body .hc-card-main-box .hc-card-item-box {
    background: #f3f8fc;
}
.hac-card-item.hc-card-item-box {
    background: white;
    .hc-card-item-header {
        .item-header, .item-extra {
            height: 100%;
        }
        .item-extra {
            margin-left: 14px;
        }
    }
}

.hc-table-ref-box.no-border {
    border: 0;
}

.el-card.hc-card-box .el-card__body .hc-card-action-box {
    .el-button + .el-button {
        margin-left: 32px;
    }
}