.#{$prefix}info-view {
    background-color: rgb(232, 236, 246);
    padding: 0 20px;

    @include extjs-panel-ui(
        $ui: 'info-list',
        
        $ui-header-border-width: 0,
        $ui-header-color: $color,
        $ui-header-font-size: 15px,
        $ui-header-background-color: transparent,
        $ui-header-padding: 10px,

        $ui-body-background-color: transparent
    );

    .#{$prefix}panel-header-info-list:before {
        content: ' ';
        position: absolute;
        width: 5px;
        height: 17px;
        background-color: $base-color;
        left: 0;
        top: 12px;
    }

    .#{$prefix}panel-info-list {
        margin-bottom: 20px
    }

    @include extjs-panel-ui(
        $ui: 'info-card',

        $ui-header-color: $color,
        $ui-header-font-size: 14px,
        $ui-header-background-color: #ffffff,
        $ui-header-padding: 10px 30px
    );

    .#{$prefix}panel-info-card {
        @include box-shadow(rgba(57,75,115,0.15) 0px 2px 6px 0px);
        @include border-radius(2px);
        margin-right: 20px
    }

    .#{$prefix}info-count-wrap {
        text-align: center;

        .#{$prefix}info-count-value {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-size: 6em;
            font-weight: bold;
            padding: 40px 0;
            color: rgb(127, 147, 188);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .#{$prefix}info-count-time {
            margin-top: 5px;
            color: $color-light-gray;
            font-size: 12px;
        }
    }
}