﻿.block-step {
	width: 1200px;
	margin-bottom: 15px;
}
.dw-donor-type {
	flex-direction: column;
}
.page-container .container {
	width: 100% !important;
	margin: auto;
}
.container .body-wrapper {
	border: none;
	padding: 20px 10px;
}
.container > .row {
	margin-right: 0px;
	margin-left: 0px;
}
.org-banner {
	display: none;
}
.left-sidebar {
	margin: 0px;
	padding: 0px;
	border: none;
	width: 100%;
}
.left-sidebar > .row {
	margin: 0px;
	padding: 0px;
}
#donor_ind_org {
	margin-top: 0px;
	margin-left: 0px !important;
}
.form-body {
	padding: 25px 20px 0;
}
.form-body label {
	padding-top: 5px;
	font-family: 'Avenir-Medium';
	font-size: 16px;

}
.form-body h4 {
	font-size: 20px;
	font-family: 'Avenir-Medium';
	color: #4D4D4F;
}
.is-recurrence-options {
	flex-direction: column;
	margin-left: 0px;
	margin-right: auto;
	justify-content: start;
	padding-left: 0px;
}
.panel-primary > .panel-heading {
	display: none;
}

.panel-primary {
	border: none;
	width: 100%;
	margin: 0px;
}
.panel-body {
	padding: 30px 15px 0;
}
.panel-body > div {
	font-family: 'Avenir-Medium';
	font-size: 26px;
	line-height: 41px;
	color: #4D4D4F;
	padding-left: 10px;
}
#donation_wrapper {
	display: block !important;
}

ul.donation-options.flat {
	column-gap: 7px;
	justify-content: start;
}
ul.recurrence-options.flat {
	column-gap: 0px;
	justify-content: start;
	padding-top: 16px !important;
	text-transform: capitalize;
}

