.awx-hidden { display: none; }

.awxfpp { position: relative; width: 640px; user-select: none; -webkit-user-select: none; }
.awxfpp img { width: 640px; max-width: initial; }
.awxfpp .awxleft, .awxfpp .awxright { position: absolute; width: 640px; height: 360px; overflow-y: hidden; pointer-events: none; }
.awxfpp .awxleft { z-index: 2; overflow-x: hidden; }
.awxfpp .awxright { z-index: 1; }
.awxfpp.awxseq img { position: absolute; top: 0px; }
.awxfpp.awxseq img.play { position: absolute; background-color: #3da5cb; border-radius: 50%; left: calc(50% - 24px); top: calc(50% - 24px); height: 48px; width: 48px; z-index: 2; padding: 5px; cursor: pointer; }

.awxdivider { z-index: 3; position: absolute; width: 2px; height: 360px; background-color: #888; cursor: ew-resize; }

.awxwwn { width: 640px; height: 90px; overflow-y: hidden; transition: transform 0.5s ease; }
.awxwwn.advance { transform: translateY(-100px); }
.awxwwn .awx-taxon { padding: 15px; background-color: #dcdc8f; border-radius: 10px; height: 60px; }
.awxwwn .time { font-size: 10pt; }
.awxwwn .common_name { font-size: 11pt; font-weight: bold; }
.awxwwn .sci_name { font-size: 10pt; font-style: italic; }

.awxmap { position: relative; width: 640px; user-select: none; -webkit-user-select: none; }
.awxmap .sighting-marker { background-color: #225699; border: 3px solid #000090; border-radius: 6px; opacity: 0.7; color: white; display: none; padding: 4px; }
.awxmap .sighting-marker.active { display: initial; }
.awxmap .sighting-marker .cn { font-size: 9.5pt; }
.awxmap .sighting-marker .sn { font-size: 8.5pt; font-weight: 300; font-style: italic; }
.awxmap.awxleft { position: absolute; width: 320px; height: 480px; }
.awxmap.awxright { position: absolute; left: 320px; width: 320px; height: 480px; }

.awx-legend { position: relative; width: 640px; user-select: none; -webkit-user-select: none; }