/* Harley Davidson Redesign Work - Q4 2025 - Q1 2026
Reminder - we are striving to simplify and minimize how much we override of Bootstrap
This is our 1st Bootstrap 5 site.
Things to consider as have time:
	Do we really need !important;? Ideally we clean these up so they are not needed, it can cause confusion down the line when we force an override to stay in place.
*/
html {
	overflow: auto;
	position: relative;
}
/* footnotes/disclosures section needs to be edge to edge black background w/ white text, so we make this our body default */
body {
	background-color: #000000;
	color: #FFFFFF;
	font-family: Helvetica,Arial Regular,sans-serif;
	height: 100%;
}
/* business line content area needs to be switched back to a white background */
div#innerContent {
	background-color: #FFFFFF;
	color: #000000;
}
/* BEGIN override some global bootstrap defaults */
a {
	color: #000000;
	text-decoration: underline;
}
h1 sup,
.h1 sup,
h2 sup,
.h2 sup,
h3 sup,
.h3 sup,
h4 sup,
.h4 sup,
h5 sup,
.h5 sup,
h6 sup,
.h6 sup {
	font-size: 60%;
}
sup {
	font-size: 75%;
}
/* END override some global bootstrap defaults */
/* headerTop (navigation Row 1) we need to go back to black */
div#headerTop {
	background: #000000;
}
div#headerTop div {
	padding-top: 1rem;
	padding-bottom: 1rem;
	text-align: right;
}
div#headerTop div.container a {
	color: #FFFFFF;
	margin-bottom: 0;
}
div#headerBottom {
border-bottom: 0.0625rem solid #EEECEB;
}
@media(max-width:991.98px) {
	#headerTop div.container a {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}
/* Adjust HD logo image */
@media(max-width: 576px){
	a.navbar-brand {
		width: 50%;
	}
}
/* CSS for desktop navigation */
ul.navbar-nav.ms-auto {
	padding-right: 0.5rem;
}
li.nav-item ul.desktop-dropdown {
	position: relative;
	z-index: 1000;
	border-radius: 0;
}
/* Remove white space from dropdown top and bottom */
ul.desktop-dropdown, ul.mobile-dropdown {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0 !important; /* Needed to override default bootstrap whitespace for .dropdown-menu[data-bs-popper]*/
}
/* Disable default bootstrap 5 navigation dropdown menu animation */
#navbarSupportedContentMobile {
	transition: none;
}
/* Navbar flyout css */
#navbarSupportedContentMobile.show {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	background-color: #FFFFFF;
	z-index: 9999;
	overflow-y: auto;
	transition: transform 0.3s ease-in-out;
	box-shadow: -0.125rem 0 0.3125rem rgba(0,0,0,0.1);
}
@media (min-width: 768px) and (max-width: 991.98px) {
	#navbarSupportedContentMobile.show {
		width: 50%;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	#navbarSupportedContentMobile.show {
		width: 60%;
	}
}
@media (max-width: 575.98px) {
	#navbarSupportedContentMobile.show {
		width: 100%;
	}
}
/* CSS for mobile flyout dropdown items */
#navbarSupportedContentMobile .navbar-nav li.nav-item > a {
	display: block;
	padding: 0.5rem 1.1875rem;
}
a.mobileDropdownMenuItem[aria-expanded="true"] {
	background-color: #000000;
	color: #FFFFFF;
}
/* Need this css for when the OUR CARDS mobile dropdown menu shows, need to add border*/
#navbarSupportedContentMobile .navbar-nav li.nav-item:nth-of-type(4) > a.show{
	border-bottom: 0.125rem solid #000000;
}
ul.mobile-dropdown {
 border: 0;
}
a.mobileOfferNav {
	text-decoration: none;
}
.mobileDropdownMenuItem {
	font-family: Helvetica;
	color: #000000;
	text-decoration: none;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3125rem;
	text-transform: uppercase;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
a.mobileDropdownMenuItem[aria-expanded="true"] img{
	margin-top: 0.3125rem;
}
/* BEGIN Footer Section aka numbered/nonnumber disclosures */
div.footerText.row,
div.footnotes.row {
	display: block;
	color: #FFFFFF;
	font-family: Helvetica;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 130%;
}
div.footnotes.row {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.375rem;
	padding-bottom: 0.75rem;
}
div.footnotes.row sup, div.footnotes.row strong {
	padding: 0;
}
/* Including for CPRA link, from DCD */
#footerContent a {
	color: #FFFFFF;
	text-decoration: underline;
}
/* For help & support, account management and more HD footer text */
div.footnotes.row div.d-lg-block {
	padding-left: 0;
}
/* END Footer Section aka numbered/nonnumber disclosures */
/* BEGIN primary and secondary buttons for entire site to maintain consistency */
.btn-primary,
.btn-secondary {
	text-decoration: none;
	--bs-btn-border-radius: 0.25rem;
}
.btn-primary {
	background-color: #FA6600;
	border-color: #FA6600;
	text-transform: uppercase;
	font-weight: 700;
}
.btn-secondary {
	background-color: #000000;
	border-color: #000000;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active {
	background-color: #FA6600;
	border-color: #FA6600;
	box-shadow: none;
	outline: 0.3125rem auto #000000;
	outline-offset: 0.3125rem;
}
a.btn.btn-primary.blackBckgrnd:hover,
a.btn.btn-primary.blackBckgrnd:focus,
a.btn.btn-primary.blackBckgrnd:active {
	border: 0.3125rem solid #FFFFFF;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active {
	background-color: #000000;
	border-color: #000000;
}
.srOnly {
	position: absolute;
	left: -624.9375rem;
}
/* END primary and secondary buttons for entire site to maintain consistency */
/*START HEADER CONTENT*/
/*start primary header*/
div#defaultHeaderTopRow {
	text-align: right;
	background-color: #000000;
	height: 1.875rem;
	padding-top: 0.1875rem;
}
div#defaultHeaderTopRow a {
	font-size: 1rem;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
