#paymentsmodule {
  display:flex;
}

#monthly {
  display:none;
}

.toggle-div {
  display: none;
}

#div1 {
  display:block;
}

.paymentsarea button {
  background-color:#fff;
  border:1px solid #494949;
  border-radius:4px;
  font-size:.9em;
}

.mainselection button {
  text-align:left;
  padding:10px;
  min-width:150px;
  font-size:1em;
}

.mainselection button span {
  display: block;
  padding-top: 20px;
  font-size: .7em;
}

.margintop {
  margin-top:60px;
}

[type="checkbox"]:checked, [type="checkbox"]:not(:checked), [type="radio"]:checked, [type="radio"]:not(:checked) {
  left: 0;
  position: relative;
}

.paymentsarea {
  flex:5;
  padding:60px 40px;
}
.paymentsside {
  flex:3;
  padding-right:35px;
  padding-top:60px;
  margin-bottom:60px;
}

.asidecontent {
  border: 1px solid #ff5dff;
}
.asidecontent h4 {
  background-color: #ff5dff;
  color: #fff;
  padding: 5px 10px;
  padding-left: 10px;
  font-size: 1.2em;
  padding-left: 20px;
}
.asidecontent p {
  padding: 0 20px;
}

.background-area {
  flex:2;
  background-color:#ccc;
}

button.active {

}

.liststyle {
  padding: 10px 30px;
}

.liststyle li {
  list-style:none;
  margin-left:30px;
  padding:0;
  position:relative;
  padding-bottom:10px;

}
.liststyle li::before {
  background-color: #ec68f8;
  content: "";
  display: block;
  height: 2px;
  margin-right: 10px;
  width: 20px;
  position: absolute;
  left: -30px;
  top: 15px;
}

.contacts li {
  display:flex;
  align-items:center;
}

.contacts i {
  background-repeat: no-repeat;
  display: block;
  float: left;
  height: 25px;
  width: 30px;
  background-size: 20px;
  background-position: center left;
}

.contacts li {
  list-style:none;
  padding:10px 0;
}

.midbtn2, .midbtn {
  min-width:100px;
  height:40px;
}

.asidecontent span {
  opacity:.5;
}

#radio-options {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
  margin-top: 20px;
}

#radio-options input[type="radio"] {
  float: left;
  display: block;
  margin-bottom: -39px;
  width: 50px;
  margin-left: 10px;
  display:none;
}

#radio-options label {
  display: inline-flex;
  cursor: pointer;
  padding: 10px 10px 10px 22px;
  border: navajowhite;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: #F8F8F8;
}

#radio-options input[type="radio"]:checked + label {
  background-color: #ccc;
}

#radio-options label span {
  padding-left:10px;
  display:block;
  font-weight:bold;
}

#radio-options input[type="radio"] + label:before {
  content: '';
  height: 20px;
  width: 20px;
  border: 1px solid #17212D;
  display: block;
  border-radius: 20px;
  margin-right:20px;
}

#radio-options input[type="radio"]:checked + label:before {
  content: '';
  height: 20px;
  width: 20px;
  border: 1px solid #17212D;
  display: block;
  border-radius: 20px;
  background-image: url(https://www.reframe.co.uk/hubfs/Ellipseinner.svg);
}

#radio-options {
  padding-top:20px;
  padding-bottom:10px;
}

#hubspot-form input[type='text'], #hubspot-form input[type='tel'], #hubspot-form input[type='email'] {
  margin-bottom:20px;
}

.midbtn2.active, .midbtn.active {
  background-color:#17212D;
  ;
  border-color:#17212D;
  color:#fff;
}

.paymentsarea h2 {
  font-weight:300;
  font-size:1.6em;
  font-family:var(--heading-regular);
  font-weight: var(--fw-h4);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-h4);
}

.paymentsarea h3 {
  font-weight:300;
  font-size:1.4em;
  font-family:var(--heading-regular);
  font-weight: var(--fw-h4);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-h4);
}

.paymentsarea p {
  opacity:.5;
}

.tab-content p {
  opacity:1;
}

.@media (max-width: 768px) {

  .background-area {
    display:none;
  }

  #paymentsmodule {
    display: flex;
    flex-direction: column-reverse;
  }

  .paymentsside {
    flex: 3;
    margin-bottom: 60px;
    padding-right: 40px;
    padding-top: 60px;
    padding-left: 40px;
  }
  .paymentsarea button {
    background-color: #fff;
    border: 1px solid #494949;
    border-top-color: rgb(73, 73, 73);
    border-right-color: rgb(73, 73, 73);
    border-bottom-color: rgb(73, 73, 73);
    border-left-color: rgb(73, 73, 73);
    border-radius: 4px;
    font-size: .9em;
    margin-bottom: 5px;
  }
}

.tab-options {
  padding:bottom:30px;
}

.tab-options span {
  border: 1px solid #494949;
  border-radius: 4px;
  margin-right: 20px;
  min-width: 11em;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-left: 10px;
}

#radio-options label:last-of-type {
  display:flex;
  padding:5px 10px 5px 20px;
}

#radio-options label:last-of-type input {
  border:none;
  margin:0;
  text-align:right;
  padding:0;
}

.tab-options span {
  position:relative;
}
.tab-options span:before {
  content: '';
  height: 20px;
  width: 20px;
  border: 1px solid #17212D;
  display: block;
  border-radius: 20px;
}


.tab-options span.active:before {
  content: '';
  height: 20px;
  width: 20px;
  border: 1px solid #17212D;
  display: block;
  border-radius: 20px;
  background-image:url(https://www.reframe.co.uk/hubfs/Ellipseinner.svg);
}

.tab-options input {
  visibility:hidden;
}


.tab-options label {
  width: 100%;
  position: absolute;
  padding: 10px 10px 10px 30px;
}

@media only screen and (max-width: 920px) {
  #paymentsmodule {
    display: flex;
    flex-direction: column;
  }

  .asidecontent {
    border: 1px solid #ff5dff;
    margin: 0 40px;
  }
  .paymentsarea button {
    background-color: #fff;
    border: 1px solid #494949;
    border-radius: 4px;
    font-size: .9em;
    margin-bottom: 8px;
    margin-right: 8px;
  }
  .tab-options span {
    position: relative;
    margin-bottom: 8px;
  }
}