.c-chart-single-country {
    display: block;
    position: relative;
    min-height: 320px;
    padding: 50px 0
}

.c-chart-single-country__filter-holder {
    display: flex;
    justify-content: center;
    margin: 10px auto 30px;
    position: static;
    text-align: center
}

@media (min-width:768px) {
    .c-chart-single-country__filter-holder {
        margin: 10px auto 50px;
        position: relative;
        z-index: 10
    }
}

.c-chart-single-country__filter-holder select {
    width: 100%;
    margin: 10px auto 0
}

@media (min-width:768px) {
    .c-chart-single-country__filter-holder select {
        width: auto;
        margin: auto
    }
}

.c-chart-single-country:after {
    content: 'Loading...';
    position: absolute;
    left: 50%;
    top: 50%;
    color: #000;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 1rem
}

@media (min-width:768px) {
    .c-chart-single-country:after {
        font-size: 2rem
    }
}

.c-chart-single-country label i {
    position: relative;
    display: block;
    height: 34px
}

@media (min-width:768px) {
    .c-chart-single-country label i {
        display: inline-block
    }
}

.c-chart-single-country label select {
    background-color: transparent;
    color: #333;
    padding: 8px 75px 8px 15px;
    border: 1px solid #333;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: button;
    outline: 0;
    font-style: normal
}

.c-chart-single-country label select::-ms-expand {
    display: none
}

.c-chart-single-country label select option {
    padding: 30px
}

.c-chart-single-country label i::after {
    border-style: solid;
    border-width: .2em .2em 0 0;
    content: '';
    color: #333;
    display: inline-block;
    height: 8px;
    right: 16px;
    position: absolute;
    top: 14px;
    transform: rotate(135deg);
    vertical-align: top;
    width: 8px
}

.c-chart-single-country h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 3rem
}

.c-chart-single-country canvas {
    margin: 0 auto;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

@media (min-width:768px) {
    .c-chart-single-country canvas {
        max-width: 1024px
    }
}

.c-chart-single-country.is-loaded:after {
    content: ''
}

.c-chart-single-country.is-data-missing:after {
    content: 'This component is not set properly...'
}

.c-chart-single-country.is-file-missing:after {
    content: 'The data file is missing...'
}

.c-chart-line-and-bars {
    display: block;
    position: relative;
    min-width: 1px;
    min-height: 320px;
    padding: 50px 0
}

.c-chart-line-and-bars>h4 {
    text-align: center;
    margin: 0 0 40px
}

.c-chart-line-and-bars__filter-holder {
    display: flex;
    justify-content: center;
    margin: 10px auto 30px;
    position: static
}

@media (min-width:768px) {
    .c-chart-line-and-bars__filter-holder {
        margin: 10px auto 50px;
        position: relative;
        z-index: 10
    }
}

.c-chart-line-and-bars__filter-holder select {
    width: 100%;
    margin: 10px auto 0
}

@media (min-width:768px) {
    .c-chart-line-and-bars__filter-holder select {
        width: auto;
        margin: auto
    }
}

.c-chart-line-and-bars:after {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #000;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 1rem
}

@media (min-width:768px) {
    .c-chart-line-and-bars:after {
        font-size: 2rem
    }
}

.c-chart-line-and-bars label span {
    position: relative
}

.c-chart-line-and-bars label select {
    background-color: transparent;
    color: #333;
    padding: 8px 75px 8px 15px;
    border: 1px solid #333;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: button;
    outline: 0
}

.c-chart-line-and-bars label select option {
    padding: 30px
}

.c-chart-line-and-bars label span::after {
    border-style: solid;
    border-width: .2em .2em 0 0;
    content: '';
    display: inline-block;
    height: .45em;
    right: 16px;
    position: absolute;
    top: 3px;
    transform: rotate(135deg);
    vertical-align: top;
    width: .45em;
    color: #333
}

.c-chart-line-and-bars h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 3rem
}

.c-chart-line-and-bars__buttons-holder {
    text-align: center;
    display: none
}

.c-chart-line-and-bars canvas {
    margin: 0 auto
}

@media (min-width:768px) {
    .c-chart-line-and-bars canvas {
        max-width: 1024px
    }
}

.c-chart-line-and-bars.is-loaded:after {
    content: ''
}