/* Brand Colour Variables */
:root {
  --brand-primary: #EE7202;
  --brand-primary-foreground: #FFFFFF;
  --brand-primary-lighter:#df6e10;
  --brand-secondary: #2F3D48;
  --brand-secondary-foreground: #FFFFFF;
}

/* Brand Colours */
.dropdown-item.active, .dropdown-item:active {color: var(--brand-primary-foreground); background-color: var(--brand-primary);}

.bg-primary a {color: var(--brand-primary-foreground);}


/* Buttons */
.btn {white-space: normal;}

.btn-social {display: inline-flex; justify-content: center; align-items: center;}
.btn-social i {margin: 0;}
.share-page-icons a.btn-social {background: transparent !important; border: 1.5px solid #FFFFFF !important; color: #FFFFFF !important; transition: all 0.2s ease-out;}
.share-page-icons a.btn-social:hover {background: var(--brand-secondary) !important; border: 2px solid var(--brand-secondary) !important; color: var(--brand-secondary-foreground) !important;}

.lump_buttons .btn {display: flex;flex-direction: row;justify-content: center;align-items: center;column-gap: 10px;}
.lump_buttons .btn .material-icons {margin: 0;}


/* Navigation */
.funraisin-sticky-nav .funraisin-dropdown-nav .funraisin-dropdown-menu li a {color: inherit;}
.funraisin-sticky-nav .funraisin-dropdown-nav .funraisin-dropdown-menu li a:hover {color: var(--brand-primary);}

.funraisin-sticky-nav {border-bottom: none !important; box-shadow: 0px 0px 40px -10px hsla(0, 0%, 0%, 0.1);}
.funraisin-sticky-nav .site-logo {padding: 0px 15px;}

.lump.tab-content .nav-tabs li.active a {color: unset;}


/* Fundraising Pages */
.popup-col h2 {font-size: 24px;}
.popup-col.bg-primary {padding: 30px !important;}

#Badges .row {justify-content: center !important;}
#Badges .reward-badge {padding-top: 10px;padding-bottom: 10px;}
#Badges p {line-height: 130%;}


/* Search Pages */
.fundraiser-search .col-sm-6, .searchPageWrapper .col-sm-6 {width: 100%;}

.txt-uppercase *{
    text-transform: uppercase !important;
}

.toggle-switch.invalid {
	border: none!important;
}

.toggle-switch.invalid {
	border: none!important;
}
.radio-container {
	display: flex;
	gap: 15px;
}

#profileSponsorForm .optin-block.mt10 {
	width: calc(100% + 30px);
	max-width: calc(100% + 30px);
	margin: 0 -15px 15px;
}
#profileSponsorForm .optin_container .col-xs-4.channel_wrapper {
	padding: 0 !important;
}
#profileSponsorForm  .channel_wrapper {
	display: flex;
	gap: 0px;
	flex-wrap: wrap;
	/* flex-direction: column; */
	/* text-align: center; */
}
#profileSponsorForm  .col-xs-4.channel_wrapper .form-group {
	margin: 0;
	padding: 0 !important;
}
#profileSponsorForm  .radio-container {
	display: flex;
	gap:5px;
	flex-direction: column;
}
#profileSponsorForm  .radio-inline {
	margin: 0;
	font-size: 15px;
}

.lump-donationform  .radio-container {
	display: flex;
	gap:0;
	flex-direction: column;
}
.lump-donationform  .radio-container label {
	padding-right: 0;
	padding-bottom: 0;
}
.lump-donationform  .channel_wrapper {
	padding: 0;
}
.lump-donationform .optin_container .optin-block a {
	color: rgb(238, 114, 2)!important;
}
.radio-container:has(input.invalid) input {
	border-color: #FF1616;
	border-width: 2px;
}
.form-validation-inline input[type="radio"]:checked {
	background-color: #EE7202;
}
.template-event-register [id^="m_optin_"] {
	padding-left: 0 !important;
}

.hero-shape{
    position: relative;
}
.hero-shape:before{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 127px), calc(100% - (88.9263573526px)) 100%, 0 100%);
        background-color: var(--brand-primary-lighter);
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 50%;
        top: 0;
    }


.hero-shape_pale:before{
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 127px), calc(100% - (88.9263573526px)) 100%, 0 100%);
        background-color: #fef2e8;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0%;
        top: 0;
    }
    
    .title h2{
        font-size: clamp(32px, 5vw, 42px);
    }
.text-uppercase *{
    text-transform: uppercase;
}