body { background: #dfdfdf; margin: 0; }

#flash-message { background: #ffa; padding: 10px 20px; border-bottom: 1px solid #cca; font-size: 18px; position:relative; z-index: 2 }

.cfm-user-panel { float:right; padding: 4px 8px; text-align:right; margin: 0 0 32px 0}
.cfm-user-panel .facebook-image {width:32px;height:32px;}
.cfm-user-panel .divider { display:none; }
.cfm-user-panel a, .cfm-user-panel .display-name { display:inline-block; padding: 8px; }
.cfm-user-panel.signed-in { padding-bottom:0; }

.grey-box {border: 1px solid #e5e5e5; border-bottom: 2px solid #ddd; border-radius:6px; background:#f5f5f5;}

/*input, textarea {border: 1px solid #666;}*/
input:hover, textarea:hover {border:1px solid #777}
input:focus, textarea:focus {box-shadow: none !important; border:1px solid #777 !important}

textarea.form-control { height:auto; float:none; }

.cfm-error-message { color: #f00; margin:8px; display:none; }
.cfm-input-error input { border-color:#f00; }

.cfm-input-error .cfm-error-message { display:block; }

.select2-container input { border:0 !important;}

.main-container { background:#fff; box-shadow: 0px 1px 6px rgba(0, 0, 0, .1); border: 1px solid #ccc; max-width:900px; margin:20px auto 120px auto; border-radius: 4px; overflow:hidden; }

.main-container .box { padding:30px; }
.main-container .box.divided.padded { padding:30px; }

.main-container .box p.help-intro { margin-bottom: 20px; font-size: 16px; color: #777; }

.main-container .divided { border-bottom: 1px solid #e1e1e1; }


.main-container .logo-image-container { display:inline-block; margin: 0 20px 0 0}
.main-container .logo-image-container a { max-width:210px; display:block; }
.main-container .logo-image-container a img {max-width:100%;max-height:100%}


.main-container h1 {padding:0px 0px 0px 0px;margin:0 0 20px 0; line-height: 120%}
.main-container .header h1 {margin:0 ;}
.main-container h1 a.text-logo { color: #000; display:inline-block; border: 1px solid #ddd; padding: 8px 12px;margin: 0 20px 0 0 }
.main-container h1 .subtitle {padding:12px 0px 4px 0px;color:#999;margin:0 0 0px 0px;display:inline-block !important;}

.main-container h2 {color:#999; padding:0px 0px 0px 0px;}
.main-container h3 {color:#5DBD74; padding:0px 0px 0px 0px;margin:0 0 20px 0;}

.cfm-form-user-signed-in { padding:11px 12px; margin-bottom:22px; border: 1px solid #ddd; border-radius:6px; }
.cfm-form-user-signed-in .sign-out { color:#999; font-size:13px; text-decoration:underline;}
.cfm-form-user-signed-in .sign-out:hover { color:#000; text-decoration:underline;}
.cfm-form-user-signed-in .email-address {font-weight:bold; margin:0 12px 0 0}
.cfm-form-user-signed-in p {margin:0}

.cfm-form-user-create-account { padding:12px 20px 20px 20px; margin:0px 0px 0px 0px; border: 1px solid #e5e5e5; border-bottom: 2px solid #ddd; border-radius:6px; background:#f5f5f5;}
.cfm-form-user-create-account .heading { margin:0 -20px 20px -20px; padding: 0 0 12px 20px; border-bottom:1px solid #ddd}
.cfm-form-user-create-account h4 { margin:0; display:inline-block; }
.cfm-form-user-create-account .sign-in {margin: 0 0 0 30px; color:#999; }

.google-sign-in-container { 
  float:right; 
  margin-right: 10px; 
  margin-top: -4px; 
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); 
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  overflow:hidden;
  /*padding:2px;*/
}

p.help-text {margin:18px 0 0 0; color: #999}

.cfm-form-submit-button { font-size: 22px; padding: 14px 24px }
.cfm-form-submit-button .submit-ready-icon { display:inline-block; }
.cfm-form-submit-button .submit-loading-icon { display:none; }
.cfm-form-submit-button.submitting .submit-ready-icon { display:none; }
.cfm-form-submit-button.submitting .submit-loading-icon { display:inline-block; }
/*.cfm-form-submit-button .submit-ready-icon { display:none; }
.cfm-form-submit-button .submit-loading-icon { display:inline-block; }*/

.bottom-padding { padding-bottom:20px; }

table.possible-times {border-top:1px solid #ddd;border-left:1px solid #ddd;width:100%;}
table.possible-times td {border-right:1px solid #ddd;border-bottom:1px solid #ddd; padding:10px; font-size:16px;}
table.possible-times td.time {font-size:14px;}
table.possible-times td.selectable {text-align:center;}
table.possible-times td.selectable:hover {cursor:pointer;background: #eee}
table.possible-times td.selected {background: #777; color:#fff; font-weight: bold;}
table.possible-times td.locked {background: #eee;}
table.possible-times td.selected:hover {background: #777;}

table.playlist {border-top:1px solid #ccc; border-left:1px solid #ccc; width:100%;}
table.playlist td, table.playlist th {border-bottom:1px solid #ccc; border-right:1px solid #ccc}
table.playlist td input {border-radius:0 !important; border-color:#fff; background:#fff !important; box-shadow:none; transition:none}
table.playlist td input:hover {border-color:#bbb; }
table.playlist th { padding:8px }


/* h3 .label-default {border:2px solid #ccc; background:#fff; color:#000} */


.donation-select {padding:20px; margin: 0px 0px 20px 0px; max-width:350px; }
.donation-select label {margin: 0 0 10px 0}
.donation-select .donation-amount-input { max-width:200px; font-size:30px; height:auto }

.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}

.other-amount { margin: 10px 0 0 0 }

.donor-preferences .lead-in { display:inline-block; font-size:18px; color:#999; margin-right:15px; }
.donor-preferences .donation-type {display:inline-block;}

#donor-type-select {margin:30px 0 10px 0}
#donor-type-business-container {margin:20px 0 0 0}

#donor-tags .btn {margin:0 6px 8px 0;}

#SupporterAccount { }


#SupporterAccount h1 { font-size: 24px }
#SupporterAccount .section { padding: 40px 40px 30px 40px; border-top: 1px solid #eee; margin: 0 -20px 0 -20px}
#SupporterAccount .toolbar-container { padding:20px; border-bottom: 1px solid #ddd;}
#SupporterAccount .toolbar { font-size: 16px; margin: 0 0 10px 0}

#SupporterAccount .toolbar h1 { font-size: 28px; margin: 20px 30px 20px 20px; float:left}
#SupporterAccount .toolbar .nav { width:100%;float:left;clear:left;padding-left:20px}

#SupporterAccount .content { padding:20px; }
#SupporterAccount .donation-level { padding:20px 30px; border: 1px solid #ddd; float:right; margin: 0px 50px 20px 20px; border-radius:10px;}
#SupporterAccount .donation-level h3 { margin: 0; }
#SupporterAccount .donation-level .amount { font-size:40px }

.secured-by-stripe { float:left; clear:left; color:#999 }

#SupporterAccount .credit-card-information { padding-bottom:40px; }


.card-box-no-card { padding:50px 60px; float:left; max-width:400px; margin: 0 20px 20px 0px; border-radius:10px; border: 2px dashed #ddd; text-align:center; }

.card-box-previous { min-width: 280px; padding:24px 36px; background: #fff; float:left; max-width:400px; margin: 0 20px 20px 0px; border-radius:6px; border: 1px solid #ddd; border-bottom: 2px solid #ddd; }

.card-box { min-width: 280px; padding:24px 36px; background: #fff; float:left; max-width:400px; margin: 0 20px 20px 0px; border-radius:6px; border: 1px solid #ddd; border-bottom: 2px solid #ddd; }
.card-box .entered { font-weight: bold; margin-bottom: 14px; font-size: 18px; }
.card-box .number { margin-bottom: 8px; }
.card-box .expires { margin-bottom: 14px; }

.credit-card-logos-container { float:left; clear:left; margin-top: 10px; }
.credit-card-logos-container .help-text { display:block; float:left; clear:left; font-size:13px; }
.credit-card-logos-container .help-text .fa-cc-stripe { margin-right: 4px; }
.credit-card-logos-container .help-text a { color: #555; }
/*.credit-card-logos-container .powered-by-stripe { display:block; clear:left; float:left; font-size:13px; }*/
/*.credit-card-logos-container .powered-by-stripe { display:block; clear:left; float:left; font-size:13px; }*/
/*.credit-card-logos-container .powered-by-stripe span { display:block; float:left; font-size:13px; }*/
.credit-card-logos-container .logos{ max-width: 180px; height:auto; display:block; float:left; margin-bottom: 0px; }


.icon-lock { display:block; float:left; font-size: 28px !important; margin: 0 10px -10px 0; color: #d0b500; }

.payment-method .cfm-error-message { clear:left; float:left; padding:16px 24px; border-radius:6px; background-color: #fff88e; color:#000; font-weight:bold; border:3px solid #ffb800; margin: 0 0 20px 0; }
.payment-method .cfm-error-message .message { margin-bottom: 8px; font-size: 16px; }
.payment-method .cfm-error-message .help-text { opacity: .8; font-weight:normal; }
.payment-method .cfm-error-message .help-text a { color: #000; text-decoration:underline; }
.payment-method .cfm-input-error {}




.card-modal .payment-errors {color: #fff; background:#f90; padding:8px 12px; border-radius:4px;margin: 0 0 20px 0; font-weight: bold; display:none;}
.card-modal .payment-errors:empty {margin: 0 }

.card-modal .enter-card { padding:20px; background: #eee; max-width:400px; margin: 0 20px 20px 20px; border-radius:10px; border: 1px solid #ddd; }
.card-modal .enter-card .card-month { display:inline-block; max-width:60px; }
.card-modal .enter-card .card-year { display:inline-block; max-width:80px; }
.card-modal .powered-by-stripe {margin: 8px 0 0 0;}
.card-modal .powered-by-stripe img { width:119px; height:26px }


.powered-by-stripe img { width:119px; height:26px }


/* Bootstrap quirks */
/* fixes inputs that are touching, on col-x-12 */
@media (max-width: 768px) {
  .spread-out-inputs .form-control {margin: 4px 0; display:block;}
}
.panel-body {padding-top:30px}


/* 
---------------------------------- 

User Pages

---------------------------------- 
*/


.page-container {
  padding: 20px 20px 30px 20px;
}

.page-container .input {
  margin: 0 0 10px 0;
}

.page-container .input input,
.page-container .input textarea {
  background: #f9f9f9;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin: 10px;
}
.page-container .input label {
  vertical-align: top;
  padding: 20px 0;
}

.page-container .input input:hover, 
.page-container .input input:active,
.page-container .input input:focus {
  border: 2px solid #ccc !important;
}

.page-container .checkbox {
  padding: 0;
}

.page-container .checkbox input {
  padding: 0;
  margin: 4px 8px 4px 0;
}

.page-container .submit-container {
  margin: 0 0 20px 0;
}

.page-container .submit-container button {
  background: #38d;
  border: 0;
  padding: 10px 20px;
  border-radius: 4px;
  /*border-bottom: 3px solid #ccc;*/
  border-bottom: 2px solid rgba(0,0,0,.2);
  font-size: 16px;
  color:#fff;
}

.page-container .submit-container button:hover {
  background: #27c;
  /*border-color: #ccc;*/
}

.page-container .return-to-homepage-container {
  margin: 20px 0 20px 0;
}

.page-container .error-message {
  border: 1px solid #ff9;
  background: #ffc;
  color: #774;
  padding: 10px 15px;
  border: 1px solid #cca;
  margin: 0 0 20px 0;
}

.welcome-box {
  border: 1px solid #ddd;
  padding: 20px 30px;
  margin: 0;
  border-radius: 8px;
}
.welcome-box h4 {
  font-size: 22px;
}
.welcome-box p {
  font-size: 16px;
  color: #777;
  margin-bottom: 20px;
}


/*--------------------------------------------------------

New Donate Page Stuff

---------------------------------------------------------*/


.cfm-form-user-create-account {
  background: #fff;
} 

.box.divided.header {
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
  position:relative;
  z-index: 2;
  padding: 30px;
}

.page-support-us .box.divided {
  background: #eee;
  background: #fff;
  padding: 0;
  margin: 0;
}

.sidebar-section { 

}

.sidebar-inner {
  text-align: center;
  padding: 20px;
  margin-right: -25px;
}
.sidebar-inner .step-number {
  font-size: 26px;
  color: #999;
  margin-bottom: 4px;
}
.sidebar-inner h3 {
  font-size: 20px;
  /*color: #333;*/
  line-height: 150%;
}

.main-section { 
  /*background: #fff;*/
  /*padding:0;*/
  /*margin:0;*/
}

.main-inner { 
  overflow:auto;
  background: #f7f7f7;
  padding:30px;
  margin:0;
  border-left: 1px solid #e5e5e5;
  /*border-left*/
}

.donation-select {
  padding:0;
  margin:0;
}

.user-login {
  padding: 20px 0;
}
.user-login h4 {
  color: #777;
  margin-bottom: 20px;
}
.user-login h4 b {
  color: #000;
}
.user-login p {
  margin-bottom: 20px
}

.user-register {
  padding: 20px 0;
}
.user-register h4 {
  /*color: #777;*/
  /*margin-bottom: 20px;*/
}
.user-register h4 b {
  color: #000;
}
.user-register p {
  margin-bottom: 20px
}

.box.submit-container {
  text-align: center;
  padding: 40px 20px;
}

.section-loading { 
  display: none;
  margin: 10px 0; 
  font-size: 16px;
  color: #888;
}

.section-loading i { 
  margin-right: 10px;
}

.section-loading.visible {  
  display: block;
}

.message-box { 
  display: none;
  margin: 10px 0; 
  font-size: 16px;
  color: #888;
}

.message-box i { 
  margin-right: 10px;
}

.message-box.visible {  
  display: block;
}

@media screen and (max-width: 767px){

  .main-container h1 .subtitle {
    padding: 12px 0px 4px 0px;
    color: #999;
    margin: 6px 0 0 0px;
    display: inline-block !important;
  }

  .main-container {
    margin: 0;
  }
  
  .sidebar-inner {
    text-align: left;
    padding: 20px;
    margin: 0;
  }
  .sidebar-inner .step-number {
    font-size: 26px;
    color: #999;
    margin: 0 6px 0 0;

    display: inline-block;
  }
  .sidebar-inner h3 {
    font-size: 26px;
    display: inline-block;
    margin: 0;
    line-height: 100%
  }

  .box.submit-container {
    text-align: left;
  }

  p {
    /*line-height: 200%;*/
  }

  h4 {
    line-height: 150%;
  }

  #button-reset-password {
    margin: 14px 0 14px 0;
  }

}