cyber-narrator-cn-ui/src/assets/css/components/views/chartHeader.scss

.cn-chart-header-button {
    display: flex;
    .cn-chart-header-button-group {
        display: flex;
        .el-button {
            border-radius: 0%;
        }

        .el-button:hover {
            background: #FFFFFF;
            border-color: #0091FF;
        }

        .el-button:last-of-type {
            border-radius: 0 2px 2px 0;

        }
        .el-button:first-of-type{
            border-radius: 2px 0 0 2px;

        }
        .cn-chart-header-button-all  {
            border-color: #0091FF;
            color: #0091FF;
            background-color: #FFFFFF;
           z-index: 1;
        }

        .cn-chart-header-button-critical {
            border-color: #0091FF;
            color: #0091FF;
            background-color: #FFFFFF;
           z-index: 1;

        }

        .cn-chart-header-button-high {
            border-color: #0091FF;
            background-color: #FFFFFF;
           z-index: 1;
           color: #0091FF;
        }

        .cn-chart-header-button-low {
            border-color: #0091FF;
            background-color: #FFFFFF;
           z-index: 1;
           color: #0091FF;
        }

        .cn-chart-header-button-info {
            border-color: #0091FF;
            background-color: #FFFFFF;
           z-index: 1;
           color: #0091FF;
        }

        .cn-chart-header-button-medium {
            border-color: #0091FF;
            background-color: #FFFFFF;
           z-index: 1;
           color: #0091FF;
        }

        .el-button--default {
            height: 24px;
            min-height: 24px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
        }
    }

    .header__operation-btn {
        margin-left: 12px;
        cursor: pointer;
        color: #999;
      }
}