/***************************************
			General Edits
***************************************/
/*Drop-down styling*/
#DropdownNotification {
   	background-color: #17468f;
	color: white;	
	text-align: center;
	font-size: .6em;
}

#CovidVerbiage {
	padding-left: 4%;
	padding-right: 4%;
	padding-top: 3%;
}
 

/*Styling for our welcome message*/
#welcome, #consumerPortal {
	font-size: 1.2em;
	letter-spacing: -0.06em;
}

/*The "welcome to the" text needs to be smaller than "Willaims & Fudge Consumer
Portal", so that's why it has its own div and id*/
#welcomeTo {
	font-size: .7em;
	margin-top: 2%;
}

/*Making our horizontal line the blue we've been using*/
hr {
	background-color: #17468f;
}

/***************************************
			Style Buttons
***************************************/
/*General formatting for all of our buttons*/
button {
	background-color: #17468f;
	color: #ffffff;
	border: none;
}

#CovidClose {
	float: left;
	padding-left: 1%;
	color: white;
}

/*Styling for the PayPal and Pay Now button*/
#PP, #pay {
	background-color: white;
    border: 3px solid #17468f;
    border-radius: 15px;
    color: white;
    outline: none;
    cursor: pointer;
    font-weight: bold;
}

/*Styling for the images in our buttons*/
#PayPalVenmo, #CardAndACH {
    width: 55%;
}

/*Overriding the bootstrap styling for their large buttons and giving them more space*/
.btn-lg {
	margin-top: 3%;
	margin-bottom: 3%;
	border-radius: 0px;
	font-size: .9em;
}

/*Give some spacing to the "Contact Us" button from the bottom of the parent div*/
#contact {
	margin-bottom: 5%;
}

/*Styling for the accept button on the legal modal*/
#payNowAccept, #loginAccept, #PayPalAccept {
	background-color: #17468f;
	color: #ffffff;
}

/*We don't want an outline when our buttons get focus*/
button:focus {
	outline: none;
}

/***************************************
		General Media Edits
***************************************/
@media screen and (min-width: 768px) {
	/*We have to specify this again since we overrode it in our general edits*/
	#welcome, #consumerPortal {
		font-size: 1.8em;
	}

	#welcomeTo {
		font-size: 1em;
	}
	
	.btn-lg {
		font-size: 1.1em;
	}
	/*Styling for the images in our buttons*/
	#PayPalVenmo, #CardAndACH {
    	width: 70%;
	}	
	#DropdownNotification {
		font-size: .9em;
 	}
	#CovidVerbiage {
		padding-top: 0;
	}
}

/*The hover styling will only apply to screens 1098px or bigger to avoid
the sticky hover problem on mobile devices*/
@media screen and (min-width: 1098px) {
	/*Styling for when our mouse hovers over our 4 main buttons*/
		#login:hover, #contact:hover {
		background-color: white !important;
		color: black;
		transition-duration: .5s;
		cursor: pointer;
	}

	#PP:hover, #pay:hover {
		background-color: #D3D3D3 !important;
		transition-duration: .5s;
		cursor: pointer;
	}
}

/***************************************
				Tooltips
***************************************/
/*Tooltips are the blurbs of text that pop up when you hover over a button. This styles the text of the tooltip*/
.bs-tooltip-right .tooltip-inner{
	font-size: 1.10em;
}

/*We don't want tooltips to show on mobile devices so we'll get rid of them when the screen width gets small enough*/
@media screen and (max-width: 1097px) {
	.bs-tooltip-right .tooltip-inner {
		display: none;
	}

/*The arrow is the little pointer on the tooltip to indicate which button holds the tooltip.
It must also not display on mobile devices*/
	.tooltip .arrow:before {
		display: none;
	}
}