.chartChild {
    border: solid 1px #ccc;
    float: left;
    position: relative;
    min-height: 450px;
    min-width: 300px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}


.chartChild .fa-download {
    color: var(--body-font-color);
    position: relative;
    left: 10px;
    top: 10px;
}


@keyframes colorChange {
    0% {
        color: purple;
    }

    25% {
        color: orange;
    }

    50% {
        color: var(--body-font-color);
    }

    75% {
        color: green;
    }

    100% {
        color: blue;
    }

}

.chartChild .loader {
    position: absolute;
    left: 150px;
    top: 150px;
    animation: colorChange 5s infinite;

}

.chartChild select {
    color: var(--body-font-color);
    position: relative;
    right: 15px;
    top: 5px;
}

.chartChild .no-record {
    margin-top: 100px;
}

.chartChild .title {
    text-align: center;
    width: 100%;
    padding: 15px;
    border-bottom: solid 1px var(--top-menu-border);
}

.chartChild .table-chart {
    overflow-y: auto !important;
    max-height: 350px;
}


@media (min-width: 1200px) {
    .chartChild {
        width: calc(16% - 20px)
    }

    .chartChild.bar {
        width: calc(20.33% - 20px);
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .chartChild {
        width: calc(33.33% - 20px);
    }

    .chartChild.bar {
        width: calc(50% - 20px);
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .chartChild {
        width: calc(50% - 20px);
    }

    .chartChild.bar {
        width: calc(100% - 20px);
    }
}

@media (max-width: 767px) {
    .chartChild {
        width: calc(100% - 20px);
    }

    .chartChild.bar {
        width: calc(100% - 20px);
    }
}