body { background-color: #ccc; color: #000; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; min-width: 320px; max-width: 700px; overflow-anchor: none; position: relative; }

/* The order is very important here to get things to display correctly! */
div.datepick { background-color: #fff; border: 1px solid #666; }
input.datepick { background-color: #fff; }
.datepick a { color: #333; text-decoration: none; }
.datepick + img { position: relative; left: -20px; top: 3px; width: 16px; }
.datepick-ctrl, .datepick-nav { background-color: unset !important; }
.datepick-month-header, .datepick-month-header select, .datepick-month-header input { background-color: unset !important; color: #333 !important; }
.datepick-month a { background-color: lightblue !important; border: none !important; color: #333 !important; font-weight: bold !important; }
a.datepick-other-month { background-color: unset !important; }
a.datepick-highlight, a.datepick-selected { background-color: darkblue !important; border: none; color: white !important; }

#payform a:link { color: #0000ff; text-decoration: none; }
#payform a:visited { color: #800080; text-decoration: none; }
#payform a:hover { color: #ff0000; text-decoration: underline; }

#payform fieldset { background-color: #f7f7f9; border: 0px solid #000; border-radius: 10px; clear: both; margin-bottom: .5em; margin-top: .5em; padding: 0; }
#payform hr { background-color: #000; border: none; clear: both; color: #000; display: inline-block; height: 1px; margin-bottom: 1%; margin-top: 2%; width: 100%; }

#payform input[type="checkbox"] { display: inline-block; height: unset; margin-right: 1%; position: relative; vertical-align: top; }
#payform input[type="text"], #payform input[type="number"], #payform input[type="tel"], #payform input[type="email"] { border: 1px solid #ccc; border-radius: 4px; color: #555; display: inline-block; font-family: inherit; font-size: 100%; height: 21px; padding: 0 0 0 2px; }
#payform select { border: 1px solid #ccc; border-radius: 4px; color: #555; display: inline-block; font-family: inherit; font-size: 100%; height: 23px; }
#payform input[type="radio"] { bottom: 1.75px; display: inline-block; position: relative; vertical-align: bottom; }
#payform input[type="submit"], #payform input[type="button"] { font-family: inherit; -webkit-appearance: none; }
#payform input[type="number"]::-webkit-outer-spin-button, #payform input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
#payform input[type="number"] { -moz-appearance: textfield; }
#payform textarea { border: 1px solid #ccc; border-radius: 4px; color: #555; resize: vertical; width: 100%; }

#payform .banner_img { width: 100%; }

#payform .show_more_button { background-color: #28a324; }
#payform .show_more_button, #payform .hide_button { border: none; border-radius: 3px; box-shadow: 1px 1px 1px #333; color: #fff; cursor: pointer; font-size: 1em; font-weight: 600; margin: .5em; max-width: 400px; padding: .5em; white-space: normal; }
#payform .hide_button { background-color: #e7291d; }

#payform .addper { clear: both; display: inline-block; margin-top: 1.5%; margin-left: 1.5%; width: 90% }
#payform .addper label { float: left; font-weight: 300; margin-left: 10%; width: 90%; }

#payform .calculate_button, #payform .modify_button, #payform .print_button, #payform .submit_button { background-color: #1c3f94; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 1em; font-weight: 600; margin: .5em; padding: .5em; }
#payform .calculate_button:disabled, #payform .modify_button:disabled, #payform .print_button:disabled, #payform .submit_button:disabled { background-color: #666; }
#payform .total_line, #payform .submit { clear: both; padding-top: 2em; text-align: center; }

#payform .comment { font-size: 85%; font-weight: 300; }

#payform .creditrow-container .comment, #payform .shoprow-container .comment { padding: 12px 0 0 50px; }

#payform .creditrow-container { clear: both; float: left; margin-top: 2%; width: 100%; }
#payform .creditrow { float: left; width: 100%; }
#payform .creditrow .description { float: left; font-weight: 600; margin-left: 8%; margin-right: 1.5%; text-align: left; vertical-align: bottom; width: 57%; }
#payform .creditrow .description input { font-weight: 600; padding-left: 0; width: 100%; }
#payform .creditrow .amount { float: left; text-align: center; vertical-align: top; width: 15%; }
#payform .creditrow .amount::-webkit-input-placeholder { color: red; }
#payform .creditrow .amount::-moz-placeholder { color: red; }
#payform .creditrow .amount:-moz-placeholder { color: red; }
#payform .creditrow .amount:-ms-input-placeholder { color: red; }
#payform .creditrow .amount input:-moz-placeholder { color: red; }
#payform .creditrow .amount input { padding-left: 0; text-align: center; width: 100%; }
#payform .creditrow .total { float: left; text-align: center; vertical-align: top; width: 15%; }
#payform .creditrow .comment { float: left; margin-left: 8%; margin-right: 1.5% ; text-align: left; vertical-align: top; width: 57%; }

#payform .crumbs, #payform .crumbs li { border: 0; margin: 0; padding: 0; }
#payform .crumbs { text-align: center; }
#payform .crumbs span { font-size: 65%; font-weight: 400; }
#payform .crumbs ul { display: inline-table; list-style: none; margin: 14px 0 0 0; padding: 0; }
#payform .crumbs ul li { display: inline; }
#payform .crumbs ul li a { background-color: #e0e0e0; display: block; float: left; font-size: 14px; font-weight: 600; height: 35px; line-height: 1.4; margin: 0 5px 0 0; padding: 0px 20px 10px 35px; position: relative; text-align: center; text-decoration: none; }
#payform .crumbs ul li a:after { border-bottom: 23px solid transparent; border-left: 20px solid #e0e0e0; border-top: 23px solid transparent; content: ""; position: absolute; right: -20px; top: 0; z-index: 1; }
#payform .crumbs ul li a:before { border-bottom: 23px solid transparent; border-left: 20px solid #f7f7f9; border-top: 23px solid transparent; content: ""; left: 0; position: absolute; top: 0; }
#payform .crumbs ul li:first-child a { border-bottom-left-radius: 10px; border-top-left-radius: 10px; }
#payform .crumbs ul li:first-child a:before { display: none; }
#payform .crumbs ul li:last-child a { border-bottom-right-radius: 10px; border-top-right-radius: 10px; padding-right: 24px; }
#payform .crumbs ul li:last-child a:after { display: none; }
#payform .crumbs ul li a.active { background-color: #cccccc; }
#payform .crumbs ul li a.active:after  { border-left-color: #cccccc; }

#payform .error { color: red; font-weight: bold; }

#payform .fieldrow { clear: both; display: inline-block; margin-left: 2%; margin-top: 2%; width: 95%; }
#payform .fieldrow .label { background-color: transparent; color: inherit; float: left; font-size: 15px; font-weight: 600; padding-right: 2%; text-align: right; width: 30%; }
#payform .fieldrow .input { display: inline-block; width: 65%; }
#payform .fieldrow .input input, #payform .fieldrow .input select { width: 85%; }
#payform .fieldrow .input [type="checkbox"] { width: auto; }
#payform .fieldrow .input [type="checkbox"] span { display: inline-block; width: 90%; }
#payform .fieldrow .comment { display: inline-block; margin-top: 1%; padding-right: 1em; width: 100%; }

#payform .fieldsetinside { float: left; padding: 0 3% 2% 3%; width: 94%; }

#payform .form-control { padding: 0; }

#payform .has-error input, #payform .has-error select, #payform .has-error textarea { border: 1px solid red !important; }
#payform .has-error input[type="checkbox"], #payform .has-error input[type="radio"] { outline: 1px solid red; }

#payform .heading { border-bottom: 1px solid #999; clear: both; font-size: 110%; font-weight: 300; margin-top: 3%; overflow: hidden; padding-bottom: .25em; text-align: center; text-transform: uppercase; }

#payform .list-header { background-color: #ddddde; border-radius: 4px; font-weight: 600; margin-top: 3%; padding: 2px 0 2px 0; }

#payform #payment-modes { margin: 0 auto; max-width: 600px; }
#payform h3.payment-panel.payment-panel, #payform h3.payment-panel:focus { background-color: #fff; color: #000; font-weight: bold; height: 35px; outline-width: 0; overflow: hidden; position: relative; }
#payform h3.payment-panel.payment-panel .payment-panel-label { left: 70px; position: absolute; top: 16px; }
#payform .payment-option-icon { border: 1px solid #c5c5c5; border-radius: 4px; height: 35px; margin-left: 6px; max-width: 75px; position: relative; }
#payform .payment-option-icon.selected { box-shadow: 1px 2px 10px #4a90e2; }
#payform .payment-option-icon-group { left: 60px; position: absolute; top: 6px; }
#payform .payment-option-radio { background: #fff; border: #fff 2px solid; border-radius: 15px; box-shadow: 0 0 0 5px #c5c5c5; height: 20px; position: absolute; top: 12px; width: 20px; }
#payform .ui-state-active { border: 1px solid #c5c5c5; }
#payform .ui-state-active .payment-option-radio { background: #656565; background: radial-gradient(#e0e0e0, #1c3f94); }
#payform .ui-widget { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
#payform .ui-widget-content { color: inherit; }

#payform .paymentonly, #payform .pickwprice { clear: both; display: inline-block; margin-top: 2%; width: 100%; }
#payform .paymentonly label, #payform .pickwprice label  { float: left; font-weight: 600; margin-left: 8%; margin-right: 1.5%; text-align: left; width: 57%; }
#payform .paymentonly input[type="number"], #payform .pickwprice input[type="number"] { float: left; width: 15%; }
#payform .paymentonly .comment, #payform .pickwprice .comment  { clear: both; display: inline-block; float: left; margin-left: 8%; padding-right: 1em; width: 57%; }
#payform .pickwprice label.discount { margin-right: 4%; }
#payform .pickwprice .input { margin-left: 7%; }
#payform .pickwprice .input span { font-weight: 600; }
#payform .pickwprice .input input[type="text"] { padding-left: 0; width: 16%; }
#payform .pickwprice .input input[type="number"] { width: 12.75%; }
#payform .pickwprice-other { font-weight: 600; margin-left: 10%; }
#payform .section-pwp.button { margin: 3% 8%; }
#payform .pwp-small-btns { display: inline-block; margin: 0 1% 2% 1%; text-align: center; width: 22%; }
#payform .pwp-small-btns > .other_desc { font-weight: 600; text-align: left; }
#payform .pwp-small-btns input[type="radio"] { bottom: auto; position: relative; }
#payform .pwp-small-btns > label { border: 3px solid #a6a6a6; font-size: 1.1em; font-weight: 600; padding: 12px 0; width: 100%; }
#payform .pwp-small-btns.other > label { padding-left: 6px; }
#payform .pwp-small-btns.other { display: block; width: 46% }
#payform .pwp-small-btns input[type="number"] { border: none; float: right; height: 40px; padding-left: 6px; text-align: center; width: 100%; }
#payform .pwp-small-btns input[type="number"]:active, #payform .pwp-small input[type="number"]:focus { background-color: #fff; border: 1px solid #003eff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(41,161,231,0.6); color: #000; }
#payform .pwp-large-btn-container { border-radius: 3px; float: left; padding: 3% 9% 1% 9%; width: 80%; }
#payform .pwp-small-btns.desc.other { width: 22% }
#payform .pwp-small-btns.desc { float: left; margin: 0; padding-right: 2%; }
#payform .pwp-small-btns-text, #payform .large-btns-text-other { font-weight: 600; margin-left: 1%; width: 74% }
/* For checkboxradio (.pwp-small-btns) */
#payform .ui-button.ui-state-active:hover { background: #d6d6d6; border: 3px solid black; color: black; }
#payform .ui-button:hover { background: #d6d6d6; border: 3px solid black; }
#payform .ui-button:active { background: #e0e0e0; border: 3px solid black; }
#payform .ui-button.ui-checkboxradio-checked input[type="number"], #payform .ui-button.ui-checkboxradio-checked input[type="number"]:focus { color:#000; }
#payform label.ui-state-active, #payform .ui-checkboxradio-checked { background: #d6d6d6; border: 3px solid black; color: black; }
#payform .ui-helper-hidden-accessible { position: absolute !important; }

/* Hides hang-on placeholder text*/
#payform [placeholder]:focus::-webkit-input-placeholder { color: transparent; }

#payform .pgraph { line-height: 1.25; margin-bottom: 1em; margin-top: 1em; }

#payform .promptrow { background-color: #ddddde; border-radius: 4px; font-weight: 600; margin-top: 3%; padding: 2px 0 2px 0; }

#payform .recurring { clear: both; display: inline-block; padding-left: 8%; padding-right: 8%; width: 84% }
#payform .recurring label { float: left; font-weight: 600; padding-right: 2%; text-align: right; width: 48%; }
#payform .recurring input[type="number"], #payform .recurring input[type="text"] { float: left; width: 200px; }
#payform .recurring select { float: left; min-width: 26%; width: 200px; }
#payform .recurring .pledge { float: left; }
#payform .recurring .comment { clear: both; display: inline-block; float: left; line-height: 13px; padding-right: 1em; text-align: right; width: 47%; }
#payform .recurring.dates > select { min-width: 0; width: auto; }
#payform .recurring-freq { clear: both; font-size: 95%; margin-bottom: 1%; margin-top: 2%; text-align: center; text-transform: uppercase; width: 100%; }
#payform .recurring-freq:before { margin-left: -50%; right: 0.5em; }
#payform .recurring-freq:after { left: 0.5em; margin-right: -50%; }
#payform .recurring-freq:before, #payform .recurring-freq:after { background-color: #999; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 10%; }

#payform span.required { color: red; }

#payform .shoprow-container { clear: both; float: left; margin-top: 3%; width: 100%; }

#payform .shoprow-qdat, #payform .shoprow-dat, #payform .shoprow-qd, #payform .shoprow-d { float: left; width: 100%; }

#payform .shoprow-qdat .quantity { float: left; margin-right: 1%; text-align: center; width: 7%; }
#payform .shoprow-qdat .quantity input, #payform .shoprow-qdat .quantity select { text-align: center; width: 100%; }
#payform .shoprow-qdat .description { float: left; font-weight: 600; margin-right: 1.5%; text-align: left; width: 57%; }
#payform .shoprow-qdat .description input, #payform .shoprow-qdat .description select { font-weight: 600; text-align: left; width: 100%; }
#payform .shoprow-qdat .amount, #payform .shoprow-qdat .total { float: left; text-align: right; width: 15%; }
#payform .shoprow-qdat .amount input { text-align: center; width: 100%; }
#payform .shoprow-qdat .comment { float: left; margin-left: 8%; margin-right: 1.5%; padding-bottom: 0px; text-align: left; width: 57%; }

#payform .shoprow-dat .description { float: left; font-weight: 600; margin-left: 8%; margin-right: 1.5%; text-align: left; width: 57%; }
#payform .shoprow-dat .description select, #payform .shoprow-dat .description input { font-weight: 600; text-align: left; width: 100%; }
#payform .shoprow-dat .amount, #payform .shoprow-dat .total { float: left;  text-align: center; width: 15%; }
#payform .shoprow-dat .amount input { text-align: center; width: 100%; }
#payform .shoprow-dat .comment { float: left; margin-left: 8%; padding-right: 1em; text-align: left; width: 57%; }

#payform .shoprow-qd .quantity { float: left; margin-right: 1%; text-align: center; width: 7%; }
#payform .shoprow-qd .quantity input, #payform .shoprow-qd .quantity select { text-align: center; width: 100%; }
#payform .shoprow-qd .description { float: left; font-weight: 600; margin-right: 1.5%; text-align: left; width: 57%; }
#payform .shoprow-qd .description select, #payform .shoprow-qd .description input { font-weight: 600; text-align: left; width: 100%; }
#payform .shoprow-qd .comment { float: left; margin-left: 8%; margin-right: 1.5%; text-align: left; width: 57%; }
#payform .shoprow-qd .third { float: left; }

#payform .shoprow-d .description { float: left; font-weight: 600; margin-right: 1.5%; text-align: left; width: 95%; }
#payform .shoprow-d .description input { font-weight: 600; text-align: left; width: 100%; }
#payform .shoprow-d .comment { float: left; padding-right: 1em; text-align: left;  width: 95%; }

#payform .thermo_container_box  { background-color: #e3e5e3; float: right; margin-left: 10px; overflow: hidden; width: 225px; }
#payform .thermo_header { border-radius: 5px 5px 0 0; padding: 8px; text-align: center;  }
#payform .thermo_title { font-size: 16px; font-weight: 600; word-wrap: break-word; }
#payform .thermo_labels { height: 210px; float: left; width: 100px; }
#payform .thermo_labels p { font-size: 14px; font-weight: 600; line-height: 18px; margin-bottom: 0px; margin-top: 0px; padding-left: 10px; padding-top: 10px; }
#payform .thermo_labels p span { display: block; font-weight: normal; padding-left: 10px; }
#payform .thermo_bulb { border: 2px solid #302b2a; border-radius: 30px; box-shadow: inset 0 0 0 3px #ffffff; display: block; float: right; height: 30px; margin-right: 72px; margin-top: 155px; width: 30px; }
#payform .thermo_stem { border: 2px solid #302b2a; border-bottom: none; border-radius: 22px 22px 0 0; box-shadow: inset 0 0 0 3px #ffffff; color: #4a1c03; display: block; font-size: 12px; height: 150px; left: 3px; position: relative; text-indent: 30px; top: -147px; width: 20px; }
#payform .thermo_total { position: relative; width: 100px; }
#payform .thermo_connector { display: block; height: 7px; left: 3px; position: relative; top: 128px; width: 14px; }
#payform .thermo_paragraph { margin-bottom:1em; margin-top: 1em; }

#payform #grecaptcha > div { height: auto !important; padding-top: 12px; text-align: center; width: auto !important; }

@media only screen and (max-width: 600px)
{
    #payform input[type="text"], #payform input[type="number"], #payform input[type="tel"], #payform input[type="email"] { font-size: 100%; height: 22px; }
    #payform input[type="number"], #payform input[type="text"] { padding: 0; }
    #payform select { border: 1px solid #aaa; font-family: inherit; font-size: 100%; height: 24px; }

    #payform #cc_exp_mo, #payform #cc_exp_yr { width: auto; }
    #payform .addper, #payform .addper label { margin-left: 0; width: 100%; }

    #payform .crumbs ul li a { font-size: 11px; padding: 0px 5px 6px 23px; }
    #payform .crumbs ul li:first-child a { padding-left: 10px; }
    #payform .crumbs ul li:last-child a { padding-right: 10px; }
    #payform .crumbs ul li a:after  { border-bottom: 19px solid transparent; border-left-width: 16px; right: -16px; }
    #payform .crumbs ul li a:before { border-bottom: 19px solid transparent; border-left-width: 16px; }

    #payform .creditrow-container, #payform .shoprow-container, #payform .shoprow-qdat { margin-left: 0; }
    #payform .creditrow .description { width: 64%; }
    #payform .creditrow .amount { text-align: center; width: 23%; }
    #payform .creditrow .total { display: none; }

    #payform .section-pwp.button { margin: 3% auto; text-align: center; width: 100%; }
    #payform .section-pwp.large_button { float: left; }
    #payform .pwp-large-btn-container { margin-left: 0; margin-right: 0; width: 98%; }
    #payform .pwp-small-btns { width: 30%; }
    #payform .pwp-small-btns input[type="number"] { padding-bottom: 2.5px; padding-top: 2.5px; }
    #payform .pwp-small-btns.desc.other { width: 29%; }
    #payform .pwp-small-btns.other { margin: 0 auto 2% auto; }
    #payform .pwp-large-btns.desc { width: 30%; }
    #payform .pwp-small-btns-text, #payform .large-btns-text-other { width: 66%; }

    #payform .fieldrow { margin-left: 0; width: 100%; }
    #payform .fieldrow .checkbox-comment { width: 90%; }
    #payform .fieldrow .label { font-weight: 600; padding-right: 0; text-align: left; width: 100%; }
    #payform .fieldrow .comment, #payform .fieldrow .input, #payform .fieldrow .input input  { padding-right: 0; width: 100%; }
    #payform .fieldrow select { width: 100%; }

    #payform #page-discount.shoprow-container .description { margin-left: 8%; width: 62%; }
    #payform #page-discount.shoprow-container .amount { width: 27%; }
    #payform #page-discount.shoprow-container .comment { margin-left: 8%; }

    #payform .paymentonly label { margin-left: 0; width: 62%; }
    #payform .paymentonly input[type="number"], #payform .paymentonly input[type="text"] { float: left; width: 27%; }
    #payform .paymentonly .comment { margin-left: 0; padding-left: 0; width: 100%; }

    #payform .pickwprice { padding-left: 0; }
    #payform .pickwprice label { margin-left: 0; width: 60%; }
    #payform .pickwprice label.discount { margin-right: 6%; }
    #payform .pickwprice .input { margin-left: 2%; }
    #payform .pickwprice .input input[type="text"] { margin-left: 4%; }
    #payform .pickwprice .input input[type="number"] { width: 21.75% }
    #payform .pickwprice input[type="radio"] { display: inline; }
    #payform .pickwprice input[type="number"], #payform .pickwprice input[type="text"], #payform .pickwprice .input input[type="text"] { width: 23%; }
    #payform .pickwprice .comment { margin-left: 0; width: 95%; }

    #payform .recurring { margin-left: 0; margin-right: 0; width: 100% }
    #payform .recurring label { font-weight: 600; margin-left: 0; padding-left: 0; text-align: left; width: 52%; }
    #payform .recurring input[type="number"], #payform .recurring select { float: left; margin-left: 0; width: 45%; }
    #payform .recurring .comment { margin-left: 0; padding-left: 0; padding-right: 0; text-align: left; width: 100%; }
    #payform .recurring.dates > select { width: 14%; }
    #payform .recurring.dates > select:last-of-type { width: 17%; }

    #payform .section-pwp { width: 100% }

    #payform .shoprow-container { margin-top: 5%; }

    #payform .shoprow-qdat .quantity { width: 13%; }
    #payform .shoprow-qdat .description { text-align: left; width: 61%; }
    #payform .shoprow-qdat .amount { width: 23%; }
    #payform .shoprow-qdat .total { display: none; }
    #payform .shoprow-qdat .comment { margin-left: 14%; width: 77%;  }

    #payform .shoprow-dat .description { margin-left: 14%; width: 61% }
    #payform .shoprow-dat .amount { width: 23%; }
    #payform .shoprow-dat .total { display: none; }
    #payform .shoprow-dat .comment { margin-left: 14%; width: 88% }

    #payform .shoprow-qd .quantity { width: 13%; }
    #payform .shoprow-qd .description { width: 77%; }
    #payform .shoprow-qd .comment { margin-left: 14%; width: 77%; }
}

/* iPhone in landscape */
@media only screen and (min-width : 320px) and (max-width : 667px) and (orientation : landscape)
{
    #payform .pickwprice input[type="radio"]
    {
        margin-top: 0;
        margin-bottom: 0;
    }
}