/*##################################################################################################################*/
/*#																							#*/
/*#										Default Values											#*/
/*#																							#*/	
/*##################################################################################################################*/
:root {
	
	/*--MainBackgroundImage: url('andar:dbImage?file=DefaultBackground1.jpg&style=SPRP-Testing-JSCSS') center no-repeat fixed;*/
   	--MainTitle: #005191 !important;
	--MainSubTitle: #fdd631 !important; 
	--PledgeProcess-ActiveTextColor: #4f9ccf !important;
	--PledgeProcess-ActiveBottomBorderColor: #fdd631 !important;
	--PledgeProcess-NonActiveTextColor: #dcdcdc !important;
	--PledgeTypeButton-ActiveTextColor: #ffffff !important;
	--PledgeTypeButton-ActiveBorderColor: #f07100 !important;
	--PledgeTypeButton-ActiveBackgroundColor: #f07100 !important;	
	--PledgeTypeButton-NonActiveTextColor: #686868 !important;	
	--PledgeTypeButton-NonActiveBorderColor: #dddddd !important;	
	--PledgeTypeButton-NonActiveBackgroundColor: #eeeeee !important;		
	--GiveButton-BackgroundColor: #539ed0 !important;
	--GiveButton-TextColor: #ffffff !important;
	--GiveButton-HoverColor: #244f6c !important;
	--GiveButton-SelectedColor: #fdd631 !important;
	--DefaultButton-Color: #043d6a !important;
	--RightContent-Header1: #ffffff  !important;
	--RightContent-DefaultText: #ffffff !important;
	--PledgeImpact-TitleBackgroundColor: rgba(64, 126, 201, 0.7) !important;
	--PledgeImpact-TitleTextColor: #ffffff !important;
	--PledgeImpact-SubTitleTextColor: #407ec9 !important;
	--PledgeImpact-ImpactAmountTextColor: #fdd631 !important;
	--PledgeImpact-ImpactDescriptionColor: #ffffff !important;
	--PledgeFrequencyButton-ActiveTextColor: #ffffff !important;
	--PledgeFrequencyButton-ActiveBackgroundColor: #5fb09d !important;
}







/*################################################## Begin: bootstrap 5 fixes ####################################################*/
 .Body-Page-SinglePageRegPledge select.form-control {
    -webkit-appearance: menulist!important;
    -moz-appearance: menulist!important;
    -ms-appearance: menulist!important;
    -o-appearance: menulist!important;
    appearance: menulist!important;
}



.my-3 {
	margin-top:0.5rem !important;
	margin-bottom:0.5rem !important;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/*################################################## end: bootstrap 5 fixes ####################################################*/












/*##################################################################################################################*/
/*#																							#*/
/*#											Fonts											#*/
/*#																							#*/	
/*##################################################################################################################*/


	@font-face {
	   font-family: 'Roboto';
	   src: url('https://uwfc.upicsolutions.org/servlet/eAndar.WebExtDocument/styleimage/52303A2E645158403C587E3E/Roboto-Regular.ttf') format('truetype');
	   font-weight: normal;
	   font-style: normal;
	}
	@font-face {
	   font-family: 'Montserrat';
	   src: url('https://uwfc.upicsolutions.org/servlet/eAndar.WebExtDocument/styleimage/3B2B6A4D67572C725D747E3E/Montserrat-Regular.ttf') format('truetype');
	   font-weight: normal;
	   font-style: normal;
	}	
	
	@font-face {
	   font-family: 'league_gothicregular';
	   src: url('https://uwfc.upicsolutions.org/servlet/eAndar.WebExtDocument/styleimage/3768702B66314575513C7E3E/LeagueGothic-Regular.ttf') format('truetype');
	   font-weight: normal;
	   font-style: normal;
	}
	
	@font-face {
	   font-family: 'GoldNight';
	   src: url('andar:dbImage?file=Gold+Night.woff2&style=SPRP-Template1-JSCS') format('woff2'),
	       url('https://uwfc.upicsolutions.org/servlet/eAndar.WebExtDocument/styleimage/4E482B3B4D506F496F537E3E/Gold%20Night.woff') format('woff');
	   font-weight: normal;
	   font-style: normal;
	}
	
	@font-face {
	   font-family: 'Kaushan';
	   src: url('https://uwfc.upicsolutions.org/servlet/eAndar.WebExtDocument/styleimage/37684C5E4D45225549487E3E/KaushanScript-Regular.ttf') format('truetype');
	   src: url('https://uwfc.upicsolutions.org/servlet/eAndar.WebExtDocument/styleimage/37684C5E4D45225549487E3E/KaushanScript-Regular.ttf') format('truetype');
	   font-weight: normal;
	   font-style: normal;
	}


/*################################################## End: Fonts ####################################################*/



/*leadership msgs messing up page, so hide and delete with JS.*/
/*.newleaderLevelMsg{display:none;}*/

/*##################################################################################################################*/
/*#																							#*/
/*#										Top Level CSS											#*/
/*#																							#*/	
/*##################################################################################################################*/

	html,
	body {
	   min-height: 100%;
	   height: 100%;
	   min-width: 100%;
	   width: 100%;

	}
	
	body.BodyClass {
	   /*border-left: 2em solid #fff;
	border-right: 2em solid #fff;*/
	}
	
	.GenericMainBody {
	   display: none;
	   /*CSS changes are visible on the page. So, hide container initially and bring back with JS on page ready.*/
	}
	
	.GenericMainBody {
	   background: var(--MainBackgroundImage);
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-attachment: fixed;
	   min-height: 100%;
	   min-width: 100%;
	   width: 100%;
	   padding: 40px !important;
	   box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
	}

	
	
	.GRMainPage .PortletLogo {
	   position: fixed;
	   top: 5px;
	   left: 5px;
	}
	
	/*this is for sign off page where layout is not proper*/
	.Body-Page-signoffPage .GenericResponsive1LArea9.col-md-4 {
	   display: none;
	}
	
	.Body-Page-signoffPage .GRMainContent {
	   width: 100%;
	   padding: 10px;
	}
	
	.Block,
	.BlockHeader,
	.InstructionHeader,
	.WarningHeader,
	.ErrorHeader,
	.TreeHeader {
	   margin: 0;
	   padding: 0;
	}
	
	
	.MenuHeader:before {
	   display: none;
	}
	
	.GenericResponsiveBottom {
	   position: fixed;
	   /*BP-needed so scrolling at bottom does not go beyond area..*/
	   bottom: 0;
	   left: 0;
	   /*BP - added left:0, background pic shows on left side*/
	   /*height: 1.9em; */
	   /*BP-was 2em - cause white thin line at bottom of image.*/
	   background: #fff;
	   width: 100%;
	   z-index: 5;
	}
	
	.GRFooter {
	   text-align: center;
	   position: fixed;
	   /*BP*/
	   bottom: 0.25em;
	   left: 0;
	   /*BP*/
	   width: 100%;
	}
	
	.GRFooter1,
	.GRFooter1 font,
	.GRFooter1 MainStyle,
	.GRFooter1 a {
	   font-size: 12px;
	   color: #ccc;
	}
	

	
	
	.GenericResponsiveTop1 {
	   position: fixed;
	   top: 0;
	   left: 0em;
	   width: 100%;
	   /*border-top: 2em solid #fff;*/
	   z-index: 5;
	}
	
	.GenericResponsiveTop1 .container {
	   width: 100%;
	}
	
	.PortletLogo .Logo img {
	   max-width: 275px !important;
	   max-height: inherit;
	   margin: 0 0 0 0;
	}
	
	
	/*Page Containers*/
	.GRMainPage {
	   padding-top: 2em;
		min-height: calc(100vh - 90px);
		padding-top: 60px;
		padding-bottom: 60px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	.GRMainPage .container {
	   display: flex;
	}
	
	.GRMainTop {
	   display: none;
	}
	
	.GRMainContent {
	   background: #fff;
	   /*rgba(255, 255, 255, 0.95);*/
	   margin: 0;
	   width: 45%;
	   flex-grow: 1;
	   /*margin-bottom: 50px;*/
	   padding: 20px;
	   z-index: 10;
	   position: relative;
	   border-radius: .25rem;
	   align-self: flex-start; /* prevents this div from next div*/
	}
	
	.GRMainBottom.row {
	   flex-grow: 1;
	   width: 55%;
	   margin: 0;
	   padding-top: 8em;
	   padding-left: 50px;
	}
	
	.Section-Survey {
	   /*display: none;*/
	   margin-top: 15px;
	}

	/*Right Side Content*/
	.GRMainBottom.row .col-md-4 {
		display: block;
		width: 100%;
		max-width: 100%;
		flex: 100%;
	}
	
	.GRMainBottom .LFArea.Area-GenericResponsive1LArea9 {
		position: relative;
		float: right;
		width: 425px;
		/*let right content stick when main content on left side beyond view*/
		position: sticky;
		top:75px;
	}
	.GenericResponsiveTop1 .container {
	   max-width: 100%;
	}
	
	.GRMainBottom.row .GenericResponsive1LArea7.col-md-4,
	.GRMainBottom.row .GenericResponsive1LArea8.col-md-4 {
	   display: none;
	}	
	.BlockErrorDetails {
	   /*position: absolute;*/
	   z-index: 8;
	   background: LEMONCHIFFON;
	   width: 100%;
	   padding: 1em;
	   font-size: 14px;
	}
	
	.BlockErrorDetails #error-close {
	   float: right;
	   padding: 0.25em;
	   cursor: pointer;
	}
	.windowheader,
	.HeaderCompTable {
	   display: none;
	}

	
	
	
	/*----------------Begin: Pledge Process indicator------------*/
	#pledge-process-container {
	   margin-top: -20px;
	}
	
	.note.SPRPPlgTop p {
	   display: none;
	}
	
	ul#pledge-process {
	   margin: 2em 0 0 0;
	   padding-left: 0;
	   list-style: none;
	   display: flex;
	}
	
	ul#pledge-process li {
	   flex-grow: 1;
	   text-align: center;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   font-size: 1.8em;
	   color: var(--PledgeProcess-NonActiveTextColor);
	   border-bottom: 7px solid var(--PledgeProcess-NonActiveTextColor);
	}
	
	ul#pledge-process li.active {
	   /* background: #3486bc;*/
	   position: relative;
	   color: var(--PledgeProcess-ActiveTextColor);
	   border-bottom: 7px solid var(--PledgeProcess-ActiveBottomBorderColor);
	}
	/*----------------End: Pledge Process  indicator------------*/
	
