.art-volume-panel {
  padding-bottom: 20px !important;
}
.art-controls{
 opacity: 75% !important;
}
.art-settings {
  margin-bottom: 20px !important;
}
@media screen and (max-width: 370px) {
  .art-progress {
    padding-bottom: 5px !important;
  }
  .art-controls-left .art-control {
    justify-content: flex-start !important;
  }
  .art-controls-right .art-control {
    justify-content: flex-end !important;
  }
  .art-controls-right .art-control svg {
    width: 22px;
    height: 22px;
  }
  .art-controls-left .art-control svg {
    width: 22px;
    height: 22px;
  }
  .art-state .art-icon svg {
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 350px) {
  .art-controls-right .art-control svg {
    width: 20px;
    height: 20px;
  }
  .art-controls-left .art-control svg {
    width: 20px;
    height: 20px;
  }
}

.artplayer-app {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}
.art-chapters {
  gap: 0px !important;
}

.art-chapter {
  position: relative;
  height: 100% !important; /* Ensure it takes the full height */
}

.art-chapter-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.art-subtitle {
  gap: 0 !important;
  font-size: 24px;
  line-height: 1.2 !important; 
  padding: 0 !important;
}

.art-subtitle-line {
  margin: 0 !important; 
  padding: 0 !important;
}



.art-chapter[data-title="Intro"] {
  background-color: #fdd253;
  height: 3px !important;
  
}

.art-chapter[data-title="Outro"] {
  background-color: #fdd253; 
  height: 3px !important;
}

@media screen and (max-width: 400px) and (max-height: 920px) {
.art-control.art-control-fast-forward {
display: none !important;
}
}

@media screen and (max-width: 400px) and (max-height: 920px) {
.art-control.art-control-rewind {
display: none !important;
}
}




@media screen and (max-width: 400px) and (max-height: 920px) {
.art-layer.art-layer-layer1 {
display: block;
}
}
.art-setting-item[data-name="hls-quality"] .art-setting-item-left-icon svg {
  display: inline-block; /* Ensure the SVG is visible */
  width: 32px; /* Set the desired width */
  height: 32px; /* Set the desired height */
  fill: currentColor; /* Use the current text color, or specify a color directly */
}

.art-setting-item[data-name="hls-quality"] .art-setting-item-left-icon {
  background: url('./icons/quality.svg') no-repeat center center !important; /* Add HD icon for quality selection */
  background-size: contain !important; 
  width: 22px !important;
  height: 22px !important;
  z-index: 1000 !important;
  /* Ensure the icon fits within the element */
}