/**
 * 	This CSS allows the styling for the ID_Registreer page
 * 	Please be aware of the following z-index levels:
 * 	- #backgroundVideo: 		 0;
 * 	- #backgroundOverlay:		 5;
 * 	- #uspDetails:				10;
 * 	- #headerBar:				15;
 * 	- #registrationWrapper:		50;
 */

/**
 * Color codes:
 * - Dark grey:			#41494c		text
 * - Light dark blue:	#003064		buttons & infoBox h2 & progress bar & link in Flow
 * - Soft blue:			#f0f4f5		infoBox background
 * - Dark red:			#c23934		error text
 * - Light grey:		#f3f3f3		disabled select options
 */

/*
 * Generic styling
 */
*{
	box-sizing: 	border-box;
	font-family: 	'VWHeadWeb', Helvetica, Arial, sans-serif !important;
}

body{
	height: 		100%;
}

a{
	color:              #fff;
	font-weight:        bold;
	text-decoration:    none;
	white-space:        nowrap;
}

a:hover{
	color:              #fff;
	text-decoration:    underline;
}

a:visited{
	color:              #fff;
}

p:empty{
    display:            none;
}

.slds-scope sup, sup {
    top:                -0.75em !important;
    font-size:          0.5em !important;
}

/*
 * Front page components
 */
#backgroundVideo, #backgroundImage{
	position: 		fixed;
	z-index:		0;
	left: 			0;
	bottom: 		0;
	min-width: 		100%;
	min-height: 	100%;
}

#backgroundOverlay{
	height: 		100%;
	width: 			100%;
	position: 		fixed; /* Stay in place */
	z-index: 		5;
	left: 			0;
	top: 			0;
	background-color: rgba(0,0,0, 0.7); /* Black w/opacity */
	opacity: 		0;
	transition: 	opacity 2s ease-in-out;
}

#headerBar{
	position:   	relative;
	z-index:    	15;
	top:        	15px;
	display:    	block;
	max-height: 	85px;
	width:      	100%;
	color:      	white;
}

	#headerBar #brandLogo{
		display:        inline-block;
		width:          15%;
		max-height:     100%;
		text-align:     center;
		vertical-align: middle;
	}

	#headerBar #brandLogo img{
		height:     85px;
	}

	#headerBar #headerMenu{
		display:    inline-block;
		width:      80%;
	}

	#headerMenu a{
		font-size:      17px;
		margin:         0 1.5em 0 0;
	}

ul#uspDetails{
	position:   absolute;
	bottom:     10%;
	left:       10%;
	z-index:    10;

	display:    block;
	width:      30%;
	height:     auto;

	list-style: none;
	padding:    0;
	margin:     0;
	vertical-align: middle;
}

	ul#uspDetails li{
		margin:         0 0 20px 0;
		padding:        0;
		color:          #fff;
		text-shadow: 	2px 1px 2px #000000
	}

	ul#uspDetails li img{
		width:          45px;
		margin-right:   25px;
		vertical-align: middle;
	}

#registrationWrapper{
	display: 		block;
	position:		fixed;
	bottom:			5%;
	right:			20%;

	width:			500px;
	min-height:		650px;
	max-height:		800px;

	overflow-y: 	auto;
	z-index:		50;
}

	#registrationWrapper h1.wrapperHeader{
		color:		white;
		margin:		0 0 0.5rem 0;
		padding:	0;
		font-weight:200 !important;
	}

	#registrationWrapper h1.wrapperHeader strong{
	    font-weight:    900 !important;
	}

	#flowSupport{
		display:	block;
		width:		100%;
		height:		100%;
		background:	white;
		padding:	1rem;
	}

		#flowSupport .spinnerStylo{
			display:    	block;
			width:      	100%;
			height:     	400px;
			text-align: 	center;
			vertical-align:	middle;
			background: 	none;
		}

		#flowSupport .hide{
			display:    	none;
		}

/**
 * Flow Styling override
 */
