.card .container-radio {
	display: flex;
	flex-direction: row;
	position: relative;
	padding-left: 24px;
	margin: 12px;
	cursor: pointer;
	font-size: 0.8rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.card [data-radio] {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

/* Hide the browser's default radio button */
.card .container-radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.card .container-radio .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 1em;
	width: 1em;
	background-color: rgb(255, 255, 255);
	border: 2px solid #17a8b5;
	border-radius: 50%;
}

/* When the radio button is checked, add a blue background */
.card .container-radio input:checked ~ .checkmark {
	background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.card .container-radio .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.card .container-radio .checkmark:before {
	content: "";
	position: absolute;
	opacity: 0;
	top: 0.25em;
	left: 0.25em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #17a8b538;
	/* border: 1px solid #17a8b5; */
}

/* Show the indicator (dot/circle) when checked */
.card .container-radio input:checked ~ .checkmark:after {
	display: block;
}

.card .container-radio input:checked ~ .checkmark:before {
	opacity: 1;
	animation-name: a;
	animation-duration: 0.15s;
}

@keyframes a {
	0% {
		opacity: 1;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(4);
	}
}

/* Style the indicator (dot/circle) */
.card .container-radio .checkmark:after {
	top: 50%;
	left: 50%;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #17a8b5;
	transform: translate(-50%, -50%);
}

@media (min-width: 0px) and (max-width: 576px) {
	.card [data-radio] {
		flex-direction: column;
		align-items: center;
	}
}