.kpi-icon{
  font-size: 2.5rem;
  opacity: .5;
}

.kpi-card{
  border-top:4px solid #28a745;
}

.kpi-loading{
    display: inline-block;
    width: 100%;
    height: 34px;
    border-radius: 6px;
    background: #e9ecef;
    position: relative;
    overflow: hidden;
}

.kpi-loading::after{
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );
    animation: kpiLoading 1.2s infinite;
}

@keyframes kpiLoading{
    100%{
        left:100%;
    }
}

.chart-card{
    position: relative;
}

.chart-loading{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.85);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    z-index:5;
}

.chart-loading .spinner-border{

    width:3rem;
    height:3rem;

}

.chart-loading span{

    margin-top:12px;
    font-size:14px;
    color:#6c757d;

}