/*############################################## End: Top Level CSS ##################################################*/






/*##################################################################################################################*/
/*#																							#*/
/*#								  Main Pledge Page/Registration									#*/
/*#																							#*/	
/*##################################################################################################################*/


	
	.Page-SinglePageRegPledge .Block .BlockDetails {
	   padding: 0 !important;
	}

	#PledgePaymentInfo {
		padding-top: .3em;
		/*padding-bottom: 4em;*/
		margin-bottom: 0;
		z-index: 5;
	}
	#PledgePaymentInfo {
		/*
		positvion: absolute;
		top: 10em;
		left: 0;
		*/
		background: #fff;
		/*padding: 2em 2em 1em 2em;*/
	}
	#PledgePaymentInfo hr {
	   display: none;
	}

	/*BP - make pledge types beside each other*/
	#PledgePaymentInfo > .Block > .BlockDetails .form-check {
		float: left;
	}
	
	/*add left margin to ALL pledge type except first one.*/
	#PledgePaymentInfo > .Block > .BlockDetails .form-check:not(:first-child) {
		margin-left: 30px;
	}

	#PledgePaymentInfo .BlockFooter {
	   margin: 0 auto;
	   /* width: 80%;*/
	}
	#PledgePaymentInfo .IPledgeTable .BlockDetails div.PaymentFrequency .Col-SingleBillingFreq{
	  padding-left:0;
	}

	.Page-SinglePageRegPledge div#PledgePaymentInfo .form-group,
	.Page-SinglePageRegPledge div#PledgePaymentInfo .form-group label{
	  margin-bottom: 0;
	}
	
	/*-------------- Begin:Page Title ----------------*/
	.Page-SinglePageRegPledge h2 {
   		padding: 12px 6px 0px 6px;
	}

	.Page-SinglePageRegPledge h2,
	.Page-SinglePageRegPledge h2 p {
	   font-size: 1.8em;
	   line-height: 1em;
	   color: #4f9ccf;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   text-align: center;
	   margin: 0;
	}


	/*StepUp script requires pledgeamount field to be visible on page, so dont hide field, otherwise script wont work. instead put it outside of view*/
	.Row-PledgeAmount {
		position: absolute;
		left: -10000px;
	}

	#StepupPgmInclude h2,
	#StepupPgmInclude h2 p {
		   font-size: 1.5em;
		   line-height: 1em;
		   color: #000000;
		   text-transform: uppercase;
		   font-family: league_gothicregular;
		   text-align: center;
		   margin: 0;
		  padding: 10px 0px;
		}
	
	.Page-SinglePageRegPledge h2 p {

	}
	
	.Page-SinglePageRegPledge h2 span {
	   font-family: GoldNight;
	   text-transform: lowercase;
	}
	
	/*hide default page title*/
	.SPRPledgeTitle {
	   display: none;
	}
	
	#SPRP-title,
	#SPRP-title p {
	   font-size: 3.5em;
	   line-height: 1em;
	   color:var(--MainTitle);
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   text-align: center;
	   margin: 0;
	}
	
	#SPRP-title span {
	   font-family: Kaushan;
	   text-transform: lowercase;
	   font-size: .7em;
	   font-weight: bold;
	   color: var(--MainSubTitle);
	}
	
	#PledgePaymentInfo .BlockHeader {
	   display: none;
	}
	
	#PledgePaymentInfo .radio {
	   display: none;
	}
	
	/*--------------End:Page Title-----------------*/


	/*----------------Begin: Registration form-------------------*/
	form#RegisterForm section.Block {
	   position: relative;
	}
	
	form#RegisterForm section.Block section.BlockDetails {
		/*
		position: absolute;
		top: 10em;
		left: 0;
		*/
		background: #fff;
		padding: 2em 2.5em 0em 2.5em;
	}
	
	
	
	/*hide the pledge entry section and update with newPledgeField that was created.
	.PledgeEntrySection class seems to be on latest SP build but not on cust. In which case, hide each section */
	.PledgeEntrySection,
	#CCPayment,
	#BMPayment,
	#SecPayment,
	#CCPPayment,
	#ACHPayment,
	#ACHPPayment,
	#PPXCPayment {
	   /*display: none !important;*/
	}
	.PledgeEntrySection .IPledgeTable .BlockDetails > span {
		display: none;
	}
	.PledgeEntrySection .IPledgeTable .BlockDetails .Row-PledgeAmount{
		/*display: none;*/
	}
	.PledgeEntrySection .IPledgeTable .BlockDetails .col-sm-3,
	.PledgeEntrySection .IPledgeTable .BlockDetails .col-sm-9{
		padding-top:5px;
		padding-bottom:5px;
	}
	.PledgeEntrySection .IPledgeTable .BlockDetails .col-sm-3 p{
		margin-bottom:0;
	}
	
	/*fix col width so label does not wrap*/
	.IPledgeTable .BlockDetails .col-sm-3{
		max-width:40%;
		flex:40%;
	}
	.IPledgeTable .BlockDetails .col-sm-9{
		max-width:60%;
		flex:60%;
	}
	

	.IPledgeTable {
		/*border-top: 2px solid #f0f0f0;*/
		/*border-bottom: 2px solid #f0f0f0;*/
		/*padding: 0 0 10px 0;*/
		margin: 0 0 15px 0;
	}

	#CCPayment header,
	#CCPayment .Row-PledgeAmount label {
	   display: none;
	}
	
	#CCPayment .Row-PledgeAmount label+.col-sm-9,
	#CCPayment .Row-PledgeAmount label+.col-sm-9 input {
	   min-width: 100%;
	}
	
	
	#StarRequiredNote {
		margin-top: 5px;
		font-size: 15px;
	}
	.FlagTable {
		margin: 20px 0;
		font-size: 15px;
	}
	#StarRequiredNote .offset-sm-3 {
	   margin-left: 0;
	}
	
	#StarRequiredNote .offset-sm-3.col-sm-9 {
	   flex: 100%;
	   max-width: 100%;
	}	
	form#RegisterForm {
		margin-bottom:0;
		font-size: 15px;
	}
	
	form#RegisterForm section.Block section.BlockDetails label.control-label {
	   display: block;
	   width: 100%;
	}
	
	form#RegisterForm section.Block section.BlockDetails label.control-label+.col-sm-9 {
	   display: block;
	   width: 100%;
	}
	

	
	form#RegisterForm input,
	form#RegisterForm select{
	   /*background: #ffffff; */ /*bootstrap 5 - remove*/
	   /*border-radius: 0;*/
	   /*box-shadow: none;*/
	   /*font-size: 1.25em;*/
	   /*height: auto;*/
	   /*causing issues with field heights*/
	}
	
	form#RegisterForm section.Block section.BlockDetails .col-sm-offset-3.col-sm-9 {
	   margin-left: 0;
	   width: 100%;
	}
	.Page-SinglePageRegPledge #CCAmountRadios input#ccAmountDisplay {
	   padding: 25px;
	}
	
	.Page-SinglePageRegPledge #CCAmountRadios .input-group-prepend {
	   display: none;
	}	
	
	.Body-Page-SinglePageRegPledge div#NameFirstName,
	.Body-Page-SinglePageRegPledge div#NameLastName,
	.Body-Page-SinglePageRegPledge div.Col-City,
	.Body-Page-SinglePageRegPledge div.Col-State{
	   width: 50%;
	}
	
	.UserRegistrationSecCode,
	.UserRegistrationSecCode+.note {
	   margin: 0 auto;
	   /*width: 90%;*/
	   margin-bottom: 0;
	}	
	.Col-NamePrefix,
	.Col-NameMiddleName,
	.Col-NameSuffix,
	.Col-AddressLine3,
	.Col-AddressLine4 {
	   display: none !important;
	}
	
	/*fix zipcode long label causing city, state fields to misalign.pushes it down to next row*/
	.form-group.col-sm.Col-Input.Col-ZipCode {
	   flex-basis: auto;
	}
	/*----------------End: Registration form-------------------*/
	

	/*-------------Begin: Give AMount Buttons-------------*/
	#GiveButtonContainer {
	   /*width: 102%;*/
	   clear: both;
	   padding: 10px 0px 10px 0px;
	   /*margin-left: -5px;*/
	}
	
	#GiveButtons {
	   display: flex;
	   flex-wrap: wrap;
	   /*compensate for margins on givebuttons so it aligns with other elements*/
	   margin-left: -5px;
	   /*compensate for margins on givebuttons so it aligns with other elements*/
	   margin-right: -5px;
	   
	}
	
	.GiveButton {
	   flex-grow: 1;
	   width: 33.333333%;
	
	}
	
	.GiveButton a {
	   text-align: center;
	   background: var(--GiveButton-BackgroundColor)	 /*#eb6f0a*/	   ;
	   color: var(--GiveButton-TextColor);
	   display: block;
	   margin: 5px;
	   font-family: league_gothicregular;
	   font-size: 2.5em;
	   text-decoration: none;
	}
	
	.GiveButton a:focus,
	.GiveButton a:hover,
	.GiveButton a.active {
	   text-decoration: none;
	   background: var(--GiveButton-HoverColor)	       /*#4f9ccf*/  ;
	}
	
	.GiveButton.last-child {
	   max-width: 33.333333%;
	}
	
	.GiveButton.selected a {
	   text-decoration: none;
	   background: var(--GiveButton-SelectedColor);
	}
	#newPledgeContainer {
	   flex-grow: 1;
	   width: 66.666666%;
	}
	
	#newPledgeContainer input#newPledgeField,
	#newPledgeContainer .newPledgeField{
	   /*max-width: 94.5%;*/
	   /*BP-removed not necessary*/
	   height: 57px;
	   margin: 5px;
	   border-radius: 0;
	   border: 4px solid #969696;
	   font-family: league_gothicregular;
	   font-size: 2em;
	   padding: 0.25em;
	   color: #969696;
	}

	.Row-PledgeAmount {
		/*display:none;*/ /*this is for JS to move input fields to the giveButton area*/
	}
	
	
	/*-------------End: Give AMount Buttons-------------*/

	
	/*----------------Begin: REcurring option-------------*/
	#RecurError {
	   clear: both;
	   font-size: 1em;
	   padding-left: 0;
	   padding-right: 0;
	   margin-bottom: 1em;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   margin: 0;
	   font-size: 1.5em;
	   font-weight: 300;
	}
	
	.rrFrequency {
	   clear: both;
	}
	
	.RecurPledgeCC {
	   margin: 0 auto;
	   /*width: 90%;*/
	}
	
	.RecurPledgeCC h2 p {
	   font-size: 1.1em;
	   text-align: left;
	}
	
	.rrRepeat label {
	   display: block;
	   float: none;
	   width: 100%;
	   font-family: league_gothicregular;
	   text-align: center;
	   margin: 0;
	   font-size: 1.35em;
	   font-weight: 300;
	   color: #969696;
	}
	
	.rrRepeat label input {
	   margin-right: 8px;
	}
	
	.rrRepeat label+div {
	   display: none;
	}
	
	#div-rrCreateForm {
	   margin: 10px;
	}
	
	.rrFrequency label,
	.rrStartDate label,
	.rrFrequency label+div,
	.rrStartDate label+div {
	   display: block;
	   width: 100%;
	   float: none;
	}
	
	.rrFrequency label,
	.rrStartDate label {
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   color: #4f9ccf;
	   margin: 0;
	   font-size: 1.75em;
	   font-weight: 300;
	}
	
	.rrFrequency label+div select,
	.rrStartDate label+div input {
	   height: 60px;
	   border-radius: 0;
	   border: 4px solid #969696;
	   font-family: league_gothicregular;
	   font-size: 2em;
	   padding: 0.25em;
	   color: #969696;
	}
	/*----------------End: REcurring option-------------*/

	/*when steup is turned on, add spacing at bottom*/
	#StepupPgmInclude {
		margin-bottom: 15px;
	}

