input {
    font-family: Arial, Helvetica, sans-serif;
}

/*
    NOTE
    iframe height is 530px when under 700px
    iframe height is 330px when over 700px
*/

.donate {
    position:relative;
    height:530px;
    overflow-y:auto;
    overflow-x:hidden;
}

@media screen and (min-width:700px) {
    .donate { height:340px; }
}

.donate--flex {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}

.donate--fluid {
    height:auto!important;
}


/* Begin First Panel Styles */
.donate_sponsor,
.donate_options {
    display:flex;
    flex-wrap:wrap;
    z-index:11;
}

.donate_sponsor {
    justify-content:center;
    align-items:center;
    /*height:240px;*/
    width:100%;
}

.donate_sponsor > * {
    position:relative;
    z-index:11;
}
.donate_sponsor:before {
    content: '';
    background: url('/img/donateBg.jpg') no-repeat fixed center;
    background-size: cover;
    border-top-left-radius:4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10; /* Behind Content Areas */     
}

.donate_options {
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:space-around;
    width:100%;
    /*height:290px;*/
    border-top-right-radius:4px;
    background:#f4f4f4;
}

.donate_option {
    display:flex;
    align-items:center;
    margin-bottom:16px;
    padding-left:8px;
}

.donate_option img {
    flex-shrink:0;
    max-width:75px;
    min-width:60px;
    width:22%;
    margin-right:6px;
}

@media screen and (min-width:700px) {            
    .donate_options {
        height:100%;
    }

    .donate_sponsor { flex:1 1 55%;}
    .donate_options { flex:1 1 45%; }
}

@media screen and (min-width:400px) {
    .donate_sponsor,
    .donate_options { padding: 1.5em 1.25em 1em 1.25em; }
}
/* End First Panel Styles */

/* Begin Second Panel Styles */

.donate_inner {
    max-width:650px;
    width:100%;
    padding: 1.5em 1.25em 1em 1.25em;
    margin:0 auto;
}

.donate_fieldset {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}
.donate_fieldset-label {
    flex-shrink:0;
    min-width:120px;
    max-width:200px;
    width:25%;
    margin-right:10px;
}
.donate_fieldset-input {
    flex-grow:1;
}

.donate_fieldset-input--split {
    flex-grow:0;
    flex-basis:48%;
    margin-right:5px;
}
.donate_fieldset-input--split:last-child {
    margin-right:0;
    margin-left:5px;
}

.align-c { text-align:center; }
.spacer-10 {padding:5px 0;}

.donate_sponsor { width:100%; }
/* Toggle Button Styles */

.btn { color:#545454;
    background-color:#ccc;
    border-color:#aaa;
    transition:all .2s ease;
    transition:all .2s ease;
}

.toggle_btn.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.toggle_btn.btn:hover,
.toggle_btn.btn:active {
    background:#aaa;
}

.toggle_btn.btn-primary:active,
.toggle_btn.btn-primary:hover,
.toggle_btn.btn:focus,
.toggle_btn.btn-primary:focus {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.toggle { width:100%; }
.toggle_btn { width:50%; }

/* Responsive adjustments for button sizes */
@media screen and (max-width:400px) {
    .toggle_btn {
        font-size:13px!important;
        padding:7px 2px 2px 2px!important;
        height:46px;
    }
}


/* Responsive adjustments for fieldset sizes */
.donate_fieldset-label { font-weight:normal; }

@media screen and (max-width:360px) {
    .donate_fieldset-label {
        font-size:14px;
        min-width:100px;
        margin-right:5px;
    }
    .donate_fieldset-label--short {
        min-width:70px;
    }
}

/* Tone down bootstrap horizontal padding on form controls */
.form-control {
    font-size:16px;
    padding-left:6px;
    padding-right:6px;
}

/* Payments View Styles */
@media screen and (max-width:360px) {
    .order_buttons,.order_button {
        float:none;
        margin-left:auto;
        margin-right:auto;
    }

    /* Important everything to override bootstrap specificity */
    .order_button {
        border-radius:4px!important;
        margin-bottom: 10px!important;
        border-radius: 4px!important;
        padding-top: 5px!important;
        padding-bottom: 3px!important;
        position: relative!important;
        left: 50%!important;
    }
    .order_button:first-child {
        margin-bottom:8px;
    }
}

/* Let modal views use 100% height */
html,
body,
.height-100 { height:100%;}

.btn-sponsor { background-color:#ccc; }
.btn-sponsor:hover { background-color:#aaa; }

#orderView, #donateOptionsView, #creditCardView, #eCheckView, #thankYouView { display:none; }
.donation-amount-area {
    color: white;
    font-weight: 800;
    /*font-size: 18px;*/
    text-align: left;
    /*-webkit-text-fill-color: white; !* Will override color (regardless of order) *!*/
    /*-webkit-text-stroke-width: 1px;*/
    /*-webkit-text-stroke-color: black;*/
}