.option-box input[type="radio"] {
    /*remove the default radio button*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

#payment-form .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.option-box {
    flex-basis:calc(100% / 2.25);

    width:15em;
    text-align:center;

    border: 1px solid #bbb;
    border-radius: 0.25em;
    
    background-color:#000;
    background: linear-gradient(45deg, #000 0%, #333 100%);

    padding: 1em;
    margin: 0.5em;

    /*add a box shadow*/
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);

    /*set the cursor to pointer*/
    cursor: pointer;

    /*set the color*/
    color:#fff;
}

/*set the width of the number input inside the custom box*/
.option-box.custom input[type="number"] {
    width: 5em !important;
    padding: 0.5em;
    margin: 0.25em;
    border-radius: 0.25em;
}

/*If it's the custom option box, which contains a numeric input of #other-amount, negate the padding and margin on the input so it's the same size*/
.option-box.custom {
    padding-top:0.5em;
    padding-bottom:0.5em;
}

#pledge_label {
    border:2px solid #fed106;
    border-radius:0.25em;
    padding:1em !important;
    margin-top:2em;
    cursor:pointer;
    transition: all 0.5s ease-in-out;
    background-color:#000;
    background: linear-gradient(45deg, #000 0%, #333 100%);
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    color:#fff;
    white-space: normal;
    display:block;
}

#pledge_label:hover {
    color:#000;
    background: #fed106;
    transition: all 0.5s ease-in-out;
    background-color:#fed106;
}

#membership_level_fields label:hover, .option-box.selected, #pledge_label.selected {
    color:#000;
    background: #fed106;
    background: linear-gradient(135deg, #fed106 0%, #fed106 100%);
    transition: all 0.5s ease-in-out;
    border-radius:0.25em;
}
#membership_information_fields label {
    padding: 0.5em;
    margin: 0.5em;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    padding-bottom:1em;
}
#membership_information_fields label:hover, #membership_information_fields label input:focus {
    color:#000;
    border-left: 5px solid #fed106;
    transition: all 0.5s ease-in-out;
    border-radius:0.25em;
    background-color:#fed106;
}

#card-element {
    border: 1px solid #bbb;
    border-radius: 0.25em;
    padding: 1em;
    margin: 0.5em;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

legend {
    border:none;
    text-align:left;
}
fieldset {
    border:none;
    border-top:2px solid #fed106;
    text-align: center;
}

/*Extend the text part of a label to 10em*/
.label_text {
    display: inline-block;
    text-align: right;
    width: 10em;
    padding-right: 1em;
}
/*for small screens, align label text to the left*/
@media screen and (max-width: 40em) {
    .label_text {
        text-align: left;
        width: 100%;
        margin-top:1em;
        border-top:1px dotted #ccc;
    }
    /*negate the top margin on the first .label_text element*/
    .label_text:first-of-type {
        margin-top:0;
    }
}


#payment-form input[type="text"], 
#payment-form input[type="email"], 
#payment-form input[type="tel"], 
#payment-form input[type="number"], 
#payment-form select {
    width: 20em;
    padding:0.5em;
    margin:0.25em;
    border-radius:0.25em;
    border:1px solid #bbb;
}

#card-button {
    font-weight:bold;
    background: #fed106;
    border: none;
    border-radius: 0.25em;
    color: #000;
    cursor: pointer;
    font-size: 1em;
    padding: 2em;
    margin: 0.5em;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

#payment-form .highlight {
    border:1px solid #fed106;
    border-left: 5px solid #fed106;
    border-radius:0.25em;
    padding:1em;
    margin:0.5em;
    transition: all 0.5s ease-in-out;
    border-radius:0.25em;
    color:#000;
    background-color:#fff;

}

#payment-form {
    max-width: 80em;
    margin:auto auto;
}