#carousel {
    /* position: relative; */
    height: 200px;
    width: 100%;
    top: 50%;
    /* transform: translateY(-50%); */
    overflow: hidden;
    background-image: url(../images/feedback-bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: -50px;
  }
  #carousel div {
    position: absolute;
    transition: transform 1s, left 1s, opacity 1s, z-index 0s;
    opacity: 1;
  }

  .emoji-container{
    height: 100px;
    width: fit-content;
  }

  #carousel div img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: width 1s;
  }
  #carousel div.hideLeft {
    left: 70%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
  }
  #carousel div.hideLeft img {
    height: 35px;
    width: 35px;
    object-fit: contain;
  }
  #carousel div.hideRight {
    left: 42%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
  }
  #carousel div.hideRight img {
    height: 35px;
    width: 35px;
    object-fit: contain;
  }
  #carousel div.prev {
    z-index: 5;
    left: 32%;
    transform: translateY(50px) translateX(-50%);
    .emoji-bg{
        height: 53px;
        width: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F2F2F2;
        border-radius: 50%;
        /* transition: width 1s; */
    }
  }
  #carousel div.prev img {
    height: 35px;
    width: 35px;
    object-fit: contain;
  }
  #carousel div.prevLeftSecond {
    z-index: 4;
    left: 18%;
    transform: translateY(50%) translateX(-50%);
    opacity: 1;
    .emoji-bg{
        height: 53px;
        width: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F2F2F2;
        border-radius: 50%;
        /* transition: width 1s; */
    }
  }
  #carousel div.prevLeftSecond img {
    width: 35px;
    height: 35px;
  }
  #carousel div.selected {
    z-index: 10;
    left: 50%;
    transform: translateY(30px) translateX(-50%);
    .emoji-effect{
        background-color: transparent;
        height: 116px;
        width: 116px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* transition: width 1s; */
    }
    .emoji-bg{
        height: 87px;
        width: 87px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #FBDA5E 0%, #76E5B0 100%);
        border-radius: 50%;
        /* transition: width 0.5s; */
    }
  }
  #carousel div.next {
    z-index: 5;
    left: 68%;
    transform: translateY(50px) translateX(-50%);
    .emoji-bg{
        height: 53px;
        width: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F2F2F2;
        border-radius: 50%;
        /* transition: width 1s; */
    }
  }
  #carousel div.next img {
    height: 35px;
    width: 35px;
    object-fit: contain;
  }
  #carousel div.nextRightSecond {
    z-index: 4;
    left: 82%;
    transform: translateY(50%) translateX(-50%);
    opacity: 1;
    .emoji-bg{
        height: 53px;
        width: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F2F2F2;
        border-radius: 50%;
        /* transition: width 1s; */
    }
  }
  #carousel div.nextRightSecond img {
    height: 35px;
    width: 35px;
    object-fit: contain;
  }
  
  .buttons {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
  }

@media (max-width:425px) {
    #carousel div.prevLeftSecond{
      left: 14%;
    }
    #carousel div.prev{
      left: 30%;
    }
    #carousel div.next{
      left: 70%;
    }
    #carousel div.nextRightSecond {
      left: 86%;
    }
}