.chart-panel {

    min-width: 330px;
    margin: 0 0 30px 0;
    padding: 40px 40px 40px 40px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.13);
    background-color: #FFFFFF;

    h3 {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        text-transform: uppercase;
        font-size: 18px;
        letter-spacing: 1px;
        border-bottom: 1px solid $mm-neutral-gray-40;
    }

    .chart-panel-body {
        position: relative;
        min-height: 300px;
    }

    .chart-panel-body-overflow {
        overflow: auto;
    }

    .chart {
        padding: 0;
    }

    .chart-legends {
        margin: 20px 0 0 0;
        border-top: 1px solid $mm-neutral-gray-40;
    }

    .chart-panel-inner  {
        border-left: 1px solid $mm-neutral-gray-40;
    }

    .chart-panel-inner:first-child {
        border-left: none;
    }
}

.chart-loading-window {

    width: 100%; height: 100%;
    min-height: 80px;
    position: absolute;
    left: 0px;  top: 0px;
    background-color: #FFFFFF;
    opacity: 0.8;
    z-index: 1000;

    .empty-indicator, .error-indicator, .loading-indicator {
        position: absolute;
        width: 100px; height: 100px;
        margin: -50px 0 0 -50px;
        left: 50%;  top: 50%;

        img{
            width: 100%; height: auto;
        }

        i.fa {
            font-size: 100px;
            position: relative;
            top: 50%; left: 50%;
        }
    }

    .empty-indicator {

        i.fa {
            margin: -60px 0 0 -34.29px;
        }
    }

    .error-indicator {

        i.fa {
            margin: -60px 0 0 -34.29px;
        }
    }
}