.subscription_choice input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

.subscription_choice {
  display: block;
  position: relative;
  padding-left: 45px;
  padding-top: 16px;
  padding-bottom: 30px;
  transition: all 0.25s linear;
  font-family: 'Be Vietnam';
  text-align: left;
}

.subscription_choice.disabled {
  color: gray;
}

.subscription_choice:first-child {
  margin-top: 10px;
}

.subscription_choice.header {
  font-weight: 900;
  color: #003377;
  padding-bottom: 15px;
}

.subscription_choice.highLight {
  animation: highlightKeyframe 0.5s;
}

.subscription_choice.line:before {
  content: '';
  border-top: 2px solid black;
  display: block;
  height: 2px;
  position: absolute;
  top: -15px;
  width: calc(100% - 4px - 25px);
}

.subscription_choice .name {
  font-size: 23px;
  font-family: 'Autour One';
  margin-bottom: 20px;
  display: inline-block;
  width: calc(100% - 90px);
}

.subscription_choice.disabled .name:after {
  background-color: blue;
  color: white;
  content: 'current';
  font-size: 10px;
  margin-left: 5px;
}

.subscription_choice.disabled.unavailable .name:after {
  background-color: gray;
  content: 'Unavailable';
}

.subscription_choice input[type="radio"] ~ .box:before {
  content: '';
  display: block;
  border: 2px solid #0066aa;
  border-radius: 25px;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 0px;
  top: 10px;
  transition: all 0.25s linear;
}

.subscription_choice input[type="radio"]:disabled ~ .box:before {
  border-color: gray;
}

.subscription_choice input[type="radio"] ~ .box:after {
  content: '';
  display: block;
  border-radius: 25px;
  width: 25px;
  height: 25px;
  position: absolute;
  left: 5px;
  top: 15px;
  border: 2px solid transparent;
  transition: background 0.25s linear;
}

.subscription_choice input[type="radio"]:checked ~ .box:after {
  background-color: #0066aa;
  border: 2px solid #0066aa;
}

.subscription_choice:hover input[type="radio"]:not(:checked):not(:disabled) ~ .box:after {
  box-shadow: #0066aa 0px 0px 1.5px 1px;
}

.subscription_choice .price .old, .subscription_choice .price .new {
  margin-left: 20px;
  display: inline-block;
  position: relative;
}

.subscription_choice .price .old:before, .subscription_choice .price .new:before {
  content: '\20AC';
  position: absolute;
  left: -15px;
  top: 0px;
  display: block;
}

.subscription_choice .price {
  position: absolute;
  right: -10px;
  display: inline-block;
  width: 90px;
}
.subscription_choice .price .old, .subscription_choice .price .old:before {
  text-decoration: line-through;
}

.formButtons button.highLight {
  display: inline-block;
  animation: highlightKeyframe 1.5s 0.25s;
}

@keyframes highlightKeyframe {
    0% { transform: scale(1); }
    50% { transform: scale(1.14); background: orange; }
    100%   { transform: scale(1); }
}

.formButtons {
  clear: both;
  display: block;
  position: relative;
  width: 100%;
  text-align: right;
}

.formButtons button + .errorMessage {
  --color: white; /* red;  */
  --border-color: red;
  background-color: var(--color);
  color: black;
  border: 2px solid var(--border-color);
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index:99999999;
  display: none;
  user-select: none;
  font-family: 'Average';
  font-size: 16px;
  padding: 5px;
  bottom: -38px;
}

.formButtons button + .errorMessage {
  bottom: unset;
  top: -40px;
  right: 0px;
  left: unset;
}

.formButtons button + .errorMessage.show {
  display: inline;
}

.formButtons button + .errorMessage>.message {
  z-index:999999999;
  position: relative;
  margin:5px;
}

.formButtons button + .errorMessage:before {
  border: solid var(--border-color);
  content: ' ';
  border-width: 0 2px 2px 0;
  background: var(--color);
  display: inline-block;
  padding: 3px;
  transform: rotate(225deg);
  position: absolute;
  top: -5px;
  right: 50%;
}

.formButtons button + .errorMessage:before {
  top: unset;
  right: 10%;
  bottom: -5px;
  transform: rotate(45deg);
}