$max-card-width: 230px;
$card-box-height: 110px;

.x-info-card {
    .x-panel-body {
        background: transparent;

        .x-panel-bodyWrap {
            .x-autocontainer-innerCt {
                .x-component {
                    height: 100%;
                    .x-row {
                        background: $panel-body-background;
                        display: flex;
                        height: 100%;
                        width: 100%;
                        justify-content: flex-start;
                    
                        .x-col {
                    
                            flex: 1;
                            max-width: $max-card-width;
                            color: #fff;
                            padding: 0 8px;
                            display: flex;

                            &:first-child {
                                padding: 0 8px 0 0;
                            }
                    
                            &> div {
                                flex: 1;
                                display: flex;
                                align-items: center;
    
                                .x-box {
                                    padding: 24px;
                                    height: $card-box-height;
                                    border-radius: 6px;
                                    position: relative;
                                    display: flex;
                                    cursor: pointer;
                                    flex: 1;
                                    flex-direction: column;
                        
                                    &:hover {
                                        opacity: 0.7;
                                    }
            
                                    .title {
                                        font-size: 16px;
                                        font-weight: bold;
                                    }
                        
                                    .value {
                                        font-size: 24px;
                                        text-align: center;
                                        margin-top: 22px;
                                    }
                        
                                }
                                .x-box.x-view-item-focused {
                                    outline: none !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .x-toolbar-default-vertical {
        padding: 0;
        background-color: transparent;

        .x-box-target {
            height: 100%;
        }
    }

    .x-mask {
        background-color: transparent;
    }
}

.x-scroller-button {
    position: absolute !important;
    z-index: 1;
    width: 44px !important;
    min-width: 44px !important;
    height: 100% !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    background-repeat: no-repeat !important;
    background-size: 30px !important;
    background-position-y: center !important;
    background-position-x: 6px !important;
    cursor: pointer;
}

.x-scroller-button-left {
    left: 0;
    background-image: url(get-resource-path('images/default/arrows-left.png')) !important;
    background-position-x: 10px !important;
}

.x-scroller-button-right {
    right: 0;
    background-image: url(get-resource-path('images/default/arrows-right.png')) !important;
    background-position-x: 4px !important;
}

.x-btn-over.x-btn-default-small.x-scroller-button-left,
.x-btn.x-btn-disabled.x-btn-default-small.x-scroller-button-left,
.x-btn-over.x-btn-default-small.x-scroller-button-right,
.x-btn.x-btn-disabled.x-btn-default-small.x-scroller-button-right,
.x-keyboard-mode .x-btn-focus.x-btn-default-small.x-scroller-button-left,
.x-keyboard-mode .x-btn-focus.x-btn-default-small.x-scroller-button-right {
    background: white;
}

.x-bg-default {
    background: linear-gradient(to right, #19C0D5 , #7AEBF8);
}
.x-bg-yellow {
    background: linear-gradient(to right, #FA964D , #FCC002);
}
.x-bg-purple {
    background: linear-gradient(to right, #6B73FD , #B195FF);
}
.x-bg-red {
    background: linear-gradient(to right, #F25F88 , #FFA4BA);
}
.x-bg-blue {
    background: linear-gradient(to right, #6B6CFA , #58C5F6);
}
.x-bg-pink {
    background: linear-gradient(to right, #F66F6D , #FD9C8D);
}
.x-bg-gray {
    background: linear-gradient(to right, #D8D8D8 , #D8D8D8);
}