/* CSS Document */
#main .textwrap {
  overflow: hidden;
}
/*Act 1 Map*/
.act1-map .m1 {
  top: 283px;
  left: 187px;
}
.act1-map .m2 {
  top: 430px;
  left: 260px;
}
.act1-map .m3 {
  top: 317px;
  left: 217px;
}
.act1-map .m4 {
  top: 257px;
  left: 175px;
}
/*Act5 game*/
#q-completed {
    width: 90%;
}
#q-completed h2 {
    font-size: 26px;
}
.image-column .image {
    background-color: rgba(104,176,171,0.00);
    transition: 300ms ease-out;
}
.image-column.masked .image {
    background-color: #68B0AB;
    position: relative;  
}
.image-column .image:before {
    content: "?";
    display: block;
    position: absolute;
    top: 50px;
    width: 100%;
    text-align: center;
    font-size: 200px;
    color: white;
    opacity: 0;
    transition: opacity 300ms;
}
.image-column.masked .image:before {
    opacity: 0.6;
}
.image-column .image-caption,
.image-column img {
   transition: opacity 300ms;
    display: block;
    margin-bottom: 8px;
}
.image-column.masked img {
    opacity: 0;   
}
.image-column.masked .image-caption {
    opacity: 0;
}
/*Act7 Timeline*/
.rows-layout .terms {
    display: flex;
    flex-wrap: wrap;
    gap:10px;
}
.rows-layout.definition-picker .term-set {
    flex-basis: 24%;
    display: block;
}
.rows-layout.definition-picker .term {
    height: auto;
    text-align: center;
    background-color: transparent;
    color: var(--dark-orange);
    font-size: 16px;
    padding: 0;
    margin-left: 10px;
}
.page_activity7 .definition-picker .spot {
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
}
.page_activity7 .definition-picker .options {
    text-align: center;
    width: 800px;
}
.rows-layout.definition-picker .spot .button {
    left: calc(50% - 70px);
    width: 140px;
}
.rows-layout.definition-picker .spot.taken .button {
    top: -2px;
    right: -2px;
}
.rows-layout.definition-picker .spot.taken {
    background-color: transparent;
    border-top: 2px solid var(--dark-orange);
    padding: 3px 30px;
}
.page_activity7 .definition-picker .op-choices .choice:not(.taken):hover {
  background-color: rgba(239,232,199,0.70);
}

.column-layout.definition-picker .term {
    height: auto;
    color: #FFF;
    background-color: var(--dark-orange);
    font-size: 16px;
    padding: 10px 5px;
    border-radius: 5px 0 0 5px;
    text-align: right;
    flex-basis: 130px;
    margin: 0;
}
.column-layout.definition-picker .spot {
    min-height: 20px;
    text-align: left;
    border-left: none;
    border-radius: 0 5px 5px 0;
    flex-basis: 850px;
}
.column-layout.definition-picker .spot.taken {
    background-color: #EFE6D8;
}
.column-layout.definition-picker .spot .button {
    top: 7px;
}
.column-layout.definition-picker .options {
    margin-top: 20px;
}
.op-choices.grid {
    display: flex;
    gap:20px;
    flex-wrap: wrap;
    justify-content: center;
}
.op-choices.grid .choice {
    flex-basis: calc(33% - 12px);
    margin-bottom: 1px;
}

