.image-wrapper {
  display: inline-block;
  position: relative;
  line-height: 0;
}

/* .study-container.rotated {
  transform: rotate(90deg);
  height: 100vw;
  width: 100vh;
  overflow: auto;
  z-index: 999;
  background: #fff;
  text-align: end;
} */

.image-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* .study-container.rotated .image-wrapper {
  width: 80vh;
} */

/* /// */
.overlay-cell {
  pointer-events: auto;
  cursor: pointer;
  border-radius: 7px;
  -webkit-tap-highlight-color: transparent;
}

/* .admin .overlay-cell {
  outline: 1px solid #7700ee;
}

.admin .overlay-cell#cell-0 {
  outline: 1px solid #ff0000;
} */

.overlay-cell.highlight {
  background-color: rgba(0, 217, 255, 0.3) !important;
}

#footer-widgets {
  display: none;
}

.overlay {
  display: grid;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
  direction: rtl;
}

/* Video container styles */
.video-container {
  /* width: 100%;
  max-width: 800px; */
  margin: 0 auto 30px;
  border: 2px solid #0088dd;
  /* border-width: 2px 0; */
  /* border-radius: 8px; */
  overflow: hidden;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

/* .video-container iframe {
  width: 100%;
  height: 450px;
  border: none;
} */

/* .video-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.4em;
  color: #333;
} */

/* page-1 */

.overlay.page-1 {
  padding: 11% 8%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 9fr) repeat(8, 11fr);
}

.page-1 #cell-1-1,
.page-1 #cell-2-1 {
  grid-column: 1 / span 4;
}

/* page-2 */

.overlay.page-2 {
  padding: 11% 8%;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(11, 1fr);
}

.page-2 .filled,
.page-2 .empty-7,
.page-2 .empty-8 {
  grid-column: span 2;
}

/* page-3 */

.overlay.page-3 {
  padding: 11% 8%;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: repeat(11, 1fr);
}

.page-3 .filled {
  grid-column: span 6;
}

/* span-8 group */
.page-3 #cell-3-3,
.page-3 #cell-4-3,
.page-3 #cell-5-3,
.page-3 #cell-8-3,
.page-3 #cell-9-3,
.page-3 #cell-10-3,
.page-3 #cell-18-3,
.page-3 #cell-19-3,
.page-3 #cell-34-3,
.page-3 #cell-35-3 {
  grid-column: span 8;
}

/* span-7 group */
.page-3 #cell-13-3,
.page-3 #cell-14-3,
.page-3 #cell-15-3,
.page-3 #cell-16-3,
.page-3 #cell-24-3,
.page-3 #cell-27-3 {
  grid-column: span 7;
}

/* span-12 */
.page-3 #cell-17-3 {
  grid-column: span 12;
}

/* span-10 group */
.page-3 #cell-20-3,
.page-3 #cell-29-3,
.page-3 #cell-31-3,
.page-3 #cell-38-3,
.page-3 #cell-40-3,
.page-3 #cell-43-3 {
  grid-column: span 10;
}

/* span-9 */
.page-3 #cell-26-3 {
  grid-column: span 9;
}

/* span-5 */
.page-3 #cell-25-3 {
  grid-column: span 5;
}

/* span-4 group */
.page-3 #cell-28-3,
.page-3 #cell-30-3,
.page-3 #cell-41-3,
.page-3 #cell-42-3 {
  grid-column: span 4;
}

/* page-4 */

.overlay.page-4 {
  padding: 11% 8%;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(13, 1fr);
}

.page-4 .overlay-cell {
  grid-row: span 3;
}

.page-4 #cell-1-4 {
  grid-column: span 8;
  grid-row: span 1;
}

/* page-5 */

.overlay.page-5 {
  padding: 11% 8% 9%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

/* page-6 */

.overlay.page-6 {
  padding: 9% 8% 11%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.page-6 #cell-1 {
  grid-column: span 6;
}

/* page-7 */

.overlay.page-7 {
  padding: 11% 8%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(13, 1fr);
}

.page-7 #cell-1,
.page-7 #cell-30 {
  grid-column: span 4;
}

/* page-8 */

.overlay.page-8 {
  padding: 11% 8% 9%;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

.page-8 #cell-1 {
  grid-column: span 12;
}

.page-8 .overlay-cell {
  grid-column: span 2;
}

.page-8 #cell-14,
.page-8 #cell-15,
.page-8 #cell-16,
.page-8 #cell-17,
.page-8 #cell-18,
.page-8 #cell-19,
.page-8 #cell-20,
.page-8 #cell-21,
.page-8 #cell-22,
.page-8 #cell-23,
.page-8 #cell-24,
.page-8 #cell-25,
.page-8 #cell-26,
.page-8 #cell-27,
.page-8 #cell-28,
.page-8 #cell-29 {
  grid-column: span 3;
}

