/*** LimeSurvey Triade Default Styles ***/
/*** Author - Tony Partner ***/
/*** http://partnersurveys.com ***/

/* trikon_pink_grey.png is the trikon, optimum dimensions for the image are 432x378 px */
/* ball-1.png is the initial ball */
/* ball-2.png is the ball when dragging starts */
/* ball-3.png is the ball when droppable (inside the triangle) */

@font-face {
	font-family: 'surv';
	src: url('../files/fonts/survicon/surv.woff') format('woff');
  }

.triadeQuestion .survey-question-help {
	display: none; }
  
.triadeQuestion .survey-question-help::before {
color: #222; }

.question-answer {
	margin-bottom: 20px;
}

.triadeQuestion {
	/*box-sizing: content-box;*/ }
  
  .triadeQuestion .panel-heading {
	margin-bottom: 24px;
	margin-bottom: 1.5rem; }
  
  .triadeQuestion .survey-question-help {
	margin-top: 24px;
	margin-top: 1.5rem; }
  
  .triadeQuestion .triade-container {
	position: relative;
	margin: 0 auto;
	box-sizing: content-box; }
  
  .triadeQuestion .top-text,
  .triadeQuestion .left-text,
  .triadeQuestion .right-text {
	width: 50%;
	text-align: center;
	font-family: "Century Gothic", "Avenir Next", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 25.6px;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 100%; }
  
  .triadeQuestion .top-text {
	margin: 0 auto; }
  
  .triadeQuestion .left-text {
	float: left;
	margin-left: -25%;
	text-align: center;
	width: 49%; }
  
  .triadeQuestion .right-text {
	float: right;
	margin-right: -25%;
	text-align: center;
	width: 49%; }
  
  .containment-wrapper {
	position: relative;
	width: 100%;
	padding: 0px;
	/*box-sizing: content-box;*/ }
  
  .triadeQuestion .triade-draggable {
	position: absolute;
	left: 5px;
	top: 21px;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	border-color: #595959;
	background-color: #222;
	z-index: 100;
	transition: box-shadow 0.3s linear;
	border-style: solid;
	border-width: 0; }
  
  .triadeQuestion .ui-draggable-dragging {
	background-color: #3ECBFA;
	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s linear;
	border-color: #595959; }
  
  .triadeQuestion .triade-draggable-droppable {
	background-color: #222;
	background-position: 0 -64px;
	border-color: #595959; }
  
  .triadeQuestion .triade-droppable {
	z-index: 1;
	width: 400px;
	/* Should be same width as triangle background image */
	height: 357px;
	/*Should be same height as triangle background image */
	padding: 16px;
	/* Should be 1/2 width of the .triade-draggable element */
	background: transparent url(../files/images/tr-sc.png) no-repeat;
	background-position: 16px 16px;

	/* Should be same as padding above */
	box-sizing: content-box; }
  
  .triadeQuestion .triade-container .triade-cancel {
	font-weight: bold;
	position: absolute;
	top: 100px;
	right: -100px;
	width: 100px;
	padding: 70px 0 0 0;
	cursor: pointer;
	text-align: center;
	border: 0 none;
	font-size: 22.4px;
	font-size: 1.4rem;
	line-height: 100%; }
  
  .triadeQuestion .triade-container .triade-cancel:before {
	font-family: "surv";
	display: block;
	font-size: 2.5rem;
	margin-bottom: 10px;
	content: "";
	font-weight: normal;
	color: #222; }
  
  .triadeQuestion .triade-container .triade-cancel:hover {
	border-color: #00FF00; }
  
  .triadeQuestion .triade-container .triade-cancel:hover:before {
	font-family: "surv";
	display: block;
	font-size: 2.5rem;
	content: "";
	color: #d2d2d2;
	font-weight: normal; }
  
  .triadeQuestion .triade-container .triade-cancel.checked {
	background-size: 60%;
	border-color: #009900; }
  
  .triadeQuestion .triade-container .triade-cancel.checked:before {
	font-family: "surv";
	display: block;
	font-size: 2.5rem;
	content: "";
	color: #222;
	font-weight: normal; }
  
  .triadeQuestion .message-drop {
	clear: both;
	font-size: 14px;
	line-height: 100%; }

	@media screen and (max-width: 736px) {
		.triadeQuestion .triade-droppable {
			z-index: 1;
			width: 280px;
			/* Should be same width as triangle background image */
			height: 250px;
			/*Should be same height as triangle background image */
			padding: 16px;
			/* Should be 1/2 width of the .triade-draggable element */
			background: transparent url(../files/images/tr-sc.png) no-repeat;
			background-position: 0 0;
			background-size: 100%;
			/* Should be same as padding above */
			box-sizing: content-box; }

			.triadeQuestion .triade-container .triade-cancel {
				font-weight: bold;
				position: absolute;
				top: 0px;
				right: -25px;
				width: 100px;
				padding: 70px 0 0 0;
				cursor: pointer;
				text-align: center;
				border: 0 none;
				font-size: 22.4px;
				font-size: 1.4rem;
				line-height: 100%; }

			.triadeQuestion .left-text {
				float: left;
				margin-left: -10%;
				text-align: center;
				width: 49%; }
				
				.triadeQuestion .right-text {
				float: right;
				margin-right: -10%;
				text-align: center;
				width: 49%; }
	}