/*#################################### End: Main Pledge Page/Registration ###########################################*/







/*##################################################################################################################*/
/*#																							#*/
/*#										Right Content											#*/
/*#																							#*/	
/*##################################################################################################################*/

	#right-desc-defaulttext {
	   padding: 5px 0 10px 0 !important;
	   color:var(--RightContent-DefaultText);
	   font-size: 2em;
	   padding: 1em 0;
	   overflow: auto;
	   font-weight: bold;	   
	}
	
	#landing-right-content {
	   text-align: center;
	}
	
	#landing-right-content h1 {
	   color: var(--RightContent-Header1);
	   font-size: 5em;
	   padding: 0.0em;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   display: inline-block;
	
	}
	
	#landing-right-content h2 {
	   /*background: #eb6f0a;*/
	   color: #fff;
	   font-size: 3em;
	   padding: 0;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   display: inline-block;
	   margin-left: 25px;
	   margin-top: -25px;
	}
	

	#landing-right-content .right-desc h3 {
	   margin-top: 0;
	   font-family: league_gothicregular;
	   font-size: 2em;
	   color: #4f9ccf;
	}
	
	.ImpactStories h1,
	#name-right-content h1,
	#submit-right-content h1 {
	   background: var(--PledgeImpact-TitleBackgroundColor);
	   color: var(--PledgeImpact-TitleTextColor);
	   font-size: 3.5em;
	   padding: 0.25em;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   display: inline-block;
	   margin: 0;
	   width: 100%;
	   text-align: center;
	   border-top-left-radius: .25rem;
	   border-top-right-radius: .25rem;
	}

	.PledgeImpactArticle img{
		width:100%;
		margin:0;
		padding:0;
	}
	
	.PledgeImpact,
	#name-right-content {
	   display: none;
	   background: rgb(0, 0, 0, .4);
	   border-radius: .25rem;
	   margin-bottom: 25px;
	}
	
	.ImpactStories h2,
	#name-right-content h2,
	#submit-right-content h2 {
	   /*background: rgba(0, 0, 0, 0.4);*/
	   color: #fdfdfd;
	   font-size: 3em;
	   padding: 0.25em;
	   /* text-transform: uppercase; */
	   font-family: league_gothicregular;
	   display: inline-block;
	   margin: 0;
	   width: 100%;
	   text-align: center;
	}
	
	.ImpactStories .right-desc,
	#name-right-content .right-desc,
	#submit-right-content .right-desc {
	   /*background: #fff;*/
	   color: #ffffff;
	   font-size: 1.25em;
	   padding: 0 10px 10px 10px;
	   font-weight: bold;
	   margin-top: 4px;
	   /*background: url('andar:dbImage?file=right-bg.png&style=UWGPSNJ+GiveNow+2021') center;*/
	   background-size: cover;
	   overflow: auto;
	   text-align: center;
	}

	.ImpactStories .right-desc h3,
	#name-right-content .right-desc h3,
	#submit-right-content .right-desc h3 {
	   margin-top: 0;
	   font-family: league_gothicregular;
	   font-size: 2em;
	   color: var(--PledgeImpact-SubTitleTextColor);
	}

	
	.impact-amount {
	   font-size: 3em;
	   font-family: league_gothicregular;
	   font-weight: 300;
	   text-align: center;
	   color: var(--PledgeImpact-ImpactAmountTextColor);
	}
	
	.impact-desc {
	   /* padding-left: 15px;
	float: left;
	width: 70%;
	display: table;
	height: 120px;
	*/
	   text-align: center;
	   color: var(--PledgeImpact-ImpactDescriptionColor);
	   font-weight: bold;
	}
	
	.impact-desc-inner {
	
	   /*
	display: table-cell;
	vertical-align: middle;*/
	   display: block;
	}
	
	.impact-desc p,
	.impact-desc p span {}
	
	h3.thankyou {
	   text-align: center;
	   font-family: GoldNight !important;
	   font-size: 4.00em !important;
	   margin-top: 0em !important;
	}
	.Body-Page-SPRPThankyou .right-desc {
	   /*background: #fff;*/
	   color: #757575;
	   font-size: 1em;
	   padding: 1em;
	   font-weight: bold;
	   margin-top: 1.5em;
	   /* background: url('andar:dbImage?file=right-bg.png&style=UWGPSNJ+GiveNow+2021') center; */
	   background-size: cover;
	   overflow: auto;
	   /*max-width: 375px;*/
	   margin: 0 auto;
	   margin-top: 15px;
	   margin-bottom: 25px;
	}


	/*for Epledge Impact */
	.ImpactFactors {
	   display: none;
	}
	
	.PledgeImpact {
	   display: none;
	}

