/* These style sheets will be applied on top of DXP when we cannot get the required styles from their CSS.
   However their styles are based on bootstrap and are highly adaptive, so there should not be any further
   CSS here other than the initial commit.
 */
/* Override the default HTML elements */
html, body { /* set the page full width so we can set background colours behind images to stretch the entire canvas */
	height: 100vh;
}

/* Create re-usable classes. Please ensure the names are generic and the styles are simple and modular */
.b2b-background-color {
	background-color: #141413;
}

.side-padding {
	padding-left: 12.5%;
	padding-right: 12.5%;
}

.top-padding-14 {
	padding-top: 14px;	
}

.top-padding-40 {
	padding-top: 40px;
}

.top-padding-80 {
	padding-top: 80px;
}

.auto-size {
	width: 100%!important;
	height: auto!important;
}

.error-image {
	max-width: 600px;
	max-height: 600px
}

.responsive-side-padding {
	padding-left: 12.5%;
	padding-right: 12.5%;
}

/* For once off components use id's */
#heracles-notification {
	margin: 5px 0px 15px 0px;
}

#heracles-notification dxp-message-text {
	margin: 5px 0px 10px 0px;
}

/* For responsive layouts */
@media screen and (min-width: 992px) { /*992px width is lg size*/
	.responsive-pane-with-side_img {
		background: linear-gradient(90deg, #FFFFFF 50%, #323231 50%);
		height: calc(100vh - 56px);
		overflow: hidden;
	}

	.responsive-side-padding {
		padding-left: 25%!important;
		padding-right: 25%!important;
	}

	.responsive-pr-10-percent {
		padding-right: 10%;
	}
}

/* Hacks to default DXP Styling to make it look like their mock ups - Please avoid this if at all possible. DXP should style their mock ups in accordance with their components */
.dxp-btn {
	font-size: 14px!important;
	padding: .6rem 3.4rem!important;
	line-height: 18px!important;
}

.dxp .dxp-theme-white .dxp-inputbox-label {
	font-size: .75rem!important; /* Get normal labels to match password labels under all conditions (error & normal) */
	font-weight: 400!important;
	line-height: 1.5!important;
	margin: 0 0 .25rem 0!important;
	color: #141413!important;
}

.dxp-inputbox-label .dxp-required span[aria-hidden=true] {
	display: none!important; /* Hide the asterix for input fields to make it match pw fields */
}

.dxp-input-label span[aria-hidden=true] {
	display: none!important; /* Hide the asterix for input fields to make it match pw fields */
}