saas-one/frontend/operation-web/app/view/home/Home.scss

$storage-warn-container-color: dynamic(#458fd2);
$unsend-sale-container-color: dynamic(#4caf50);
$unaudit-sale-container-color: dynamic(#9c27b0);
$unaudit-purc-container-color: dynamic(#e91e63);

.info-card-item {
    text-align: center;
    background: $lightest-color ;
    padding: 15px 10px !important;
    font-size: 24px;

     &.info-card-large-wrap {
        h2 {
            font-size: 36px;
            line-height: 36px;
        }

        span.x-fa {
            height: 60px;
            width: 60px;
            border-radius: 36px;
            color: $lightest-color;
            font-size: 30px;
            line-height: 60px;
            margin: 15px 0;

            &.fa-exclamation-triangle {
                background-color: $storage-warn-container-color;
            }

            &.fa-shopping-cart {
                background-color: $unsend-sale-container-color;
            }

            &.fa-check {
                background-color: $unaudit-sale-container-color;
            }

            &.fa-calendar-check-o {
                background-color: $unaudit-purc-container-color;
            }
        }

        .infodiv {
            font-size: 14px;
            line-height: 16px;
            margin-top: 15px;
        }
    }

    &.cornflower-blue:before {
        background: $storage-warn-container-color;
    }

    &.green:before {
        background: $unsend-sale-container-color;
    }

    &.magenta:before {
        background: $unaudit-sale-container-color;
    }

    &.orange:before {
        background: $unaudit-purc-container-color;
    }

    h2 {
        font-size: 30px;
        font-weight: normal;
        margin: 0;
        margin: 0;
        line-height: 32px;
    }

    div {
        line-height: 24px;
    }

    span {
        font-size: 24px;
        line-height: 24px;
    }
}

.info-card-item:before {
    width: 100%;
    position: absolute;
    height: 3px;
    content: "";
    top: 0;
    left: 0
}

.x-home-panel {
    background: $panel-body-background;

    &> .x-autocontainer-outerCt {
        display: block;
        background: $panel-body-background;

        &> .x-autocontainer-innerCt {
            display: block;
        }
    }
}

.x-home-box {
    border-radius: 2px;
    margin: 0 0 16px 0 !important;
    

    &:last-child {
        margin: 0 !important;
    }

    & > .x-panel-bodyWrap > .x-panel-body >.x-autocontainer-outerCt > .x-autocontainer-innerCt {
        background: $panel-body-background;
        display: flex;
        justify-content: space-around;

        .x-home-chart {
            background: #fff;
            border-radius: 4px;
        }
    }

    

    &>.x-panel-header {
        background-color: #fff;

        &>.x-box-inner {
            &>.x-box-target {
                &>.x-title {
                    &>.x-title-text {
                        font-size: 16px;
                        color: #505363;
                        padding-left: 10px;
            
                        &:before {
                            content: ' ';
                            position: absolute;
                            width: 4px;
                            height: 100%;
                            background: #34BAF6;
                            left: 0;
                            border-radius: 2px;
                        }
                    }
                }
            }
        }
    }
}

.quick-graph-panel {
    box-shadow: none;

    .x-panel-header-default {
        background-color: #fff;
        padding-right: 14px;

        .x-panel-header-title-default > .x-title-icon-wrap-default > .x-title-icon-default,
        .x-panel-header-title-default > .x-title-text-default {
            color: #485465;
        }
    }

}