.statistics-div{
    width: 100%;
    display: flex;
}


/* Component */
.component{
    flex: 1;
    margin: 10px;
    border-radius: 10px;
    padding: 20px;
    background: white;
    text-align: center;
}

.component .top{
    font-size: 24px;
    font-weight: bold;
}

.component .bottom{
    color: black;
    font-size: 16px;
}

/* Component-1 */
.component-1{
    flex: 1;
    max-width: 150px;
    margin: 10px;
    border-radius: 10px;
    padding: 20px;
    background: white;
    text-align: center;
}

.component-1 .top{
    width: 100%;
    height: 120px;
}

.component-1 .top img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.component-1 .bottom{
    margin-top: 20px;
    color: black;
    font-size: 20px;
}

.component-selected{
    background-color: dodgerblue;
}

.component-selected .bottom{
    color: white;
}

/* Colors */
.color-1{
    color: dodgerblue;
}

.color-2{
    color: tomato;
}

.color-3{
    color: seagreen;
}

.color-4{
    color: orange;
}

.color-1:hover{
    color: white;
    background-color: dodgerblue;
}

.color-1:hover .bottom, .color-2:hover .bottom, .color-3:hover .bottom, .color-4:hover .bottom{
    color: white;
}

.color-2:hover{
    color: white;
    background-color: tomato;
}

.color-3:hover{
    color: white;
    background-color: seagreen;
}

.color-4:hover{
    color: white;
    background-color: orange;
}

.color-1, .color-2, .color-3, .color-4{
    transition: all 0.2s ease;
}

/* Chart */
#myChart{
    margin-top: 50px;
    width: 100%;
}