a:link {color:#202020;text-decoration:none;}      /* unvisited link */
a:visited {color:#202020;text-decoration:none;}  /* visited link */

@font-face {
  font-family: Samim;
  src: url('font/Samim.eot');
  src: url('font/Samim.eot?#iefix') format('embedded-opentype'),
       url('font/Samim.woff') format('woff'),
       url('font/Samim.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: Samim;
  src: url('font/Samim-Bold.eot');
  src: url('font/Samim-Bold.eot?#iefix') format('embedded-opentype'),
       url('font/Samim-Bold.woff') format('woff'),
       url('font/Samim-Bold.ttf') format('truetype');
  font-weight: bold;
}

.rtl, .rtl *{
	font-family: Samim !important;
}
.experiment-debrief a
{
	color: #007ac0;
}


p {word-wrap:break-word;}

body
{
	color: #F8F8F8;/*#808080*/
	color: black;
	/*font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;*/
	dir: auto;
	margin: 0px;
}

button {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);

	color:rgba(0,0,0,0.9);
	text-shadow:1px 1px 0px rgba(255,255,255,0.8);
	border:1px solid rgba(0,0,0,0.5);

	background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
	background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));

	padding:5px 5px 5px 5px;
}

button:hover {
	background:rgba(240,240,240,1);
}

