body {
    margin: 0;
    font-family: Arial, sans-serif;
    /* background-color: #f0f0f0; */
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.head_name {
    padding: 0% 0% 0 5%;
    font-size: 14px;
    font-weight: bold;
}

.summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    width: 90%;
    margin: auto;
}

.item {
    width: 33.33333%;
    padding: 2% 6% 2% 6%;
    box-sizing: border-box;
    border: 0.1px solid rgba(211, 211, 211, 0.337);
}

.total_charge {
    /* 總充電數 */
    border-left: none;
    border-top: none;
}

.total_pay {
    /* 總花費 */
    border-top: none;
}

.total_km {
    /* 總里程 */
    border-top: none;
    border-right: none;
}

.total_hr {
    /* 總充電時數 */
    border-bottom: none;
    border-left: none;
}

.total_cr {
    /* 減碳總數 */
    border-bottom: none;
}

.total_count {
    /* Count */
    border-bottom: none;
    border-right: none;
}

.item p {
    margin: 5px 0;
    font-size: 14px;
}

.value {
    font-size: 30px !important;
    color: rgba(53, 198, 90);
}

table {
    width: 90%;
    border-collapse: collapse;
    margin: auto;
    font-size: 14px;
}

th,
td {
    padding: 12px 0;
    text-align: left;
    font-size: 14px;
}

th {
    border-bottom: 2px solid #ddd;
}

td {
    border-bottom: 1px solid #ddd;
}

td:last-child {
    text-align: right;
}