/*Image Picker*/
.image-picker {
  position: relative;
  margin-bottom: 20px;
}
.image-picker .image-spots {
  display: flex;
  flex-wrap: wrap;
}
.image-picker .spot {
  width: 143px;
  height: 280px;
  position: relative;
  margin: 10px;
}
.image-picker .image-holder {
  display: block;
  border: 2px dashed var(--bright-blue);
  height: 168px;
  box-sizing: border-box;
}
.image-picker .spot h4 {
  margin: 15px 0 5px;
  position: relative;
}
.image-picker .spot .event-name {
  font-weight: bold;
}
.image-picker .spot h4:before {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  width: calc(100% + 20px);
  height: 2px;
  background-color: var(--green);
}
.image-picker .spot:nth-child(6n) h4:before {
  width: 100%;
}
.image-picker .spot:nth-child(6n) h4:after {
  display: block;
  content: "";
  position: absolute;
  top: 9px;
  right: 0;
  width: 10px;
  height: 10px;
  height: 10px;
  border-top: 2px solid var(--green);
  border-right: 2px solid var(--green);
  transform: rotate(45deg);
}
.image-picker .spot:nth-child(18n) h4:before {
  width: 0;
}
.image-picker .spot:nth-child(18n) h4:after {
  display: none;
}
.image-picker .spot h4 span {
  background-color: var(--green);
  display: inline-block;
  padding: 3px 6px;
  border-radius: 3px;
  color: #FFF;
  position: relative;
  z-index: 5;
}
.image-picker .taken .image-holder {
  border: 2px dashed rgba(255, 255, 255, 0.00);
}
.image-picker .spot img {
  display: block;
  width: 100%;
  height: auto;
  border: 5px solid #FFF;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.image-picker .spot .button {
  position: absolute;
  top: 100px;
  left: calc(50% - 55px);
  width: 110px;
}
.image-picker .spot.taken .button {
  top: 0px;
  left: auto;
  right: 0px;
  width: auto;
}
.image-picker .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: 300ms ease-out;
  z-index: 99;
}
.image-picker .overlay.showing {
  opacity: 1;
  visibility: visible;
}
.image-picker .options {
  background-color: #FFF;
  margin: 50px auto;
  padding: 20px 10px;
  width: 880px;
  text-align: center;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.op-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.image-picker .options .op-choice {
  cursor: pointer;
  transition: 300ms ease-out;
  position: relative;
  transform-origin: center;
  display: block;
  flex-basis: calc(50% - 10px);
  box-sizing: border-box;
  border: 1px dashed #CCC;
  padding: 8px;
  position: relative;
  padding-left: 146px;
  text-align: left;
}
.image-picker .options .op-choice img {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 130px;
  height: calc(100% + 2px);
  object-fit: cover;
}
.image-picker .options .op-choice h4 {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
}
.image-picker .options .op-choice p {
  margin-bottom: 0px;
}
.image-picker .options .op-choice.taken {
  cursor: not-allowed;
  opacity: 0.3;
  filter: grayscale(1);
}
.image-picker .op-images .op-choice:not(.taken):hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  border: 1px solid #FFF;
  z-index: 10;
}
.overlay.show-group1 .group2, .overlay.show-group1 .group3 {
  display: none;
}
.overlay.show-group2 .group1, .overlay.show-group2 .group3 {
  display: none;
}
.overlay.show-group3 .group2, .overlay.show-group3 .group1 {
  display: none;
}
/*.image-picker .op-images:hover  .op-choice:not(:hover) { 
    opacity: 0.7;
}*/
#hint {
  font-style: italic;
}
#picker-feedback {
  height: 60px;
}
#picker-feedback .fb {
  background-color: rgba(0, 0, 0, 0.15);
  padding: 5px 10px;
  display: inline-block;
  border-radius: 3px;
}
#picker-feedback .fb.done {
  background-color: rgba(17, 192, 108, 0.41);
}
/*Act 3 Pryamid popup picker*/

#a3-pyramid.popup-picker .close-btn {
    top: 39px;
    right:90px;
    background-color: var(--green);
}
#a3-pyramid {
    height: 450px;
    position: relative;
    border-radius: 5px;
}
#a3-pyramid .choices-pop .inner-block {
    margin: 80px 150px;
}
#a3-pyramid #choices-2 .inner-block {
    margin: 30px 30px;
}

.pyramid-art {
    position: absolute;
    z-index: 1;
     width: 100%;
    height: 500px;
   /* background-color: #CDB6DD;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);*/
    left: 0px;
    top: 40px;
}
.pyramid.hotspots {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 10;
}
.pyramid .hotspot {
    display: block;
}
#a3-pyramid .hotspots li {
    left: 0;
    width: 100%;
    
}
#a3-pyramid  .hotspots li {
    box-sizing: border-box;
}
#a3-pyramid  .hotspots .dot {
    left: calc(50% - 10px);
    top: 20px;
    position: absolute;
}
#a3-pyramid .hotspots li .answer {
   color:#FFF;
    position: absolute;
    top: 10px;
    left: 0px;
    border-radius: 5px;
    line-height: 20px;
    z-index: 1;
    display: none;
    width: 100%;
    font-size: 14px;
    padding: 5px;
    background-color: transparent;
    box-sizing: border-box;
}