/** Force identical font to standard text components */
.slds-scope, p, .uiOutputRichText, .slds-scope .slds-form-element__label{
	font-family: 	'VWHeadWeb', Helvetica, Arial, sans-serif !important;
	text-align:     justify;
	color:          #41494c !important;
	font-size:      .8125rem !important;
}

	/* Reset to initial browser font-sizes (SF app.css set it to 1em) */
	.slds-scope h1, .slds-scope h2, .slds-scope h3, .slds-scope h4, .slds-scope h5, .slds-scope h6{
		font-size:      initial !important;
		display:		block !important;
	}

	/* Make sure error text is still shown in red */
	.errorText .uiOutputRichText, .flowruntimeErrorText .uiOutputRichText{
		color:			#c23934 !important;
	}

	/** Alignment on links shown in the Flow - overrule default white */
    .uiOutputRichText a, .slds-form-element__label a{
        color:              #003064 !important;
    }

    /** Making sure padding of flow input is identical to lightning component */
    .lightning-component{
        padding:            0 0.25rem; /* Compared with .slds-scope .slds-form-element_stacked */
    }

/** Set two-column approach, label-Wrappers to 30%, input-Wrappers to 70% */
.flowruntime-input .flowruntime-input-label,
.slds-form-element .slds-form-element__label{
	display:	        inline-block !important;
}
    /** Width to 30%... */
    .lightning-component .slds-form-element .slds-form-element__label{
        width:              30%;
        margin-left:        0;
    }

    /* ...but Flow has required astrix separately in front, so correct */
    .flowruntime-input .flowruntime-input-label{
        width:		        27.5%;
        margin-left:        2.5%;
    }
        .flowruntime-required, .slds-required{
            display:        inline-block !important;
            font-weight:    700;
        }
            .flowruntime-required{                          width: 2%;      } /* to 100% of FlowWrapper */
            .slds-form-element__label abbr.slds-required{   width: 6.67%;   } /* to 30% of input label (1/3 of FlowWrapper) */

        /** ... in case input preceded with required element, correct width and remove left margin */
        .flowruntime-required + .flowruntime-input-label{
            width:          27%;
            margin-left:    0;
        }

	/* Labels should always be in bold... */
	.flowruntime-input-label,
	.lightning-component .slds-form-element__label{
		font-weight:	bold !important;
	}

/** Overrule the padding-bottom for more compact layout */
.flowruntime-input,
.lightning-component lightning-input{
	padding-bottom:	    .5rem !important;
	margin-bottom:      .5rem !important;
}

/** Have the error messages corrected to be below the input-wrappers (margin-left = width of label-wrapper) */
lightning-input + .flowruntime-input-error, /** Flow inputs - excl. Checkboxes (those have label before error) */
.lightning-component + .errorText, /** Component select error */
.lightning-component .slds-form-element__help{ /** Component, other input */
	margin-left:	    30% !important;
	margin-bottom:	    0 !important;
	max-width:		    70%;
	vertical-align:	    top;
}

	/* Correct for the checkbox */
	.slds-checkbox .slds-form-element__control {
		width:          1.5rem !important;
	}

	.slds-checkbox .errorText{
		margin-left:    1.5rem !important;
		width:          95%;
		max-width:      95%;
	}

/** Ensure the paragraphs are displayed with some white spacing around it */
.flowruntimeRichTextWrapper p{
    margin:             1rem 0 !important;
}

/** Input-field-Wrappers which directly follow Label-Wrappers should be inline-70%;  */
.flowruntime-input lightning-input,
.slds-form-element__label + .slds-form-element__control{ /** code */
	display:		inline-block !important;
	width:			70%;
	vertical-align:	top;
}

    /** When label after input (checkbox) - increase the width and put to left, since input is 70% width */
    /** Also set label to be normal (not bold) */
    lightning-input + .flowruntime-input-label{
        width:          90% !important;
        max-width:      90%;
        position:       absolute;
        left:           5%;
        top:            .2em;
        white-space:    initial !important;
        font-weight:    normal !important;
    }

	/* Input-components should all be 100% of wrapper */
	input, select{
		width:			100% !important;
		padding:		0.25rem !important;
		border:			1px solid #7F7F7F;
	}

	select option:disabled{
		background:     #f3f3f3;
		font-weight:    bold;
	}

	/* Reset custom Lightning Component to match with Flow components */
	.slds-scope .slds-input,
	.slds-scope .slds-select{
		border-radius:  	initial !important;
		border:				1px solid #7F7F7F !important;
		padding: 			0.25rem !important;
		line-height: 		initial !important;
		min-height: 		initial !important;
		height:				auto !important;
	}

