/* -------------------------- */
/* ----- THEME COLORS ------- */
/* -------------------------- */

/* Body background */
html > body,
html > body.background-color { background-image: url(/images/background/bodystripes.png) } /* REPLACE WITH BODY BACKGROUND */
html > body.background-image { background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
html > body.background-image #borderPaddingContainer { opacity: 0.925; }
html > body.iniframe { background-color: transparent !important; }
html > body.iniframe.background-image { background-image: none !important; }



/* Content background and text color */
#borderPaddingContainer
{ background-color: white; color: #333} /* REPLACE WITH CONTENT COLOR/BACKGROUND */

/* Accent background and color - used for user input */
a.activeRadiocustom,
a.activeRadiocustom:hover,
.cellHover a.activeRadiocustom,
a.activeRadiocustom.alternateDesign,
a.activeRadiocustom.alternateDesign:hover,
.cellHover a.activeRadiocustom.alternateDesign,
.selectedRow .cellAnsweralternatives,
option,
.hasValue,
.itemLevel1,
.currentStep .navigation, .currentStep .navigation:hover,
.answerHover, .answerAlternativeDropList .answerHover, .draggableGridItem:hover,
.answerAlternativeDropList .draggableGridItem, .maxItems,
.ui-state-active,
.ui-slider-range,
.ui-slider-handle:not([style^="left: 0%"]),
.submitButton:hover, .submitButton:active, .submitButton:focus
{ background-color: #35C2EE !important; color: white !important; } /* REPLACE WITH ACCENT COLOR/BACKGROUND */

/* Inverted accent - only color */
.progressBar .navigation:hover,
.cbox_progbar_inside .navigation:hover, .ProgressBarStep input.submitHover[class],
.dropCategoryRow,
.submitArrow:hover, .submitArrow:active, .submitArrow:focus,
.tableFormat1:not(.itemLevel1) .cellMatrixAnsweralternatives a.activeRadio:before,
.tableFormat1:not(.itemLevel1) .cellMatrixAnsweralternatives a.activeCheckbox:before
{ color: #35C2EE !important; } /* REPLACE WITH ACCENT COLOR */

/* Inverted accent - color and background */
.cellAnsweralternatives a.activeRadiocustom,
.cellAnsweralternatives a.activeRadiocustom:hover,
.cellAnsweralternatives.cellHover a.activeRadiocustom,
.cellAnsweralternatives a.activeRadiocustom.alternateDesign,
.cellAnsweralternatives a.activeRadiocustom.alternateDesign:hover,
.cellAnsweralternatives.cellHover a.activeRadiocustom.alternateDesign,

.itemLevel1 a.activeRadiocustom,
.itemLevel1 a.activeRadiocustom:hover,
.itemLevel1 .cellHover a.activeRadiocustom,
.itemLevel1 a.activeRadiocustom.alternateDesign,
.itemLevel1 a.activeRadiocustom.alternateDesign:hover,
.itemLevel1 .cellHover a.activeRadiocustom.alternateDesign,
.itemLevel1 .selectedRow .cellAnsweralternatives,
.itemLevel1 .hasValue,
.itemLevel1 .answerHover, .itemLevel1 .answerAlternativeDropList .answerHover, .itemLevel1 .draggableGridItem:hover,
.itemLevel1 .answerAlternativeDropList .itemLevel1 .draggableGridItem, .itemLevel1 .maxItems,
.itemLevel1 .ui-state-active,
.itemLevel1 .ui-slider-range,
.itemLevel1 .ui-slider-handle:not([style^="left: 0%"])
{ color: #35C2EE !important; background-color: white !important; } /* REPLACE WITH ACCENT COLOR/BACKGROUND */

 /* Text borders */
 .itemLevel1 .ui-state-default:not(.ui-state-active),
 .itemLevel1 .ui-widget-content,
 .itemLevel1 input[type='text'],
 .itemLevel1 textarea,
 .itemLevel1 select { border-color: white; }

/* -------------------------- */
/* --- RESETING OF COLORS --- */
/* -------------------------- */

/* Links and survey inputs */
a {color: inherit; text-decoration: underline; }

/* Question text*/
.cellQuestionText1 { color: inherit; }
.textQHead { border-bottom-color: rgba(127, 127, 127, 0.25)}

/* Text inputs */
input[type='text'], textarea, select { border: 1px solid rgba(127, 127, 127, 0.3); background-color: rgba(127, 127, 127, 0.0); color: inherit; }
input[type='text'].hasValue:focus, textarea.hasValue:focus { background-color: transparent !important; color: inherit !important; }
input[type='text'].hasValue:focus { border-radius: 0px; }

/* Grid striping */
.tableFormatMatrix > tbody > tr:last-child:not(.EvenRow) > td { padding-bottom: 1px; }
.EvenRow, .EvenRow td { background-color: transparent; }
.StripedRow { background-color: rgba(127, 127, 127, 0.08); }
.spanningGridText.StripedRow td { border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; }

/* Item striping */
body:not(.noItemStriping) .tableFormat1:nth-of-type(even):not(.itemLevel3):not(.noItemStriping) { background-color: rgba(127, 127, 127, 0.04); }

/* Buttons, Slider and Drag & Drop */
.draggableGridItem, .defaultDropList, .answerAlternativeBox,
.ui-state-default, .ui-widget-content, .ui-button:active { border: 1px solid rgba(127, 127, 127, 0.25); background-color: rgba(127, 127, 127, 0.04); color: inherit;}
.dragOverList,
.ui-state-hover { background-color: rgba(127, 127, 127, 0.1);}
.answerAlternativeDropList .answerHover,
.ui-state-active, .ui-slider-range, .ui-state-active:focus, .ui-state-active:hover { border: 1px solid transparent !important; background-color: #000; color: #fff;}
.ui-slider .ui-slider-handle { background-color: rgba(255, 255, 255, 0.50); border: 1px solid rgba(127, 127, 127, 0.15); }
.ui-datepicker { background-color: rgba(255,255,255,1); }
.ui-visual-focus { box-shadow: none; }

/* Grid header */
.tableFormat1:not(.itemLevel1) .tableFormatMatrix thead, .tableFormat1:not(.itemLevel1) .vcTable thead { background-color: inherit; }

/* Back and next buttons */
#backSubmit.submitButton, #nextSubmit.submitButton,
#nextSubmit, #statementContinue input,
#backSubmit, #statementUndo input { color: inherit; background-color: transparent;	}
#backSubmit.submitButton { background-color: rgba(127, 127, 127, 0.04); color: rgba(127, 127, 127, 0.66)  }

/* Header footer */
#lastRow:after { content: ""; display: table; clear: both; }

/* Legend */
ul.vcLegendBox { border: 1px solid rgba(127, 127, 127, 0.25); background-color: rgba(127, 127, 127, 0.04); }

/* Progress bar*/
.progressBar .navigation,progressBar .navigation:visited,.cbox_progbar_inside .navigation,.progressBarSection,.sectionHeader, .cbox_progbar_inside_highlight .navigation
{ border-color:rgba(127, 127, 127, 0.25);color: inherit;background-color: transparent;}

/* Outline */
body:not(.tabUsed) * { outline: none; }

/* Reference numbering*/
a.reference,
.reference.filters a { opacity: 0.35; text-decoration: none; }

.tableErrorMessage, .itemErrorMessage { color:white; background-color: #cc0000 !important;  }

/* -------------------------- */
/* ------ Dimensions -------- */
/* -------------------------- */

body { font-size: 13px; }

/* Använd flexbox. Påverkar framförallt itemLevel3 */
#items { display: flex; flex-flow: wrap; }
@media only print {
	#items { display: block; }
}
.tableFormat1,
.tableErrorMessage,
#navigationElements,
#lastRow {  flex-basis: 100%; }

#borderPaddingContainer { padding: 0px; overflow: hidden; }
.tableFormat1 { padding: 6.75% 9%; margin: 0px; clear: both; position: relative; }
body.noItemStriping .tableFormat1 { padding-top: 4%; padding-bottom: 4% }
.tableFormat1:first-of-type,
body.noItemStriping .tableFormat1:first-of-type,
.itemLevel3:first-of-type + span + span + .itemLevel3 { padding-top: 9%; }
.tableFormat1:last-of-type:nth-of-type(odd),
.tableFormat1.noItemStriping:last-of-type,
body.noItemStriping .tableFormat1:last-of-type { padding-bottom: 3%; } /* Item striping */
body.hasLogo .tableFormat1:first-of-type,
body.hasLogo .itemLevel3:first-of-type  + span + span + .itemLevel3 { padding-top: 5.75%; }
body.hasTopNavigation .tableFormat1:first-of-type,
body.hasTopNavigation .itemLevel3:first-of-type + span + span + .itemLevel3 { padding-top: 3.75%; }
.textQHead { letter-spacing:0.05em; line-height: 1.5em; border-bottom-style:dotted; padding-top: 0px; }

/* Meddelanden */
body.hasTopNavigation .itemInformationMessage:first-of-type,
body.hasTopNavigation .itemWarningMessage:first-of-type,
body.hasTopNavigation .itemErrorMessage:first-of-type { padding-top: 9%; }


/* Specialdesign av rubriker */
.itemLevel1 .textQHead { padding: 0px; margin: 0px;  }
.itemLevel1 ul.vcLegendBox,
.itemLevel1 .cellQuestionBody { margin-top: 1em; }
.itemLevel1 .cellQuestionBody { text-align: center; }
.itemLevel1  .cellSubquestionLeft { text-align: left; }
.itemLevel1 .QuestionTable { display: inline-block; }
#borderPaddingContainer .itemLevel1 { margin: 0; padding: 5% 22%; border-radius: 0px; border-width: 0px;box-shadow: none; }
.hasTopNavigation #borderPaddingContainer .itemLevel1:first-of-type,
.hasLogo #borderPaddingContainer .itemLevel1:first-of-type { margin-top: 3.75% }

/* Två items bredvid varandra */
.itemLevel3 { padding-right: 0px; width: 36.5%; flex-basis: 36.5%; clear: none; }
div.itemLevel4 { padding-right: 0px; width: 21.33333333%; flex-basis: 21.33333333%; clear: none; }

/* Logos */
#borderPaddingContainer #supplierLogo,
#borderPaddingContainer #rightLogo { margin: 6.8% 8.8% 0px; max-width: 30%;  }
#borderPaddingContainer #supplierLogo { margin-right: 0px; }
#borderPaddingContainer #rightLogo { margin-left: 0px; }
.itemStatement a.reference { display: none; }

/* Reference ids */
.TestDialog .itemStatement a.reference { display: none; }
a.reference,
.reference.filters { position: absolute; top: 0.5em; right: 0.5em; font-size: 0.85em; max-width: 75%;  }
.reference.filters { left: 0.5em; top: 1em; display: inline-block; }
.simpleQuestionGridHeader a.reference,
.simpleQuestionGridHeader .reference.filters,
.cellSubquestionLeft a.reference,
.cellSubquestionLeft .reference.filters { position: inherit; }

.tableErrorMessage { display: block; margin: 0%; padding: 1.25em; font-weight: bold; }
.hasTopNavigation .tableErrorMessage,
.hasLogo .tableErrorMessage { margin-top: 3.75%;}

audio { height: 2em; background: transparent; }

/* -------------------------- */
/* ---- Default inputs ------ */
/* -------------------------- */

input[type='text'], textarea, select { font-size:1.2em; letter-spacing:0.05em; line-height: 1.5em; outline: none; padding: 0.25em 0.5em;  }
input[type='text'].hasValue, textarea, select { border-radius: 0.25em; }
input[type='text'], textarea { max-width: 97%; } /* Max-width is hardcoded */
input[type='text'] { border-width: 0px 0px 1px 0px; }
select { height: 3em; }
textarea { overflow: auto; resize: none; }
input[type='submit'], input[type='text'], textarea, select  { -webkit-appearance: none; -moz-appearance: none; appearance: none;
}



/* -------------------------- */
/* --- Questions & Grids ---- */
/* -------------------------- */

/* Question */
table.QuestionTable { border-spacing: 0px 0.25em; border-collapse: separate; }
.cellAnsweralternatives { width: 100%; border-radius: 0.25em; padding-left:0.5em; padding-right: 0.5em; }
.cellAnsweralternatives th,
.inputColumn, .answertextColumn  { padding-left: 0em; padding-right: 0.4em;}

/* Grids */
.tableFormatMatrix td,
.vcTable td { padding-top: 1em; padding-bottom: 1em;}
.cellMatrixAnsweralternatives, { overflow: hidden; }
table.zebraTable .spanningGridText > td { padding-left: 0.75em; padding-right: 0.75em; padding-top: 1.25em;}
table.zebraTable td.cellMatrixAnsweralternatives { padding-bottom: 1.25em; }
.simpleQuestionGridHeader { position: relative; }

/* ViewsCapture Classification */
.reviewList { display: none } /* No more reviewList by default */

/* -------------------------------- */
/* Buttons, Slider and Drag & Drop  */
/* -------------------------------- */

.ui-button-text-only .ui-button-text { padding: 0px !important; }
.ui-buttonset .ui-button,
.ui-button { padding: 0.7em 1em;  margin-right: -1px !important; margin-top: -1px !important;}
.itemLevel1 .ui-buttonset .ui-button,
.itemLevel1 .horizontalButtons .ui-button { margin-top: 0px !important;}
label.ui-button .ui-button-text,
label.ui-button { letter-spacing: 0.1em;}
.answerAlternativeDropList, .defaultDropList, .draggableGridItem { border-radius: 0.25em; }
.ui-combobox { font-size: 1.2em; }
ul.ui-autocomplete { left: 0px; top: 2.4em; background-color: #FAFAFA; letter-spacing:0.05em; }
.ui-combobox-button { margin-top: 0px !important; }
.ui-menu-item a { text-decoration: none; }

/* -------------------------- */
/* ---- New grid buttons ---- */
/* -------------------------- */

.itemGrid:not(.preparedButtons) .cellQuestionBody > table { width: 100% !important; }


.preparedButtons .horizontalButtons span.header { display: block; }
.preparedButtons .horizontalButtons span,
.preparedButtons .horizontalButtons > div  { display: contents; }


/*.preparedButtons .ui-button { margin-right: 0px !important;  margin-top: 4px !important; }*/
/* Coming soon
.preparedButtons .horizontalButtons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min-content, 8.25em) );
  justify-content: left; grid-auto-rows: 1fr }
.preparedButtons .ui-button { margin-right: -1px !important;  margin-top: -1px !important; }
.preparedButtons .horizontalButtons label,
.preparedButtons .horizontalButtons div.headerRow { display: flex; justify-content: center; align-items: center; }
.preparedButtons .horizontalButtons div.headerRow { justify-content: flex-start;}
.preparedButtons .horizontalButtons textarea,
.preparedButtons .horizontalButtons input[type='text'],
.preparedButtons .horizontalButtons div.headerRow  { grid-column: 1 / -1; margin-top: 0.5em; }
@media only screen and (max-device-width: 970px), only screen and (max-width: 970px) {
  .preparedButtons .horizontalButtons { font-size: calc(10px + 4 * ((100vw - 320px) / 680)); }
  .preparedButtons .horizontalButtons label { 1em }
}
/* */


}

/* -------------------------- */
/* ---- Progress bar -------- */
/* -------------------------- */

.sectionHeader { padding-bottom: 0.5em }
.progressBarSection { margin-bottom: 1em; }
.ProgressBarStep .navigation { padding-top: 0.5em; padding-bottom: 0.5em; border-right: 0px; }
.currentStep .navigation { border-radius: 0.25em; font-weight: bold;}
#progressBar_holder,
#progressBar_holder.afterHeaderProgressBar,
#progressBar_holder.beforeHeaderProgressBar { margin: 6.8% 7.2% 0px 8.8%; border-bottom-width: 0px; }

/* -------------------------- */
/* ------ Mobile  ----------- */
/* -------------------------- */

@media only screen and (max-device-width: 568px), only screen and (max-width: 568px) {
    #widthContainer #borderPaddingContainer { padding-top: 0px; padding-bottom: 0px !important;;}
    .tableFormat1,
	#borderPaddingContainer div.itemLevel4,
    #borderPaddingContainer .itemLevel3 { padding-left: 6.75%; padding-right: 6.75%;  }
	#borderPaddingContainer div.itemLevel4,
	#borderPaddingContainer .itemLevel3 { width: auto; flex-basis: 100%;  margin: 0px; float: none; }

    body.hasTopNavigation .tableFormat1:first-of-type { padding-top: 9%; }
	#borderPaddingContainer .itemLevel1 { margin: 0%; padding-left: 4%; padding-right: 4%; }

	.cellAnsweralternatives { width: 100%; padding: 0.6em 0.6em 0.6em 0.3em !important; }
	.cellAnsweralternatives .buttonColumn { padding-left: 0.4em; }
	.cellAnsweralternatives .listColumn { margin-right: 0px;}
	.vcTable .EvenRow td { background-color: transparent; }
	.tableFormatMatrix th.scaleHeaderContainer th { padding-bottom: 0.45em; }
	.tableFormatMatrix td, .vcTable td { padding-top: 0.5em; }

	/* Item striping */
	body:not(.noItemStriping) .tableFormat1:nth-of-type(even):not(.noItemStriping) { background-color: rgba(127, 127, 127, 0.04); }
	body:not(.noItemStriping) .tableFormat1:last-of-type:nth-of-type(even):not(.noItemStriping) { margin-bottom: 3.75%; }

	.EvenRow td:nth-child(2) { border-bottom-left-radius: 0.5em; border-top-left-radius: 0px; }
	.EvenRow td:last-child { border-bottom-right-radius: 0.5em; border-top-right-radius: 0px; }

    #borderPaddingContainer #supplierLogo { margin-right: 0px; margin-left: 6.8%; max-width: 43%; }
    #borderPaddingContainer #rightLogo { margin-left: 0px; margin-right: 6.8%; max-width: 43%; }

	#progressBar_holder.afterHeaderProgressBar,
	#progressBar_holder.beforeHeaderProgressBar { margin: 0px; }
	.hasLogo #progressBar_holder.afterHeaderProgressBar { padding-top: 6%; }

	.progressBarSection { margin-bottom: 0px;}
	#ProgressBar .progressBarHandle, #ProgressBar .ProgressBarStep .navigation[class]
	{ padding: 1em; border-bottom-width: 0px; font-size: 1.2em;}
	#ProgressBar:hover .ProgressBarStep .navigation[class] { border-bottom-width: 1px; font-size: 1em; padding: 0.8em}

    #nextSubmit, #statementContinue input,
    #backSubmit, #statementUndo input { position: static; width: 50%; }
    #nextSubmit, #statementContinue input { text-align: right; }
    #backSubmit, #statementUndo input { text-align: left; }

    /* Reference numbering*/
    a.reference,
    .reference.filters { top: 0.2em; font-size: 0.7em; }

	.hasTopNavigation .tableErrorMessage,
	.hasLogo .tableErrorMessage { margin-top: 3.75%;}
}

/* -------------------------- */
/* ----- CSS-transistions --- */
/* -------------------------- */

#nextSubmit, #statementContinue input,
#backSubmit, #statementUndo input,
.loaded .cellAnsweralternatives,
.loaded input[type='text'], .loaded textarea, .loaded select {
	transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-in;
}

/* -------------------------- */
/* ------ Back & Next ------- */
/* -------------------------- */

#nextSubmit.submitArrow, #statementContinue input,
#backSubmit.submitArrow, #statementUndo input {
  font-family: 'surveyinputs' !important;
}

#nextSubmit, #statementContinue input,
#backSubmit, #statementUndo input {
  font-size: 70px;
  background-image: none;
  width: 50% !important;
  height: auto;
  padding: 6.75%;
  position: initial;
  outline: none;
  position: static !important;
}

#nextSubmit, #statementContinue input { text-align: right !important; }
#backSubmit, #statementUndo input { text-align: left !important; }
#lastRow { padding-top: 0px !important; }


#backSubmit.submitButton, #nextSubmit.submitButton {
	margin-top:	3.75%;
    font-size: 2em;
    border-width: 0px;
    border-radius: 0px;
    font-family: inherit;
	padding: 6.75%;
	text-align: center !important;
}

/* -------------------------- */
/* ------ Preview-mode  ----- */
/* -------------------------- */


.iniframe a.reference {
	font-size: 1em;
	line-height: 1.4em;
}


.iniframe a.reference {
	background-color: rgba(127,127,127,0.2);
	padding: 0.5em 0.75em;
	border-radius: 1em;
	color: rgba(0, 0, 0, 0.6);
	text-decoration: none;
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.iniframe a.reference {
	cursor: pointer;
}

.iniframe .tableFormat1:hover a.reference {
	opacity: 0.8
}

.iniframe .aselectedQuestion:hover a.reference,
.iniframe .aselectedQuestion a.reference {
	opacity: 0.9;
	color: white;
}

.iniframe .tableFormat1 a.reference:hover  {
	opacity: 1
}

.iniframe span.pageBreak {
	height: 2em;
	background-color: rgba(127,127,127,0.33);
	flex-basis: 100%;
	text-align: center;
	cursor: pointer;
	/*margin-top:	6.75%;
	margin-bottom: 6.75%;*/
}

/* Start chips icons */

.iniframe span.pageBreak:after,
.iniframe .tableFormat1:hover a.reference:before,
.excludedItem a.reference:before {
    content: ' ';
    background-size: 1.25em;
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
}

.iniframe span.pageBreak:after {
    background-image: url(/images/icons/materialsvg/format-page-break.svg);
	margin-top: 0.375em;
}

.iniframe .tableFormat1:hover a.reference:before { background-image: url(/images/icons/materialsvg/pencil.svg); }

.excludedItem a.reference:before { background-image: url(/images/icons/materialsvg/eye-off.svg); }

.iniframe .aselectedQuestion:hover a.reference:before,
.aselectedQuestion.excludedItem a.reference:before {
    filter: invert(100%);
}

/* End chips icons */

body .tableFormat1.excludedItem { background-color: rgba(127,127,127,0.25); color: rgba(127,127,127,0.75);padding-top: 1em; padding-bottom: 1em; }
body .tableFormat1.excludedItem .textQHead { border-bottom-style: none; padding: 0px; margin: 0px; height: 1.5em; overflow: hidden; font-weight: normal; }
body:not(.noItemStriping) .tableFormat1.excludedItem:nth-of-type(even):not(.itemLevel3):not(.noItemStriping) { background-color: rgba(127, 127, 127, 0.15); }

.iniframe #nextSubmit, .iniframe #backSubmit,
.iniframe span.tableErrorMessage:not(.itemErrorMessage) {
    display: none !important;
}

.iniframe #lastRow {
    min-height: 4em;
}

@media only screen and (max-device-width: 568px), only screen and (max-width: 568px) {
	.iniframe a.reference {
		font-size: 0.7em;
		line-height: 1.3em
	}
}