.energy-dashboard {
    width: 100%;
    min-height: 100%;
    height: 100%;
    background-color: #f2f2f4;
    font-family: 'yanfan-regular';

    .board-view {
        background: none;
    }

    .board-top {
        margin-bottom: 20px;

        .top-card {
            width: calc((100% - 60px) / 4);
            height: 235px;

            .top-show {
                display: flex;

                .card-icon {
                    width: 86px;
                    height: 86px;
                    margin-right: 15px;
                }

                .card-name {
                    color: #333333;
                    font-size: 24.5px;
                    margin-bottom: 5px;
                }

                .card-change {
                    color: #c8c8c8;
                    font-size: 14px;
                    display: flex;

                    .card-rate {
                        &.up {
                            color: #ff6666;
                        }

                        &.down {
                            color: #52cf16;
                        }
                    }
                }
            }

            .top-info {
                height: 117px;

                .card-value {
                    color: #333;
                    font-family: 'D-DIN-Bold';
                    font-size: 38px;
                    line-height: 38px;
                    font-weight: bolder;

                    .card-unit {
                        font-family: 'yanfan-regular';
                        font-size: 14px;
                    }
                }

                .card-chart {
                    width: 1;
                }
            }
        }
    }

    .board-center {
        height: 618px;
        margin-bottom: 20px;

        .center-pie {
            width: 584px;
            height: 100%;
        }

        .center-tree {
            width: calc(100% - 604px);
            height: 100%;
        }
    }

    .board-bottom {
        height: 625px;
        padding-bottom: 20px;
    }
}