/*############################################# End: Right Content ################################################*/






/*##################################################################################################################*/
/*#																							#*/
/*#										Buttons												#*/
/*#																							#*/	
/*##################################################################################################################*/
	.DefaultButtons .button,
	.button {
	   background-color: var(--DefaultButton-Color);
	   color: #ffffff;
	   margin: 5px 0;
	}
	.DefaultButtons .button:hover {
		color: #ffffff;

	}
	
	#landing-buttons {
	   margin: 0px auto;
	}
	
	#previousButton {
	   display: none;
	   margin-bottom: 10px !important;
	}
	
	#landing-buttons div,
	#name-proceed,
	#previousButton,
	nav.Navigation li.Confirm a, 
	nav.Navigation li.GoLogin a, 
	.PledgeNavigation .Print a {
	   /*border: 3px solid #eb6f0a;*/
	   padding: 0.3em;
	   margin-bottom: 0.3em;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   font-size: 1.75em;
	   letter-spacing: 1px;
	   cursor: pointer;
	   text-align: center;
	   margin: 0 auto;
	   border-radius: 3px;
	}	
	/* bootstrap v5 update - was nav.form-group.Navigation */
	nav.Navigation ol{
		margin-bottom:0px	;
		padding: 0 ; /* bootstrap v5 update - .row adds padding */
	
	}
	/* bootstrap v5 update - was nav.form-group.Navigation */
	nav.Navigation li.Confirm a,
	nav.Navigation li.GoLogin a, 
	.PledgeNavigation .Print a {
	   width: 100%;
	   border: 0;
	   outline: none;
	   box-shadow: none;
	   color: #fff;
	   /*background: #eb6f0a no-repeat;*/
	   /* background-image: url('andar:dbImage?file=up-hand-drawn-arrow_1563376+copy+20.png&style=UWGPSNJ+GiveNow+2021');*/
	   background-position-y: center;
	   background-position-x: 6.5em;
	}
	/* bootstrap v5 update - was nav.form-group.Navigation */
	nav.Navigation li.Clear.ClearForm { 
	   display: none;
	}
	.PledgeNavigation {
	   margin: 0 auto;
	   width: 100%;
	
	}
	
	.PledgeNavigation ol {
	   margin-bottom:0;
	}
	
	/* bootstrap v5 update - was nav.form-group.Navigation */
	nav.Navigation li.Confirm a, 
	nav.Navigation li.GoLogin a{
	
	   background-position-x: 5.8em;
	}
	
	/* bootstrap v5 update - was nav.form-group.Navigation */
	nav.Navigation,
	.PledgeNavigation .Print,
	#previousButton {
	   margin: 0 auto;
	   /*width: 90%;*/
	   margin-bottom: 0;
	}
	#landing-proceed {
	   color: #fff;
	   /* background-image: url('andar:dbImage?file=up-hand-drawn-arrow_1563376+copy+20.png&style=UWGPSNJ+GiveNow+2021');*/
	   background-position-y: center;
	   background-position-x: 0.5em;
	}
	
	#tribute-gift {
	   background: #fff no-repeat;
	   /* background-image: url('andar:dbImage?file=up-hand-drawn-arrow_1563376+copy+22.png&style=UWGPSNJ+GiveNow+2021');*/
	   background-position-y: center;
	   background-position-x: 0.5em;
	   color: #eb6f0a;
	}
	
	#name-proceed {
	   text-align: center;
	   padding-left: 0.5em;
	   background: #eb6f0a no-repeat;
	   color: #fff;
	   /* background-image: url('andar:dbImage?file=up-hand-drawn-arrow_1563376+copy+20.png&style=UWGPSNJ+GiveNow+2021');*/
	   background-position-y: center;
	   background-position-x: 6.5em;
	}


