:root {
	--cl-point-select-theme: #a1ff00;	
	--cl-point-text-theme: #0ec200;
}

/*cat: point selector*/
#pointsSelector {
	width: 350px;
	text-align: center;
	position: relative;
	z-index: 0;
	padding-bottom: 10rem;
}
#pointsSelector > h3 {
	margin-bottom: 1.5em;
}
#pointsSelector .points {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	-webkit-user-select: none;
	margin: -0.5em;
}
	#pointsSelector .points li {
		width: 100%;
		margin: 0;
		padding: 0.5em;
	}
	#pointsSelector .points li a {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: left;
		border: solid 4px transparent;
		border-color: #ededed;
		border-radius: 4em;
	}
	#pointsSelector .points li[data-selected="true"] a {
		color: var();
		border-color: var(--cl-point-select-theme);
		background-color: #fff;
	}
#pointsSelector .points li[data-isrocked="true"] a {
	border-style: dotted;
	background-color: #f4f4f4;
}
#pointsSelector .points li[data-isavaibled="false"] a {
	border-color: transparent;
}
		#pointsSelector .points li a figure {
			width: 5.2em;
			padding: 1.2em;
		}
		#pointsSelector .points li a figure > img {
			width: 100%;
			height: auto;
		}
		#pointsSelector .points li a .label {
			font-size: 1.2em;
			letter-spacing: 0.2em;
			font-weight: 600;
			width: 100%;
			text-align: center;
			text-indent: -34%;
			padding: 0 0.5em;
		}
@media only screen and (min-width:720px) {
	#pointsSelector .points li a .label {
		text-indent: -30%;
	}
}
#pointsSelector .points li[data-selected="true"] a .label {
	font-weight: 700;
	color: var(--cl-point-text-theme); 
}
#pointsSelector .points li[data-isavaibled="false"] a {
	cursor: not-allowed;
}
	#pointsSelector .points li[data-isavaibled="false"] a > * {
		opacity: 0.35;
	}
	#pointsSelector .points li[data-isavaibled="false"] a > .label {
		font-weight: 400;
	}
#pointsSelector .points li[data-isrocked="true"] a {
	cursor: not-allowed;
}
	#pointsSelector .points li[data-isrocked="true"] a > * {
		opacity: 0.3;
	}
	#pointsSelector .points li[data-isrocked="true"] a > .label {
		font-weight: 400;
	}
#pointsSelector .head-stats {
	text-align: center;
	margin-bottom: 1.5em;
}
	#pointsSelector .quantStats {
		display: inline-block;
		min-width: 4.5em;
		top: 0.9em;
		right: -1.0em;
		font-family: Inter, sans-serif;
		font-size: 1.8em;
	}
		#pointsSelector .quantStats > * {
			font-weight: 600;
		}
		#pointsSelector .quantStats .current {
			color: var(--cl-point-text-theme); 
		}
#pointsSelector .quantStats[data-current="0"] .current {
	color: #aaa;
}
		#pointsSelector .quantStats .max {
			
		}
		#pointsSelector .quantStats .max::before {
			content: "/";
			display: inline-block;
			margin: 0 0.25em;
			opacity: 0.10;
		}
@media only screen and (min-width:720px) {
	#pointsSelector {
		margin-top: 5em;
	}
}

#pointsSelector .stepper {
	background-image: none;
}

[data-isskippedpointselector="true"]  a[onclick="itmrcReturnSelectPoints();"] {
	display: none;
}