:root {
  --emj-size: 30px;
}

/* Livestream-Player-Overlay */
.emj-rating-player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(255,255,0 0.7);
  z-index: 4;
  pointer-events: none;
  /* overflow: hidden; */
}




/* Emoji Click-Menu - untere Mitte vom Player */
.emj-player-rating-container {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  bottom: 40px;
  width: 100%;
  height: auto;
  /* border: 1px solid #000; */
}

.emj-player-rating-menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 0;
  padding: 6px 6px;
  border-radius: 22px;
  background: rgba(0,0,0, 0.5);
  /* border: 1px solid #fff; */
}

.emj-rating-menu-content {
  right: 3em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: auto;
  height: var(--emj-size);
  max-height: var(--emj-size);
  /* overflow: hidden; */
  /* border: 1px solid #00f; */
}

.emj-menu-item {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  /* justify-content: center; */
  width: var(--emj-size);
  height: var(--emj-size);
  margin-left: 4px;
  margin-right: 4px;
  cursor: pointer;
  /* border: 1px solid #fff; */
}
.emj-menu-item:nth-child(1),
.emj-rating-display-item:nth-child(1) .emj-icon,
.icon-still.icon-anim.icon-anim-1 {
  background: url(../img/thumbs-up-sign_1f44d.png);
  /* background: url(../img/icon-thumb.png); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.emj-menu-item:nth-child(2),
.emj-rating-display-item:nth-child(2) .emj-icon,
.icon-still.icon-anim.icon-anim-2 {
  background: url(../img/heavy-black-heart_2764.png);
  /* background: url(../img/icon-heart.png); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.emj-menu-item:nth-child(3),
.emj-rating-display-item:nth-child(3) .emj-icon,
.icon-still.icon-anim.icon-anim-3 {
  background: url(../img/clapping-hands-sign_1f44f.png);
  /* background: url(../img/icon-love.png); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.emj-menu-item:nth-child(4),
.emj-rating-display-item:nth-child(4) .emj-icon,
.icon-still.icon-anim.icon-anim-4 {
  background: url(../img/face-with-hearts.png);
  /* background: url(../img/icon-laugh.png); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.emj-menu-item:nth-child(5),
.emj-rating-display-item:nth-child(5) .emj-icon,
.icon-still.icon-anim.icon-anim-5 {
  background: url(../img/face-with-open-mouth_1f62e.png);
  /* background: url(../img/icon-wow.png); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.emj-menu-item:nth-child(6),
.emj-rating-display-item:nth-child(6) .emj-icon,
.icon-still.icon-anim.icon-anim-6 {
  background: url(../img/smiling-face-with-open-mouth_1f603.png);
  /* background: url(../img/icon-sad.png); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.emj-menu-item:nth-child(7),
.emj-rating-display-item:nth-child(7) .emj-icon,
.icon-still.icon-anim.icon-anim-7 {
  background: url(../img/waving-hand-sign_1f44b.png);
  /* background: url(../img/icon-angry.png); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.emj-icon-tooltip {
  position: absolute;
  top: -24px;
  font-weight: bold;
  font-size: 0.8rem;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 0.8rem;
  background: #333;
  color: #f2f2f2;
  opacity: 0;
}
.emj-menu-item:hover {
  transform: scale(1.3);
}
.emj-menu-item:hover .emj-icon-tooltip {
  opacity: 1;
  transform: scale( 0.77);
}



.manager-emj-rating-list,
.presenter-emj-rating-list,
.monitor-emj-rating-list {
  position: relative;
  width: 100%;
  height: 36px;
  margin-bottom: 50px;
}


#main .emj-rating-display-player-menu,
#main .emj-player-rating-container {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s 2.25s;
}
#main:hover .emj-rating-display-player-menu,
#main:hover .emj-player-rating-container {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s;
}

/* damit's auch bei mobile-Devices funktioniert */
.emj-rating-display-player-menu.invisible,
.emj-player-rating-container.invisible {
  opacity: 0 !important;
  visibility: hidden !important;
  /* transition: opacity 0.5s 2.25s; */
}
.emj-rating-display-player-menu.invisible.show,
.emj-player-rating-container.invisible.show {
  opacity: 1 !important;
  visibility: visible !important;
  /* transition: opacity 0.2s; */
}


.emj-rating-display-player-menu {
  /* zeigt die Rating Ergebnisse, oben links im Player */
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
  padding: 0.2rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: auto;
  max-width: auto;
  overflow: hidden;
  background: #666;
  background: rgba(0,0,0, 0.6);
  z-index: 10;
  /* border: 2px solid #00f; */
}


.emj-rating-display-content {
  display: flex;
  flex-flow: row wrap;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  /* border: 1px solid #f00; */
}

/* .emj-rating-player-overlay .emj-rating-display-player-menu .emj-rating-display-item, */
#main .emj-rating-display-player-menu .emj-rating-display-item,
.emj-rating-display-player-menu .emj-rating-display-item,
.manager-emj-rating-list .emj-rating-display-player-menu .emj-rating-display-item,
.presenter-emj-rating-list .emj-rating-display-player-menu .emj-rating-display-item,
.monitor-emj-rating-list .emj-rating-display-player-menu .emj-rating-display-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 40px;
  height: auto;
  text-align: center;
  /* border: 2px solid #ff0; */
}
.emj-rating-display-item .emj-icon {
  height: 1.2rem;
  width: 1.2rem;
  padding: 0;
  margin: 0;
  user-select: none;
  /* border: 1px solid #aaa; */
}
.emj-rating-display-item .emj-counter {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: #f2f2f2;
  padding: 0;
  padding-left: 0.2rem;
  padding-right: 1.0rem;
  margin 0;
  user-select: none;
  /* border: 1px solid #333; */
}






/* animierte Icons, die im Player aufsteigen */
.icon-still {
  position: absolute;
  /* right: 30px; */
  /* left: 30px; */ /* links, damit es nicht mit dem Chat kollidiert */
  right: 5vw;
  bottom: -6%;
  /* bottom: 10%; */
  width: 32px;
  height: 32px;
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  user-select: none;
  z-index: 0; /* geht immer über die Controll-Leiste des Players */
  /*
  background: #ff0;
  border: 1px solid #f00;
  */
}
.icon-anim {
  animation: moveup 2.5s ease-in;
}
/*
.icon-still.icon-anim.icon-anim-1 {
  background: url(../img/icon-thumb.png);
}
.icon-still.icon-anim.icon-anim-2 {
  background: url(../img/icon-heart.png);
}
.icon-still.icon-anim.icon-anim-3 {
  background: url(../img/icon-love.png);
}
.icon-still.icon-anim.icon-anim-4 {
  background: url(../img/icon-laugh.png);
}
.icon-still.icon-anim.icon-anim-5 {
  background: url(../img/icon-wow.png);
}
.icon-still.icon-anim.icon-anim-6 {
  background: url(../img/icon-sad.png);
}
.icon-still.icon-anim.icon-anim-7 {
  background: url(../img/icon-angry.png);
}
*/

@keyframes moveup {
  0% {
    transform: translateY(10%) scale(1, 1);
    opacity: 1;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    transform: translateY(-1500%) scale(0.75, 0.75);
    opacity: 0;
  }
}