/*############################################## End: Buttons ####################################################*/





/*##################################################################################################################*/
/*#																							#*/
/*#										Cyber Soruce											#*/
/*#																							#*/	
/*##################################################################################################################*/

	.Page-CybsSACheckout .Section-ePayment h1 {
	   display: none;
	}
	.Page-CybsSACheckout h2 {
	   margin: 1em auto;
	   width: 90%;
	   display: none;
	}
	.Body-Page-CybsSACheckout .Section-ePayment .BlockDetails {
	   margin: 10px auto;
	   width: 100%;
	}
	
	.Body-Page-CybsSACheckout .Section-ePayment .BlockDetails form .col-sm-3 {
	   flex: 0 0 40%;
	   max-width: 40%;
	}
	
	.Body-Page-CybsSACheckout .Section-ePayment .BlockDetails form .col-sm-9 {
	   flex: 0 0 60%;
	   max-width: 60%;
	}
	
	.Body-Page-CybsSACheckout #submit-right-content {
	   background-color: #ffffff;
	}
	
	
	.Body-Page-CybsSACheckout .col-sm-3,
	.Body-Page-CybsSACheckout .col-sm-9,
	.Body-Page-CybsSACheckout form[name=SAChkout] input,
	.Body-Page-CybsSACheckout form[name=SAChkout] select{
	  font-size: 15px;
	}
	
	.Body-Page-CybsSACheckout form[name=SAChkout] .form-group {
	  margin-bottom:5px
	}
	
	.Body-Page-CybsSACheckout form[name=SAChkout] input{
		border-radius:2px;
	}
	
	.Page-CybsSACheckout .PledgeNavigation {
	   margin: 0 auto;
	}
	.Body-Page-CybsSACheckout .PledgeNavigation li {
	   flex-grow: 1;
	   width: 50%;
	}
	
	.Body-Page-CybsSACheckout .PledgeNavigation ol {
	   display: flex;
	   flex-wrap: wrap;
	   margin-top: 5px;
	}
	
	.Page-CybsSACheckout .PledgeNavigation a.button,
	.Page-CybsSAClose .PledgeNavigation a.button {
	   /*width: 100%;*/
	   border: 0;
	   outline: 0;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   font-size: 25px;
	   text-align: center;
	   color: #fff;
	   /*background-image: url('andar:dbImage?file=up-hand-drawn-arrow_1563376+copy+20.png&style=UWGPSNJ+GiveNow+2021');*/
	   background-position-y: center;
	   background-position-x: 33%;
	   display: block;
	   margin: 5px;
	   letter-spacing: 1px;
	}
	
	.Page-CybsSACheckout .PledgeNavigation a.button:hover,
	.Page-CybsSAClose .PledgeNavigation a.button:hover {
	   box-shadow: none;
	}
	.Body-Page-CybsSACheckout .Page-CybsSACheckout form .Col-Display {
		/* vertical-align: middle; */
		display: inline;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-direction: column;
	}
	
	.Body-Page-CybsSACheckout form .Col-Display p {
		margin-bottom: 0;
	}
	
	.Body-Page-CybsSACheckout select#card_expiry_date_mm,
	.Body-Page-CybsSACheckout select#card_expiry_date_yyyy {
		width: inherit;
	}	
	#cyber-heading h1 {
	   padding: 0.35em 0;
	   font-size: 56px;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   text-align: center;
	   margin: 0;
	   color: #4f9ccf;
	}
	
	#cyber-heading h1 span {
	   font-family: GoldNight;
	   text-transform: lowercase;
	}
	
	#cyber-heading+script+h1 {
	   display: none;
	}