/* page-9 */

.overlay.page-9 {
  padding: 8% 8% 11%;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.page-9 #cell-1 {
  grid-column: span 12;
}

.page-9 .overlay-cell {
  grid-column: span 2;
}

.page-9 #cell-14,
.page-9 #cell-15,
.page-9 #cell-16,
.page-9 #cell-17,
.page-9 #cell-18,
.page-9 #cell-19,
.page-9 #cell-20,
.page-9 #cell-21,
.page-9 #cell-22,
.page-9 #cell-23,
.page-9 #cell-24,
.page-9 #cell-25 {
  grid-column: span 3;
}

/* page-10 */

.overlay.page-10 {
  padding: 11% 8%;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(13, 1fr);
}

.page-10 #cell-1,
.page-10 #cell-38 {
  grid-column: span 12;
}
.page-10 #cell-2 {
  grid-column: span 12;
  grid-row: span 2;
}

.page-10 #cell-3,
.page-10 #cell-4,
.page-10 #cell-5,
.page-10 #cell-6,
.page-10 #cell-7,
.page-10 #cell-8,
.page-10 #cell-9,
.page-10 #cell-10,
.page-10 #cell-11,
.page-10 #cell-12,
.page-10 #cell-13,
.page-10 #cell-14,
.page-10 #cell-39,
.page-10 #cell-40,
.page-10 #cell-43 {
  grid-column: span 2;
}

.page-10 #cell-15,
.page-10 #cell-16,
.page-10 #cell-17,
.page-10 #cell-18,
.page-10 #cell-19,
.page-10 #cell-20,
.page-10 #cell-21,
.page-10 #cell-22,
.page-10 #cell-23,
.page-10 #cell-24,
.page-10 #cell-25,
.page-10 #cell-26,
.page-10 #cell-27,
.page-10 #cell-28,
.page-10 #cell-29,
.page-10 #cell-30,
.page-10 #cell-34,
.page-10 #cell-35,
.page-10 #cell-36,
.page-10 #cell-37,
.page-10 #cell-41,
.page-10 #cell-42 {
  grid-column: span 3;
}

.page-10 #cell-31,
.page-10 #cell-32,
.page-10 #cell-33 {
  grid-column: span 4;
}

/* page-11 */

.overlay.page-11 {
  padding: 11% 8% 9%;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.page-11 #cell-1 {
  grid-column: span 24;
}

.page-11 #cell-2,
.page-11 #cell-4 {
  grid-column: span 9;
}

.page-11 #cell-3 {
  grid-column: span 6;
}

/* page-12 */

.overlay.page-12 {
  padding: 8%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.page-12 #cell-1 {
  grid-column: span 4;
}

/* page-13 */

.overlay.page-13 {
  padding: 8%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.page-13 #cell-1 {
  grid-column: span 4;
}

.page-13 #cell-6,
.page-13 #cell-7,
.page-13 #cell-12,
.page-13 #cell-13 {
  grid-column: span 2;
}

/* page-14 */

.overlay.page-14 {
  padding: 8% 8% 11%;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.page-14 #cell-1 {
  grid-column: span 24;
}

.page-14 #cell-2 {
  grid-column: span 9;
}

.page-14 #cell-3,
.page-14 #cell-4,
.page-14 #cell-5 {
  grid-column: span 5;
}

/*  */

#cell-1-3,
#cell-2-3,
#cell-3-3,
#cell-4-3,
#cell-5-3,
#cell-6-3,
#cell-7-3,
#cell-8-3,
#cell-9-3,
#cell-10-3,
#cell-11-3,
#cell-12-3,
#cell-13-3,
#cell-14-3 {
  background-color: #51ff0017;
  border: 1px solid #80dc80;
}

#cell-1-5,
#cell-2-5,
#cell-3-5,
#cell-4-5,
#cell-5-5,
#cell-6-5,
#cell-8-5,
#cell-9-5,
#cell-10-5 {
  background-color: #51ff0017;
  border: 1px solid #80dc80;
  border-width: 0 1px;
}

#cell-7-5 {
  background-color: #ffa50017; /* light transparent orange */
  border: 1px solid #ffc266; /* soft orange border */
  border-width: 0 1px;
}

#cell-12-5 {
  background-color: #ff000017; /* light transparent red */
  border: 1px solid #ff8080; /* soft red border */
  border-width: 0 1px;
}