saas-platform/frontend/saas-web/app/view/home/charts/KeyData.scss

#key_data {
    .key_data-body {
        padding: 0;
    }
    .x-container {
        height: 100%;
        display: flex;
        flex-wrap: wrap;

        .x-box {
            width: calc(50% - 16px);
            border-width: 5px 1px 1px;
            border-style: solid;
            border-color: #1EC09F;
            cursor: pointer;
            transition: all 0.4s ease;

            &:nth-of-type(odd) {
                margin: 8px 8px 8px 0;

                &:hover {
                    position: relative;
                    margin: 2px 8px 14px 0;
                    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
                }
            }

            &:nth-of-type(even) {
                margin: 8px 0 8px 8px;

                &:hover {
                    position: relative;
                    margin: 2px 0 14px 8px;
                    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
                }
            }

            .x-box-content {
                display: flex;
                height: 100%;
                padding: 16px;

                .x-icon {
                    flex: 4;
                    max-width: 48px;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;

                    &-small {
                        opacity: 0.7;
                        width: 36px;
                        height: 36px;
                        position: relative;
                        background-repeat: no-repeat;
                        background-size: contain; 
                    }

                    &-storageTotal {
                        background-image: url(/resources/images/home/storageTotal.png);
                    }
                    &-receiveTotal {
                        background-image: url(/resources/images/home/receiveTotal.png);
                    }
                    &-payTotal {
                        background-image: url(/resources/images/home/payTotal.png);
                    }
                    &-balanceTotal {
                        background-image: url(/resources/images/home/balanceTotal.png);
                    }
                }

                .x-text {
                    flex: 6;
                    display: flex;
                    color: #485465;
                    flex-direction: column;
                    align-items: flex-end;
                    overflow: hidden;

                    .x-key {
                        flex: 1;
                        display: flex;
                        align-items: flex-end;
                        margin-bottom: 5px;
                        font-size: 14px;
                        color: #485465;
                    }
                
                    .x-value {
                        flex: 1;
                        display: flex;
                        align-items: flex-start;
                        font-size: 16px;
                        color: #1E2429;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    &-small {
                        display: block;

                        .x-key {
                            text-align: end;
                            display: block;
                            padding-left: 54px;
                            margin-top: -17px;
                            margin-bottom: 14px;
                        }

                        .x-value {
                            display: block;
                            text-align: end;
                        }
                    }
                }
            }
        }

        .x-box-green {
            border-color: #1EC09F;
        }
        .x-box-yellow {
            border-color: #FDC200;
        }
        .x-box-red {
            border-color: #FB6A83;
        }
        .x-box-blue {
            border-color: #62A3DF;
        }
    }
}