.pricingContainer {
  width:300px;
  margin: 0 auto;
  border: 3px solid #C4C0BE;
  border-radius: 16px;
  margin-bottom: 8px;
  padding:8px;
  cursor: pointer;
}

.discountContainer {
  width:300px;
  margin: 0 auto;
  border: 3px solid #C4C0BE;
  border-radius: 16px;
  margin-bottom: 8px;
  padding:8px;
  background: #e3f9f3;
  border:3px solid #55ccaa;
}

.pricingContainer:hover {
    border: 3px solid #776ac8;
}

.giftOption {
  border:3px solid #c4c0be;
  border-radius: 16px;
  height:66px;
  width:300px;
  padding:8px;
  margin-bottom: 16px;
  background:#9187d3;
  color:white;
}

.purchaseButton {
    border:none;
    width: 200px;
    height: 55px;
    background: #776ac8;
    border-radius: 10px;
    color:white;
    font-weight: 600;
    font-size: 18px;
    font-style:normal;
    line-height: 48px;
    cursor: pointer;
    margin:8px;
    margin-bottom: 16px;
    display: inline-block;
    border:2px solid #776ac8;
}

.purchaseButton:hover {
  background: #6b5fb4;
  border:2px solid #6b5fb4;
}

.pricingContainer.selected:hover {
    border: 3px solid #776ac8;
}

.pricingContainer.selected {
    background: linear-gradient(160deg,  #beb3ff -5.2%, #d5f6ed 80.39%);
    border: 3px solid #9187d3;
}

.purchaseButton.paypal {
  margin-top:0px;
  background:#ffc439;
  border:0px;
  color:#003087;
}

.purchaseContainer {
    padding-top: 8px;
    text-align: center;
    max-width:500px;
    margin: 0 auto;
}

.pricingHeader {
    display: inline-block;
}

.pricePerMonth {
    color:#9187d3;
    font-weight: 700;
    padding:0;
}
.yearlySavings {
    color:#4ecaa7;
    font-weight: 700;
    margin-bottom:4px;
    padding:0;
}

.priceTotal {
    display: inline-block;
}

.frequencySelect span {
  font-size: 18px;
  color:#3A3A3A;
  font-weight: 500;
  line-height: 36px;
}
.frequencySelect.selected span {
  
}

.frequencySelect {
    border:1px solid #e3deff;
    width: 120px;
    height: 36px;
    border-radius: 10px;
    color:#3A3A3A;
    background: none;
    font-weight: 500;
    font-size: 0;
    font-style:normal;
    
    cursor: pointer;
    margin:4px;
    display: inline-block;
}

.frequencySelect.selected {
  border:1px solid #9187d3;
  background: #e3deff;
  color:white;
}

.frequencySelect.disabled {
    background-color: #848280;
}

.frequencySelect.disabled:hover {
    background-color: #848280;
}

.frequencySelect:disabled {
    background-color: #848280;
}

.frequencySelect:disabled:hover {
    background-color: #848280;
}

.frequencySelect:hover {
    background-color: #e3deff;
    color:white;
}

.frequencySelect:focus {
    background-color: #e3deff;
}