.charts-container {
    background: #e4e4e4;
    padding: 40px 20px;
}

.charts-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #fff;
    border-radius: 5px;
    min-height: 40vh;
}

.chart-item {
    padding: 40px;
}

.chart-item:first-child {
    border-right: 1px solid #e6e6e6;
}

.chart-item .head-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-item .head-wrapper .title {
    color: var(--color-orange);
    font-size: 36px;
}

.chart-item .head-wrapper .loader {
    width: 25px;
    height: 25px;
    border: 2px solid var(--color-orange);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.chart-item .selects {
    margin-bottom: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.chart-item .selects select {
    border: 1px solid #000;
    font-size: 20px;
    padding: 12px 20px;
    background: url(../../img/data-graphs/select-icon.svg) no-repeat, #fff !important;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2rem !important;
}

.chart-item .h-chart {
    height: 400px;
}

@media (max-width: 678px) {
    .chart-item .selects select {
        font-size: 17px;
    }
}

@media (max-width: 1250px) {
    .charts-wrapper {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .chart-item:first-child {
        border-right: unset;
        border-bottom: 1px solid #e6e6e6;
    }
}

@media (max-width: 550px) {
    .charts-container {
        background: #fff;
        padding: 30px 0 0;
    }
    .chart-item {
        padding: 20px;
    }
    .chart-item .head-wrapper .title {
        font-size: 32px;
    }
}