/*Styling fore the popup icons and their child elements*/

/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the bubble. */
  background-color: transparent;
  padding: 5px;
  border-radius: 5px;
  font-family: sans-serif;
  /* overflow-y: auto; */
  width:96px !important;
  height:98px;
  box-shadow: none;
  text-align: center;
  /* overflow: hidden; */
  overflow-y: visible; /* --------------------------------- */
  touch-action: none !important;
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute;
  width: 0%;
  bottom: /* TIP_HEIGHT= */ 0px;
  left: 0;
  touch-action: none !important;
}
/* This element draws the tip. */


.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-top: /* TIP_HEIGHT= */ 8px solid red;
}

.queue-marker-parent{
  background-color: rgba(1, 1, 1, 0.0);
}


.queue-marker-num{
  display: inline-block; 
  z-index:-1;
  top: 0px;
  left: 0px;
  transform: translate(0, 4px);
  /*background-color:#fa701d !important;*/

  color: white;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  line-height: 2.2em;
  margin: 0 auto !important; 
  width:2.2em; height:2.2em;
  border-radius: 30px;
}

.queue-marker-icon{
  display: inline-block; 
  margin: 0 auto;
  width:74px;
  height:55px;
  transform: translate(19%, 0);
}

/*TODO: Position this better....*/
.queue-marker-name{
    position: relative;
    background-color: transparent !important;
    /*text-align: left;*/
    /*margin-left: 40px;*/
    color: #fa701d;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    height: 2.2em !important;
    margin: auto;
}


/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
  cursor: auto;
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 128px;
  background-color: transparent;
}


/* This is where our icon will be housed eventually */
.details-icon-class{
  background-color:transparent;
  width:128px;
  height:94px;
}




.grayscale{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: -webkit-filter ease 1s;
  -moz-transition: -moz-filter ease 1s;
  -ms-transition: -ms-filter ease 1s;
  -o-transition: -o-filter ease 1s;
  transition: filter ease 1s;
}


.queue-marker-icon-hero {
  position:absolute; 
  top:-40px;
  left:29px;
  height:48px; 
  pointer-events:none;
  animation-name: icon-be-a-hero;
  animation-duration: .5s;
  animation-iteration-count: 12;
  animation-direction: alternate;
}


@keyframes icon-be-a-hero {
  0%   {top:-40px;left:29px;height:48px;}
  100%  {top:-60px;left:26px;height:58px;}
  /* 100% {bottom:124px;} */
}