#a3-pyramid .hotspots li .answer .name {
    font-size: 20px;
    position: absolute;
    top: 24px;
    left: calc(50% - 100px);
    width: 200px;
    text-align: center;
    text-shadow: 0 0 2px rgba(0,0,0,0.3);
}
#a3-pyramid .hotspots li .answer .desc {
    position: absolute;
    top: 17px;
    left: 0;
    width: 240px;
    background-color: var(--green);
    border:2px solid #77a035;
    padding: 5px 10px;
    border-radius: 3px;
    color: #FFF;
    font-weight: bold;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#a3-pyramid .hotspots li .answer.taken .desc {
    background-color: #EFF7E4;
    color: #333;
    font-weight: normal;
}
#a3-pyramid .hotspots li .taken .desc {
    top: -10px;
}
#a3-pyramid .hotspots li.spot1 .answer.taken .desc {
    top: -32px;
}
#a3-pyramid .hotspots li.spot3 .answer.taken .desc {
    top: -60px;
}
#a3-pyramid .hotspots li.spot5 .answer.taken .desc {
    top: -27px;
}

#a3-pyramid .hotspots li .answer:before {
    position: absolute;
    height: 2px;
    background-color:#77a035;
    width: 50%;
    z-index: 0;
    display: block;
    content: "";
    top: 35px;
}
#a3-pyramid .hotspots li.spot1 .answer:before { width:386px; }
#a3-pyramid .hotspots li.spot2 .answer:before { width:346px; }
#a3-pyramid .hotspots li.spot3 .answer:before { width:336px; }
#a3-pyramid .hotspots li.spot4 .answer:before { width:295px; }
#a3-pyramid .hotspots li.spot5 .answer:before { width:287px; }



#a3-pyramid .hotspots li.right .answer:before {
    left: auto;
    right: 20px;
}
#a3-pyramid .hotspots li.right .answer .desc {
    left: 710px;
}
#a3-pyramid .hotspots li.taken .dot {
    display: none;
}
#a3-pyramid .hotspots li.taken .answer {
    display: block;
    cursor: default;
}
#a3-pyramid .hotspots li.taken .answer .desc {
    cursor: pointer;
}
#a3-pyramid .hotspots li.spot1 { top:0; }
#a3-pyramid .hotspots li.spot2 { top:65px; }
#a3-pyramid .hotspots li.spot3 { top:130px;  }
#a3-pyramid .hotspots li.spot4 { top:195px;    }
#a3-pyramid .hotspots li.spot5 { top:260px;    }


#a3-pyramid .hotspots li.taken.spot1 {  }
#a3-pyramid .hotspots li.taken.spot2 {  }
#a3-pyramid .hotspots li.taken.spot3 {   }
#a3-pyramid .hotspots li.taken.spot4 {     }
#a3-pyramid .hotspots li.taken.spot5 {     }

