@charset "utf-8";
/* Donation Pages CSS Document */

:root{
	--fh-blue: #0FBAD8;
	--fh-blue-light: #E0FAFF;
	--fh-green: #56C63B;
	--fh-green-light: #E6F5E4;
	--fh-orange: #FF6B00;
	--fh-orange-light: #FFEBD3;
}

.white-wrapper{
	padding:50px 0;}

.panel-donation .panel-body{
	padding: 0;
}

.panel-donation p{
	color: #222;
	font-size: .95em;
}

h3{
	align-items: center;
	color: var(--fh-blue);
	display: flex;
	font-size: 1.2em;
	font-weight: 800;
	gap: 20px;
	letter-spacing: 0.15em;
	margin: 30px 0 20px;
	text-transform: uppercase;
}

h3::after{
	background: #c1c1c1;
	content: "";
	flex: 1;
	height: 1px;
}

h4{
	color: #363636;
	font-size: 1.2em;
	font-weight: 700;
	margin: 5px 0 0;
}

hr{
	border-top-color: #c1c1c1;
	margin: 40px 0;
}

.amount-selector h3{
	margin-bottom: 4px;
}

.amount-options{
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 10px 0;
}

.amount-option{
	background: #ffffff;
	border: 2px solid #d9d9d9;
	border-radius: 14px;
	color: #2c3038;
	cursor: pointer;
	flex: 1 1 0;
	font-family: inherit;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1;
	padding: 18px 8px;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.amount-option:hover{
	border-color: #b7bcc3;
}

.amount-option:focus-visible{
	border-color: var(--fh-green);
	outline: none;
}

.amount-option.active{
	background: var(--fh-green-light);
	border-color: var(--fh-green);
	color: var(--fh-green);
}

.amount-options .popular-badge{
	background: var(--fh-green);
	border-radius: 8px;
	bottom: 100%;
	color: #ffffff;
	font-size: 10px;
	font-weight: 600;
	left: 50%;
	letter-spacing: .6px;
	line-height: 1;
	margin-bottom: -10px;
	padding: 8px;
	position: absolute;
	text-transform: uppercase;
	transform: translateX(-50%);
}

@media screen and (min-width: 600px) {
	.amount-options .popular-badge{
		text-wrap: nowrap;
	}
}

.btn-donate{
	margin-bottom: 0 !important;
	text-transform: uppercase;
	width: 100%;
}

.btn-donate[disabled]{
	background: #c8d9a0;
	border-bottom: 5px solid #98cb8a;
}

.cover-fees h4{
	font-size: 1.25em;
}

.cover-fees strong{
	color: #111;
	display: block;
	font-weight: 700;
}

.donation-header{
	background: var(--fh-blue);
	margin-top: 50px;
	padding: 25px;
	position: relative;
}

.donation-header img.fh-logo{
	height: 86px;
	left: 10px;
	max-width: none;
	position: absolute;
	top: -96px;
	width: auto;
}

.donation-header .flex-row{
	align-items: flex-start;
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

.donation-header .photo{
	align-items: center;
	background-color: var(--fh-orange);
	border: 5px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	color: #333;
	display: flex;
	flex: 0 0 120px;
	font-size: 45px;
	font-weight: 700;
	height: 120px;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	text-transform: uppercase;
	user-select: none;
	width: 120px;
}

.donation-header .photo img{
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.donation-header .header-content{
	flex: 1;
}

.donation-header h2{
	color: #fff;
	font-weight: 700;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.donation-header .event-title{
	background: var(--fh-orange);
	color: #fff;
	font-family: 'Simply Olive', sans-serif;
	font-size: 1.5em;
	margin: -25px -25px 15px;
	padding: 10px 20px;
	text-align: center;
	text-transform: uppercase;
}

.donation-header .time-left{
	color: #444;
	font-size: 1.1em;
	font-weight: 600;
}

.donation-header .raised{
	background: #fff;
	border-radius: 12px;
	color: var(--fh-orange);
	display: inline-block;
	font-size: 1.2em;
	font-weight: 700;
	margin: 10px 0;
	padding: 10px;
}

.donation-header .raised span{
	color: var(--fh-green);
}

.donation-header .goal{
	color: #fff;
	font-size: .9em;
	font-weight: 600;
	margin: 8px 6px 0 0;
	text-align: right;
}

.percentage-message{
	align-items: flex-start;
	background: var(--fh-orange-light);
	display: flex;
	font-size: .95em;
	gap: 12px;
	justify-content: space-between;
	margin: 20px -25px -25px;
	padding: 20px;
}

.form-group{
	margin-bottom: 20px;
}

.percentage-message .icon{
	align-items: center;
	background-color: #fff;
	box-sizing: border-box;
	border-radius: 100%;
	box-shadow: 0 0 30px -10px #00000050;
	display: flex;
	flex: 0 0 50px;
	height: 50px;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	user-select: none;
	width: 50px;
}

.percentage-message .icon img{
	display: block;
	height: 80%;
	max-width: none;
	object-fit: cover;
	width: 80%;
}

.percentage-message .message{
	flex: 1;
}

.percentage-message h4{
	color: var(--fh-orange);
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 5px;
}

.percentage-message p{
	color: #222;
	line-height: 1.1em;
	margin: 0;
}

.donation-input{
	border: 2px solid #d9d9d9;
	border-radius: 14px;
	padding: 10px 15px;
}

.donation-input::placeholder{
	color: #8B8B8B;
}

.donation-input select{
	border: none;
	color: #333;
	font-size: 1em;
	font-weight: 700;
	padding: 0 3px 0 0;
	text-align: right;
}

input.donation-input,
select.donation-input{
	height: 54px;
}

input[type="file"].donation-input{
	background-color: #fff;
	border: 2px solid #d9d9d9;
	padding: 10px 15px;
	width: 100%;
}

input[type="file"].donation-input::before{
	color: #8B8B8B;
	content: "Logo ";
	font-weight: 300;
	margin-right: 10px;
}

.donation-input .input-group-addon{
	background: transparent;
	border: none;
	color: #2c3038;
	font-size: 1em;
	font-weight: 700;
	padding: 1px 0 0;
}

.family-split p{
	color: #707070;
	font-weight: 600;
	margin: 20px 0 15px;
	text-align: left;
}

.family-split .flex-names{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: space-evenly;
	margin-bottom: 20px;
}

.family-split .family-member{
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 120px;
}

.family-split .family-member .photo{
	align-items: center;
	background-color: var(--fh-orange);
	border: 3px solid #FFDE5A;
	border-radius: 50%;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	flex: 0 0 56px;
	font-size: 20px;
	font-weight: 700;
	height: 56px;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	text-transform: uppercase;
	user-select: none;
	width: 56px;
}

.family-split .family-member .photo img{
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.family-split .family-member strong{
	display: block;
	font-weight: 600;
}

.flex-toggle{
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.message-count{
	color: #888;
	font-size: .9em;
	margin-left: 10px;
}

.privacy-notice{
	color: #707070;
	font-weight: 600;
	line-height: 1.3em;
	margin: 5px 0 15px;
	text-align: center;
}

.safe-checkout{
	text-align: center;
}

.safe-checkout img{
	margin-top: 20px;
	max-width: 90%;
	width: 250px;
}

.sticky-sidebar{
	position: sticky;
	top: 20px;
}

@media (max-width: 991px){
	.sticky-sidebar{
		margin-top: -50px;
	}
}

.toggle-wrapper{
	border: 2px solid transparent;
	border-radius: 14px;
	color: #444;
	margin-bottom: 15px;
	padding: 0;
	transition: all ease 0.25s;
}

.toggle-wrapper.on{
	background: var(--fh-blue-light);
	border-color: var(--fh-blue);
	padding: 12px;
}

.toggle-wrapper .form-group:last-child{
	margin-bottom: 0;
}

.wrap-padding{
	padding: 20px;
}

/*////DONATION PROGRESS BAR ////*/

.donation-progress{
	background: var(--fh-green-light);
	border-radius: 9999px;
	box-sizing: border-box;
	height: 30px;
	margin: 10px 0;
	overflow: hidden;
	width: 100%;
}

.donation-progress_fill{
	align-items: center;
	background: linear-gradient(90deg, #a6d924, #b8e832);
	border-radius: 9999px;
	box-sizing: border-box;
	display: flex;
	height: 100%;
	justify-content: center;
	min-width: 52px;
	overflow: hidden;
	position: relative;
	transition: width 0.6s ease;
}

.donation-progress_fill::before{
	background: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, 0.18) 0px,
		rgba(255, 255, 255, 0.18) 30px,
		rgba(255, 255, 255, 0)    30px,
		rgba(255, 255, 255, 0)    60px
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.donation-progress_label{
	color: #2f9e3f;
	font-size: 16px;
	font-weight: 600;
	position: relative;
	white-space: nowrap;
}

.donation-progress.stretch{
	background: #f1ecd1;
}

.donation-progress.stretch .donation-progress_fill{
	background: linear-gradient(90deg, #fdd403, #ffd93d);
}

.donation-progress.stretch .donation-progress_label{
	color: #c58713;
}

/*////DONATION TOTALS TABLE ////*/

table.donation-payment{
	color: #222;
	font-size: 1em;
	width: 100%;
}

table.donation-payment td{
	padding: 5px;
}

table.donation-payment td.amount{
	font-weight: 600;
	text-align: right;
}

table.donation-payment .total{
	background-color: var(--fh-green-light);
}

table.donation-payment .total-spacer td{
	height: 10px;
	padding: 0;
}

table.donation-payment .total td{
	box-shadow: -20px 0 0 var(--fh-green-light), 20px 0 0 var(--fh-green-light);
	font-size: 1.4em;
	font-weight: 600;
	padding: 10px 5px;
	text-transform: uppercase;
}