.mad-panel { position: relative; }
.mad-icons { text-align: center; padding: 5px; clear: both;}
.mad-icons .pf {font-size: 32px;}


.mad-columns {

}

.mad-clear { clear: both; }

.mad-row { display: block; clear: both; margin-bottom: 5px; }

.mad-row small { font-style:italic; font-size: 10px; font-weight: normal; }

.mad-row label { display: block; font-weight: bold; margin-bottom: 5px;}

.mad-row input[type=text] { display: block; width: 98%; padding: 1% 10px; border: 1px solid #ccc; }
.mad-row input[type=date] { display: block; padding: 1% 10px; border: 1px solid #ccc; }
.mad-row input[type=text].auto_3_4 { display: inline; width: 73%; }
.mad-row input[type=text].auto_1_4 { display: inline; width: 20%; }

.btnSendCampaign { background-color: #393; color: #fff; width: auto !important;  }

.thankyou { display:block; clear: both; margin-bottom: 15px; }

.mad-row textarea { display: block; width: 100%; padding: 10px; min-height: 300px; border: 1px solid #ccc; }

.mad-row button { padding: 10px; border: 0px; width: auto; font-weight: bold; }

.mad-text-panel { padding: 5px; border: 1px dotted #ccc; }

.mad-donationform {
	padding: 15px;
	border: 1px dotted #ddd;
	background-color: #fff;
	z-index: 1 !important;
}

.required.red {
	border: 1px solid #F00 !important;	
}


.mad-box {
	position: fixed !important;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	z-index: 9999999999 !important;
	width: 750px;
}

.mad-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color:#000;
	opacity: 0.8;
	display:none;	
	top: 0px;
	left: 0px;
	z-index: 999990 !important
}
 
.mad-donationform .title {
	border-bottom: 1px dotted #ddd;
	font-weight: bold;	
	padding: 5px 0px;	
}

.mad-donationform .mad-section, .mad-section-amount {
	margin-bottom: 10px;
	padding: 5px;
}

.mad-donation-button {
	border-radius: 0px;
	border: 1px solid #ddd;
	text-align: center;
	display: block;	
	margin-right: 0px; 
	width: 100%;
	font-size: 18px;
	padding: 10px 2px !important;
	margin: 10px 0;
}



.mad-buttons-side .mad-donation-button {
	width: auto !important;
	display: inline-block;
	margin: 0 10px;
	padding: 10px 20px !important;
}

.mad-buttons-below .mad-donation-button {
	width: 100% !important;
	display: block !important;
	padding: 10px 2px !important;
	margin: 10px 0 !important;
}

.btnMakeDonation { font-size: 25px; width: 100% !important; display: block;	color: #fff; background-color: #000; padding: 10px 2px !important; }

.mad-buttons-below  .btnMakeDonation {
	background-color: #c62f35 !important;
}

.mad-buttons-side .btnMakeDonation {
	width: auto !important;
	padding: 10px 20px !important;
	background-color: #c62f35 !important;
}

.mad-donation-button:hover {
	background-color: #bbb;
}

.mad-donation-button.selected {
	background-color: #bbb;
}

.mad-details {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;		
   -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
    -moz-column-rule-style: dotted; /* Firefox */
    column-rule-style: dotted;
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;	
}

.mad-note {
	padding: 5px; 
	display: none;
	clear: both;
}

.mad-note-error {
	background-color: #ffd7d7;	
	border: 1px solid #fb4848;
	border-radius: 5px;
}

.mad-details > .mad-row { display: inline-block; }

.social-header { line-height: 20px; margin-bottom: 30px; clear: both;  }

.madSocial {
	padding: 20px 10px; 	
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	margin-top: 20px;
	color: #fff !important;
}

.madSocial img { display: inline; padding: 0px!important; margin: 0px!important; background-color: transparent !important; width: 30px !important; height: auto !important; border: 0px !important; vertical-align: middle; float: none !important; }

.twButton { background-color: #2aa1d3; }
.fbButton { background-color: #4f62af; }

.payment { padding: 15px; position: relative; clear: both; border: 1px solid #ddd; margin-bottom: 5px; border-radius: 5px; height: auto; padding-left: 60px; background-repeat:no-repeat; background-position: 15px center; }
.payment.checked { background-image: url(../img/check2.png);  }
.payment.notchecked:hover {  background-image: url(../img/check_hover.png);  }
.payment.notchecked { background-image: url(../img/nocheck.png);  }
.paymentlogo {position: relative; width: 60px !important; height: auto !important; border: 0px !important; float: left; margin: 5px 10px; vertical-align: middle; }

.payment select { padding:  10px !important; float: right; margin: 15px; }

.mad-canvas { width: 400px; height: 225px !important; position: relative;  background-color: #fff;  }

.m-signature-pad {
  border: 1px solid #e8e8e8;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
  width: 100%;
}

.m-signature-pad:before, .m-signature-pad:after {

  content: "";

	background: transparent;
	-webkit-transform: skew(-3deg) rotate(-3deg);
	-moz-transform: skew(-3deg) rotate(-3deg);
	-ms-transform: skew(-3deg) rotate(-3deg);
	-o-transform: skew(-3deg) rotate(-3deg);
	transform: skew(-3deg) rotate(-3deg);
}

.m-signature-pad:after {

	-webkit-transform: skew(3deg) rotate(3deg);
	-moz-transform: skew(3deg) rotate(3deg);
	-ms-transform: skew(3deg) rotate(3deg);
	-o-transform: skew(3deg) rotate(3deg);
	transform: skew(3deg) rotate(3deg);
}

.m-signature-pad--body {

  border: 1px solid #f4f4f4;
}

.m-signature-pad--body
  canvas {

    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

.mad-infobox { border: 1px solid #063 !important; padding: 10px !important; margin: 15px 0; }


#customer_details {
    width: 45% !important;
    float: right !important;
    margin-left: 4% !important;
}

#woocommerce-billing-fields { width: 100%; }

#customer_details .input-text, #customer_details select {
	width: 95% !important;
}
form { clear: both !important; }

.woocommerce { clear: both !important;}

#order_review {
	float: left !important;
	width: 51%;
}
.mad-note #customer_details .col-2 {
    display: none !important;
}
.mad-note #wc_checkout_add_ons {
    clear: both !important;
}

.mad-clearfix { clear: both; display: block; width: 100%; }