.l-chart-container {
    display: flex;
    flex-wrap: wrap;
    min-width: 600px;
    max-width: 900px;
    padding-top: 20px;
}

.l-chart {
    color: rgba(0, 0, 0, 0.87);
    width: 200px;
    height: 100px;
    border: solid 1px #CCC;
    cursor: move;
    display: flex;
    z-index: 1;
    position: relative;
    font-size: 18px;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    background: #FFF;
    align-items: center;
    font-weight: bold;
    border-radius: 4px;
    flex-direction: column;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.l-chart:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
    opacity: .6;
}

.cdk-drop-list {
    display: flex;
    padding-right: 10px;
    padding-bottom: 10px;
}

.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
    opacity: .3;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.l-chart-actions {
    width: 100%;
    cursor: pointer;
    display: flex;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #CCC;
    justify-content: space-between;
}
.l-chart-logo {
    color: var(--primary-color);
}
.l-chart-action-remove {
    color: #F78178;
}
.l-chart-content {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: center;
}
.l-empty-text {
    color: #565656;
    width: 100%;
    height: 100%;
    font-size: 20px;
    align-items: center;
    justify-content: center;
}