.audioItemOverlay {
   display: none;
}

.audioItemOverlay[show="true"] {
   display: flex;
   height: 100%;
   width: 100%;
   position: absolute;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.70);
   /* margin: auto; */
   z-index: 1;
   border-radius: var(--border-radius);
}

.audioItemCover:hover>.audioItemOverlay {
   display: flex;
   height: 100%;
   width: 100%;
   position: absolute;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.70);
   /* margin: auto; */
   z-index: 1;
   border-radius: var(--border-radius);
}

.audioItemOverlay img,
.overlayPlayButton {
   width: 48px;
   height: 48px;
}

.audioItemOverlay[state="buffering"] img {
   animation: buffer 5s infinite;
}

@keyframes buffer {
   100% {
      transform: rotate(360deg);
   }
}

.audioItemBadge {
   display: none;

   position: absolute;
   bottom: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--audioItem-badge-bg);
   border-radius: var(--border-radius-badge);
   width: fit-content;
   padding: 4px 8px;
   color: var(--audioItem-text);
   font-family: var(--font-family-text);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.052px;
   text-transform: uppercase;
   z-index: 2;
}

.audioItemCover {
   position: relative;
}

.arrow-right {
   position: absolute;
   right: -42px;
   top: 30%;
   z-index: 2;
}

.arrow-left {
   position: absolute;
   left: -42px;
   top: 30%;
   z-index: 2;
}

.audioList {
   position: relative;
   display: flex;
   overflow-x: hidden;
   gap: 24px;
}

.itemRow {
   position: relative;
   margin-left: 56px;
   width: calc(100% - 112px);

}

.audioItemText {
   font-size: 17px;
   font-weight: 700;
   letter-spacing: 0.043px;
   font-family: var(--font-family-text);
   margin-top: 16px;
   width: 135px;
}

.audioItemCover > img {
   height: 100%;
   width: 100%;
   border-radius: var(--border-radius);
}

.audioItemCover,
.audioItemCover .coverImage {
   width: 135px;
   height: 135px;
   border-radius: var(--border-radius);
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.gradient-right {
   height: 100%;
   width: 56px;
   position: absolute;
   right: 0;
   background: linear-gradient(90deg, rgba(19, 41, 61, 0.00) 0%, rgba(19, 41, 61, 0.80) 100%);
   z-index: 1;
}
.gradient-left {
   height: 100%;
   width: 56px;
   position: absolute;
   left: 0;
   background: linear-gradient(-90deg, rgba(19, 41, 61, 0.00) 0%, rgba(19, 41, 61, 0.80) 100%);
   z-index: 1;
}

.rowTitleContainer {
   position: relative;
   height: 72px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   border-left: 2px solid var(--header-bg-dark);
   margin-left: 99px;
   margin: 42px;
}

.rowTitle {
   position: absolute;
   top: 14px;
   font-family: var(--font-family-headline);
   font-size: 26px;
   font-weight: 400;
   letter-spacing: 0.065px;
   border-left: 3px solid var(--font-color-accent);
   padding-left: 12px;
}
audio-item
{
   margin: 0 4px;
}
audio-item .audioItemTitle
{
   font-family: var(--font-family-text);
   font-size: 17px;
   font-style: normal;
   font-weight: 700;
   color: var(--content-bg);
   line-height: normal;
   letter-spacing: 0.043px;

   display: -webkit-box;
   -webkit-line-clamp: 3;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
audio-item .audioItemSubTitle
{
   display: -webkit-box;
   -webkit-line-clamp: 3;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
@media screen and (max-width: 700px) {
   .audioList {
      overflow: scroll;
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
      gap: 8px;

   }
   .audioList::-webkit-scrollbar {
      display: none;
    }

   .audioItemCover {
      width: 88px;
      height: 88px;
   }
   .audioItemText {
      width: 88px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.035px;
   }
   .rowTitleContainer {
      margin: 16px 0;
      border: none;
   }

   .arrows {
      display: none;
   }

   .itemRow {
      margin-left: 0;
      width: 100%;
   }
}