Template:Paymentmethod/style.css

/* 
CSS excerpted from Template:Styles/Sandbox.css 
For use on Template:Paymentmethod to make demo buttons more like real form
*/
.frb-btn,
.payment-method-button {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 50px;
    padding: 0 4px;
    border-radius: 2px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
    background-color: #f8f9fa;
    color: #222;
    border: 1px solid #a2a9b1;
}

.frb-btn:hover {
    background-color: #fff;
    color: #444;
    border-color: #a2a9b1;
}

.frb-btn:active {
    background-color: #c8ccd1;
    color: #000;
    border-color: #72777d;
    box-shadow: none;
}

input[type="radio"]:checked + .frb-btn {
    background-color: #2a4b8d;
    color: #fff;
    border-color: #2a4b8d;
}

.frb-btn:focus,
.payment-method-button:focus {
    outline: 0;
    border-color: #36c;
    box-shadow: inset 0 0 0 1px #36c;
}

input[type="radio"]:focus + .frb-btn,
input[type="radio"]:checked + .frb-btn:focus {
    box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}

.payment-method-button {
    color: #36c;
}

.payment-method-button:hover {
    background-color: #fff;
    border-color: #447ff5;
}

.payment-method-button:active {
    background-color: #eff3fa;
    color: #2a4b8d;
    border-color: #2a4b8d;
    box-shadow: none;
}

.payment-method-div {
    padding: 4px 4px;
}

/* Hide extra empty <p> tags between buttons */
.payment-method-div ~ p {
    display: none;
}

.payment-method-button {
    margin: 0;
    width: 100%;
    font-size: 15px;
    appearance: none;
}

.payment-method-button svg {
    margin: 0 4px;
}

.paymentmethod-cc svg {
    display: none;
    height: 26px;
    border: 1px solid #c8ccd1;
    border-radius: 4px;
}