#info-panel {
  padding: 12px;
  padding-right: 6px;
  padding-top: 0;

  /*background-color: rgba(255, 255, 255, 0.9);*/
  background-color: rgba(75, 75, 75, 0.95);
  /*color: #222;*/
  color: #eee;
  font-family: "Lucida Console", Monaco, monospace, courier, "courier new", sans-serif;
  font-size: 0.9em;
  line-height: 1.4;
}

#info-panel h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
}

#info-panel-fo {pointer-events: none;}
#info-panel * {pointer-events: none;}
#info-panel.focused * {pointer-events: auto;}
#info-panel.hidden {display: none;}
#info-panel-fo.hidden {display: none;}

#info-panel .header {
  margin: 0 -12px;
  padding: 6px 12px;
  border-bottom: 2px solid #f0f0f0;
}

#info-panel .scrollable {
  max-height: 75vh;
  overflow-y: auto;
  padding-right: 1em;
}

/* safari scrollbar bug fix */
#info-panel.safari .scrollable::-webkit-scrollbar {
  display: none;
}

#info-panel .description {
  font-size: 0.9em;
  /*color: #666;*/
  color: #eee;
  padding-top: 10px;
}

#info-panel .header.basaltic {background-color: #816b9d;}
#info-panel .header.front {background-color: #0072b2;}
#info-panel .header.park {background-color: #009e73;}
#info-panel .header.sangres {background-color: #d55e00;}
#info-panel .header.sawatch {background-color: #e69f00;}
#info-panel .header.uinta {background-color: #8c9eb5;}
#info-panel .header.volcanic {background-color: #ad4d7a;}
#info-panel .header.river {background-color: #53c1ff;}
#info-panel .header.pass {background-color: #d55e00;}

#info-panel .header h4 {
  color: white;
  font-size: 1.4em;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 0;
  clear: none;
  display: inline;
}

#info-panel .header .elevation {
  font-style: italic;
  text-align: right;
  padding-top: 0;
  padding-right: 10px;
}

#info-panel h6 {
  color: #ddd;
  text-align: right;
  font-size: 0.8em;
  font-style: italic;
  padding-right: 6px;
  margin-bottom: 0;
  padding-top: 10px;
}

#info-panel.focused h6 {
  display: none;
}

#info-panel h5 {
  margin: 12px 0 4px 0;
  font-size: 1.1em;
  font-weight: bold;
  color: #e69f00;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#info-panel .fast-fact {
  margin-top: 10px;
}

#info-panel .fast-fact .title {
  font-weight: bold;
  color: #e69f00;
}

#info-panel ul {
  margin: 0 0 12px 0;
  padding-left: 18px;
}

#info-panel li {
  margin-bottom: 1px;
}

#info-panel a {
  color: #eee;
  text-decoration: underline;
  text-decoration-color: #e69f00;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

#info-panel .secondary {
  color: #ddd;
}

#info-panel a:hover:not(.photo-icon) {
  color: #fff;
  background-color: #e69f00;
}

#info-panel .highway-group.minor {
  display: none;
}

/* ========= Photo Panel Button ========= */
#info-panel .photo-icon {
  width: 26px;
  height: 16px;
  padding: 3px;
  float: right;
  display: inline-block;
  background-image: url('https://dismalwilderness.com/wp-content/uploads/colorado-rockies/img/photo-icon.png');
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  margin: 0;
  margin-left: 8px; /* space from heading if needed */
  box-sizing: content-box;
  border: none;
  text-decoration: none;
  box-shadow: none;
}

#info-panel .photo-icon:hover {
  background-image: url('https://dismalwilderness.com/wp-content/uploads/colorado-rockies/img/photo-icon-hover.png');
  border: none;
  text-decoration: none;
  box-shadow: none;
}

#info-panel .photo-icon.pulse {
  animation: pulse-icon 2s ease-in-out 3;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

/* Disable animation in Safari/Mobile (buggy)*/
#info-panel.safari .photo-icon.pulse,
#info-panel.mobile .photo-icon.pulse {
  animation: none !important;
  -webkit-animation: none !important;
}

@keyframes pulse-icon {
  0%   { opacity: 1; }
  50%  { opacity: 0.2; }
  100% { opacity: 1; }
}