/*Activity 9 version */
.page_activity9 #a3-pyramid.popup-picker .close-btn {
    background-color: var(--colbolt);
    right: 140px;
    top: 66px;
}
.popup-picker .choices-pop .inner-block {
  box-shadow: 4px 4px 0 var(--colbolt), 0 0 7px rgba(0,0,0,0.2);
}
.page_activity9 #a3-pyramid .hotspots li .answer::before {
    display: none;
}
.page_activity9 .popup-picker .choices-pop li {
  flex-basis: calc(50% - 7px);
}
.page_activity9 #a3-pyramid .hotspots li.spot1 { top:28px; }
.page_activity9 #a3-pyramid .hotspots li.spot2 { top:80px; }
.page_activity9 #a3-pyramid .hotspots li.spot3 { top:140px;  }
.page_activity9 #a3-pyramid .hotspots li.spot4 { top:205px;    }
.page_activity9 #a3-pyramid .hotspots li.spot5 { top:260px;    }
.page_activity9 #a3-pyramid .hotspots li .answer .name {
    top: 12px;
}
/*Act 3 Map*/
.act3-map.hotspot-map .dot {
    background-color: rgba(0,113,188,0.80);
    width: 16px;
    height: 16px;
}
.act3-map.hotspot-map .dot:hover {
    background-color: rgba(0,113,188,0.30);
}
.act3-map.hotspot-map .marker strong {
    background-color: #FFF;
    margin-left: -16px;
    transform: translateY(-6px);
}
.act3-map .m1 {
	top: 182px;
	left: 512px;
}
.act3-map .m2 {
	top: 285px;
	left: 892px;
}
.act3-map .m3 {
	top: 238px;
	left: 674px;
}
.act3-map .m4 {
	top: 334px;
	left: 574px;
}
.act3-map .m5 {
	top: 426px;
	left: 386px;
}
.act3-map .m6 {
	top: 98px;
	left: 117px;
}
.act3-map .m7 {
	top: 307px;
	left: 155px;
}
.act3-map .m8 {
	top: 410px;
	left: 84px;
}
.act3-map .m9 {
	top: 102px;
	left: 750px;
}
.act3-map .m10 {
	top: 306px;
	left: 487px;
}
.act3-map .m11 {
	top: 276px;
	left: 591px;
}
.act3-map .m12 {
	top: 408px;
	left: 520px;
}
.act3-map .m13 {
	top: 326px;
left: 334px;
}
/*Act 5 game */
.image-caption {
  color: #FFF;
  text-align: center;
  font-size: 14px;
  font-style: italic;
}
.image-caption a {
  color: #FFF;
  text-decoration: underline;
}
.q9-msg {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.66);
  height: 100%;
  width: 100%;
  z-index: 999;
  display: none;
}
.inner {
  background: #fff;
  padding: 20px;
  margin: 50px;
}
/*act 6*/
.help-btns {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 20px 0;
}
.help-btn {
  background-color: rgba(88, 30, 158, 0.25);
  padding: 10px;
  border-radius: 5px;
  position: relative;
  text-align: center;
  flex-basis: 20%;
  box-sizing: border-box;
}
.help-btn button {
  position: absolute;
  top: 10px;
  left: calc(50% - 50px);
  width: 100px;
  text-align: center;
  z-index: 30;
}
.help-btn p {
  opacity: 0;
  transition: 300ms ease-out;
  margin: 0;
  position: relative;
  z-index: 1;
}
.help-btn.showing p {
  opacity: 1;
}
.help-btn.showing button {
  opacity: 0;
}
/*Act 6 Map*/
.act6-map .m1 {
	top: 197px;
	left: 522px;
}
.act6-map .m2 {
	top: 266px;
	left: 761px;
}
.act6-map .m3 {
	top: 245px;
left: 255px;
}
.act6-map .m4 {
 top: 377px;
left: 505px;
}
.act6-map .m5 {  top: 125px;
left: 650px; }
.act6-map .m6 {  top: 300px;
left: 322px; }
.act6-map .m7 { top: 300px;
left: 388px; }
.act6-map .m8 { top: 81px;
left: 517px; }
.act6-map .m9 { top: 360px;
left: 691px; }
.act6-map .m10 {  top: 125px; left: 670px; }
.act6-map .m11 {  top: 377px;
left: 430px; }
.act6-map .m12 { top: 355px;
left: 580px;}
.act6-map .m13 { top: 377px;
left: 363px; }
.act6-map .m14 {  top: 435px;
left: 585px;}
.act6-map .m15 { }
.act6-map .m16 { top: 377px;
left: 393px; }
.act6-map .m17 {  top: 377px;
left: 465px; }
.act6-map .m18 {  top: 322px;
left: 502px; }
.act6-map .m19 {  top: 327px;
left: 457px;}
.act6-map .m20 {  top: 260px;
left: 655px; }
.act6-map .m21 { top: 377px;
left: 333px; }

.act6-map .marker .dot {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	width: 20px;
height: 20px;
	line-height: 20px;
}

/*Definition Picker*/
.definition-picker  {
    position: relative;
}
.definition-picker .term-set {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    margin-bottom: 10px;
}

.definition-picker .term {
    flex-basis: 200px;
}
.definition-picker .term {
    position: relative;
    background-color: var(--purple);
    color: #FFF;
    padding: 12px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 25px;
    font-family: "Open Sans", Helvectica, Arial, sans-serif;
    font-weight:bold;
    height: 100%;
}

