/* The radio */
.radio {
 
 display: block;
   position: relative;
   padding-left: 30px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 20px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
   
}

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

/* Create a custom radio button */
.checkround {

   position: absolute;
   top: 2px;
   left: 0;
   height: 20px;
   width: 20px;
   background-color: #fff ;
   border-color:#276daa;
   border-style:solid;
   border-width:2px;
 border-radius: 50%;
}


/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkround {
   background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkround:after {
   content: "";
   position: absolute;
   display: none;
}

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

/* Style the indicator (dot/circle) */
.radio .checkround:after {
 left: 2px;
   top: 2px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background:#009EB7;
   

}

/* The check */
.check {
   display: block;
   position: relative;
   padding-left: 25px;
   font-weight: 500!important;
   margin-bottom: 30px;
   padding-right: 15px;
   cursor: pointer;
  
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   color:#2c2c2c; 
  font-size: 14px; 
  font-weight: 400;
}

/* Hide the browser's default checkbox */
.check input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
   position: absolute;
   top: 1.6px;
   left: 0;
   height: 18px;
   width: 18px;
   background-color: #fff ;
   border-color:#276daa;
   border-style:solid;
   border-width:1px;
   border-radius:20%; 
   
}



/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark {
   background-color: #fff  ;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}

/* Show the checkmark when checked */
.check input:checked ~ .checkmark:after {
   display: block;
}

/* Style the checkmark/indicator */
.check .checkmark:after {
   left: 6px;
   top: 2px;
   width: 5px;
   height: 10px;
   border: solid ;
   border-color:#009EB7;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}