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

.emj-rating-container {
  display: flex;
  position: relative;
  width: var(--emj-size);
  height: var(--emj-size);
  
  background: url(../img/icon-star_78x78.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  /* border: 1px solid #aaa; */
}

.emj-main-icon {

}


.emj-rating-container:hover .emj-rating-menu {
  /* opacity: 1; */
  display: flex;
}
.emj-rating-container .emj-rating-menu {
  display: flex;
  /* opacity: 0; */
  position: absolute;
  bottom: 28px;
  height: var(--emj-size);
  padding: 6px 6px;
  border-radius: 22px;
  background: #eee;
  -webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.5); 
  box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.5);
  border: 1px solid #000;
}
.emj-rating-menu.hide {
  display: none;
}



/* Emoji Click-Menu - untere Mitte vom Player */
.emj-player-rating-container {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  bottom: 30px;
  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);
}


.emj-rating-menu-content {
  right: 3em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  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 {
  background: url(../uploads/files/smiling-face-with-open-mouth-sign_1f603.png);
  /* 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 {
  background: url(../uploads/files/face-with-tears-of-joy-sign_1f602.png);
  /* 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 {
  background: url(../uploads/files/face-with-open-mouth_1f62e.png);
  /* 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 {
  background: url(../uploads/files/slightly-frowning-face-sign_1f641.png);
  /* 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 {
  background: url(../uploads/files/heavy-black-heart-sign_2764.png);
  /* 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 {
  background: url(../uploads/files/thumbs-up-sign_1f44d.png);
  /* 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 {
  background: url(../uploads/files/thumbs-down-sign_1f44e.png);
  /* 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-menu-item:nth-child(8),
.emj-rating-display-item:nth-child(8) .emj-icon {
  background: url(../uploads/files/fire-sign_1f525.png);
  /* 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-menu-item:nth-child(9),
.emj-rating-display-item:nth-child(9) .emj-icon {
  background: url(../uploads/files/direct-hit-sign_1f3af.png);
  /* 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-menu-item:nth-child(10),
.emj-rating-display-item:nth-child(10) .emj-icon {
  background: url(../uploads/files/clapping-hands-sign_1f44f.png);
  /* 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-menu-item:nth-child(11),
.emj-rating-display-item:nth-child(11) .emj-icon {
  background: url(../uploads/files/star-struck-sign_1f929.png);
  /* 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-menu-item:nth-child(12),
.emj-rating-display-item:nth-child(12) .emj-icon {
  background: url(../uploads/files/syringe-sign_1f489.png);
  /* 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-menu-item:nth-child(13),
.emj-rating-display-item:nth-child(13) .emj-icon {
  /* 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-menu-item:nth-child(14),
.emj-rating-display-item:nth-child(14) .emj-icon {
  /* 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-menu-item:nth-child(15),
.emj-rating-display-item:nth-child(15) .emj-icon {
  /* 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-menu-item:nth-child(16),
.emj-rating-display-item:nth-child(16) .emj-icon {
  /* 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;
  /* background: rgba(0,0,0, 0.5); */
}



/* Livestream-Player-Overlay */
.emj-rating-player-overlay {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border: 1px solid #000;
  background: #f80;
  overflow: hidden;
}

.emj-rating-player-overlay .emj-rating-display-player-menu,
.emj-rating-player-overlay .emj-player-rating-container {
  opacity: 0;
  transition: opacity 0.5s 5s;
}
.emj-rating-player-overlay:hover .emj-rating-display-player-menu,
.emj-rating-player-overlay:hover .emj-player-rating-container {
  opacity: 1;
  transition: opacity 0.2s;
}

.emj-rating-display-player-menu {
  /* zeigt die Rating Ergebnisse */
  position: absolute;
  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.5);
  /* border: 2px solid #00f; */
}


.emj-rating-display-content {
  display: flex;
  flex-flow: row wrap;
  width: auto;
  /* border: 1px solid #f00; */
}
.emj-rating-player-overlay .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;
  bottom: -10%;
  width: 24px;
  height: 24px;
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  user-select: none;
  /*
  background: #ff0;
  border: 1px solid #f00;
  */
  z-index: 2;
}
.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;
  }
}