.suFormMain
{
  text-align:left;
  padding:0;
}

.suBorder
{
  t ext-align:center;
	w idth:100%;
	b ackground-color: #fff;
	p adding: 0px;
}

.suSurveyForm
{
	font-size: 10pt;
	border-collapse: collapse;
	margin: auto;
	w idth: 100%;
	b ackground-color: #ffffff;
}

.suSurveyForm input[type=text]:focus, .suSurveyForm select:focus
{
  box-shadow: 0px 10px 20px #b0b0b0;
}

.suSurveyForm .wsfQSbtns
{
  margin-left:5px;
  width:auto;
}

#oInterviewCnv
{
  position: fixed;
  top:0;left:0;
  right:0;bottom: 0;
  padding: 20px;
  background-color:#fffffff5;
  z-index: 2;
}

#oInterviewBox
{
  width: 100%;
  min-height: 50vh;
  max-height: 100%;
  overflow: auto;
  margin: auto;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  -moz-box-shadow: 0px 10px 20px #b0b0b0;
  -webkit-box-shadow: 0px 10px 20px #b0b0b0;
  box-shadow: 0px 10px 20px #b0b0b0;
}

#oInterviewBox .suInterviewHead
{
  text-align:left;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  border: 1px solid #c0c0c0;
}

#oInterviewBox .suInterviewBts
{
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  border: 1px solid #c0c0c0;
}
  
.suInterviewHead
{
  padding: 10px;
  text-align:center;
  font-size: 12pt;
  margin-bottom:2px;
  background-color: #f0f0f0;
}

.suInterviewBts
{
  text-align:center;
  padding:10px;
  background-color: #f0f0f0;
}

.suInterviewBts input { margin-right: 5px; }

/*
.suSurveyForm TR:hover
{
  background-color: #ffff99;
}
*/

.suGroupRepeatRow
{
}

.suGroupRepeatAddRow
{
  border-top: 1px solid #c0c0c0;
}

