[role="radiogroup"] {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 18px;
}

[role="radiogroup"]:focus {
  outline: none;
}

[role="radio"] {
  /*border: 2px solid transparent;*/
  /*border-radius: 5px;*/
  /*display: inline-block;*/
  position: relative;
  padding: 17px;
  padding-left: 1.5em;
  padding-right: 0.5em;
  cursor: default;
  outline: none;
  height:110px;
  vertical-align: bottom;
  display: table-cell;
}

[role="radiogroup"]:focus {
/*border: 2px solid red;*/
    outline: lightblue;
    outline-style: auto;

}
[role="radio"]:focus {
    border: 2px solid red;
}
[role="radio"] + [role="radio"] {
  margin-left: 1em;
}

[role="radio"]::before,
[role="radio"]::after {
  position: absolute;
  top: 87px;
  left: 7px;
  transform: translate(-2px, -7px);
  content: '';
}

@media only screen and (max-width: 767px) {
    [role="radio"]::before,
    [role="radio"]::after {
      position: absolute;
      top: 24px;
      left: 7px;
      transform: translate(-2px, -7px);
      content: '';
    }
}

[role="radio"]::before {
  width: 15px;
  height: 15px;
  /*border: 1px solid hsl(0, 0%, 66%);*/
  /*border-radius: 100%;*/
  /*background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 60%);*/
}

[role="radio"]:active::before {
  background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%));
}

[role="radio"][aria-checked="true"]::before {
/*  border-color: hsl(216, 80%, 50%);
  background: hsl(217, 95%, 68%);
  background-image: linear-gradient(to bottom, hsl(217, 95%, 68%), hsl(216, 80%, 57%));*/
  background: url(https://images.rvs.com/images/minified-svg/mark.svg) center no-repeat;
}

[role="radio"][aria-checked="true"]::after {
  /*display: block;*/
  /*border: .1875em solid #fff;*/
  /*border-radius: 100%;*/
  /*transform: translate(25%, -50%);*/
}

[role="radio"][aria-checked="mixed"]:active::before,
[role="radio"][aria-checked="true"]:active::before {
  background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%) 60%);
}

/*[role="radio"]:hover::before {
  border-color: hsl(216, 94%, 65%);
}*/

[role="radio"].focus {
/*    border-color: hsl(216, 94%, 73%);
    background-color: hsl(216, 80%, 97%);*/
}

[role="radio"]:hover {
  /*background-color: hsl(216, 80%, 92%);*/
}