/** Button design */
.slds-scope .slds-button_brand, .slds-scope .slds-button--brand,
.slds-scope .slds-button_neutral, .slds-scope .slds-button--neutral{
	position:       initial !important;
	border-radius:  initial !important;
	background:     #003064 !important;
	border:         none !important;
	box-shadow:     none !important;
	color:          white !important;
}

	.uiButton, .uiButton:hover, .uiButton:focus, .uiButton.is-selected{
		text-shadow:    none !important;
	}

	.uiButton--default .label{
		color:      white !important;
	}

/** Progress bar */
.slds-scope .slds-path__track{
	padding:        0 0 1.5rem 0 !important;
}

	.slds-scope .slds-path__nav .slds-is-active,
	.slds-scope .slds-path__nav .slds-is-active:first-child:before, .slds-scope .slds-path__nav .slds-is-active:first-child:after,
	.slds-scope .slds-path__nav .slds-is-active:before, .slds-scope .slds-path__nav .slds-is-active:after{
		background:     #003064 !important;
	}

	.slds-scope .slds-path__nav .slds-is-complete,
	.slds-scope .slds-path__nav .slds-is-complete:before, .slds-scope .slds-path__nav .slds-is-complete:after{
	    background:     #51AE30 !important;
	}

	/* remove round progress bar */
	.slds-scope .slds-path__item:first-child,
	.slds-scope .slds-path__item:last-child{
		border-radius:  initial !important;
	}

	/* Have the Progress bar not clickable (experience) */
        /** Prevent cursos and background change on hover */
        .slds-scope .slds-tabs_path__link, .slds-scope .slds-path__link,
        .slds-scope .slds-path__item:before, .slds-scope .slds-path__item:after {
            cursor:     default !important;
        }

        .slds-scope .slds-path__nav .slds-is-incomplete:hover,
        .slds-scope .slds-path__nav .slds-is-incomplete:hover:before, .slds-scope .slds-path__nav .slds-is-incomplete:hover:after{
            background: rgb(236, 235, 234) !important;
        }
	
/** Info box - (un)available text */
.infoBox{
	display:        block;
	width:          100%;
	background:     #f0f4f5;
	padding:        .75rem 1rem;
	margin-bottom:  1rem;
}

	.infoBox h1 {
		color:          #003064 !important;
		font-size:      1.5em;
		font-family:    'VWHeadWeb';
	}

	.infoBox h2 {
		color:          #fc8826;
		font-weight:    bold;
		font-family:    'VWHeadWeb';
	}

	/* The editor of Flow automatically adds breaks, which should not be shown */
	.infoBox br{
		display:        none;
	}

/** HTML custom block; with ol */
.textBox{
    width:              100%;
    display:            block;
    margin-bottom:      2rem;
}

    .textBox h1{
        font-size:          1em;
        font-weight:        100;
    }

    .textBox ol{
        counter-reset:      custom-counter;
        list-style:         none;
        padding:            0 !important;
        text-align:         left;
    }

    .textBox li{
        counter-increment:  custom-counter;
        position:           relative;
        margin:             1rem 0;
        padding-left:       35px;
        font-weight:        400;
        list-style:         none;
    }

    .textBox li::before{
        content:            counter(custom-counter);
        position:           absolute;
        top:                2px;
        left:               0;
        border:             1px solid #000;
        border-radius:      50%;
        width:              22px;
        height:             22px;
        line-height:        20px;
        text-align:         center;
        font-weight:        900;
    }

    .textBox p{
        margin:             0.5rem 0 !important;
    }
	