button:active, button:focus {
	background:-webkit-gradient(linear,0% 100%,0% 0%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
	background:-moz-linear-gradient(bottom,rgba(255,255,255,1),rgba(185,185,185,1));
}

button:disabled {
	color:rgba(0,0,0,0.4);
	text-shadow:1px 1px 0px rgba(255,255,255,0.5);
	background:rgba(220,220,220,1);
}

/* ghostClass for Sortable.js + others*/
.ghost {
  opacity: .0;
}
.ImageHolder{text-align: center;}
.Image{display:inline-block;}

html, body {
	height: 100%;
}

#displayScreen /*dimensions of the screen*/
{
	/*centers the content horizontally and vertically*/
	position: absolute;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	margin: auto;
	height:740px;
	/* height: 591px; */
	width:1280px;
	max-width:100%;
	font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
}

#target /* dimensions + other parameters for the target image*/
{
	position: relative;
	/*top: 3em; leaves space for one line above the target (e.g. picture-word matching)*/
	box-shadow: 0 0 0 transparent;
	margin: 0 auto; /*centers the div inside the bigger div*/
	text-align: center;

	display: -webkit-box;
	display: -moz-box;
	display: box;

	/*display: none;*/

	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;

	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;
}

.testImages /*this is the class for test images; can accommodate one, two, etc images*/
{
	position: relative;
	/*top: 10%;*/
	/*top: 2em;*/
	/*width: 80%;*/
	/*height: 320px;*/
	/*border: 1px solid #CCC;*/
	margin: 0 auto; /*centers the div inside the bigger div*/
	/*background: gray;*/
	text-align: center;

	display: -webkit-box;
	display: -moz-box;
	display: box;

	display: none;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;

	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;
}

.clickableImage,
.clickableWord.longword
{
/*box-shadow: 2px 2px 7px #888888;*/
/*float:left;*/
/*margin:5px;*/
text-align: center;
border-width: 4px;
border-style:solid;
border-color:transparent;
}

.clickableImage:active,
.clickableImage.clicked,
.clickableWord:active
{
	border-color: #007ac0;
	z-index: 1000;
}

@media (hover: hover) {
	.clickableImage:hover,
	.clickableWord:hover
	{
		border-color: #007ac0;
		z-index: 1000;
	}
}

.nonclickableImage
{
/*box-shadow: 2px 2px 7px #888888;*/
/*float:left;*/
/*margin:5px;*/
text-align: center;
border-width: 4px;
border-style:solid;
border-color:transparent;
}

.nonclickableImage:active {border-color: transparent;}
.nonclickableImage:hover {border-color: transparent;}

/*.sortBoxes {
	text-align: center;
}*/

.sortBoxes li {
    list-style: none;
	float:left;
	/*display:inline-block;*/
    margin: 3px;
    border: 3px solid rgba(128,128,128,1);
    /*background-color: #C0C0C0;*/
    /*width: 120px;*/
	/*height: 200px;*/
}

.sortBoxes li:hover {
	/*border: 3px solid #007ac0;*/
}

.sortBoxes li:active {
	border: 3px solid #007ac0;
}

.response /*container for response options*/
{
	/*position:absolute;*/
	position:relative;
	/*top:80%;*/
	width: 100%;
	text-align: center;

	/*border: 1px solid #CCC;*/
	/*margin: 0 auto;*/
	/*background: yellow;*/

	display: -webkit-box;
	display: -moz-box;
	display: box;

	display: none;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;

	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;
		}

.textBox /*container class for any text to be displayed*/
{
			position: absolute;
			margin: auto;
			padding: 0;
			width: 100%;
			/*color: #202020;*/
			text-align: center;
   			font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
/*			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;*/
		}

.word /*container class for any text to be displayed*/
{
			display:none;
			position:absolute;
			line-height:1.5em;
			text-align:center;
			margin: auto;
			padding: 0;
			/*color: #1e1e1e;*/
			background-color: #b1b1b1;
			border-width: 1px;
			border-style:solid;
			border-color: #5C5F61;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			width:250px;
			/*box-shadow: 2px 2px 7px #888888;*/
			font-size: 2em;
			font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
			/*float:left;*/
}
/*.word:active {border-color: red;}*/
.word.clickableWord:hover {background-color: #007ac0;color:white;}


.borderTransparent {border-color:transparent;}

.centered {
  position:absolute;
  z-index: 100;
  top:49%;
  left:49%;
  text-align: center;
  /*color:black;*/
  font-size: 2em;
  font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
}

.center { margin: 0 auto; width: 400px; }

#next /*parameters for the next button*/
{
			position: absolute;
			text-align: center;
			bottom: 1%;
			width:100%;
			display:none;
		}

#timeup /*parameters for the next button*/
{
			position: absolute;
			text-align: center;
			bottom: 40%;
			width:100%;
			display:none;
		}
#agree /*parameters for the agree button*/
{
			position: relative;
			text-align: center;
			top: 50px;
			width:100%;
			display:none;
		}
#start /*parameters for the next button*/
{
			position: absolute;
			text-align: center;
			bottom: 50%;
			width:100%;
			display:none;
		}



.clicksOptions:hover {
	border-color: transparent;
}

.clicksOptions {
	cursor: pointer;
}

.clickMarker {
	position: absolute;
	display: block;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.longword.clicked {
	background-color: #007ac0;
	border-color: #54aaf9;
	color: white;
}

.singleLongword {
	font-size: 1.3em;
	line-height: 2;
}

.qFormInput {
	box-sizing: border-box;
}

.labelMultiLine + input,
.labelMultiLine + textarea,
.labelMultiLine + select,
.labelMultiLine + ul:not(#sortImg).sortable {
	margin-left: 15px;
	margin-right: 15px;
}

.labelMultiLine + ul:not(#sortImg).sortable li {
	margin-left: 0;
}

#divQuestionForm .form-group img {
	max-width: 100%;
}

.withImages .col-sm-1 {
	margin-left: 0 !important;
}

#divQuestionForm2 .sortable li {
	cursor: ns-resize;
}
.ui-sortable-placeholder::before  {
  content:"♥";
  visibility: hidden;
}
.ui-sortable-placeholder {
	visibility: hidden;
}

.irs-grid-pol.small {
	display: none;
}

.radio.i-checks.exclusive {
	order: 9;
 }

 .margin_other.exclusive {
	order: 9;
 }

 .mobile-display-screen {
	margin: 0 !important;
 }

 .mobile-content {
	padding: 0 10px;
	top: 0px !important;
	box-sizing: border-box;
 }

 .mobile-content-with-title {
	padding: 0 10px;
	top: 100px !important;
	box-sizing: border-box;
 }

 .mobile-question-form {
	margin-top: -50px !important;
 }

 #displayScreen input:invalid {
	background-color: lightpink;
 }