.definition-picker .spot {
    flex-basis: 770px;
    position: relative;
    width: 100%;
    margin-left: 10px;
    display: block;
    border:2px dashed var(--bright-blue);
    padding:5px 37px 5px 10px;
    box-sizing: border-box;
    min-height: 75px;
}
.definition-picker .rows-x2 .term,
.definition-picker .rows-x2 .spot{
    height: 58px;
}
.definition-picker .rows-x4 .term,
.definition-picker .rows-x4 .spot{
    height: 100px;
}
.definition-picker .spot.taken {
    border:2px dashed rgba(255,255,255,0.00);
    background-color: rgba(199,199,239,0.7);
}
.definition-picker .spot .button {
    position: absolute;
    top: 20px;
    left: 316px;
}

.definition-picker .spot.taken .button {
    top: 0px;
    left: auto;
    right: 0px;
    width: auto;
    position: absolute;
}
.definition-picker .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(255,255,255,0.7);
    opacity: 0;
    visibility: hidden;
    transition: 300ms ease-out;
    z-index: 99;
}
.definition-picker .overlay.showing {
    opacity: 1;
    visibility: visible;
}
.definition-picker .options {
    background-color: #FFF;
    margin: 0px auto;
    padding: 20px 20px 10px;
    width: 870px;
    text-align: left;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3),0px 0px 10px rgba(0,0,0,0.1);
}
.definition-picker .options .choice {
    cursor: pointer;
    transition: 300ms ease-out;
    position: relative;
    transform-origin: center;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    border: 1px dashed #CCC;
    padding: 10px;
    background-color: #FFF;
    box-sizing: border-box;
}
.definition-picker .options .choice.taken {
    cursor: default;
    opacity: 0.3;
    filter: grayscale(1);
}
.definition-picker .op-choices .choice:not(.taken):hover {
    /*box-shadow: 0 0 5px rgba(0,0,0,0.3);
    transform: scale(1.05);
    z-index: 10;*/
    background-color: rgba(199,199,239,0.7);
}
/*.definition-picker .op-choices:hover .choice:not(:hover) { 
    opacity: 0.7;
}*/
#picker-feedback {
    height: 60px;
}
#picker-feedback .fb,
#picker-feedback3 .fb{
    background-color: rgba(0,0,0,0.15);
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px;
}
#picker-feedback .fb.done,
#picker-feedback3 .fb.done{
    background-color: rgba(17,192,108,0.41);
}


/*Activity 4 Sortable */
.multi-column-sorter {
     padding-top: 20px;
}
.page_activity4 .multi-column-sorter {
    background-image: url("images/ghm-medi-life-act4-bg.jpg");
    background-repeat: no-repeat;
    background-position: bottom right;
    min-height: 510px;
   
}
.multi-column-sorter .ghm-columns {
    gap: 10px;
}
.multi-column-sorter .ghm-column {
    flex-basis: 20%;
}
.multi-column-sorter h4 {
    text-align: center;
    margin: 0;
    background-color: var(--crimson);
    color: #FFF;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
    position: relative;
}
.orange-fx h4 {
     background-color: var(--dark-orange);
}
.multi-column-sorter h4:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--crimson);
    transform: rotate(45deg);
    position: absolute;
    bottom: -5px;
    left: calc(50% - 5px);
}
.orange-fx .multi-column-sorter h4:after {
    background-color: var(--dark-orange);
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0; 
  margin-bottom: 0;
  border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.list-group.row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    justify-content: center;
    margin-bottom: 20px;
    gap: 5px;
    box-shadow: none;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.125);
}
.list-group-item.locked {
    font-weight: bold;
}
.list-group-item.correct:after {
    content: "\2713";
    display: block;
    position: absolute;
top: 13px;
right: 7px;
    color: var(--green);
}
.list-group-item:not(.locked) {
    cursor: pointer;
}
.list-group-item:not(.locked):hover {
    background-color: #CBF7E8;
}

.ghm-columns.wraps {
    flex-wrap: wrap;
}
.ghm-columns .full-width {
    flex-basis: 100%;
}
.ghm-columns .full-width {
    flex-basis: 100%;
    background-color: rgba(203,87,18,0.19);
    border-radius: 5px;
    margin-bottom: 20px;
}
.multi-column-sorter .full-width h4 {
    border-radius: 5px 5px 0 0;
    margin-bottom: 10px;
}
.int-footer {
    padding: 25px 0 5px;
}
.defitions-table {
    display: none;
}