.watu-question {
	display: none;
	clear: both;
	/*float: left; commented in version 6.1.0.3, was causing new next/prev buttons to go next to the question on some themes */
}

.watu-question input[type=text], .watupro input[type=text], input.watupro-gap {
	display: inline;
}

input.watupro-gap {
	max-width: 150px;
}

.watu-question-compact {
   width: 100%;
}

form.quiz-form {
	text-align:left;
}

.single-page-quiz .watu-question, .single-page-quiz {
	display:block;
}
.single-page-quiz #next-question {
	display:none;
}
.question-content {
	margin-top:20px;
	margin-left: 5px;
}

.show-question {
	margin-bottom: 15px;
	padding: 5px;
	display:block;
	float:left;
}
.watupro-question-choice {
	padding-right:18px;
}

.user-answer span.answer {
	font-weight:bold;
	color:blue;
	background:url(wrong.png) no-repeat right top;
	padding-right: 18px;
	display: inline-block;
	vertical-align: text-top;
}
.user-answer-unrevealed {
	font-weight:bold;
	color:blue;
	vertical-align: text-top;
}

.user-answer {
	color: blue;
}

.user-answer img {
	border: 2pt solid blue;
}

.correct-answer span.answer {
	background:url(correct.png) no-repeat right top;
	padding-right: 16px;
	display: inline-block;
	vertical-align: text-top;
}

span.answer {
	display: inline-block;
	vertical-align: text-top;
}

.show-question-content {
    font-weight:bold;
}

p.error {
    clear:both !important;
    color:red;
}

#detailsText {
	background-color:red;
}

.watupro label {
	display:block;
	float:left;
	width:150px;
}

.watupro select {
	min-width:120px;
}

.watupro-alert, .watupro-success {
	padding:20px;
	background-color: #EEE;
	font-weight: bold;
}

.watupro-error {
	padding:20px;
	font-weight: bold;
	background:#EEE;
	color:red;
}

.watupro-padded {
	padding: 20px;
}

.watupro-warning {
	font-weight:bold;
	color:red;
}

.watupro-help {
	font-style: italic;
	font-size:11pt;
	color:gray;
}

table.watupro_buttons td {
	min-width:80px;
}

table.watupro_buttons {
	clear:both !important;
	border-collapse: collapse;
	width: 50%;
}

/* New watupro_buttons FLEX */
.watupro_buttons.flex {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     clear: both;
}

.watupro_buttons.flex div {
     margin: 0.5rem;
}

ul.watupro-paginator {
	list-style-type: none;	
	display: block;
	clear: both;
	float: left;
	width:100%;
}

.watupro-paginator-vertical ul.watupro-paginator {
   display: flex !important;
   flex-flow: column wrap !important;
   width: auto;
}

ul.watupro-paginator li {
	display: block;
	float: left;
	padding: 5px;
	border: 1px solid black;	
	text-align: center;
	margin: 10px 3px;
	font-weight: bold;
	cursor: pointer;	
}

ul.watupro-paginator li.active {
	padding: 10px;
	margin: 5px 3px;
}

ul.watupro-paginator li.answered {
	background-color: #88FF88;
}

ul.watupro-paginator li.unanswered {
	background-color: #FF6A6A;
}

ul.watupro-paginator li.marked {
	border: 2pt dashed black !important;
}

#timerDiv {
	margin-bottom: 20px;
	color: green;
}

.watupro-textarea-medium {
	width: 280px;
	height:80px;
}

.watupro-textarea-large {
	width: 600px;
	height:300px;
}

.watupro-qnum-info {
	font-style: italic;
	padding-top: 25px;
	clear: both;
}

.watupro-compact {
	clear:both;
	width:100%;
	float:left;
	margin-bottom: 20px;
}

.watupro-compact div.question-content, .watupro-compact div.show-question-content {
	float:left;
	width:48%;
	margin-top:0px !important;
}

.watupro-compact div.question-choices, .watupro-compact div.show-question-choices {
	float:right;
	width:48%;	
}

.watupro-compact .question-choices div.watupro-question-choice, .watupro-compact .show-question-choices li.answer {
	float: left;
}

.watupro-compact .show-question-choices li.answer {
	margin-right: 25px;
}

.watupro-matrix-droppable tr td {
   border: 1px dashed #DDD;
   min-width: 150px;
   min-height: 80px;
   padding: 10px;
} 