/** Flow images */
.slds-scope img {
    width: 			35%;
	margin-left: 	32.5%;
}

/** 
 * Responsive design 
 */

/**
 * Specific height correction to prevent content from dissapearing from screen
 */
@media only screen and ( max-height: 700px ) and ( min-width: 1200px ){
 #registrationWrapper{
     position:       sticky; /** fixed to sticky to force page scroll */
     top:            2%;
     bottom:         initial;
     margin-top:     -78px;  /** to align with top of VW logo */
     left:           50%;    /** Moving to left alignment since right does not exist on sticky */
     right:          initial;
 }
}

@media only screen and (max-width: 1200px) {
	#registrationWrapper{
		position:       relative;
		bottom:         initial;
		right:          initial;
		left:           5%;
		margin-top:     5%;
		min-height:     auto;
		height:         auto;
	}

	ul#uspDetails{
		position:       relative;
		bottom:         initial;
		left:           5%;
		margin-top:     5%;
		width:          90%;
	}
}

@media only screen and ( max-width: 600px ){
	body{
	    background:     #092646 !important;
	}

	#backgroundImage{
	    width:          100%;
	    min-height:     auto;
	    top:            0;
	    left:           0;
	}

	#headerBar{
	    max-height:     initial;
	}

	#registrationWrapper, #headerBar{
		width:		    95%;
		left:           2.5%;
	}

	    #registrationWrapper h1{
            font-size:      7vw;
        }

	#flowSupport{
	    padding:        0.5rem 0.1rem;
	}
}

@media only screen and (max-width: 550px) {
	#headerBar #brandLogo{
		vertical-align: top;
	}

	#headerBar #headerMenu{
	    width:          auto;
	    margin-left:    40px; /** Image has width of 80px */
	}

	#headerMenu a{
		margin:         0.25rem 0.5rem;
		font-size:      80%;
		font-weight:    normal;
		border:         1px solid white;
		padding:        0.2rem 1rem;
		background:     rgba(255, 255, 255, 0.5);
		color:          black;
	}

	#headerMenu a:first-child{
	    margin-left:    0;
	}
	/** To avoid a wrapper-scrollbar */
	#registrationWrapper{
	    max-height:     initial;
    }

    /** Having labels and inputs 100% width on separate lines */
    .lightning-component .slds-form-element .slds-form-element__label, /** Component */
    .flowruntime-input lightning-input,
    .flowruntime-input .flowruntime-input-label,
    .slds-form-element__label + .slds-form-element__control{
	    display:        block !important;
	    width:          100% !important;
    }

    /** Correcting required behaviour - and adding more spacing (2% > 4%) */
    .flowruntime-required, .slds-required,
    .slds-form-element__label abbr.slds-required{
        width:          4%;
        display:        inline;
    }
    .flowruntime-input .flowruntime-input-label{
        margin-left:    4.5%;
    }
    .flowruntime-required + .flowruntime-input-label{
        width:          90% !important;
        margin-left:    0 !important;
        display:        inline-block !important;
    }

    .slds-scope .slds-form-element__label{
        padding:       0 !important; /** To make sure same alignment with required astrix */
    }

    /** Reverting error-margin-left */
    lightning-input + .flowruntime-input-error, /** Flow inputs - excl. Checkboxes (those have label before error) */
    .lightning-component + .errorText, /** Component select error */
    .lightning-component .slds-form-element__help{ /** Component, other input */
        margin-left:   0 !important;
    }
}

@media only screen and (max-width: 400px ){
    #headerBar #brandLogo img{
        height:         70px;
    }

    #headerBar #headerMenu{
        margin-left:    33px;   /** Image width 66px; */
    }
}

@media only screen and ( max-width: 375px ){
    #headerBar #headerMenu a{
        display:        block;
        margin-left:    0 !important;
    }
}