ul.donation-options.flat,
ul.recurrence-options.flat {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 0px;
	justify-content: center;
}

	ul.donation-options.flat li {
		margin-bottom: 10px;
	}

		ul.donation-options.flat li label {
			padding: 10px;
			font-size: 18px;
			line-height: 26px;
			border-radius: 4px;
			margin: 0 10px;
			border: 2px solid #CB2AA0;
			min-width: 126px;
			color: #CB2AA0;
		}

	ul.recurrence-options.flat li label {
		font-size: 15px;
		line-height: 24px;
		border: 2px solid #CB2AA0;
		min-width: 170px;
		color: #4D4D4F;
		margin-right: -2px !important;
		margin-bottom: -2px !important;
	}

	ul.donation-options.flat li label,
	ul.recurrence-options.flat li label {
		display: inline;
		background-color: white;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
		font-family: 'Avenir-Heavy';
		text-align: center;
		display: block;
		margin: 0px;
	}

	ul.recurrence-options.flat li:first-of-type label {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	ul.recurrence-options.flat li:last-of-type label {
		border-right: 2px solid #CB2AA0;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	ul.donation-options.flat li input[type="radio"],
	ul.recurrence-options.flat li input[type="radio"] {
		display: none;
	}

		ul.donation-options.flat li input[type="radio"]:checked + label,
		ul.recurrence-options.flat li input[type="radio"]:checked + label {
			color: #fff;
			background-color: #CB2AA0;
			border-color: #CB2AA0;
		}

		ul.donation-options.flat li input[type="radio"]:hover,
		ul.donation-options.flat li label:hover,
		ul.recurrence-options.flat li input[type="radio"]:hover,
		ul.recurrence-options.flat li label:hover {
			background-color: #CB2AA0;
			border-color: #CB2AA0;
			color: #fff;
			cursor: pointer;
		}

/**/
		ul.donation-options, ul.recurrence-options{
	list-style-type: none;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 0px;
	justify-content: center;
}
ul.donation-options li {
	margin-bottom: 10px;
}
ul.donation-options li label {
	padding: 10px;
	font-size: 18px;
	line-height: 26px;
	border-radius: 0;    
	margin: 0 10px;
	border: none;
	min-width: 126px;
    color: #000;
}
ul.recurrence-options li label {
	font-size: 15px;
	line-height: 24px;
	min-width: 170px;
    color: #4D4D4F;
}
ul.donation-options li label,
ul.recurrence-options li label {
    display: inline;
    background-color: white;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
	font-family: 'Avenir-Heavy';
	text-align: center;
	display: block;
}

ul.recurrence-options li:first-of-type label {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
ul.recurrence-options li:last-of-type label {
	border-right: none;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
ul.donation-options li input[type="radio"],
ul.recurrence-options li input[type="radio"] {
	display:none;
}
ul.donation-options li input[type="radio"]:checked + label,
ul.recurrence-options li input[type="radio"]:checked + label {
    background-color: #CB2AA0;
    color: white;
}
ul.donation-options li input[type="radio"]:hover,
ul.donation-options li label:hover,
ul.recurrence-options li input[type="radio"]:hover,
ul.recurrence-options li label:hover {
    background-color: #CB2AA0;
    color: white;
	cursor: pointer;
}
#donation_amount {
	text-align: center;
}
#donation_amount label.control-label {
	display: none;
}
#donation_amount .input-medium {
	margin: auto;
}
.input-group-addon, .input-group-btn {
	display: none;
}
.input-group-addon.bootstrap-touchspin-prefix {
    display: inline-flex !important;
    position: absolute;
    left: 6px;
    top: 8px;
    padding: 2px;
    min-width: 15px;
    font-size: 23px;
    color: #CB2AA0;
    font-weight: 700;
    background-color: #F2F2F3;
    border: none;
	z-index: 10;
}
#donation_amount_error {
	text-align: center;
	font-family: Avenir-Medium;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.form-item .help-block i {
	color: #FB4E4E;
	padding-right: 7px;
	left: -10px;
	top: 35px;
}
#donation_amount_error .help-block {
	justify-content: center;
	padding-left: 0px;
	padding-right: 0px;
}
.form-item .help-block {
	color: #FB4E4E;
	font-family: Avenir-Medium;
	font-size: 14px;
	display: flex;
	justify-content: left;
	align-items: center;
	line-height: 18px;
	padding-left: 22px;
}
#donationamountother {
	background: #F2F2F3;
	border: 2px solid #808083;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
	border-radius: 4px !important;
	min-width: 220px;
	font-family: 'Avenir-Medium';
	font-size: 18px;
	padding: 20px 15px 20px 30px;
	margin-bottom: 15px;
}
div.form-actions {
	padding: 0px;
	margin-top: 0px;
	border-top: none;
	text-align: center;
	background-color: transparent;
}
div.form-actions .btn {
	font-family: 'Avenir-Heavy';
	font-size: 18px;
	line-height: 26px;
	color: white;
	background-color: #CB2AA0;
	text-shadow: none;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15) !important;
	border-radius: 4px !important;
	padding: 10px;
	min-width: 180px;
}

div.form-actions #btn_donate > i {
	padding-right: 6px;
	font-size: 18px;
}
	div.form-actions .button-submit > i,
	div.form-actions .button-submit > svg {
		padding-left: 6px;
		font-size: 18px;
	}

.primary {
	background-color: #CB2AA0 !important;
	color: white !important;
}

.accent {
	background-color: #CB2AA0 !important;
	color: white !important;
}
.btn.green {
	color: #fff;
	border-color: #CB2AA0 !important;
	background-color: #CB2AA0 !important;
	border: 2px solid #CB2AA0;
}

.btn.green:hover {
	background-color: #DE5FBC !important;
	border-color: #DE5FBC !important;
}

.btn.green:hover, .btn.green:focus, .btn.green:active, .active.btn.green, .disabled.btn.green, [disabled].btn.green {
	background-color: #DE5FBC !important;
	border-color: #DE5FBC !important;
	color: #fff !important;
	outline: none !important;
}

.blue.btn {
	color: white;
	text-shadow: none;
	background-color: #CB2AA0 !important;
}

.blue.btn:hover {
	background-color: #CB2AA0 !important;
}

.blue.btn:hover, .blue.btn:focus, .blue.btn:active, .active.blue.btn, .disabled.blue.btn, [disabled].blue.btn {
	background-color: #CB2AA0 !important;
	color: #fff !important;
	outline: none !important;
}
hr.gotr-line {
	border-bottom: none;
	border-top: 3px solid #FFB81C;
	margin: 10px 0 5px 0;
	position: absolute;
	right: 0;
	width: 95%;
	float: right;
	z-index: 0;
}

