body {
    font-family: Arial, sans-serif;
	font-size: 12px;
	padding: 0;
	margin: 10px;
}

#dashboard-summary, #bets-table {
    margin-bottom: 20px;
}

#dashboard-summary {
    display: flex;
    flex-wrap: wrap;
	gap: 10px;
    justify-content: space-between; /* This can help space out the boxes evenly */
    margin-bottom: 20px;
}

.stat-box {
    background-color: #f2f2f2;
    border-radius: 5px;
    padding: 10px;
    flex: 100%;
    max-width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-box p {
    margin: 0;
    font-size: 12px;
    color: #333;
    font-weight: bold;
	margin-bottom: 3px;
}

.stat-box span {
    font-size: 20px;
    color: #007bff;
}

#bets-table {
	overflow-x: scroll;
}

table {
    width: 100%;
	min-width: 390px;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
    padding: 4px;
}

th {
    background-color: #f2f2f2;
}

th, td {
    text-align: left;
}

footer {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    font-size: 14px;
    color: #666;
}

table th:nth-child(4),
table td:nth-child(4),
table th:nth-child(5),
table td:nth-child(5) {
    display: none;
}

/* Lighter red background with darker red text for losses */
.loss {
    background-color: #fff2f2;
    color: #c1110c;
}

/* Lighter green background with darker green text for profits */
.profit {
    background-color: #efffef;
    color: #00a300;
}

@media (min-width: 320px) { 
	.stat-box {
    	flex: calc(50% - 25px); /* -40px for the padding and -5px for the gap */
    	max-width: calc(50% - 25px); /* -40px for the padding and -5px for the gap */
	}
}
@media (min-width: 410px) { 
	#bets-table {
    	overflow-x: initial;
	}
}
@media (min-width: 520px) { 
	table th:nth-child(4),
	table td:nth-child(4) {
    	display: table-cell;
	}
}
@media (min-width: 620px) { 
	.stat-box {
	    padding: 20px;
    	flex: calc(33.3333% - 48px);
    	max-width: calc(33.3333% - 48px);
	}
	body, .stat-box p {
    	font-size: 14px;
	}
	.stat-box span {
    	font-size: 22px;
	}
	table, th, td {
    	padding: 8px;
	}
	table th:nth-child(5),
	table td:nth-child(5) {
    	display: table-cell;
	}
}
@media (min-width: 1220px) { 
	.stat-box {
    	flex: calc(16.667% - 49px);
    	max-width: calc(16.667% - 49px);
	}
	body, .stat-box p {
    	font-size: 16px;
	}
	.stat-box span {
    	font-size: 24px;
	}
}