span#headSpan {
	padding: 0 0.5625rem;
}
img.logotop {
	padding: 0 0.1875rem;
}
div#groupbtn {
	padding-right: 1.25rem;
}
div#applyNow {
	margin-top: 0.9375rem;
	padding-left: 1.25rem;
}
a.applyDrop:active {
	background-color:transparent;
}
.navRight {
    display: inline-flex;
}
.droptext {
	width: 17.625rem;
	line-height: 2.5625rem;
}
div.droptext > a {
	text-decoration: none;
}
.firstsec,.secondsec {
	font-size: 0.875rem;
}
.secondsec {
	font-weight: bold;
	font-family: Arial;
	display: block;
}
.thirdsec {
	font-size: 1.125rem;
}
li.listItemWhiteBG {
	background-color: #FFFFFF;
	color: #000000;
	margin-left: -2.5rem;
}
img.rightArrow {
	float: right;
	padding-right: 1.5625rem;
	padding-top: 1.25rem;
}
img.logoAlignTop {
	padding-top: 1.8125rem;
	padding-bottom: 1.6875rem;
	padding-left: 0;
}
a#navbarDrop {
	width: 10.8125rem;
	height: 2.5rem;
	line-height: 1rem;
	padding: 0.75rem 0.9375rem;
	font-size: 1.1875rem;
	font-family: Arial;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
	text-decoration: none;
	outline-color: #000000;
	outline-offset: 0.3125rem;
}
img#applyArrow {
	float: right;
	padding-top: 0.1875rem;
}
@media(min-width:768px) {
	a.navButton	{
		font-size: 0.75rem;
		margin: 0 0;
	}
}
@media(min-width:992px) {
	a.navButton	{
		font-size: 0.9375rem;
	}
	/* For opt out button width */
	#CPRAOptOutBtn {
		width: 20%;
	}
}
span.icon-bar {
	display: block;
	width: 1.3125rem;
	height: 0.125rem;
	border-radius: 0.125rem;
	background-color: #000000;
	margin-bottom: 0.1875rem;
}
li.lines {
	border: 0.0625rem solid #8A8A8A;
	margin-left: -2.5rem;
}
li.listItemBlackBG {
	background-color:#000000;
	margin-left: -2.5rem;
}
li.linesWhiteBG {
	margin-left: -2.5rem;
}
li.linesWhiteBG hr {
	border-top: 0.125rem solid #BBBBBB;
	width: 80%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 2.5rem;
	padding-top: 1.875rem;
}
@media(min-width:400px) {
	li.linesWhiteBG hr {
		width: 82.5%;
	}
}
@media(min-width:480px) {
	li.linesWhiteBG hr {
		width: 85%;
	}
}
@media(min-width:560px) {
	li.linesWhiteBG hr {
		width: 87.5%;
	}
}
.padBottom {
	padding-bottom: 1.875rem;
}
/*end primary header*/
/* START BUSINESS LINE CONTENT AREA */
div#scenarioNavContent,
div#scenarioContent {
	color: #000000;
}
/* END BUSINESS LINE CONTENT AREA */
/* start offer header */
div#offerHeader {
	background-color: #FFFFFF;
}
@media(max-width:575px) {
	div#offerHeader > div.container {
		padding-left: 0;
	}
}
/* defaults */
div#offerHeader > div.container > img {
	padding-top: 1.6875rem;
	padding-bottom: 1.6875rem;
	padding-left: 0;
}
/* override MD, LG, XL */
@media (min-width: 768px) {
	div#offerHeader > div.container > img {
		padding-top: 1.875rem;
		padding-bottom: 1.875rem;
	}
}
/* end offer header */
/*END HEADER CONTENT*/
img.whiteMinus {
	padding-top: 0.625rem;
}
img.whitePlus {
	padding-top: 0.3125rem;
}
/* BEGIN Modals - CPRA & Speedbumps */
div#CPRAModalWindow,
div#speedbumpModal {
	--bs-modal-width: 65%;
}
#CPRAModalWindow p {
	color: #000000;
}
#CPRAOptOutBtn,
#url_link {
	font-size: 1.1875rem;
	font-weight: 700;
	text-transform: uppercase;
}
div#CPRAModalWindow-header,
div#speedbumpModal-header {
	border-bottom: none;
	padding-bottom: 0;
}
p.rem125 {
	font-size: 1.25rem;
}
div#CPRAModalWindow-footer,
div#speedbumpModal-footer {
	border-top: none;
	background-color: #EEECEB;
}
div#CPRAModalWindow div.CPRAModalClose,
div.modalClose {
	text-align: right;
	padding-right: 0.5rem;
}
input#emailFieldCPRA {
	outline: 0;
	border-width: 0 0 0.125rem;
	border-bottom: 0.125rem solid #767676;
	border-radius: 0;
	padding-left: 0;
}
#CPRALearnMoreLink {
	text-decoration: underline;
}
#CPRALearnMoreLink:hover {
	background-color: #000000;
	color: #FFFFFF;
}
#CPRALearnMoreLink:focus {
	outline: 0.3125rem auto #000000;
	outline-offset: 0.3125rem;
}
#emailTextCPRA {
	color: #63637F;
	font-size: 0.75rem;
}
.sr-message {
	position: absolute;
	left: -625rem;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
}
.message_text {
	color: #000000;
}
.successMessage {
	background-color: #F2FFF4;
	border-top: 0.25rem solid #007D1E;
	border-right: 0.0625rem solid #007D1E;
	border-bottom: 0.0625rem solid #007D1E;
	border-left: 0.0625rem solid #007D1E;
}
.errorMessage {
	background-color: #FFE9EA;
	border-top: 0.25rem solid #CF2A36;
	border-right: 0.0625rem solid #CF2A36;
	border-bottom: 0.0625rem solid #CF2A36;
	border-left: 0.0625rem solid #CF2A36;
}
.optOutmodalIcon {
	height: 1.25rem;
	position: relative;
	top: 0.125rem;
	width: 1.25rem;
}
.messageBox {
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    box-sizing: border-box;
    font-family: Circular, Helvetica, Arial, sans-serif;
    margin-bottom: 1rem;
    position: relative;
    border-radius: 0.25rem;
    gap: 0.75rem;
    padding: 1rem 1rem 1.375rem;
}
/* END Modals - CPRA & Speedbumps */
/* START FAQs */
a.faqButton {
	font-size: 1%;
	display: flex;
	text-decoration: none;
}
.faqButton > span.FAQ {
	float:right;
}
.faqGroupHeader > h2 {
	color: #000000;
	font-family: Helvetica;
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 700;
	margin-bottom: 0;
	padding-left: 1.5rem;
	padding-top: 3rem;
	padding-bottom: 1rem;
}
@media(min-width:992px) { /* Desktop View: xxl xl lg */
	.faqButton > span.FAQ > img {
		right: 4%;
	}
}
.faqButton > span.FAQ > img {
	position: absolute !important;
	right: 3%;
}
.faqList .faqAnswer.faqClosed {
	display: none;
}
.faqList .faqAnswer.faqOpened {
	display: block;
	padding-right: 20%;
	line-height: 1.375rem;
}
@media(max-width:575.98px) { /* xs */
	.faqAnswer.faqOpened {
		padding-right: 10%;
	}
	.faqButton > span.faqLinkText {
		width: 90%;
	}
}
.faqAnswer {
	background-color: #EEECEB;
}
.faqQuestionBlock:has(> a[aria-expanded="true"]) { /* FAQ question block background color change on expand */
	background-color: #EEECEB;
	padding-bottom: 0;
}
.faqQuestionBlock, .faqAnswer {
	position: relative;
	color: #000000;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
/* Bootstrap 5 - needed both the hr tag and hr.hr to get default grey overridden */
div.faqList hr,
div.faqList hr.hr {
	border-top: 0.0625rem solid #000000;
	opacity: 1;
	margin-bottom: 0;
	margin-top: 0;
}
hr.faqGH,
hr.hr {
	border-top: 0.0625rem solid #000000;
	opacity: 1;
	margin-bottom: 0;
	margin-top: 0;
}
a.faqButton:hover {
	color: #000000;
	text-decoration: none;
}
.faqButton > span.faqLinkText {
	color: #000000;
	font-family: Helvetica;
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	width: 80%;
}
/* END FAQs */
/* In Progress: mklinch BEGIN Row 2 of navbar rebuild */
div#headerBottom nav.navbar {
	background-color: #FFFFFF;
	--bs-navbar-padding-y: 0;
}
/* BEGIN Login Button specific needs in the Desktop 2nd Row Navigation */
a.loginHeaderButton {
	color: #FFFFFF;
	font-size: 1.1875rem;
	padding-left: 1.5rem;
	padding-right: 1.75rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	width: 10.375rem;
}
@media(max-width:1200px) { /* Desktop View: lg */
	a.loginHeaderButton {
		width: 8.5rem;
	}
}
/* END Login Button specific needs in the Desktop 2nd Row Navigation */
/* BEGIN Mobile View Navigation, triggered from the Hamburger Menu. With this redesign we shifted to Bootstrap Navbar container and have configured Full Navigation - aka Desktop View to be XXL, XL, & LG. Shift to Hamburger Menu - aka Mobile View Navigation for MD, SM, & XS */
button.navbar-toggler {
	border: none;
	padding-bottom: 1rem;
	padding-top: 1rem;
}
.navbar-toggler-icon {
	background-image: url('/credit/mmcore-webapp/common/2025/usbcustom/img/icon_2026-hamburgerMenu.svg');
}
.navbar-toggler.btn-close {
	background-image: url('/credit/mmcore-webapp/common/2025/usbcustom/img/icon_2026-closeButton.svg');
	--bs-btn-close-focus-shadow: 0 0 0 0.25rem;
}
/* still struggling here */
.btn-close:hover,
.btn-close:active,
.btn-close.active {
	background-image: url('/credit/mmcore-webapp/common/2025/usbcustom/img/icon_2026-closeButton.svg');
}
.nav-item.button-close {
	text-align: right;
	padding-right: 0.5rem;
	padding-top: 0.5rem;
}
button.navButton{
	align-items: center;
	background-color: #FFFFFF;
	border: none;
	color: #000000;
	display: flex;
	font-weight: 700;
	font-family: Helvetica;
	padding-bottom: 1.75rem;
	padding-top: 1.75rem;
	text-decoration: none;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}