/*donation form*/
.container .row > [class*="col-xx"] {
	width: 100% !important;
}
.donationamountheader {
	display: none;
}
.form-body .control-label {
	font-size: 18px;
	color: #4D4D4F;
	margin-bottom: 5px;
	display: inline-block;
	text-align: left;
}
.form-body .questioncontainer .control-label {
	padding-bottom: 10px;
}
.form-body .form-control.k-numerictextbox {
	border: none !important;
	padding: 0 !important;
	width: auto;
}
.rands-wrapper .form-control .k-numeric-wrap .k-select {
	max-height: 40px;
	padding-top: 4px;
}
.form-body textarea.form-control {
	padding: 10px 8px;
}
.form-body .form-control {
	font-size: 16px;
	font-family: 'Avenir-Medium';
	font-weight: normal;
	background: #F2F2F3;
	border: 2px solid #99999B;
	border-radius: 4px !important;
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	padding: 20px;
	color: #000;
	max-width: 680px;
	width: 100%;
}
.select2-search input {
	font-size: 16px;
}
.select2-container {
	width: 100% !important;
}
.select2-container .select2-selection {
	font-size: 16px;
	font-family: 'Avenir-Medium';
	font-weight: normal;
	background: #F2F2F3;
	border: 2px solid #99999B;
	border-radius: 4px !important;
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	color: #4D4D4F;
	padding: 7px;
	overflow: visible;
	height: 100%;
}
.select2-results {
	font-size: 15px;
}
.form-body .select2-container .select2-selection .select2-selection__arrow {
	padding-top: 5px;
	margin: 0px;
}
.form-body .select2-container .select2-selection .select2-selection__rendered {
	padding-top: 0px;
}
.form-body .select2-container .select2-selection .select2-selection__arrow > b {
	top: 20px;
}
.select2-container-active .select2-selection, .select2-container-active .select2-selections {
	border: 2px solid #99999B !important;
}
p.form-control-static {
	font-size: 16px;
	font-family: 'Avenir-Medium';
	font-weight: normal;
	color: #626262;
	padding: 6px;
}
.input-icon i {
	margin-top: 14px;
}
h1.campaign-title {
	color: #CB2AA0 !important;
}

.header.navbar {
	display: none !important;
}

.copyright {
	display: none !important;
}

#donation_wizard {
	border: none !important;
}

input.postal-code {
	max-width: 172px;
	padding-bottom: 18px;
}

.form-wizard .active .step .number {
	background-color: #CB2AA0 !important;
	color: #fff;
}
#display_donation_format {
	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
	font-size: 16px;
	font-family: Avenir-Black;
	color: #4D4D4F;
}
.form-wizard .done .step .number {
	background-color: #CB2AA0 !important;
	color: #fff;
}

.progress > .progress-bar-success {
	background-color: #CB2AA0 !important;
}

.campaign-name {
	display:none;
}

.campaign-title {
	color: #CB2AA0 !important;
	margin-top: 5px;
	margin-bottom: 5px;
}



input[type=radio]:after {
	border: 1px solid #CB2AA0;
}

input[type=radio]:checked:after {
	background-color: #fff;
	border: 4px solid #CB2AA0;
}
form {
	--background: #ffffff;
	--bordergrey: #8f8f91;
	--radio: #F2F2F3;
	--radio-checked: #CB2AA0;
	--radio-size: 20px;
	--width: 140px;
	--height: 140px;
	--border-radius: 10px;
}

form .radio-list input[type=radio] {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	height: var(--radio-size);
	min-width: var(--radio-size);
	outline: none;
	margin: 2px 10px 0 0;
	cursor: pointer;
	border: 2px solid var(--bordergrey);
	background: transparent;
	border-radius: 50% !important;
	display: grid;
	justify-self: end;
	justify-items: center;
	align-items: center;
	overflow: hidden;
	transform: scale(1);
}

form .radio-list input[type=radio]:before, form .radio-list input[type=radio]:after {
	content: "";
	display: flex;
	justify-self: center;
	border-radius: 50%;
}

form .radio-list input[type=radio]:before {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--background);
	z-index: 1;
	opacity: var(--opacity, 1);
}

form .radio-list input[type=radio]:after {
	position: relative;
	width: calc(100% / 2) !important;
	height: calc(100% / 2) !important;
	background: var(--radio-checked);
	top: var(--y, 100%);
	left: 0;
	border: none;
}

