div.subscription, div.payment-method, div.cancel-membership-confirmation {
    display:flex;
    flex-direction: row;
    column-gap: 1rem;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
    align-items:center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px;
    font-size: 1rem;
    column-gap: 1rem;
}

div.subscription div.subscription-thumbnail {
    display:flex;
    flex-direction: column;
    flex-basis: 33%;
    flex-wrap: wrap;
}

div.subscription div.subscription-thumbnail img.plan-thumbnail {
    height:auto;
    width:auto;
}

div.subscription div.subscription-details {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}

div.subscription div.subscription-details h3 {
    margin: 0;
}


div.subscription .subscription-button-bar {
    display:flex;
    flex-direction: row;
    align-items:center;
    column-gap:1rem;
    row-gap: .5rem;
    width:80%;
    margin-top:1rem;
}

div.subscription button, div.payment-method button, div.cancel-membership-confirmation button, button.rounded-yellow, input.rounded-yellow {
    border-radius: 2rem;
    font-size:.9rem;
    width: 100%;
    padding: .5rem;
}
/*
div.subscription-button-bar button.cancel-subscription {
    background:unset;
    color: var(--red);
    width:auto;
} */

div.subscription div.subscription-thumbnail {
    display: flex;
    flex-basis: 33%;
}

div.subscription div.subscription-thumbnail img.plan-thumbnail {

    width:auto;
    height:auto;

}

div.subscription div.subscription-details {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}

div.subscription .subscription-button-bar {
    display:flex;
    flex-direction: row;
    align-items:center;
    column-gap:1rem;
    row-gap: .5rem;
    width:80%;
    margin-top:1rem;
}

div.subscription button {
    border-radius: 2rem;
    font-size:.9rem;
    width: 100%;
    padding: .2rem;
}

div.subscription-button-bar button.cancel-subscription {
    background:unset;
    color: var(--red);
    width:auto;
}

div.membership-header, div.payment-method-header {
    display:flex;
    justify-content: space-between;
    align-items:flex-end;
    margin-bottom:1.5rem;
    font-size:1rem;
}

div.membership-header h2, div.membership-header p, div.payment-method-header h2, div.payment-method-header p {
    margin:0;
}

div.membership-header h2, div.payment-method-header h2 {
    font-size:1.5rem;
}

div.membership-header p {
    color: #838383;
}

div.cancel-membership-confirmation {
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    text-align:center;
}

.red-alert {
    background-color: #98171B !important;
    color: var(--white) !important;
    text-align:center;
    border: 3px solid black;
}

.red-alert h4 {
    color: var(--white) !important;
    margin-left:auto;
    margin-right:auto;
}

button.nevermind, button.nevermind:hover {
    background:unset;
    width:auto;
    color: #A2F29F;
}

div.payment-method {
    display:flex;
    flex-direction: row;
    column-gap: 1rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
}

div.payment-method div.payment-method-details {
    display:flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 2rem;
}

div.payment-method div.payment-method-details div.payment-method-thumbnail {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

div.payment-method div.payment-method-details div.payment-method-thumbnail img.payment-method-thumbnail {
    max-width:55px;
}

div.payment-method div.payment-method-details div.payment-method-card-details {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

div.payment-method h4 {
    font-size: 1.2rem;
    margin:0;
}

div.payment-method p {
    margin:0;
}

.display-none {
    display:none;
}

form#stripe-customer-default-payment-method-update-form {
    padding-top: 1rem;
}

span.pill-green {
  background: #34D485;
  padding: .2rem .5rem;
  color: #FFF;
  font-weight:900;
  border-radius: 1rem;
  font-size: .8rem;
  text-transform: uppercase;
}


form div#card-element {

    background: #FFF;
    padding: 1.2rem;
    padding-top: 1.5rem;
    line-height: 2;
    min-height: 55px;

}

form#membership-signup-form input[type="text"]:focus, form#membership-signup-form input[type="email"]:focus, form#membership-signup-form input[type="url"]:focus, form#membership-signup-form input[type="password"]:focus, form#membership-signup-form input[type="search"]:focus, form#membership-signup-form input[type="tel"]:focus, form#membership-signup-form input[type="number"]:focus, form#membership-signup-form textarea:focus, form#membership-signup-form select:focus {

  background-color: #FFF;

}

a.fine-print-link {
    color: #838383;
    font-size: .9rem;
    font-weight:900;
    text-decoration: none;
    margin-bottom: .5rem;
}

span.underline {
    text-decoration: underline;
}

div#plan-switch-mini {
    display:flex;
    width: 100%;
    justify-content: space-between;
    color: #838383;
    font-size: 1rem;
    align-items: flex-start;
    margin-bottom: .5rem;
}

a.text-small-button {
    color: #838383;
    font-size: 1rem;
    font-weight:900;
    text-decoration: none;
    text-transform: uppercase;
    padding: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

div#plan-switch-mini a {

  margin:0;
  font-size: .8rem;
  background: var(--teal);
    padding: .25rem .5rem;
    color: var(--white);
    border-radius: 1rem;

}

/* Mobile */
@media screen and (max-width: 768px) {

    div#plan-switch-mini {
        flex-direction: column;
        align-items: center;
        text-align:center;
    }

    form#membership-signup-form a {
        margin-bottom: .5rem;
        margin-top: 1.5rem;
    }


    div.mini-form-coupon-show-link {
        text-align:center;
    }

}

div#plan-switch-mini span.plan-base-price {

  /* font-weight: 800; */
    /* color: #1C233E; */
    color: #FFF;
}

.plan-base-price strong {
  font-weight:800;
}
.plan-base-price {
  font-weight: 400;
}
.plan-base-price .strikethrough {
  font-weight:800;
  color: #D0D0D0;
}

div#plan-switch-mini a.change-link {

    margin:0;
    padding-top: .3rem;

}

form#membership-signup-form.mini-form input, form#membership-signup-form.mini-form #card-element {
    padding: .7rem 1rem;
}

form#membership-signup-form.mini-form {
    padding: 0;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.fine-print {
    font-size: 14px;
    font-weight: 300;
    color: #AAA;
    line-height: 1.2em;
}

div#membership-signup-form.mini-form {
    max-width: 700px;
}

div.mini-form-coupon-show-link {
  margin-bottom:.5rem;
  padding:0;
  line-height: 1;
}