/*########################################### End: Cyber Soruce ##################################################*/




/*##################################################################################################################*/
/*#																							#*/
/*#								Cyber Soruce Exit without completing								#*/
/*#																							#*/	
/*##################################################################################################################*/
	
	/*hide all these*/
	.Body-Page-CybsSAClose #GiveButtonContainer,
	.Body-Page-CybsSAClose #landing-right-content,
	.Body-Page-CybsSAClose #landing-buttons,
	.Body-Page-CybsSAClose #name-buttons {
	   display: none;
	}
	
	.Body-Page-CybsSAClose form[name=CybsSAClose]{
	  margin-bottom:0;
	}
	
	
	/*but show the thank you */
	.Body-Page-CybsSAClose #submit-right-content {
	   display: block !important;
	   background-color: #ffffff;
	}
	
	.Body-Page-CybsSAClose form .ConfirmClose {
	   padding: 20px 0;
	   min-height: 250px;
	}
/*################################### End: Cyber Soruce Exit without completing ####################################*/







/*##################################################################################################################*/
/*#																							#*/
/*#										Thank You Page											#*/
/*#																							#*/	
/*##################################################################################################################*/
	.Body-Page-SPRPThankyou .Area-Pledge {
	   padding: 15px 0;
	   padding-bottom:0;
	}
	
	.Body-Page-SPRPThankyou .Area-Pledge .Page-SPRPThankyou h2,
	.Body-Page-SPRPThankyou .Area-Pledge .Page-SPRPThankyou .h2 {
	   font-size: 20px;
	}
	/*hide the font awesome icon on thank you page that comes from web note for pledge type.*/
	.Body-Page-SPRPThankyou table.PledgeSummary .Row-PledgeType i{
	  display: none;
	}
	.Body-Page-SPRPThankyou #MainContent {
	   margin-top: 0px;
	}
	
	.Body-Page-SPRPThankyou .right-desc {
	   margin-bottom: 25px;
	}
	/*Thank you page - hide all the content except thank you notice*/
	.Body-Page-SPRPThankyou #GiveButtonContainer,
	.Body-Page-SPRPThankyou #landing-buttons,
	.Body-Page-SPRPThankyou #landing-right-content {
	   display: none;
	}
	
	.Body-Page-SPRPThankyou #submit-right-content {
	   display: block !important;
	   background-color: #fff;
	}
/*-----------------------------------------------End: Thank You Page -----------------------------------------------*/








/*##################################################################################################################*/
/*#																							#*/
/*#										Mobile												#*/
/*#																							#*/	
/*##################################################################################################################*/

	@media (max-width: 1100px) {
	
	   .GRMainContent {
	       width: 100%;
	       margin-bottom: 0;
	   }
	
	   .GRMainBottom.row {
	       width: 100%;
	       padding-left: 0;
	       padding-top: 4em;
	   }
	
	   .GRMainBottom.row .col-md-4 {
	       display: block;
	       width: 100%;
	       flex: 100%;
	       max-width: 100%;
	       padding: 0;
	   }
	
	   .GRMainPage .container {
	       display: block;
	   }
	
	   .GRMainBottom .LFArea.Area-GenericResponsive1LArea9 {
	       position: relative;
	       width: 100% !important;
	       float: none !important;
	       margin: 0 auto;
	       margin-top: 40px;
	       padding: 0;
	       top:auto;
	       z-index: 2222;
	   }
	
	   .GRFooter {
	       position: inherit;
	   }
	
	   #landing-right-content-h1 {
	       font-size: 5em;
	   }
	
	   #landing-right-content-h2 {
	       font-size: 2.5em !important;
	   }
	
	   .ImpactStories h1,
	   #name-right-content h1,
	   #submit-right-content h1 {
	       font-size: 3em !important;
	   }
	
	   .ImpactStories h2,
	   #name-right-content h2,
	   #submit-right-content h2 {
	       font-size: 2em !important;
	   }
	
	   .ImpactStories .right-desc {
	       background: #e6e9f0;
	       border: 2px solid #ccc;
	       margin-top: 10px;
	       font-size: 1.25em;
	       padding: .5em;
	   }
	
	   .ImpactStories .impact-amount {
	       font-size: 3em;
	       display: block;
	       width: 100%;
	       text-align: center;
	       padding: 0;
	       border-right: none;
	       color: #539ed0;
	   }
	
	   .ImpactStories .impact-desc p,
	   .ImpactStories .impact-desc {
	       padding-left: 0;
	       color: #3c3535 !important;
	       width: 100%;
	       text-align: center;
	       font-size: 1em;
	       font-weight: normal;
	       height: auto;
	   }
	
	   #landing-right-content .right-desc {
	       font-size: 1em;
	   }
	
	   .ImpactStories .right-desc h3,
	   #name-right-content .right-desc h3,
	   #submit-right-content .right-desc h3 {
	       font-size: 2em;
	   }
	
	   .ImpactStories .right-desc,
	   #name-right-content .right-desc,
	   #submit-right-content .right-desc {
	       font-size: 1em;
	       font-weight: normal;
	   }
	
	   #SPRP-title,
	   #SPRP-title p {
	       font-size: 2.7em;
	   }
	

	}
	
	/*Small devices (landscape phones, less than 768px)*/
	@media (max-width: 768px) {
	
	   #PledgePaymentInfo {
	       /*padding: 15px ;*/
	   }
	
	   .GiveButton {
	       /* width: 50%;*/
	   }
	
	   .GiveButton.last-child {
	       max-width: 50%;
	   }
	
	   #newPledgeContainer {
	       /*width: 50%;*/
	   }
	
	   #CCAmountRadios {
	       width: 50%;
	   }
	
	   #CCAmountRadios input#ccAmountDisplay {
	       /*max-width: 85%;*/
	       /*BP-removed not necessary*/
	   }
	
	   #PledgePaymentInfo .BlockFooter {
	       /*padding-bottom: 1em;*/
	   }
	
	
	   .GRMainBottom.row {
	       padding-top: 50px;
	       margin-bottom: 50px;
	   }
	
	   .GenericMainBody {
	       padding: 40px 15px !important;
	   }


	
	}
	
	
	@media (max-width: 480px) {
	
	   #landing-right-content h1 {
	       /* background: #4f9ccf; */
	       color: #fff;
	       font-size: 4em !important;
	   }
	
	   #GiveButtonContainer {
	      /* width: 105%;
	       margin-left: -2.5%;*/
	       clear: both;
	   }
	
	   .form-check.ACH {
	       margin-left: inherit;
	   }
	
	   body.BodyClass {
	       border-left: 0;
	       border-right: 0;
	   }
	
	   .GRMainContent {
	       padding: 15px 10px;
	   }
	
	   .GenericResponsiveTop1 {
	       border-top: none;
	       z-index: 0;
	   }
	
	   .GRMainPage {
	       padding-top: 5em;
	       z-index: 1;
	       position: relative;
	   }
	
	   #PledgePaymentInfo {
	       padding: 5px;
	   }
	
	   .PortletLogo .Logo img {
	       max-height: inherit;
	       /*margin: -10px 0 0 -10px;*/
	   }
	
	   .GRMainPage .PortletLogo {
	       top: 20px;
	       left: 20px;
	   }
	
	   .GRMainPage .container {
	       padding: 0;
	   }
	
	   .GiveButton a {
	       margin: 5px;
	   }
	
	   #newPledgeContainer input#newPledgeField {
	       /* max-width: 94.5%; */
	       margin: 5px;
	   }
	
	   .GenericResponsiveBottom {
	       position: inherit;
	       background: none;
	   }
	}


