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

/* Body background */
html > body,
html > body.background-color { background-image: url(/images/background/bodystripes.png) } /* REPLACE WITH BODY BACKGROUND */

/* 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 td.cellAnsweralternatives,
option,
.hasValue,
.itemLevel1,
.currentStep .navigation, .currentStep .navigation:hover,
.answerHover, .answerAlternativeDropList .answerHover,
.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,
.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 td.cellAnsweralternatives,
.itemLevel1 .hasValue,
.itemLevel1 .answerHover, .itemLevel1 .answerAlternativeDropList .answerHover,
.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,0.75); }
.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 { color: rgba(127,127,127,0.5); }

.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 .reference { display: none; }

/* Reference ids */
.TestDialog .itemStatement .reference { display: none; }
a.reference { position: absolute; top: 1%; right: 1%; font-size: 0.85em; }
.cellSubquestionLeft a.reference { position: inherit; }

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

audio { height: 2em; }

/* -------------------------- */
/* ---- 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; -webkit-appearance: none;  }
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; }

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

/* Question */
table.QuestionTable { border-spacing: 0px 0.25em; border-collapse: separate; }
td.cellAnsweralternatives { width: 100%; border-radius: 0.25em; padding-left:0.5em; padding-right: 0.5em; }
td.cellAnsweralternatives th { 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; }

/*  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; }

/* -------------------------- */
/* ---- 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%; }

	td.cellAnsweralternatives { width: 100%; padding: 0.6em 0.6em 0.6em 0.3em !important; }
	td.cellAnsweralternatives th.buttonColumn { padding-left: 0.4em; }
	td.cellAnsweralternatives th.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 { top: 0%; font-size: 0.5em; }

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

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

#nextSubmit, #statementContinue input,
#backSubmit, #statementUndo input,
.loaded td.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;
}