/*** for bookmark icons ***/
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: -50%;
  left: -160px;
  margin-top: -0.125rem;
  display: none;
  position: absolute;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-submenu:hover > .dropdown-menu:has(li) {
  display: block;
}

.bookmarkmenu-icon.dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

.demomenu-icon.dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

.dropdown-submenu > a.dropdown-toggle::after {
  display: none;
}

.dropdown-submenu > a.dropdown-toggle::before {
  content: "▶";
  float: right;
  margin-left: 0.5em;
  font-size: 0.8em;
  color: inherit;
}

.modal-footer-popup .modal-dialog {
  max-width: 300px;
  margin: 0;
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 1050;
}

.modal-footer-popup .modal-content {
  border-radius: 0.25rem;
}

audio[controls] {
  display: none !important;
}

.img-overlay-container {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
}

.img-overlay-container img {
  display: block;
  width: 100%;
  height: 100%;
}

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  font-size: 0.6rem;
  text-align: center;
  pointer-events: none;
}

.dropdown-item-not-clickable {
  pointer-events: none;
  color: #666;
  font-style: italic;
  font-size: 0.8rem;
  text-align: center;
  padding-top: 0.2rem;
}

audio {
  display: none !important;
}

#demoplayleft .dropup .dropdown-toggle::after {
  display: none;
}

#demoplayleft:hover .dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.backtrackicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' color='%23000000' fill='none'%3E%3Cpath d='M8.06492 12.6258C8.31931 13.8374 9.67295 14.7077 12.3802 16.4481C15.3247 18.3411 16.797 19.2876 17.9895 18.9229C18.3934 18.7994 18.7654 18.5823 19.0777 18.2876C20 17.4178 20 15.6118 20 12C20 8.38816 20 6.58224 19.0777 5.71235C18.7654 5.41773 18.3934 5.20057 17.9895 5.07707C16.797 4.71243 15.3247 5.6589 12.3802 7.55186C9.67295 9.29233 8.31931 10.1626 8.06492 11.3742C7.97836 11.7865 7.97836 12.2135 8.06492 12.6258Z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round' /%3E%3Cpath d='M4 4L4 20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' /%3E%3C/svg%3E");
}

.forwardtrackicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' color='%23000000' fill='none' style='transform: scaleX(-1);'%3E%3Cpath d='M8.06492 12.6258C8.31931 13.8374 9.67295 14.7077 12.3802 16.4481C15.3247 18.3411 16.797 19.2876 17.9895 18.9229C18.3934 18.7994 18.7654 18.5823 19.0777 18.2876C20 17.4178 20 15.6118 20 12C20 8.38816 20 6.58224 19.0777 5.71235C18.7654 5.41773 18.3934 5.20057 17.9895 5.07707C16.797 4.71243 15.3247 5.6589 12.3802 7.55186C9.67295 9.29233 8.31931 10.1626 8.06492 11.3742C7.97836 11.7865 7.97836 12.2135 8.06492 12.6258Z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round' /%3E%3Cpath d='M4 4L4 20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' /%3E%3C/svg%3E");
}

.playicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28' color='%23000000' fill='none'%3E%3Cpath d='M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round' /%3E%3C/svg%3E");
}

.pauseicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28' color='%23000000' fill='none'%3E%3Cpath d='M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z' stroke='currentColor' stroke-width='1.5' /%3E%3Cpath d='M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z' stroke='currentColor' stroke-width='1.5' /%3E%3C/svg%3E");
}

.demomenu-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23000000' fill='none'%3E%3Cpath d='M11.9959 12H12.0049' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M17.9998 12H18.0088' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M5.99981 12H6.00879' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
  height: 24px;
  width: 24px;
}

#demoReportModal .modal-header {
  align-items: flex-start;
}

#demoReportModal .modal-footer {
  border-top: 1px solid #e9ecef;
}

.audio-demo-report-note {
  font-size: 0.85rem;
  color: #666;
  border: 1px solid #e5d0ab;
  background: #fff6e7;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}