/* DESIGN: JLR Land Rover */

/* Stop the flickering on the Next button */
.button_buttonArrowIcon {
    opacity: 0.001;
}

/* START Standard button and progress bar styling */

.button_button_isPrimary {
  border: 2px solid black;
  border-color: #B0B7BB;
  color: white;
}
.button_button_isPrimary:focus,
.button_button_isPrimary:hover {
  background-color: #B0B7BB;
  border-color: #B0B7BB;
  color: white;
}
.button_button_isSecondary {
  border: 2px solid #B0B7BB;
  border-color: #B0B7BB;
  color: #B0B7BB;
}
.button_button_isSecondary:focus,
.button_button_isSecondary:hover {
  background-color: #B0B7BB;
  color: white;
}
.progressbar_progressBar {
    background-color: #C4C4C4;
    height: 25px;
    width: 100%;
    position: fixed;
    z-index: 10000;
}

/* END Standard button and progress bar styling */


/* Using the Reduce Spacing option hides the "Select all that apply" message. So the below unhides it and also removes the animation so that it is the same on Desktop and Mobile */
.longform_multiSelectMessage{
    display:block;
    position:static;
    transform: translateX(0);
    opacity: .55;
    line-height:1.2;
    padding-top: 5px;
    margin-bottom: 0;
    margin-left: 0;
}

.longform_groupContainer {
    padding-bottom: 16px;
}

.longform_multiSelectMessage .validation_caption {
    margin-left: 0;
}

/* this one to fix problem of validation text showing behind Other box. It is 5px by default. */
.validation_validationBlock {
    padding-bottom: 3px;
}

/* On mobile, make the back button 40% instead of 30% so that it fits translated text */
@media screen and (max-width: 600px)
{
.navigationButtons_navigationButtonsContainer_hasTwoOrThreeButtons .navigationButtons_pageButtonContainer:first-child {
    width: 60%;
}
.navigationButtons_navigationButtonsContainer_hasTwoOrThreeButtons .navigationButtons_pageButtonContainer:last-child {
    width: 40%;
}
.button_button_isSecondary {
    padding-left: 0;
    padding-right: 0;
}
}


/* START General tidying up */

@media screen and (max-width: 600px){
#languageSelector {
    margin-top: 0;
    padding-top: 14px;
}
}

.layout_mainHeader {
    padding: 32px 0 12px;
}

.rowOption_topCaptionContainer {
    padding-top: 16px;
}

h3{
    font-size:21px;
}

.rowOption_anchorsContainer {
    padding-top: 10px;
}
.rowOption_topCaptionContainer {
    margin-bottom: 8px;
}
/* END General tidying up */


/*hide required node*/
span.validation_requiredBlock {
	display:none;
}

/* START Reduce dropdown size. Copied from Blake's css*/
.dropdown_dropdownContainer {
	height: 35;
	font-size:14px;
}

.dropdown_dropdownSelector {
	height: 35;
}

.dropdown_dropdownTitle {
	font-size:14px;
	padding-top:6px;
	padding-bottom:6px;
}
.dropdown_dropdownListItem {
		font-size:14px;
	padding-top:6px;
	padding-bottom:6px;
}
/* END Reduce dropdown size. Copied from Blake's css*/


/* START Split screen*/

/*** Last Updated by Danica Fong 11/2019 ***/
/*** Look & Feel v7 Split Pane Theme ***/

/********** SIDE BY SIDE LAYOUT **********/

/* Header, Side by Side Layout on Desktop, & Background Customizations */

header {
	border-bottom: none;
}

/* Use this if you want full height of image, image may get cut off */
#survey {
	position: fixed;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
	overflow: auto;
}
/* Use this if you want image to only be as tall as your form, with image ratio holding */
/* background-size is used to control image width */
/*
#survey {
    width: 100%;
    height: auto;
    position: relative;
    background-position: top right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 30%;
    overflow: auto;
}
*/

/* Background color added so that the image doesn't cover the survey text when re-sized */
#survey > div {
	width: 60%;
	min-height: 100%;
        background-color: #FFFFFF;
}

/* This gets overridden in the variations */
/* Proposed image size ratio is 600*900px */
#survey {
background-image: url(https://global.cdn.survey.medallia.com/245c13a3585aa6ae143954e9280ee8a29cc5aecb)
} 

/* Fix for language dropdown */
@media screen and (max-width: 600px) {
     body.modal_modalOpen {
          width: 100%;
     }
}

/* Mobile-Specific Customizations */
@media screen and (max-width: 768px) {
  #survey > div, .layout_mainHeaderLeft, .layout_mainHeaderRight {
	width: auto;
  }

  div#survey{
	background:none;
  }
}

/* Loading Indicator */
#survey .loadingContainer {
	width: 82px;
	height: 82px;
	background: none;
	min-height: 0px;
}

/* END Split screen*/