@charset "utf-8";
/* CSS Document */
.flexOuter{
max-width: 150px;	
	margin:auto;
  display: flex;
 font-family: Arial, Helvetica, sans-serif;	
flex-wrap: wrap;
justify-content: center;
  font-size: 14px;
font-weight: bold;		
}	
.flexOuter > label {
  margin:  10px 3px;
flex-basis: 35px;
}	

/* Hide the browser's default radio button */
label > input {
  opacity: 0;
  cursor: pointer;
position:absolute;
left:0;
top:0;	
visibility: hidden;	
}

/*  custom radio button box */
.checkmark {
  cursor: pointer;
margin:auto;
 padding:4px 20px;
  background-color: #eee;
  border-radius: 3px;
  border:1px solid #bbb;
transition:0.2s;	
}

/* On mouse-over, add a grey background color */
label:hover input ~ .checkmark {
  background-color: #bdf;	
border:1px solid #aaa;	
}

/* When the radio button is checked, add a blue background */
label input:checked ~ .checkmark {
  background-color: #2af;
  border:1px solid black;
}
	/* for small screens */
@media screen and (max-width: 700px){
.flexOuter{
max-width: 50px;	
  font-size: 13px;
margin:9px auto;	
}		
.flexOuter > label {
flex-basis: 95%;
margin:9px 0px;	
}	

	.checkmark {
 padding:4px 18px;
}
	}
	.tick2 {
text-align: right;	
	}	
.tick2:after {
    background-image: url(/imagesGP/tick3.png);
    background-size: 35px 25px;
    display: inline-block;
    width: 35px; 
    height: 25px;
    content:"";	
	vertical-align: bottom;
text-align: right;
}
.cross2 {
background-color: #fff;		
text-align: right;	
}
.cross2:after {
    background-image: url("/imagesGP/cross3.png");
    background-size: 25px 20px;
    display: inline-block;
    width: 25px; 
    height: 20px;
	content:"";	
	text-align: right;
	vertical-align: bottom;
}	
.NA{
}