/*----------------------------------------------End: Mobile ------------------------------------------------------*/









/*##################################################################################################################*/
/*#																							#*/
/*#									Show all donors Article										#*/
/*#																							#*/	
/*##################################################################################################################*/

	.Body-Page-Article #MainContent #SPRP-title,
	.Body-Page-Article #MainContent #pledge-process-container,
	.Body-Page-Article #MainContent .Page-Article .Section-ArticleSharing,
	.Body-Page-Article .GRMainBottom.row {
	   display: none;
	}
	
	.Body-Page-Article #MainContent .Page-Article h1 {
	   color: #005191 !important;
	   font-size: 2.5em;
	   line-height: 1em;
	   color: #005191;
	   text-transform: uppercase;
	   font-family: league_gothicregular;
	   text-align: center;
	   margin: 0;
	}
	
	.Body-Page-Article .GRMainContent {
	   background: #fff;
	   margin: 0;
	   width: 80%;
	   flex-grow: 1;
	   margin-bottom: 50px;
	   padding: 15px 25px;
	   z-index: 3;
	   position: relative;
	   margin: 0 auto;
	   max-height: 600px;
	   position: relative;
	   overflow-y: scroll;
	}
	
	.Body-Page-Article .GRMainPage .container {
	   display: block;
	}

/*---------------------------------------End: Show all donors Article---------------------------------------------*/








/*##################################################################################################################*/
/*#																							#*/
/*#										Optional add-ons										#*/
/*#																							#*/	
/*##################################################################################################################*/


/*---------------------------------------Begin: Pledge type buttons----------------------------------*/
	#PledgePaymentInfo .BlockDetails  > div.form-check input[type="radio"] {
	   display: none !important;
	}
	
	#PledgePaymentInfo .BlockDetails > div.form-check input[type="radio"]:checked+label {
		background-color: var(--PledgeTypeButton-ActiveBackgroundColor);
		border: 1px solid var(--PledgeTypeButton-ActiveBorderColor);
		color: var(--PledgeTypeButton-ActiveTextColor);	  
		cursor: pointer;	   
		background-color: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		text-shadow: none;
		font-weight: bold;
	}
	

	#PledgePaymentInfo .BlockDetails  > div.form-check input[type="radio"] + label {
		width: 100%;
		padding: 1em;
		line-height: 1.4;
		-webkit-transition: 0.35s ease-in-out;
		-moz-transition: 0.35s ease-in-out;
		-o-transition: 0.35s ease-in-out;
		transition: 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
		cursor: pointer;
		white-space: nowrap !important;
		margin-bottom: 0;
		text-align: center;
		border-radius: 0;
		font-size: 15px;
		background-color: var(--PledgeTypeButton-NonActiveBackgroundColor);
		border: 1px solid var(--PledgeTypeButton-NonActiveBorderColor);
		color: var(--PledgeTypeButton-NonActiveTextColor);

		
	}	
	
	#PledgePaymentInfo > .Block > .BlockDetails {
	   display: flex;
	   flex-wrap: wrap;
	   gap:3px;
	}
	
	#PledgePaymentInfo > .Block > .BlockDetails .form-check {
	   padding-left: 0;
	   flex-grow: 1;
	   width: 25%;
	}
	
	#PledgePaymentInfo > .Block > .BlockDetails .form-check {
	   margin-left: 0px !important;
	}
	
	#PledgePaymentInfo > .Block > .BlockDetails input[type="radio"]+label i {
	   	padding-right: 0.3em;
		font-size: 25px;
		vertical-align:middle;
	   
	}

/*---------------------------------------End: Pledge type buttons----------------------------------*/


/*--------------------------------Begin: Pledge type frequency buttons-----------------------------*/
	.IPledgeTable .BlockDetails  .Row-BillingFrequency .form-check input[type="radio"], 
	.IPledgeTable .BlockDetails  .row.PaymentFrequency .form-check input[type="radio"],
  	.IPledgeTable .BlockDetails  .row.Row-ReminderFreqency .form-check input[type="radio"]{
		display: none;
	}
		
	.IPledgeTable .BlockDetails  .Row-BillingFrequency .form-check input[type="radio"]:checked+label, 
  	.IPledgeTable .BlockDetails  .row.PaymentFrequency .form-check input[type="radio"]:checked+label,
	.IPledgeTable .BlockDetails  .row.Row-ReminderFreqency .form-check input[type="radio"]:checked+label{
		background-color: var(--PledgeFrequencyButton-ActiveBackgroundColor);
		color: var(--PledgeFrequencyButton-ActiveTextColor);	  /* border-color: #db7112;*/
		cursor: pointer;	   /*remove inset box shadow for selected pledge*/
		background-color: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		text-shadow: none;
		
	}
	.IPledgeTable .BlockDetails .col-sm-9.Col-Table.Col-BillingFreq,
  	.IPledgeTable .BlockDetails .col-sm-9.Col-Table.Col-PaymentFreq,
	.IPledgeTable .BlockDetails .col-sm-9.Col-Table.Col-ReminderFreq{
		/*display: flex;
		flex-wrap: wrap;*/
		display: grid;
		grid-auto-flow: column;
		grid-column-gap: 2px;
		max-width: 100%;
	}
	.IPledgeTable .BlockDetails  .Row-BillingFrequency .form-check, 
  	.IPledgeTable .BlockDetails  .row.PaymentFrequency .form-check,
	.IPledgeTable .BlockDetails  .row.Row-ReminderFreqency .form-check{
		padding-left: 0;
		flex-grow: 1;
		width: 100%;
		float: left;
	}
	.IPledgeTable .BlockDetails  .Row-BillingFrequency .form-check input[type="radio"] + label,
  	.IPledgeTable .BlockDetails  .row.PaymentFrequency .form-check input[type="radio"] + label,
	.IPledgeTable .BlockDetails  .row.Row-ReminderFreqency .form-check input[type="radio"] + label{
		width: 100%;
		padding: 10px;
		line-height: 1.4;
		background-color: #f9f9f9;
		/* border: 1px solid #e5e5e5; */
		-webkit-transition: 0.35s ease-in-out;
		-moz-transition: 0.35s ease-in-out;
		-o-transition: 0.35s ease-in-out;
		transition: 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
		color: #686868;
		cursor: pointer;
		white-space: nowrap !important;
		margin-bottom: 0;
		background-color: #eeeeee;
		text-align: center;
		/* float: left; */
		border-radius: 0;
		font-size: 15px;
		/*! border: 1px solid #ddd; */
	}	
	
	@media (max-width: 768px) {
		
		/*fix left/right spacing for elements inside IpledgeTable*/
		#RegisterForm.form-horizontal .IPledgeTable .BlockDetails  .row{
			margin-left: -15px !important;
			margin-right: -15px !important;
		}
	}