.suGroupRepeatAddRow .wsfFrmLabel { color: #c0c0c0; }

.suFileUploadBtn:hover
{
  background-color: #50ace4;
  border:1px solid #c0c0c0;
}

.suFileUploadFile
{
  display:none;
}

#oSurveyMgrSummary .wsfQRCodeImg
{
  width: auto;
  max-width: 200px;
  margin: 10px;
}

#oSurveyMgrSummary .wsfQRCode 
{
  margin: 10px;
  background-color: #fff;
  display:inline-block;
}

#oSurveyMgrSummary .wsfQRBizLogo img { height: 100px;  }
#oSurveyMgrSummary .wsfQRProdLogo img  { height: 50px;  }
#oSurveyMgrSummary .wsfQRProdLogo span { display:block; font-size: 9pt; margin-top: 20px;  }

@media print 
{
  #oSurveyMgrSummary .wsfQRCodeImg { width: 300px; max-width: none;}
  #oSurveyMgrSummary .wsfQRCode { t ext-align: center; display:block; border: 0; }
  #oSurveyMgrSummary .wsfQRCodeTitle { font-size: 28pt; }
  #oSurveyMgrSummary .wsfQRCodeURL { font-size: 18pt; }
  #oSurveyMgrSummary .wsfQRBizLogo img { height: 150px;  }
  #oSurveyMgrSummary .wsfQRProdLogo img { height: 100px; }
  #oSurveyMgrSummary .wsfQRProdLogo span { font-size: 12pt; }
}

.suFileUploadBox
{
  padding: 5px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
}

.suFileUploadSel:empty { display: none }
.suFileUploadSel
{
  padding: 5px;
  text-align: right;
  background-color: #fff;
}

.suFileUploadInfo
{
  padding: 5px;
  margin-top: 2px;
  background-color: #f0f0f0;
}

.suFileUploadInfoErr
{
  color:#df0000;
  padding-left: 10px;
}

.suFileUploadBtn
{
  border:1px dashed #c0c0c0;
  display:inline-block;
  padding:10px 20px;
  border-radius:4px;
  text-align:center;
  background-color: #50ace487;
  cursor:hand;cursor:pointer;
}

.suSurveyForm TD
{
  padding:10px;
}

.suReqSection
{
  background-color: #f0f0f0;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  margin: 10px 0;
}

html>body .frmUserLbl
{
  text-align: right;
  vertical-align: middle;
}

.suSurveyForm INPUT, .suSurveyForm SELECT, .suSurveyForm TEXTAREA
{
  font-size:100%;
  padding:5px;
  border: 1px solid #c0c0c0;
  border-radius:4px;
  width: 100%;
  m ax-width: 250px;
}

.suSurveyHeaderNote
{
  padding-bottom:20px;
  text-align: left;
}

.suSurveyFooter
{
  font-size:9pt;
  padding-top:50px;
  text-align: center;
}

.suSurveyFooterNote
{
  padding-top:50px;
  font-size:11pt;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
}

.suSurveyBtn
{
  font-size:10pt;
  padding:5px 10px 5px 10px;
  border: 1px solid #c0c0c0;
  border-radius:4px;
}

.suQstStepBtns, #suQstPrevNextBtns, #suQstPrevNextBtnsStep1
{
  text-align:center;
}

.suSurveyForm INPUT.suQstPrevBtn,
.suSurveyForm INPUT.suQstNextBtn,
.suSurveyForm INPUT.suQstSubmitBtn
{
  display: inline-block;
  background-color: #1f6bb6;
  width: auto;
  min-width: 60px;
  color: #fff;
  margin-right:2px;
}

.suSurveyForm INPUT.suQstSubmitBtn { background-color: darkorange; }

.suSurveyForm INPUT.suQstStepBtn
{
  display:inline-block;
  background-color:#1f6bb6;
  width: 38px;
  font-size: 15pt;
  border-radius: 20px;
  margin:1px;
  border:2px solid #fff;
}

.suSurveyForm INPUT.suQstStepBtnNext
{
  background-color:#50ace4;
}

.suSurveyForm INPUT.suQstStepBtnDsb
{
  background-color:#f0f0f0;
  color:#c0c0c0;
}

.suSurveyForm INPUT.suQstStepBtnCurr
{
  background-color:#1f6bb6;
  color:#fff;
  border:2px solid #ffc107;
}

.suGroup
{
  font-size:10pt;
  font-weight: bolder;
  padding-top: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #c0c0c0;
}

.suQuestion
{
  vertical-align:middle;
  text-align: left;
  display:inline-block; 
}

.suQuestionDescription
{
  padding-top: 10px;
}

.suSubmitFormOk
{ 
	background-image: url(../images/checkmark.png);
	background-size:90px auto;
	background-repeat: no-repeat;
	background-position: center 10px;
	padding-top:50px;
}

.suSubmitFormErr
{ 
	background-image: url(../images/CancelOnly.png);
	background-size:90px auto;
	background-repeat: no-repeat;
	background-position: center 10px;
	padding-top:50px;
}

.suAnswer .wsfMandInput { background-image: none; }

/* .suQuestion .wsfInvalidInput { padding:5px; border-radius: 4px; } */
.suSurveyForm .wsfInvalidInputTip { d isplay:none; }
.suSurveyForm .wsfFrmInput { padding: 10px; }
.suSurveyForm .wsfFrmLabel { padding-left: 10px; font-size: 110%; font-weight: bolder; }
.suSurveyForm .wsfFrmLabel.wsfInvalidInput { color:#df0000;background-color: transparent !important; } 
.suChoiceDesc { padding-bottom: 5px;}

.suChoiceItemSel.suChoiceDesc1 { background-color: #FF5722 !important; } /* Terrible */
.suChoiceItemSel.suChoiceDesc2 { background-color: #FF9800 !important; } /* Poor */
.suChoiceItemSel.suChoiceDesc3 { background-color: #c0c0c0 !important; } /* Average */
.suChoiceItemSel.suChoiceDesc9 { background-color: #8BC34A !important; } /* Good */
.suChoiceItemSel.suChoiceDesc4 { background-color: #CDDC39 !important; } /* Very Good */
.suChoiceItemSel.suChoiceDesc5 { background-color: #ffc107 !important; } /* Excellent */

.suChoiceItemSel.suChoiceDesc6 { background-color: #FF5722 !important; } /* Surely Not */
.suChoiceItemSel.suChoiceDesc7 { background-color: #c0c0c0 !important; } /* Unsure */
.suChoiceItemSel.suChoiceDesc8 { background-color: #8BC34A !important; } /* Definitely */

.suQuestionText
{
  display:inline-block;
}

.suAnswer
{
}
  
.suChoiceItem
{
  display:inline-block;
  vertical-align: bottom;
  margin:0px 10px 0px 10px;
  text-align: center;
  padding: 4px;
  border-radius:4px;
}
  
.suChoiceItemSel
{
  background-color:#f0f0f0;
  b order-bottom: 1px solid #c0c0c0;
}

.suMemo
{
  width:100%;
  height: 60px;
}

.frmUserFldRO
{
  border: 0px;
}
  
#suValidateInfo
{
  padding-bottom: 10px;
}

#oMgrEdMgrBtnQuestionGroups { background-image: url(../images/grouping.png); }
#oMgrEdMgrBtnQuestionSteps { background-image: url(../images/steps.png); }
#oMgrEdMgrBtnQuestions { background-image: url(../images/QuestionGrey.png); }
#oMgrEdMgrBtnSurveyUsers { background-image: url(../images/customers-icon.png); }

.suValidateInfoWrn { color:#df0000; font-size: 10pt; font-weight: bolder; }

.wsfPagesuSurveys .wsfMgrEditorLeft { width:10%; }
.wsfPagesuSurveys .wsfMgrEditorRight { width:90%; }
.wsfPagesuSurveys .wsfMgrEdLeftName 
{ 
  transform: rotate(90deg); 
  width: 40px;
  padding: 10px;
  white-space: nowrap; 
}
.wsfPagesuSurveys .wsfMgrEdLeftID
{
  font-size: 10pt;
  padding-left: 10px;
  display: inline-block;
}

@media only screen and (max-width: 800px)
{
  .wsfPagesuSurveys .wsfMgrEdLeftName { transform: rotate(0); width:auto; white-space:normal; }
  .wsfPagesuSurveys .wsfMgrEditorLeft, 
  .wsfPagesuSurveys .wsfMgrEditorRight { width: 100%; }
  .wsfPagesuSurveys .wsfMgrEdLeftID
  {
    font-size: 10pt;
    padding-left: 10px;
    display: block;
  }
}