/* The container */
.fancybtn {
  display: flex;/*block;*/
  align-items: center;
  
  
  position: relative;

 border: 1px solid #ced4da;

   padding: 8px;
  /*padding-left: 50px;*/
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 120%; /*22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*flex: auto;*/ 

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.fancytitle{
    font-size: 150%; /*22px;*/
}


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

/* Create a custom radio button */
.fancycheckmark {
  /*position: absolute;
  top: 15px;
    left: 15px;*/
  height: 25px;
  width: 25px !important;
  background-color: #d7e6fe;/*#eee;*/
  border-radius: 50%;
  margin-right: 15px;
  flex-basis: 25px;
  flex-shrink:0;
}

/* On mouse-over, add a grey background color */
.fancybtn:hover input ~ .fancycheckmark {
  /*background-color: #d7e6fe;*/
  background-color: #ffffff;
  border:7px #5270b5 solid;
}

.fancybtn:hover {
  border-color: #537bc6;
  box-shadow: 0 0 0 0.2rem rgba(38, 65, 115, 0.25);
}


/* When the radio button is checked, add a blue background */
.fancybtn input:checked ~ .fancycheckmark {
  background-color: #ffffff;
  border:7px #5270b5 solid;
}

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

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

/* Style the indicator (dot/circle) */
/*.fancybtn .fancycheckmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: red;
}*/
.red {
	color: #AD1F23;
}

.green {
	color: #30995D;
}