/*--------------------------------End: Pledge type frequency buttons-----------------------------*/


/*--------------------------------Begin: Form fields with icons------------------------------------*/

	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow > .AddressLines > .row{
		margin-top: .5rem !important;
		margin-bottom: .5rem !important;
	}
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .IndEMail input,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #nameRow input,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow input,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow select,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow input {
	   padding-left: 45px;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails input,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails select {
	   font-size: 14px;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .input-icon i {
	   color: #99afbd; /*#4f9ccf*/
	   line-height: 35px;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .input-icon {
	   position: absolute;
	   top: 0;
	   left: 5px;
	   width: 38px;
	   height: 35px;
	   line-height: 35px;
	   text-align: center;
	   pointer-events: none;
	   /* background-color: #dfdada; */
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .Col-IndEMail .input-icon {
	   left: 15px;    /* padding is different for this field. so adjust accordingly.*/
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .input-icon::after {
	   position: absolute;
	   top: 4px;
	   bottom: 4px;
	   left: 37px;
	   display: block;
	   border-right: 1px solid #d2d2d2;
	   content: "";
	   -webkit-transition: 0.35s ease-in-out;
	   -moz-transition: 0.35s ease-in-out;
	   -o-transition: 0.35s ease-in-out;
	   transition: 0.35s ease-in-out;
	   transition: all 0.35s ease-in-out;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .IndEMail .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .IndEMail .col-sm-9,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #nameRow .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #nameRow .col-sm-9,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow .col-sm-9,

	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow .col-sm-9,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoGender .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoGender .col-sm-9,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoBirth .col-sm-3,
  	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoBirth .col-sm-9{
	   flex: 100%;
	   width: 100%;
	   max-width: 100%;
	
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .IndEMail .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #nameRow .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoGender .col-sm-3,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoBirth .col-sm-3{
	   color: #4f9ccf;
	   font-size: 14px;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow .col-sm-9 .Col-PhoneArea {
	   flex: 25%;
	   width: 25%;
	   max-width: 25%;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow .col-sm-9 .Col-PhoneNumber {
	   flex: 50%;
	   width: 50%;
	   max-width: 50%;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow .col-sm-9 label,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #nameRow .col-sm-9 label,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow .col-sm-9 label {
	   display: none;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .form-group input,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .form-group select{
	   margin-bottom: 5px;
	   border-radius: 2px;
	   padding-left:45px;
	}
	
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .form-group input:active,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .form-group input:focus,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .form-group select:active,
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .form-group select:focus {
	   border: 2px solid #fdd631;
	}
	
	.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .form-group {
	   margin-bottom: 0px;
	}

	/*------Begin: add icon to fields-----*/
		.Col-IndEMail::before,
		.Col-NameFirstName::before,
		.Col-NameLastName::before,
		.Col-AddressLine1::before,
		.Col-AddressLine2::before,
		.Col-City::before,
		.Col-State::before,
		.Col-ZipCode::before,
		.Col-CountryCode::before,
		.Col-PhoneArea::before,
		.Col-PhoneNumber::before,
		.Col-PhoneExt::before{
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			color:#005191;
			position: absolute;
			line-height: 31px;
			height: 31px;
			width: 31px;
			background-color: #f4f4f4;
			text-align: center;
			border-right: 1px solid #ced4da;
			margin-left: 2px;
			margin-top: 2px;
		}

		
		 /*this adds line after the icon*/
		 /*
		.Col-IndEMail::after, 
		.Col-NameFirstName::after,
		.Col-NameLastName::after,
		.Col-AddressLine1::after,
		.Col-AddressLine2::after,
		.Col-City::after,
		.Col-State::after,
		.Col-ZipCode::after,
		.Col-CountryCode::after,
		.Col-PhoneArea::after,
		.Col-PhoneNumber::after{
			content:'';
			position: absolute;
			background-color: #e1e1e1;
			width: 1px;
			height: 25px;
			bottom: 0;
			left:40px;
			top:5px;
		}
		*/
		.Col-IndEMail::before{
		  content: "\f0e0";
		}
		.Col-NameFirstName::before{
		  content: "\f007";
		}
		.Col-NameLastName::before{
		  content: "\f007";
		}
		.Col-AddressLine1::before{
		  content: "\f015";
		}
		.Col-AddressLine2::before{
		  content: "\f015";
		}
		.Col-City::before{
		  content: "\f64f";
		}
		.Col-State::before{
		  content: "\f024";
		}
		.Col-ZipCode::before{
		  content: "\f59f";
		}
		.Col-CountryCode::before{
		  content: "\f0ac";
		}
		.Col-PhoneArea::before{
		  content: "\f095";
		}
		.Col-PhoneNumber::before{
		  content: "\f095";
		}	
		.Col-PhoneExt::before{
		  content: "\f095";
		}		
	/*------End: add icon to fields-----*/
	
	@media only screen and (max-width: 768px) {
	
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .Col-IndEMail .input-icon {
	      left: 0px;
	   }
	   
	   .Page-CampaignRegistration .col-sm-9.Col-Text.Col-OrgNames .row.Row-Label,
	   .col-sm-9.Col-Table.col-IndNameTable .Col-Input,
	   .Page-CampaignRegistration .col-sm-9.Col-Address .col-sm-12 {
	       padding-left: 5px;
	       padding-right: 5px;
	   }
	
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .IndEMail .col-sm-3,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails .IndEMail .col-sm-9,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #nameRow .col-sm-3,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #nameRow .col-sm-9,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow .col-sm-3,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #addressRow .col-sm-9,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow > .col-sm-3,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #phoneRow > .col-sm-9,
		.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoGender > .col-sm-3,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoGender > .col-sm-9,
			.Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoBirth > .col-sm-3,
	   .Body-Page-SinglePageRegPledge #RegisterForm section.BlockDetails #IndInfoBirth > .col-sm-9{
	       padding-left: 0;
	       padding-right: 0;
	   }
	}



	

/*--------------------------------End: Form fields with icons------------------------------------*/