form .radio-list input[type=radio]:checked {
	--radio: var(--radio-checked);
	--bordergrey: var(--radio-checked);
}

form .radio-list input[type=radio]:checked:after {
	width: 16px;
	height: 16px;
	border-radius: 15px;
	top: -3px;
	left: -1px;
	position: relative;
	background-color: var(--radio-checked);
	content: '';
	display: grid;
	visibility: visible;
	border: 3px solid var(--radio-checked);
	--y: 0%;
	top: 0px;
	left: 0px;
}
form .is-recurrence-options input[type=radio] {
	display: inline-block;

}
form ul.is-recurrence-options li {
	display: flex;
	align-items: center;
	justify-content: center;
}
form ul.is-recurrence-options li label {
	margin: 0px;
	padding: 8px 0 0 0;
	font-size: 18px;
}
form .is-recurrence-options input[type=radio]:checked:after {
	display: inline-grid;
	top: -5px;
	left: 4px;
}
form .radio-list input[type=radio]:checked:before {
	opacity: 0;
}

form .radio-list input[type=radio]:checked ~ .radio-list input[type=radio]:after {
	--y: -100%;
}
form .cq-input .radio-list   {
	margin-top: 0px;
}
form .dw-coverfees-wrapper {
	flex-direction: column;
	align-items: start;
}
.dw-coverfees-content {
	font-size: 18px !important;
	color: #4D4D4F !important;
	margin-bottom: 5px;
	font-family: 'Avenir-Medium';
	font-weight: normal;
	padding-top: 3px;
}
#dw_recaptcha > div {
	margin-top: 30px;
	margin-left: 0px;
}
.rands-wrapper .fees-block  .fee-item { display: flex; justify-content: start; align-items: baseline; }
.rands-wrapper .fees-block .fee-item label.control-label,
.rands-wrapper .fees-block .fee-item p.form-control-static {
	font-size: 21px;
	font-family: Avenir-Heavy;
}
.rands-wrapper .form-item.adjustments {
	display: flex;
	column-gap: 40px;
	margin-bottom: 0px;
}
.rands-wrapper .form-item.adjustments {
	margin-bottom: 0px;
}
.rands-wrapper .form-item.adjustments > div {
	margin-bottom: 20px;
}
.rands-wrapper .form-item.adjustments .k-numeric-wrap {
	border: none;
}
.rands-wrapper .form-item.adjustments .k-numeric-wrap .k-select {
	border: 2px solid #99999B;
	border-width: 2px 2px 2px 0px;
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}
.form-control.stripe {
	padding: 11px 0 0 10px;
	height: 45px;
}
@-webkit-keyframes stretch-animate {
	0% {
		transform: scale(1, 1);
	}

	28% {
		transform: scale(1.15, 0.85);
	}

	50% {
		transform: scale(0.9, 1.1);
	}

	100% {
		transform: scale(1, 1);
	}
}

@keyframes stretch-animate {
	0% {
		transform: scale(1, 1);
	}

	28% {
		transform: scale(1.15, 0.85);
	}

	50% {
		transform: scale(0.9, 1.1);
	}

	100% {
		transform: scale(1, 1);
	}
}
.receipt-title {
	color: #CB2AA0 !important;
	font-weight: bold;
}

.dnnFormPopup {
	overflow: scroll;
}

div.page-container {
	padding-top: 0 !important;
}

