/* ---------CUSTOM HARLEY DAVIDSON SOLUTIONS THEME--------- */

/*  --------------------------------------------------------------------------
                                          HEADER LNF
------------------------------------------------------------------------------ */
/* CENTERING LOADING INDICATOR */
#survey .loadingContainer {
 width: 82px;
 height: 82px;
 background: none;
 min-height: 0;
}


/* --- UPDATE HEADER BACKGROUND COLOR ---*/
header {
    background: #000000;
    border-bottom: none;
}

/* --- LOGO SIZE ADJUSTMENT --- */
.layout_logo {
	max-width: 30%;
}

header .layout_layoutContainer {
	padding: 0px;
}

/*  --------------------------------------------------------------------------
                                          BODY LNF
------------------------------------------------------------------------------ */

body {
	background: none;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: #F58220;
}

/********** BACKGROUND IMAGE CUSTOMIZATION *************************************/
html {
	background-image: url('https://harley-davidson.medallia.com/efilemanager/5ddd2d44e44e77bb1a76f1db85533776.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}

/*** WELCOME PAGE ***/
.welcome-title {
    text-align: center;
    font-weight: 700;
    font-size: 36px;
}

.welcome-subtitle {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
}

.welcome-text {
	text-align: center;
    font-weight: 700;
    font-size: 20px;
}

/********** DO NOT EDIT - WHITE BLOCKS AROUND QUESTION ELEMENTS ****************/
.layout_mainHeader {
	background-color: #000000;
	padding: 10px;
}

.layout_layoutContainer {
	background-color: #FFFFFF;
}

.questionBlock, .layout_globalErrorBlock {
	background-color: #FFFFFF;
	padding: 20px;
}

.htmlBlock, .textNode {
	
	padding: 20px;
}

/*
.questionBlock,
.invitationErrorFooterNode {
	margin-bottom: 20px;
}
*/

.calendar_calendarContainer {
	width: auto;
}

.questionBlock.ratingGridQuestion.ratingGridQuestion_hasOneRow .question_questionTitle {
	background: #FFFFFF;
	padding: 20px;
}

.questionBlock .question_questionTitle {
	padding-top: 0;
}

/*
.layout_answers {
	margin-bottom: 20px;
}
*/

.questionTextNode, .textNode {
	background: #FFFFFF;
	display: block;
	width: auto;
	padding: 20px;
	margin: 0px;
}

.calendarQuestion .question_questionTitle {
	background-color: #FFFFFF;
	margin: -20px;
	padding: 20px;	
}

.additionalValidationNode {
	background-color: #FFFFFF;
	padding: 20px;
	margin-top: -40px;
}

nav ~ .layout_layoutContainer {
	background-color: transparent;
	padding: 0px;
}

/*  --------------------------------------------------------------------------
                                        FONTS
------------------------------------------------------------------------------ */

/* TEXT BLOCKS */
.layout_text {
	font-size: 22px;
	color: #000000;
	padding: 18px 0;
}

/* FONT SIZE FOR SURVEY QUESTIONS */
.questionCaption, .dropdown_dropdownLabel {
	color: #000000;
	font-size: 20px;
}


/* ------------------------------------------Dropdown List Items ---------------------------*/
.dropdown_dropdownListItem {
    position: relative;
    padding: 12px 28px 12px 16px;
    border-bottom: 1px solid #e2e2e2;
    transition: box-shadow .15s ease-in-out;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    word-wrap: break-word;
}

/* GRID ATTRIBUTES*/
.rowOption_leftCaption, .rowOption_topCaption {
	color: #000000;
	font-size: 18px;
}

/* FONT SIZE FOR SURVEY ANCHORS */
.anchor {
	color: #000000;
	font-size: 16px;
}

/* SURVEY ANSWERS */
.layout_answer {
	color: #000000;
	font-size: 18px;
	margin: 0px;
}

/* FONT SIZE FOR FOOTER LINKS */
.layout_footer .layout_legalLinks {
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
}

.layout_footer .layout_legalLinks a {
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
}


/* FONT SPACING FOR QUESTION TEXT */
.question_questionTitle {
   padding: 18px 0;
}


/*  --------------------------------------------------------------------------
                                        BUTTON COLORS
------------------------------------------------------------------------------ */
/* PRIMARY BUTTON COLOR - HARLEY ORANGE */
.button_button_isPrimary, .button_button_isPrimary:focus, .button_button_isPrimary:hover {
  background: #F58220;
  color: #000000;
}

/* SECONDARY BUTTON COLOR - LIGHT GREY */
.button_button_isSecondary, .button_button_isSecondary:focus, .button_button_isSecondary:hover {
  background: #E6E7E8;
  color: #000000;
}

/*  --------------------------------------------------------------------------
                     COLORING QUESTION / ANSWER ELEMENTS
------------------------------------------------------------------------------ */

/* REMOVE BODER FROM SINGLE SELECT ANSWER GROUPS */
/*
.group_group {
	border: none;
	box-shadow: none;
}
*/

/* COOKIE CONFIRMATION SECTION */
.cookieConfirmationNode {
	background: #FFFFFF;
	color: #F58220;
}

/* SELECTED RATING GRID RADIO BUTTON COLOR */
.indicatorCircle_circle_isSelected {
	background: #F58220;
}

/* SELECTED RATING GRID RADIO BUTTON TEXT COLOR */
.indicatorCircle_label_isSelected {
  	color: #000000;
}

/* SELECTED VERTICAL RADIO BUTTON COLOR */
.indicatorRadio_indicatorRadioContainer_isSelected {
  	border: 8.4px solid #F58220;
}

/* SELECTED CHECKBOX COLOR */
.indicatorCheckbox_indicatorCheckboxContainer_isSelected {
  	background: #F58220;
  	border: 2px solid #F58220;
}

.indicatorCheckbox_checkmark_isSelected{
	color: #000000;
}

/*** Hover and Focus on the Question options ***/
.dropdown_dropdownSelector:focus, .dropdown_dropdownSelector:hover, 
.hasNoTouch .option_input:hover+.option_optionContainer, .hasNoTouch .cellOption_input:focus+.cellOption_indicatorContainer, .hasNoTouch .cellOption_input:hover+.cellOption_indicatorContainer, .textarea_textareaContainer:hover, .textarea_textareaContainer_isFocused, .layoutListItem_layoutListItemContainer_hasHighlights:hover, .dropdown_dropdownListItem:hover, .hasNoTouch .option_optionContainer:hover, .hasNoTouch .option_optionContainer:focus, .textField_textField:focus, .textField_textField:hover {
    /* Box shadow thickness: 3px; shadow color #F58220 */
    box-shadow: 0 0 0 3px #F58220;
}

.dropdown_dropdownList.dropdown_dropdownList_isActive {
    max-height: 550px; 
    padding: 3px; 
    overflow: auto; 
}

/*  --------------------------------------------------------------------------
                                  THANK YOU MESSAGE
------------------------------------------------------------------------------ */

.thank-you-message {
	font-size: 22px;
	color: #FFFFFF;
	padding: 18px 0;
}

.thank-you-message a {
	text-decoration: underline;
	font-size: 22px;
	color: #F58220;
	padding: 18px 0;
}

/*  --------------------------------------------------------------------------
                                  COLORING PROGRESS BAR
------------------------------------------------------------------------------ */

/* REMOVE PALE YELLOW COLOR*/
.option_singleOption {
	background: #FFFFFF;
}

/* PROGRESS BAR COLOR FOREGROUND (COMPLETED SECTION) */
.progressbar_progressBarIndicator {
  background-color: #F58220;
}

/* PROGRESS BAR COLOR BACKGROUND (INCOMPLETE SECTION) */
.progressbar_progressBar {
  background-color: #E6E7E8;
  height: 15px;   
}

/*  --------------------------------------------------------------------------
                                 HIDING THE REQUIRED LABEL
------------------------------------------------------------------------------ */

/* HIDING THE REQUIRED LABEL */
.validation_requiredBlock {
  display: none;
}
/* -------------------------------------------SMILEY CODE CSS-----------------------------*/
/* MDS RATING GRID FACES PLUGIN */
.mds-plugin-ratingFaces {
  padding-bottom: 10px;
}
.mds-plugin-ratingFaces ul{
  display: table;
  width: 100%;
}
.mds-plugin-ratingFaces li {
  text-align: center;
  display: table-cell;
  vertical-align: top;
  width: 20%;
  cursor: pointer;
  transition: transform 0.1s ease-out;
}
.mds-plugin-ratingFaces span {
  display: block;
  margin-top: 10px;
  opacity: 0;
  color: #FFFFFF;
}
.mds-plugin-ratingFaces a {
  display: inline-block;
  width: 90px;
  height: 60px;
  background: #E6E7E8;
  border-radius: 100px;
  padding-top: 30px;
  transition: background 0.2s ease-out;
}
.mds-plugin-ratingFaces li:hover {
  transform: scale(1.1);
}
.mds-plugin-ratingFaces li.active a {
  background: #F58220;
}
.mds-plugin-ratingFaces li .faces {
  fill: black;
}
.mds-plugin-ratingFaces li.active .faces {
  fill: white;
}
.mds-plugin-ratingFaces li:hover span, .mds-plugin-ratingFaces li.active span {
  opacity: 1;
  transform: scale(.8);
}
@media screen and (max-width: 600px) {
  .mds-plugin-ratingFaces a {
    width: 55px;
    height: 43px;
    padding-top: 12px;
  }
  .mds-plugin-ratingFaces svg {
    width: 25px;
  }
  .mds-plugin-ratingFaces span {
    font-size: 80%;
  }
}