/* ********************** Custom Radios ********************** */

.att-radio input[type="radio"] {
	outline: none;
	position: relative;
	width: 1.8rem;
	height: 1.8rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
}
.att-radio input[type="radio"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: lightgray;
	border-radius:50%;
}
.att-radio input[type="radio"]:checked::before {
	background-color: #004a9a;
}
.att-radio input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border: 0.4rem solid white;
	z-index: 20;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: white;
}


/* ********************** Custom Radios Dark ********************** */

.att-radio-dark input[type="radio"] {
	outline: none;
	position: relative;
	width: 1.8rem;
	height: 1.8rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
}
.att-radio-dark input[type="radio"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: lightgray;
	border-radius:50%;
}
.att-radio-dark input[type="radio"]:checked::before {
	background-color: #333333
}
.att-radio-dark input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border: 0.4rem solid white;
	z-index: 20;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: white;
}


/* ********************** Custom Checkbox ********************** */

.att-checkbox input[type="checkbox"] {
	outline: none;
	position: relative;
	width: 1.8rem !important;
	height: 1.8rem !important;
	-webkit-appearance: none;
	-moz-appearance: none; 
	appearance: none;
	padding: 0 !important;
	top: 0;
}
.att-checkbox input[type="checkbox"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: lightgray;
	width: auto; /* Fix Theme */
}
.att-checkbox input[type="checkbox"]:checked::before {
	background-color: #004a9a;
}
.att-checkbox input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	width: 40%;
	height: 60%;
	border: solid white;
	border-width: 0 0.3rem 0.3rem 0;
	z-index: 20;
	transform: translate(-50%, -50%) rotate(30deg);
	box-sizing: border-box;
}