/*CSS for questionnaire administation styling -- adds to HTML templates from the database*/
#questionnaire_body, #questionnaire_body td, #questionnaire_body p, td.questionnaire_body {
	font-family:Arial, Helvetica, sans-serif; font-size: 12px;
}
#questionnaire_body h1 {
	font-size: 1.8em; 
	font-family: Tahoma, Arial, Helvetica; 
	font-weight: 800; 
	letter-spacing: 1px; 
}
#questionnaire_body h2 { 
	font-size: 1.5em; 
	font-family: Tahoma, Arial, Helvetica; 
	font-weight: 800; 
	letter-spacing: 1px; 
	font-style: normal; 
}

/*If the columns must have equal width*/
table.fixed {
	table-layout:fixed;
}
table.fixed td {
	overflow: hidden;
}

.questionnaire tr td label {
	display: block;
	width: 100%;
	text-align: center;
}
.questionnaire_toprow {
	background-color: #BBBBBB;
	font-style: italic;
}
div.questionnaire_toprow > div > div.row > div > table > tbody > tr > td > a {
	font-style: italic;
}
/*make the self for 'I don't know this person' invisible and inactive (cant display:none as changes table col widths)*/
div.questionnaire_toprow > div > div.row > div > table > tbody > tr > td > [id$='_self_link'] {
	color: #BBBBBB !important;
	pointer-events: none;
	cursor: default;
}
.questionnaire_oddrow {
	background-color: #EEEEEE;
}
.questionnaire_evenrow {
	background-color: #D0D0D0;
}
.questionnaire textarea {
	background-color: #EEEEEE;
}
/**Validation error*/
.validation_error {
	background-color: #ED9264 !important;
}
.policies {
	color: #555555;
	font-size: smaller;
}
.policies a:visited { 
	color: #8C0B05 !important; 
}
.accept_policies { 
	padding:10px;
	line-height: 24px;
}
.accept_policies a:link,
.accept_policies a:visited { 
	color: #8C0B05 !important; 
}

.checktext {
	font-weight: bold;
	color: #8C0B05 !important;
	border: 0px;
	padding: 3px;
}
.checktext:hover {
	border: 1px solid #F57B20 !important;
	padding: 2px;
}

.checktext_checked {
	font-weight: bold;
	color: #FFFFFF !important;
	background-color: #F57B20 !important;
	border: 0px;
	padding: 3px;
}
.checktext_checked:hover {
	border: 1px solid #FFFFFF !important;
	padding: 2px;
}

.checktext_checked_self {
	font-weight: bold;
	color: #FFFFFF !important;
	background-color: #8C0B05 !important;
	border: 0px;
	padding: 3px;
}
.checktext_checked_self:hover {
	border: 1px solid #FFFFFF !important;
	padding: 2px;
}

label.checklbl {
	background-color: #DDDDDD;
	display: block;
}

table.toggletable {
	margin-bottom: 1em;
}
table.toggletable, .toggletable th, .toggletable td {
	border: 1px solid #555555;
}
.toggletable th, .toggletable td {
	border: 0px solid #555555;
	/*text-align: center;*/
}

textarea.textual, input.textual {
	background-color: #EEEEEE;
	border: thin solid #333333;
	box-sizing: border-box;
}

textarea.fullwidth, input.fullwidth, p.fullwidth {
	width: 100%;
}

textarea.autowidth, input.autowidth, p.autowidth {
	width: auto;
}

input.radio_comment_inline {
	font-size: 90%;
	padding: 1px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
input.inlinecomment {
	background-color: #FFFFFF;
	border: 1px solid #333333;
	width: 165px;
	font-size: 90%;
	padding: 1px;
}
input.inlinecomment_empty {
	color: #999999;
}

table.radio {
	margin-bottom: 2em;
}
tr.comment > td > p {
	margin: 0px;
}

/*Content within a box. Use h3 for headings*/
.boxed {
	margin: 0 10px 0 10px;
	padding: 5px;
	border: 1px solid black;
	text-align: center;
}
.boxed h3 {
	margin-top: 0;
}

/**Notification box painted at top of page*/
div.notification {
	border: 1px solid #000044;
	padding: 5px;
	background-color: #DDDDFF;
	margin-top : 16px;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 8px;
	font-weight: bold;
}

/*css to implement fading and radio group clear for unanswered questions*/
/*hide the radio button and display an icon - used to clear the selection*/
.clear-sel {
	display:none !important; 
}

.clear-sel {
	position: relative !important;
}
.clear-sel + label:before {
	content: "\f00d";       /*fa-times*/
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	font-size: 16px;
	color: #777;
}


/*set the borders of the table so the last column can be outside*/
table.questionnaire { 
	border-collapse: collapse !important;
}
table.questionnaire td {
	border: 2px solid #555555 !important;
}

tr td.clear-last {
	border: none !important;
	color: #FFFFFF;
}
tr td.clear-head {
	border: none !important;
	color: #FFFFFF;
}

div.indent {
	padding-left: 25px;
}


/*make a link look like a button */
a.button {
	border: 1px solid transparent !important;
	color: #FFFFFF !important;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	-webkit-appearance: button;
	cursor: default;
}
a.button:hover {
	text-decoration: none !important;
}


/*change multi-select checkbox appearance for import text functionality*/
.dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
	height: 100% !important;
}
.dijitCheckBox {
	padding-right: 16px !important;
	margin-top: 3px !important;
}
.dojoxMultiSelectItem {
	white-space: normal !important;
	display: inline-flex !important;
}
.dojoxCheckedMultiSelectItem {
	white-space: normal !important;
}