@CHARSET "ISO-8859-1";

.points {
	border-bottom: var(--border-top);
	
	display: grid;
	grid-template-columns: calc(var(--max-width-header-half) * 0.12) calc(var(--max-width-header-half) * 0.15) calc(var(--max-width-header-half) * 0.15)
	calc(var(--max-width-header-half) * 0.09) calc(var(--max-width-header-half) * 0.15) calc(var(--max-width-header-half) * 0.15) calc(var(--max-width-header-half) * 0.12);
	grid-template-rows: var(--max-height-header-points);
	grid-template-areas: "picremain value1 arrowleft amount arrowright value2 picspend";
}

.points>.picRemain {
    display: flex;
	grid-area: picremain;
	width: calc(var(--max-width-header-half) * 0.15);
}

.points>.picSpend {
	display: flex;
	grid-area: picspend;
	width: calc(var(--max-width-header-half) * 0.15);
}

.points>.picArrowRemain {
	grid-area: arrowleft;
	display: none;
	width: calc(var(--max-width-header-half) * 0.15);
	padding-top: 0.3vw;
}

.points>.picArrowSpend {
	grid-area: arrowright;
	display: none;
	width: calc(var(--max-width-header-half) * 0.15);
	padding-top: 0.3vw;
}

.points>.amountLabel {
	display: none;
	grid-area: amount;
	text-align: center;
	font-size: var(--font-normal);
	font-weight: var(--font-weight-bold);
	width: calc(var(--max-width-header-half) * 0.10);
	padding-top: 0.4vw;
}

.points>.spendLabel {
	grid-area: value2;
	text-align: center;
	font-size: var(--font-normal);
	font-weight: var(--font-weight-bold);
	width: calc(var(--max-width-header-half) * 0.15);
	padding-top: 0.4vw;
}

.points>.remainLabel {
	grid-area: value1;
	text-align: center;
	font-size: var(--font-normal);
	font-weight: var(--font-weight-bold);
	width: calc(var(--max-width-header-half) * 0.15);
    padding-top: 0.4vw;
}

.points>.pointsImg {
	margin: auto;
	width: calc(var(--pic-small-medium) * 0.8);
}