.navButton:not(.show):focus {
	box-shadow: none;
}
.navButton:active,
.navButton:focus,
.navButton:hover,
.navButton.show {
	color:#FFFFFF;
	background-color:#000000;
	text-decoration: none;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
}
a.dropdown-item.active,
a.dropdown-item:active,
a.dropdown-item.focus,
a.dropdown-item:focus,
a.dropdown-item.hover,
a.dropdown-item:hover {
	color: #000000; /* we need to override the bootstrap 5 default */
	background-color: #EEECEB;
}
.mobileDropdownMenuItem.dropdown-item:hover,
.mobileDropdownMenuItem.dropdown-item:focus {
	background-color: #EEECEB;
}
ul li ul li {
	font-size: 0.875rem;
}
ul li ul li a.dropdown-item {
	font-weight: 700;
	--bs-dropdown-item-padding-y: 0.75rem;
}
div.lines {
	border: 0.0625rem solid #000000;
}
/* BEGIN Adjust padding for mobile view navigation open/close indicator arrows */
img.mobileNavImage {
	padding-right: 1rem; 
}
img.mobileNavImage {
	float: right;
}
/* END Adjust padding for mobile view navigation open/close indicator arrows */
/* END Mobile View Navigation */
/* BEGIN Keep image from over runing the container */
#hdLogo {
	max-width: 21.875rem;
}
@media(max-width:425px) {
	#hdLogo {
		max-width: 14.0625rem;
	}
}
/* END Keep image from over runing the container */