/* general */
body {
  background-color: #FBFDDF; /* background-color: white; */ /* Old background color */
}
.jspsych-display-element {
  font-size: 22px;
  color: black;
}
.jspsych-content {
  max-width: 100%; 
  max-height: 100%;
  overflow: hidden;
}

/* Add spacing between the buttons */
.jspsych-display-element .jspsych-audio-button-response-button {
  margin: 10px;  /* Add space between buttons */
  padding: 10px 20px;  /* Increase padding inside the buttons */
  font-size: 20px;  /* Ensure text size is large enough */
}

/* choice trials */
.choice-grid {
  position: fixed center;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 20% 25% 10% 25% 20%; /* tree, bananas, space, bananas, tree */
  grid-template-rows: 15% 65% 20%; /* monkeys, trees */
}

/* tree positioning within grid */
.tree1{
  grid-column: 1;
  grid-row: 2;
}
.tree2{
  grid-column: 5;
  grid-row: 2;
}

.tree1 img[stage="selected"]{
  border: 0.4vh dashed grey
}
.tree1 img[stage="not selected"]{
  opacity: 5%
}
.tree1 img[stage="cannot select"]{
  opacity: 5%
}

.tree2 img[stage="selected"]{
  border: 0.4vh dashed grey
}
.tree2 img[stage="not selected"]{
  opacity: 5%
}
.tree2 img[stage="cannot select"]{
  opacity: 5%
}

/* tree images in grid */
.tree1 img{
  max-width: 95%;
  max-height: auto;
  }

.tree2 img{
  max-width: 95%;
  max-height: auto;
  }

  /* monkeys */
  .monkeys{
    grid-column: span 5;
    grid-row: 1;
  }

  .monkeys img{
    max-width: 50%;
    max-height: auto;
  }

  #monkey-image {
    position: absolute;
    left: 50%; /* Initial horizontal position */
    transform: translateX(-50%); /* Center the monkey */
    transition: left 0.3s ease; /* Smooth movement */
  }

  /* bananas */
.left-banana-container{
  max-height:100%;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: 100%;
  grid-auto-flow: rows;
  place-items: center;
}

.right-banana-container{
  max-height:100%;
  grid-column: 4;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: 100%;
  grid-auto-flow: rows;
  place-items: center;
}

.left-empty-container{
  max-height:100%;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: 100%;
  grid-auto-flow: rows;
  place-items: center;
  background-color: transparent;
}

.right-empty-container{
  max-height:100%;
  grid-column: 4;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: 100%;
  grid-auto-flow: rows;
  place-items: center;
  background-color: transparent;
}

.banana {
  height: 30%; 
  width: 100%;
  margin-bottom: 1vh; 
  border: grey solid 0.2vh;
}


.banana_blank {
  height: 30%; 
  width: 100%;
  margin-bottom: 1vh; 
  border: grey solid 0.2vh;
}


/* .tree[stage="selected"]{
  border: 0.4vh dashed grey;
}

.tree[stage="not selected"]{
  opacity: 15%
} */

/* feedback ITI */
.feedback-grid {
  position: fixed center;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 37.5% 25% 37.5%;
  grid-template-rows: 15% 80% 5%;
}

/* feedback bananas */
.feedback-bananas-container{
    max-height: 100%;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(8, 1fr);
    grid-auto-flow: rows;
    place-items: center;
  }

/* feedback text */
    .feedback-text{
      max-height:100%;
      grid-column: span 3;
      grid-row: 1;
    }

      /* .banana.x-mark {
    position: relative;
}  */
  /* .banana.x-mark::before {
    content: 'XX'; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: black;
    font-size: 18px;
    pointer-events: none; 
} 
 */

.banana.x-mark {
  position: relative; /* Ensure the parent element is the reference for pseudo-elements */
}

/* .banana.x-mark::before, */
.banana.x-mark::after {
  content: ''; /* No text content, just the visual lines */
  position: absolute; /* Position relative to the parent container */
  left: 0; /* Start from the left */
  width: 100%; /* Full width of the container */
  height: 1.5px; /* Line thickness (adjust as needed) */
  background-color: grey; /* Line color */
  pointer-events: none; /* Ensure the lines don't interfere with interactions */
}

/* .banana.x-mark::before {
  top: 0; 
  transform: rotate(3deg); 
  transform-origin: top left; 
} */

.banana.x-mark::after {
  bottom: 0; /* Start from the bottom */
  transform: rotate(-3deg); /* Diagonal from bottom-left to top-right */
  transform-origin: bottom left; /* Set the origin for rotation */
}