.kpiGroup {
    width: 450px;
    background: #ffffff0f;
    padding: 1px 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    margin-right: 15px;
    max-width: 38%;
    min-width: 300px;
}

.kpiReport {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
}

.kpiItem h5,.kpiItem h3 {
    margin: 0px;
}

.kpiItem {
    margin-bottom: 14px;
    font-weight: bold;
    color: white;
    transition: all .2s;
}

.kpiItem .flex {
    font-size: 12px;
    font-weight: normal;
    color: #8F8F8F;
}

section#Reports header .select {
    margin: 0px;
    margin-right: 10px;
}

section#Reports header select {
    padding: 4px;
    font-size: 11px;
    padding-right: 22px;
}

#Reports header .select:after {
    top: -6px;
}

section#Reports header .btn {
    padding: 3px 10px;
    width: auto;
    font-size: 13px;
    margin: 0px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.kpiItem:hover {
    background: #ffffff0f;
    padding: 10px;
    margin: -10px -10px;
    margin-bottom: 4px;
    border-radius: 5px;
}

.chartContainer {
    width: 330px;
    position: relative;
    max-width: 90vw;
}

div#KpiStats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

div#KpiStats>div {
    margin: 0px 15px;
}

div#KpiStats .flex {
    align-items: center;
}

.chartContainer.full {
    width: 800px;
    max-width: 90vw;
}

.chartContainer.half {
    width: 400px;
    max-width: 90vw;
}

div#KpiStats select {
    font-size: 10px;
    background: #12161f;
    border: 1px solid #ffffff38;
    border-radius: 3px;
    color: #ffffff85;
    padding: 1px;
    outline: none;
    margin-right: 10px;
}

.kpiItem h3+div:hover {
    color: #52c2ff;
}

.kpiItem h3+div {
    transition: all .3s;
    border-radius: 5px;
    color: #ffffff4d;
}

.kpiItem .flex>div {
    width: 33%;
}

.kpiItem .flex>div:last-of-type {
    text-align: right;
}

.kpiItem .flex>div:nth-of-type(2) {
    text-align: center;
}