/* Social sharing CSS */
.watuproshare-facebook {
	padding: 10px;
	background-color: #4c66a4;
	color:white !important;
	font-weight:bold;
	text-decoration:none;
}

a.watuproshare-facebook {	
	color:white !important;	
}

.watupro-share {
	margin: 20px;
}

.watupro-share a {
	margin: 15px;
}

.watupro-progress-container {
	width:100%; 
	height:30px;
	float:left; 
}

.watupro-progress-bar {
	text-align:right;
}

.watupro-progress-percent {
	padding: 0px 5px;
	background: white;
	font-weight: bold;
	border-radius: 10px;
}

.watupro-twitter-share-button {
	margin: 0px !important;
}

.watupro-rating-wrap {
	padding: 10px;
}

.watupro-rating ul {
	list-style-type: none !important;
}

.watupro-paginated-hidden { display: none; }

/* honeypot */
.watupro-beehive { display:none !important; } 

.quiz-form label {
   display: inline !important;
}
.quiz-form input[type="checkbox"] {
   display: inline !important;
}
.quiz-form input[type="radio"] {
   display: inline !important;
}

span.watupro_num {
 display: inline !important;
}

.watupro-basic-chart td, .watupro-basic-chart-points td, .watupro-basic-chart-percent td {
	padding: 6px;
}

.watupro-basic-chart, .watupro-basic-chart table, table.watupro-basic-chart, .watupro-basic-chart-points, .watupro-basic-chart-points table, .watupro-basic-chart-percent, .watupro-basic-chart-percent table {
	border: none !important;	
}

.watupro_buttons, .watupro_buttons td {
   border: none !important;
}

div.watupro-question-choice.watupro-2-columns, li.watupro-2-columns {
	float: left !important;
	width:41%;
	display:block;
}

div.watupro-question-choice.watupro-3-columns, li.watupro-3-columns {
	float: left !important;
	width:26%;
	display:block;
}

div.watupro-question-choice.watupro-4-columns, li.watupro-4-columns {
	float: left !important;
	width: 20%;
	display:block;
}

div.watupro-choices-columns {
	clear:both;
	float:left;
	width:100%;
}

.watupro-main-feedback {
	display:block;
	clear:both;
	margin-top: 20px;
}

.watupro-dashboard {
	font-size: 120%;
}

.watupro-dashboard td {
	border-bottom: 1pt solid #EEE;
	padding-top: 10px;
}

.watupro-text-captcha {
	clear:both;
}

/* Text meant only for screen readers. */
.watupro-screen-reader {
    border: 0;
    clip: rect( 1px, 1px, 1px, 1px );
    clip-path: inset( 50% );
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.watupro-unanswered {
	clear:both;
	width: 100%;
	display:block;
	float:left;
}

select.watupro-gap  {
  width: auto !important;
  max-width: 500px !important;
}

#ui-datepicker-div {
   display: none;
   position: absolute !important;
   z-index: 999999999 !important;
}

.watupro-textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
}

@media screen and (min-width: 1024px) {
	.watupro-auto-hide {
		display: block !important;
	}
	.watupro-auto-hide-handler {
		display: none !important;
	}
}

/* Handle RTL quizzes - the class watupro-rtl will be added to .question-content and .question-choices divs */
.watupro-rtl {
	direction: rtl !important;
	text-align: right !important;
}

/* The hide paginator button is initially always hidden */
.watupro-auto-hide-handler-hide {
		display: none !important;
}


@media 
only screen and (max-width: 350px)  {
	/* thanks to https://css-tricks.com/responsive-data-tables/ */
	/* Force table to not be like tables anymore */
	table.watupro_buttons, table.watupro_buttons td, table.watupro_buttons tr { 
		display: block;
	}
	
	table.watupro_buttons td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
	}
	
	table.watupro_buttons td:before { 
		/* Now like a table header */
		position: absolute;
	}
	
	.watupro-auto-hide {
		display: none !important;
	}
	
	.watupro-auto-hide-handler {
		display: block !important;
	}
	
	/* More space to avoid clickable elements too close together */
	.watupro-question-choice {
		margin-top: 7px;
		margin-bottom: 7px;
	}
	
	.watupro-progress-percent {
		font-size: 11px;
	}
}

@media 
only screen and (max-width: 600px)  {
	/* More space to avoid clickable elements too close together */
	.watupro-question-choice {
		margin-top: 7px;
		margin-bottom: 7px;
	}
	
	span.watupro-progress-percent {
		font-size: 11px;
	}
}