div.pre-header {
	display: none !important;
}
/* checkbox start */
label.checkbox-label {
	width: auto;
	display: inline-block;
	position: relative;
	padding-left: 40px;
	padding-bottom: 20px;
	cursor: pointer;
	font-size: 20px;
	color: #4D4D4F;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
label.checkbox-label span {
	color: #CB2AA0;
}

/* Hide the browser's default checkbox */
label.checkbox-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
label.checkbox-label span.checkmark {
	position: absolute;
	top: 7px;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #dbdbdb;
	border-radius: 20% !important;
}

/* On mouse-over, add a grey background color */
label.checkbox-label:hover input ~ .checkmark {
	background-color: #ccc;
}

/* Create the checkmark/indicator (hidden when not checked) */
label.checkbox-label span.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
label.checkbox-label input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
label.checkbox-label span.checkmark:after {
	left: 9px;
	top: 2px;
	width: 8px;
	height: 16px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* When the checkbox is checked, add a blue background */
label.checkbox-label input:checked ~ .checkmark {
	background-color: #CB2AA0;
}


label.checkbox-label input:checked ~ .checkmark:after {
	border: solid white;
	border-width: 0 3px 3px 0;
}
/* checkbox end */

.radio-list label.control-label,
.radio-list label span {
	font-size: 18px;
	display: flex;
	color: #4D4D4F;
}
.df-head-wrap {
	display: flex;
	flex-direction: row;
}
h3.df-heading {
	font-family: Avenir-Medium;
	font-size: 20px;
	padding-right: 10px;
	background-color: #fff;
	z-index: 5;
	position: relative;
}

.cqg-wrapper {
	margin-top: 15px;
}

.adjustments .df-field-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.adjustments label {
	margin-right: 0;
	margin-top: 0;
}
.adjustments .recurrence-options {
	width: 100%;
}
.nav li.active {
	border-bottom: solid 2px #C5299B;
}
.form-body .adjustments .k-numeric-wrap {
	border: 2px solid #99999B;
	box-shadow: none;
}
.form-body .adjustments .k-numeric-wrap .form-control {
	padding: 0px;
	border: none;
}
.form-control.rp-display-inline {
	height: calc(1.5em + 1rem + 2px);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.nav li:hover {
	background-color: #fff;
}
.tab-pane .form-item:first-of-type {
	padding: 0 15px;
}
.df-tc-flex-label {
	width: auto;
}
.df-tc-flex-label label {
	font-size: 18px;
	color: #4D4D4F;
}
.form-control.honor-notify {
	height: calc(2*(1.5em + 1.25rem + 3px));
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */
	.block-step {
		width: 1200px;
	}
	label {
		font-weight: 200;
		font-size: 12px;
	}

	h4 {
		font-size: 15px;
	}

	h3 {
		font-size: 18px;
	}

	h1 {
		font-size: 30px;
	}

	.form-group {
		margin-bottom: 8px;
	}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */
	.block-step {
		width: 100%;
	}
	label {
		font-weight: 200;
		font-size: 12px;
	}

	h4 {
		font-size: 15px;
	}

	h3.df-heading {
		font-size: 18px;
	}

	h1 {
		font-size: 30px;
	}

	.form-group {
		margin-bottom: 8px;
	}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */
	.block-step {
		width: 100%;
	}
	label {
		font-weight: 200;
		font-size: 12px;
	}

	h4 {
		font-size: 15px;
	}

	h3.df-heading {
		font-size: 18px;
	}

	h1 {
		font-size: 30px;
	}

}

/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1200px) {
	.block-step {
		width: 1200px;
	}
	.select2-results {
		font-size: 13px;
	}
	h3.df-heading {
		font-size: 18px;
	}
	div button.btn.payment {
		font-size: 14px;
		margin-top: 1rem;
	}
	.df-tc-flex-label {
		width: auto;
		flex-basis: 250px;
	}
}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (max-width: 991px) {
	.block-step {
		width: 933px;
	}
	.dw-donor-type {
		flex-direction: column;
	}
	div button.btn.payment {
		font-size: 16px;
		margin-top: 1rem;
	}
	.df-tc-flex-label {
		width: auto;
	}
}
	/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (max-width: 767px) {
	.form-group {
		margin-bottom: 8px;
	}
	.block-step {
		width: 100%;
	}
	div button.btn.payment {
		font-size: 16px;
		margin-top: 1rem;
	}
	.df-tc-flex-label {
		width: auto;
	}
}

@media screen and (max-width: 576px) {
	.rands-wrapper .fees-block .fee-item {
		justify-content: space-between;
	}
	.rands-wrapper .fees-block .fee-item label.control-label,
	.rands-wrapper .fees-block .fee-item p.form-control-static {
		font-size: 20px;
	}
	div button.btn.payment {
		font-size: 16px;
		margin-top: 1rem;
	}
	.df-tc-flex-label {
		width: auto;
	}
	.form-control.honor-notify {
		height: 150px;
	}
}

@media (max-width: 550px) {
	.radio-list {
		flex-direction: column;
	}

	.rands-wrapper .form-item.adjustments {
		flex-direction: column;
	}


}