/*
 * CSS for jsPsych experiments.
 *
 * This stylesheet provides minimal styling to make jsPsych
 * experiments look polished without any additional styles.
 */

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);


/* Drag and Drop CSS */


.image-meaning {
  float: left;
  width: 150px;
  height: 150px;
  margin: 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.target {
  float: left;
  width: 150px;
  height: 150px;
  margin: 10px;
  padding: 10px;
  display: flex;
  border: 2px dashed grey;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  background-color: #fff;
  transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
}

.target span {
  font-size: 1.25rem;
  pointer-events: none; /* The element is never the target of pointer events */
}

.startpoint {
  border: 1px dotted lightgrey;
}

.element {
  cursor: move;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0rem 0.5rem;
  transition: opacity 0.2s;
}

.normimage {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0rem 0.5rem;
  transition: opacity 0.2s;
}

.element:hover {
  opacity: 0.5;
}

.target.target-hover {
  background-color: lightgrey;
  border-width: 2px;
  /*transform: scale(1.1); */
}

.element.dragged {
  user-select: none;
  opacity: 0.1;
  cursor: default;
  /* display: none; */
}


/* Container holding jsPsych content */

 .jspsych-display-element {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
 }

 .jspsych-display-element:focus {
   outline: none;
 }

 .jspsych-content-wrapper {
   display: flex;
   margin: auto;
   flex: 1 1 100%;
   width: 100%;
 }

 .jspsych-content {
   max-width: 95%; /* this is mainly an IE 10-11 fix */
   text-align: center;
   margin: auto; /* this is for overflowing content */
 }

 .jspsych-top {
   align-items: flex-start;
 }

 .jspsych-middle {
   align-items: center;
 }

/* fonts and type */

.jspsych-display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 18px;
  line-height: 1.6em;
}

/* Form elements like input fields and buttons */

.jspsych-display-element input[type="text"] {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 14px;
}

/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
  display: inline-block;
  padding: 6px 12px;
  margin: 0px;
  font-size: 14px;
  font-weight: 400;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.jspsych-btn:hover {
  background-color: #ddd;
  border-color: #aaa;
}

.jspsych-btn:disabled {
  background-color: #eee;
  color: #aaa;
  border-color: #ccc;
  cursor: not-allowed;
}

/* jsPsych progress bar */

#jspsych-progressbar-container {
  color: #555;
  border-bottom: 1px solid #dedede;
  background-color: #f9f9f9;
  margin-bottom: 1em;
  text-align: center;
  padding: 8px 0px;
  width: 100%;
  line-height: 1em;
}
#jspsych-progressbar-container span {
  font-size: 14px;
  padding-right: 14px;
}
#jspsych-progressbar-outer {
  background-color: #eee;
  width: 50%;
  margin: auto;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
#jspsych-progressbar-inner {
  background-color: #aaa;
  width: 0%;
  height: 100%;
}



/* appearance of the slider */

#jspsych-data-display {
  text-align: left;
}

input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
width: 100%;
cursor: pointer;

/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #808080;
border-radius: 1.3px;
border: 0.2px solid #010101;
}