/* @import "~antd/dist/antd.css"; */
/* Design system type pairing: Tondo (self-hosted, set as antd's global
   @font-family in less/antd-custom.less) handles headings/nav/labels. DM Sans
   handles body copy/form fields/table cells; JetBrains Mono handles counts,
   durations, and IDs. Both loaded via <link> tags in pages/_document.js —
   an @import here gets misresolved as a local path by the less-loader chain
   this file passes through. */
.ant-table,
.ant-table-cell,
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-input-number-input,
textarea,
.ant-select-selector,
.ant-select-selection-item,
.ant-select-selection-placeholder,
.ant-picker-input > input {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
.at-mono {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
body {
  position: fixed;
  height: 100%;
}
.react-resizable {
  position: relative;
  background-clip: padding-box;
}
.react-resizable-handle {
  position: absolute;
  right: -5px;
  bottom: 0;
  z-index: 1;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}
.filters-modal > .ant-modal-content {
  background-color: #1b0733;
}
.filters-modal > .ant-modal-content > .ant-modal-header {
  background-color: #1b0733;
}
/* Edit Song + Select Album Cover modals: the default @component-background (#030416)
   is the same near-black as the page, so the modal vanishes. Lift these two to a
   clearly lighter indigo with a border + shadow so they read as a surface. */
.edit-song-modal .ant-modal-content,
.edit-song-modal .ant-modal-header,
.album-cover-modal .ant-modal-content,
.album-cover-modal .ant-modal-header {
  background-color: #1e1846;
}
.edit-song-modal .ant-modal-content,
.album-cover-modal .ant-modal-content {
  border: 1px solid #3a2f6b;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
/* Inner antd Cards/grids in the Edit Song modal sit on the same dark bg — lift them
   a touch above the modal surface so the two columns have subtle definition. */
.edit-song-modal .ant-card,
.edit-song-modal .ant-card-grid {
  background-color: #262056;
  box-shadow: none;
}
.sync-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {
  background: none !important;
}
.sync-table .ant-table-tbody > tr.ant-table-row:hover > td {
  background: none !important;
}
.sync-table .ant-table-tbody > tr.ant-table-row-selected > td {
  border-bottom: 1px solid #424242;
  background: none !important;
}
/* .sync-table .ant-table-tbody{
    padding: 0px !important;
  }
  .sync-table .ant-table-tbody > tr > td{
    padding: 8px !important;
  } */
/* .table-row-light {
  background-color: #ffffff;
} */
.table-row-light {
  background-color: #2c2e4069;
}
.found-index {
  background-color: #058707;
}
.not-found-index {
  background-color: #540000;
}
.expanded {
  color: red;
}
/* tests */
.errorLogin .ant-message-notice-content {
  background-color: #b7353e;
}
.ant-message-error .anticon {
  color: #fff;
}
/* --reactions-insights-offset is set imperatively (ReactionsTable.js, via
   ResizeObserver on the insights strip) since this rule's !important beats
   any inline style the Table component itself could set — a CSS var is the
   only way for that strip's real height to reach this fixed calc(). The app
   disables page scroll (see `body` above), so if this drifts from the
   strip's actual height, rows get clipped with no way to scroll to them. */
#__next > div.ant-table-wrapper.reaction-table > div > div > div > div > div.ant-table-body > div {
  max-height: calc(100vh - 236px - var(--reactions-insights-offset, 0px)) !important;
  height: calc(100vh - 236px - var(--reactions-insights-offset, 0px)) !important;
}
#__next > div.ant-table-wrapper.reaction-table > div > div:nth-child(1) > div {
  max-height: 100%;
}
.reaction-table .ant-table-tbody > tr > td {
  border-right: 1px solid #424242;
}
.stone {
  position: absolute;
  background: #564e4e;
  width: 100px;
  height: 30px;
}
/* .ant-table-column-sorter {
  display: none;
} */
.blue {
  background: blue;
}
.ant-list-item-meta-title {
  margin: 0px;
}
.ant-list-item-meta-avatar {
  margin-right: 10px;
}
.playlist-image {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.playlist-image:hover {
  background-color: #222529bf;
  transition: all 0.3s;
}
.ant-divider-horizontal.ant-divider-with-text::before,
.ant-divider-horizontal.ant-divider-with-text::after {
  top: 0px;
}
/* tests */
.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
  z-index: 2;
}
/* popup style */
.ant-table.ant-table-small .ant-table-title,
.ant-table.ant-table-small .ant-table-footer,
.ant-table.ant-table-small .ant-table-thead > tr > th,
.ant-table.ant-table-small .ant-table-tbody > tr > td,
.ant-table.ant-table-small tfoot > tr > th,
.ant-table.ant-table-small tfoot > tr > td {
  padding: 4px 4px;
}
.custom-card > .ant-card-body {
  background-color: #525e64;
  transition: all 0.3s;
}
.custom-card > .ant-card-body:hover {
  background-color: #74848d;
}
/* RightSider reskin pills — inline backgroundColor beats the antd default
   hover CSS, so these give each color variant its own :hover state. */
.rs-pill-dark > .ant-card-body:hover {
  background-color: #322c52 !important;
}
.rs-pill-lime > .ant-card-body:hover {
  background-color: #e4ff6b !important;
}
.rs-pill-red > .ant-card-body:hover {
  background-color: #ff7a7a !important;
}
.rs-outline-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #b375f0 !important;
  color: #fff !important;
}
.svg-custom > path {
  transition: all 0.3s;
}
.svg-custom path:hover {
  fill: red;
}
.ant-collapse-extra {
  position: absolute;
  right: 35px;
}
.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
  padding: 8px 8px 8px 32px;
}
.ant-collapse-content-box {
  background-color: #270b4a;
  border-radius: 5px;
  padding: 0px;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 0px;
  align-items: center;
}
.addPopup:hover {
  background-color: #393b5a55;
}
.ant-card-bordered {
  border: 1px solid #181a1d;
}
.dzu-previewFileName {
  color: #ffffffd9 !important;
}
.deleted-song {
  background-color: #501e1e;
}
.now-playing {
  color: #65c967;
}
.selected {
  background-color: #444242;
}
.selected-song {
  background-color: #670bce;
}
/* Playlist Fit suggestions (Songs page) — a song scoring highly against
   the analyzed playlist's own audio/genre profile. Deliberately subtle so
   it doesn't fight the stronger selection/now-playing states above. */
.great-fit {
  background-color: rgba(124, 226, 155, 0.1);
}
.ant-table-body {
  user-select: none;
  /* min-height: 100% !important; */
  /* height: calc(100vh - 524px) !important; */
}
.popup {
  background-clip: padding-box;
  background-color: #1e1e1e;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  left: 0px;
  list-style-type: none;
  margin: 0;
  outline: none;
  padding: 0;
  position: fixed;
  text-align: left;
  top: 0px;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.popup li {
  clear: both;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  margin: 0;
  padding: 5px 12px;
  transition: all 0.3s;
  white-space: nowrap;
  -webkit-transition: all 0.3s;
}
.popup li:hover {
  background-color: #e6f7ff;
  color: rgba(0, 0, 0, 0.65);
}
.popup li > i {
  margin-right: 8px;
}
/* popup style */
/* blink edit button */
.blink-2 {
  -webkit-animation: blink-2 1.5s infinite both;
  animation: blink-2 1.5s infinite both;
}
@-webkit-keyframes blink-2 {
  0% {
    box-shadow: 0px 0px 7px 1px #1890ff;
  }
  50% {
    box-shadow: 0px 0px 0px 0px transparent;
  }
  100% {
    box-shadow: 0px 0px 7px 1px #1890ff;
  }
}
@keyframes blink-2 {
  0% {
    box-shadow: 0px 0px 7px 1px #1890ff;
  }
  50% {
    box-shadow: 0px 0px 0px 0px transparent;
  }
  100% {
    box-shadow: 0px 0px 7px 1px #1890ff;
  }
}
.select-refresh-scene .ant-select-selector {
  border-radius: 21px !important;
  background-color: #4f4f4f !important;
}
.more-tooltip .ant-tooltip-inner {
  padding: 0px;
  width: fit-content;
  display: flex;
  flex-direction: column;
}
.add-new-playlist-modal .ant-modal-footer {
  text-align: center;
}
.highlight {
  background-color: #e3e308;
}
.ant-badge-status-dot {
  width: 12px;
  height: 12px;
}
/* blink edit button */
.addIcon {
  color: #ffffff;
}
.addIcon:hover {
  color: #c361ea;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hoverIcon {
  color: #4f4f4f;
}
.hoverIconDanger {
  color: #4f4f4f;
}
.hoverIcon:hover {
  color: #c361ea;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hoverIconLocked:hover {
  color: #ffbe00;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hoverIconDanger:hover {
  color: #fa541c;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hoverItem:hover {
  background: #94949447;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hoverItemScene:hover {
  background: #219653;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.avatar-uploader > .ant-upload {
  width: 173px;
  height: auto;
}
.avatar-uploader2 > .ant-upload {
  width: 100%;
  margin: 0 auto;
  height: auto;
  align-self: center;
}
.song-uploader > .ant-upload {
  width: auto;
  margin: 0px auto 10px auto;
  height: auto;
  align-self: center;
}
.avatar-uploader3 > .ant-upload {
  background-color: red;
  width: auto;
  margin: 0 auto;
  height: auto;
  align-self: center;
}
.slide-in-fwd-center {
  -webkit-animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
    transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
    transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
/*NPROGRESS BAR*/
#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  background: blueviolet;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
}
/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}
#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}
@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*NPROGRESS BAR*/
.ant-layout-sider-collapsed {
  margin-right: -1px;
}
.ant-layout-sider {
  margin-right: -1px;
}
.trigger {
  font-size: 20px;
  transition: color 0.3s;
  color: blueviolet;
}
.trigger:hover {
  color: #f5f6fa;
}
.pulse {
  box-shadow: 0 0 0 blueviolet;
  animation: pulse 1.5s infinite;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 blueviolet;
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 blueviolet;
    box-shadow: 0 0 0 0 blueviolet;
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
.ant-card-actions {
  min-height: 52px;
  max-height: 52px;
  height: 52px;
  display: flex;
  justify-content: center;
  background-color: transparent;
}
.ant-card-actions > li {
  width: fit-content;
}
.ant-upload.ant-upload-drag {
  height: 150px;
  width: 31vw;
  margin: 0 auto;
}
.ant-upload-list-item-info {
  width: 31vw;
}
.upload-songImage {
  width: 10vw;
  margin: 0 auto;
}
.ant-modal-body {
  display: flex;
  flex-direction: column;
}
.ant-upload-picture-card-wrapper {
  width: 100%;
  /* display: flex;
  justify-content: center; */
  margin: 0 auto;
}
.item.is-dragging {
  background: #ededed;
  border-color: grey;
  /* box-shadow: 0px 0px 2px rgb(8, 58, 30), 0px 0px 10px MediumSeaGreen; */
}
.item {
  box-sizing: border-box;
  border-radius: 8px;
  user-select: none;
  /* center align text */
  display: flex;
  justify-content: center;
  align-items: center;
}
div#amplitude-player {
  background: #ffffff;
  box-shadow: 0 2px 12px 8px rgba(0, 0, 0, 0.1);
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  max-width: 900px;
}
/* Small only */
@media screen and (max-width: 39.9375em) {
  div#amplitude-player {
    flex-direction: column;
  }
}
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  div#amplitude-player {
    max-height: 715px;
  }
}
/* Large and up */
@media screen and (min-width: 64em) {
  div#amplitude-player {
    max-height: 715px;
  }
}
div#amplitude-left {
  padding: 0px;
  border-right: 1px solid #cfd8dc;
  width: 50%;
  display: flex;
  flex-direction: column;
}
div#amplitude-left img.album-art {
  width: 100%;
}
div#amplitude-left div#player-left-bottom {
  flex: 1;
  background-color: #f1f1f1;
  padding: 20px 10px;
}
div#amplitude-left div#player-left-bottom div#volume-container:after {
  content: '';
  display: table;
  clear: both;
}
/* Small only */
@media screen and (max-width: 39.9375em) {
  div#amplitude-player div#amplitude-left {
    width: 100%;
  }
  div#amplitude-player div#amplitude-left img[amplitude-song-info='cover_art_url'] {
    width: auto;
    height: auto;
  }
}
div#amplitude-right div.song {
  cursor: pointer;
  padding: 10px;
}
div#amplitude-right div.song div.song-now-playing-icon-container {
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
div#amplitude-right div.song div.song-now-playing-icon-container img.now-playing {
  display: none;
  margin-top: 15px;
}
div#amplitude-right div.song div.play-button-container {
  display: none;
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/list-play-light.png') no-repeat;
  width: 22px;
  height: 22px;
  margin-top: 10px;
}
div#amplitude-right div.song div.play-button-container:hover {
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/list-play-hover.png') no-repeat;
}
div#amplitude-right div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing {
  display: block;
}
div#amplitude-right div.song.amplitude-active-song-container:hover div.play-button-container {
  display: none;
}
div#amplitude-right div.song div.song-meta-data {
  float: left;
  width: calc(100% - 110px);
}
div#amplitude-right div.song img.bandcamp-grey {
  float: left;
  display: block;
  margin-top: 10px;
}
div#amplitude-right div.song img.bandcamp-white {
  float: left;
  display: none;
  margin-top: 10px;
}
div#amplitude-right div.song span.song-duration {
  float: left;
  width: 55px;
  text-align: center;
  line-height: 45px;
  color: #607d8b;
  font-size: 16px;
  font-weight: 500;
}
div#amplitude-right div.song:after {
  content: '';
  display: table;
  clear: both;
}
/* Small only */
@media screen and (max-width: 39.9375em) {
  div#amplitude-player div#amplitude-right {
    width: 100%;
  }
}
div#progress-container {
  width: 70%;
  float: left;
  position: relative;
  height: 20px;
  cursor: pointer;
  /*
      IE 11
    */
}
div#progress-container:hover input[type='range'].amplitude-song-slider::-webkit-slider-thumb {
  display: block;
}
div#progress-container:hover input[type='range'].amplitude-song-slider::-moz-range-thumb {
  visibility: visible;
}
div#progress-container progress#song-played-progress {
  position: absolute;
  left: 0;
  top: 8px;
  right: 0;
  width: 100%;
  z-index: 60;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 5px;
  background: transparent;
  border: none;
  /* Needed for Firefox */
}
@media all and (-ms-high-contrast: none) {
  div#progress-container *::-ms-backdrop,
  div#progress-container progress#song-played-progress {
    color: #00a0ff;
    border: none;
    background-color: #cfd8dc;
  }
}
@supports (-ms-ime-align: auto) {
  div#progress-container progress#song-played-progress {
    color: #00a0ff;
    border: none;
  }
}
div#progress-container progress#song-played-progress[value]::-webkit-progress-bar {
  background: none;
  border-radius: 5px;
}
div#progress-container progress#song-played-progress[value]::-webkit-progress-value {
  background-color: #00a0ff;
  border-radius: 5px;
}
div#progress-container progress#song-played-progress::-moz-progress-bar {
  background: none;
  border-radius: 5px;
  background-color: #00a0ff;
  height: 5px;
  margin-top: -2px;
}
div#progress-container progress#song-buffered-progress {
  position: absolute;
  left: 0;
  top: 8px;
  right: 0;
  width: 100%;
  z-index: 10;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 5px;
  background: transparent;
  border: none;
  background-color: #d7dee3;
}
div#progress-container progress#song-buffered-progress[value]::-webkit-progress-bar {
  background-color: #cfd8dc;
  border-radius: 5px;
}
div#progress-container progress#song-buffered-progress[value]::-webkit-progress-value {
  background-color: #78909c;
  border-radius: 5px;
  transition: width 0.1s ease;
}
div#progress-container progress#song-buffered-progress::-moz-progress-bar {
  background: none;
  border-radius: 5px;
  background-color: #78909c;
  height: 5px;
  margin-top: -2px;
}
div#progress-container progress::-ms-fill {
  border: none;
}
@-moz-document url-prefix() {
  div#progress-container progress#song-buffered-progress {
    top: 9px;
    border: none;
  }
}
@media all and (-ms-high-contrast: none) {
  div#progress-container *::-ms-backdrop,
  div#progress-container progress#song-buffered-progress {
    color: #78909c;
    border: none;
  }
}
@supports (-ms-ime-align: auto) {
  div#progress-container progress#song-buffered-progress {
    color: #78909c;
    border: none;
  }
}
div#progress-container input[type='range'] {
  -webkit-appearance: none;
  width: 100%;
  margin: 7.5px 0;
  position: absolute;
  z-index: 9999;
  top: -7px;
  height: 20px;
  cursor: pointer;
  background-color: inherit;
}
div#progress-container input[type='range']:focus {
  outline: none;
}
div#progress-container input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #0075a9;
  border-radius: 0px;
  border: 0px solid #010101;
}
div#progress-container input[type='range']::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #00a0ff;
  height: 15px;
  width: 15px;
  border-radius: 16px;
  background: #00a0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.5px;
}
div#progress-container input[type='range']:focus::-webkit-slider-runnable-track {
  background: #00adfb;
}
div#progress-container input[type='range']::-moz-range-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #0075a9;
  border-radius: 0px;
  border: 0px solid #010101;
}
div#progress-container input[type='range']::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #00a0ff;
  height: 15px;
  width: 15px;
  border-radius: 16px;
  background: #00a0ff;
  cursor: pointer;
}
div#progress-container input[type='range']::-ms-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
div#progress-container input[type='range']::-ms-fill-lower {
  background: #003d57;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
div#progress-container input[type='range']::-ms-fill-upper {
  background: #0075a9;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
div#progress-container input[type='range']::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #00a0ff;
  height: 15px;
  width: 15px;
  border-radius: 16px;
  background: #00a0ff;
  cursor: pointer;
  height: 0px;
  display: block;
}
@media all and (-ms-high-contrast: none) {
  div#progress-container *::-ms-backdrop,
  div#progress-container input[type='range'].amplitude-song-slider {
    padding: 0px;
  }
  div#progress-container *::-ms-backdrop,
  div#progress-container input[type='range'].amplitude-song-slider::-ms-thumb {
    height: 15px;
    width: 15px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: -8px;
  }
  div#progress-container *::-ms-backdrop,
  div#progress-container input[type='range'].amplitude-song-slider::-ms-track {
    border-width: 15px 0;
    border-color: transparent;
  }
  div#progress-container *::-ms-backdrop,
  div#progress-container input[type='range'].amplitude-song-slider::-ms-fill-lower {
    background: #cfd8dc;
    border-radius: 10px;
  }
  div#progress-container *::-ms-backdrop,
  div#progress-container input[type='range'].amplitude-song-slider::-ms-fill-upper {
    background: #cfd8dc;
    border-radius: 10px;
  }
}
@supports (-ms-ime-align: auto) {
  div#progress-container input[type='range'].amplitude-song-slider::-ms-thumb {
    height: 15px;
    width: 15px;
    margin-top: 3px;
  }
}
div#progress-container input[type='range']:focus::-ms-fill-lower {
  background: #0075a9;
}
div#progress-container input[type='range']:focus::-ms-fill-upper {
  background: #00adfb;
}
div#control-container div#repeat-container {
  width: 25%;
  float: left;
  padding-top: 20px;
}
div#control-container div#repeat-container div#repeat {
  width: 24px;
  height: 19px;
  cursor: pointer;
}
div#control-container div#repeat-container div#repeat.amplitude-repeat-off {
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/repeat-off.svg');
}
div#control-container div#repeat-container div#repeat.amplitude-repeat-on {
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/repeat-on.svg');
}
div#control-container div#repeat-container div#shuffle {
  width: 23px;
  height: 19px;
  cursor: pointer;
  float: right;
}
div#control-container div#repeat-container div#shuffle.amplitude-shuffle-off {
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/shuffle-off.svg');
}
div#control-container div#repeat-container div#shuffle.amplitude-shuffle-on {
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/shuffle-on.svg');
}
@media all and (-ms-high-contrast: none) {
  div#control-container *::-ms-backdrop,
  div#control-container div#control-container {
    margin-top: 40px;
    float: none;
  }
}
div#control-container div#central-control-container div#central-controls {
  width: 130px;
  margin: auto;
}
div#control-container div#central-control-container div#central-controls div#previous {
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-image: url([object Module]);
  transform: rotate(180deg);
  background-repeat: no-repeat;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
}
/* Sizing/display for #play-pause now lives on .transport-play-pause
   (components/Layout/Transport/TransportContent.js) — this ID rule is kept
   empty rather than removed in case other legacy Amplitude markup expects it. */
/* #play-pause.amplitude-paused {
  background-image: url("./public/play-button.svg");
}

#play-pause.amplitude-playing {
  background-image: url("./public/pause.svg");
} */
div#control-container div#central-control-container div#central-controls div#next {
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-image: url([object Module]);
  background-repeat: no-repeat;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
div#control-container div#volume-container {
  width: 25%;
  float: left;
  padding-top: 20px;
}
div#control-container div#volume-container div#shuffle-right {
  width: 23px;
  height: 19px;
  cursor: pointer;
  margin: auto;
}
div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-off {
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/shuffle-off.svg');
}
div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-on {
  background: url('https://521dimensions.com/img/open-source/amplitudejs/blue-player/shuffle-on.svg');
}
/* div#volume div.amplitude-mute {
  cursor: pointer;
  width: 25px;
  height: 19px;
  float: left;
} */
/* div#volume div.amplitude-mute.amplitude-not-muted {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/blue-players/volume.svg");
  background-repeat: no-repeat;
} */
/* div#volume div.amplitude-mute {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/blue-player/mute.svg");
  background-repeat: no-repeat;
} */
div#control-container:after {
  content: '';
  display: table;
  clear: both;
}
/* Small only */
@media screen and (max-width: 69.9375em) {
  div#amplitude-player div#repeat-container div#repeat {
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  div#amplitude-player div#repeat-container div#shuffle {
    display: none;
  }
  div#amplitude-player div#volume-container div.volume-controls {
    display: none;
  }
  div#amplitude-player div#volume-container div#shuffle-right {
    display: block;
  }
  div#play-pause {
    width: 40px;
    height: 40px;
  }
}
/* Medium only */
@media screen and (min-width: 70em) and (max-width: 89.9375em) {
  div#amplitude-player div#repeat-container div#repeat {
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  div#amplitude-player div#repeat-container div#shuffle {
    display: none;
  }
  div#amplitude-player div#volume-container div.volume-controls {
    display: none;
  }
  div#amplitude-player div#volume-container div#shuffle-right {
    display: block;
  }
  div#play-pause {
    width: 50px;
    height: 50px;
  }
}
/* Large and up */
@media screen and (min-width: 90em) {
  div#amplitude-player div#repeat-container div#repeat {
    margin-left: 10px;
    margin-right: 20px;
    float: left;
  }
  div#amplitude-player div#volume-container div#shuffle-right {
    display: none;
  }
  div#play-pause {
    width: 50px;
    height: 50px;
  }
}
div.ms-range-fix {
  height: 1px;
  background-color: #a9a9a9;
  width: 67%;
  float: right;
  margin-top: -6px;
  z-index: 9;
  position: relative;
}
div#time-container span.current-time {
  color: #607d8b;
  font-size: 14px;
  font-weight: 700;
  float: left;
  width: 15%;
  text-align: center;
}
div#time-container span.duration {
  color: #607d8b;
  font-size: 14px;
  font-weight: 700;
  float: left;
  width: 15%;
  text-align: center;
}
div#time-container:after {
  content: '';
  display: table;
  clear: both;
}
div#meta-container {
  text-align: center;
  margin-top: 5px;
}
div#meta-container div.song-artist-album span {
  display: block;
}
/*
    3. Layout
  */
div.amplitude-wave-form {
  margin-top: -14px;
}
div.amplitude-wave-form svg {
  stroke: #00a0ff;
  height: 50px;
  width: 100%;
  stroke-width: 0.5px;
}
div.amplitude-wave-form svg g {
  stroke: #00a0ff;
  height: 50px;
  width: 100%;
}
div.amplitude-wave-form svg g path {
  stroke: #00a0ff;
  height: 50px;
  width: 100%;
}
div#large-visualization {
  width: 100%;
  background-color: black;
  visibility: hidden;
}
/* NOW PLAYING SLIDER*/
div#now-playing input[type='range'] {
  -webkit-appearance: none;
  background-color: #0bcec8;
  height: 6px;
  overflow: hidden;
  width: 50vw;
  border-radius: 20px;
  margin-top: 10px;
  outline: none;
}
div#now-playing input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 20px;
}
div#now-playing input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #c1f8be;
  border-radius: 50%;
  box-shadow: -25.5vw 0px 0px 25vw #c1f8be;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}
div#now-playing input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -360px 0px 0px 350px #c1f8be;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}
div#now-playing input[type='range']::-moz-range-track {
  background-color: #ddd;
}
div#now-playing input[type='range']::-moz-range-progress {
  background-color: #666;
  height: 20px;
}
div#now-playing input[type='range']::-ms-fill-upper {
  background-color: #ddd;
}
div#now-playing input[type='range']::-ms-fill-lower {
  background-color: #666;
}
/* VOLUME SLIDER*/
div#volume input[type='range'] {
  -webkit-appearance: none;
  background-color: #c4c4c4;
  height: 6px;
  overflow: hidden;
  width: 50vw;
  border-radius: 20px;
  margin-top: 10px;
  outline: none;
}
div#volume input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 10px;
}
div#volume input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #4f4f4f;
  border-radius: 50%;
  box-shadow: -355px 0px 0px 350px #4f4f4f;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border: 0;
}
div#volume input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -355px 0px 0px 350px #4f4f4f;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border: 0;
}
/* div#volume input[type="range"] {
  -webkit-appearance: none;
  width: 200px;
  margin: 12px 0;
}
div#volume input[type="range"]:focus {
  outline: none;
}
div#volume input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #00d900, 0px 0px 0px #00f300;
  background: rgba(247, 199, 94, 0.78);
  border-radius: 25px;
  border: 0px solid rgba(0, 1, 1, 0);
}
div#volume input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
  border: 0px solid rgba(0, 0, 0, 0);
  height: 26px;
  width: 26px;
  border-radius: 50px;
  background: #888888;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -12px;
}
div#volume input[type="range"]:focus::-webkit-slider-runnable-track {
  background: rgba(247, 201, 99, 0.78);
}
div#volume input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #00d900, 0px 0px 0px #00f300;
  background: rgba(247, 199, 94, 0.78);
  border-radius: 25px;
  border: 0px solid rgba(0, 1, 1, 0);
}
div#volume input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
  border: 0px solid rgba(0, 0, 0, 0);
  height: 26px;
  width: 26px;
  border-radius: 50px;
  background: #888888;
  cursor: pointer;
}
div#volume input[type="range"]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
div#volume input[type="range"]::-ms-fill-lower {
  background: rgba(247, 197, 89, 0.78);
  border: 0px solid rgba(0, 1, 1, 0);
  border-radius: 50px;
  box-shadow: 0px 0px 0px #00d900, 0px 0px 0px #00f300;
}
div#volume input[type="range"]::-ms-fill-upper {
  background: rgba(247, 199, 94, 0.78);
  border: 0px solid rgba(0, 1, 1, 0);
  border-radius: 50px;
  box-shadow: 0px 0px 0px #00d900, 0px 0px 0px #00f300;
}
div#volume input[type="range"]::-ms-thumb {
  box-shadow: 0px 0px 0px #000031, 0px 0px 0px #00004b;
  border: 0px solid rgba(0, 0, 0, 0);
  height: 26px;
  width: 26px;
  border-radius: 50px;
  background: #888888;
  cursor: pointer;
  height: 2px;
}
div#volume input[type="range"]:focus::-ms-fill-lower {
  background: rgba(247, 199, 94, 0.78);
}
div#volume input[type="range"]:focus::-ms-fill-upper {
  background: rgba(247, 201, 99, 0.78);
} */
/* Transport player — glass by default, solidifies on hover/focus so controls
   stay legible while interacting. Used by both the bottom-bar and
   floating-corner docks in components/Layout/Transport/NowPlaying.js. */
.transport-glass {
  background: rgba(28, 25, 48, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.2s ease;
}
.transport-glass:hover,
.transport-glass:focus-within {
  background: rgba(28, 25, 48, 0.97);
}
/* "PLAYLIST · Soft Groove Workspace" eyebrow label above the track title —
   content is set via localStorage in SelectedPlaylistSongs.js/SceneSongs.js,
   the bullet is a pure CSS decoration so it survives that innerHTML swap. */
#playing:not(:empty)::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4dd6fc;
  flex-shrink: 0;
}
/* Filled circular play/pause button — two inline SVGs (play triangle / pause
   bars) toggled by the amplitude-playing/amplitude-paused classes Amplitude.js
   applies to this same element, rather than a background-image swap, so the
   glyph color (#0A0818, matching the design reference) is easy to control. */
.transport-play-pause {
  border-radius: 50%;
  background-color: #4dd6fc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(77, 214, 252, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.transport-play-pause:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(77, 214, 252, 0.5);
}
.transport-play-pause .icon-pause {
  display: none;
}
.transport-play-pause.amplitude-playing .icon-play {
  display: none;
}
.transport-play-pause.amplitude-playing .icon-pause {
  display: block;
}
/* Thin transport sliders — progress gets a gradient fill, volume a flat one;
   thumb stays hidden until hover so the bar reads as a track+fill, not a
   traditional handle-driven slider, matching the design reference. */
input[type='range'].transport-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  cursor: pointer;
}
input[type='range'].transport-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
input[type='range'].transport-slider:hover::-webkit-slider-thumb {
  opacity: 1;
}
input[type='range'].transport-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
input[type='range'].transport-slider:hover::-moz-range-thumb {
  opacity: 1;
}
input[type='range'].transport-slider--progress {
  accent-color: #4dd6fc;
}
input[type='range'].transport-slider--volume {
  accent-color: rgba(255, 255, 255, 0.5);
}
/* Left icon rail (components/Layout/IconRail.js) — hover state needs a real
   CSS rule since inline styles can't express :hover. */
.at-rail-icon {
  background-color: #1c1930;
}
.at-rail-icon:hover {
  background-color: #2a2440;
}
.at-rail-icon--selected,
.at-rail-icon--selected:hover {
  background-color: #b375f0;
}
/* Sider folder/playlist rows (Folder.js, Playlist.js, Scene siders) — the
   settings gear only shows on row hover so the default row matches the
   design system's clean two-element (icon + label + dot) layout.
   The folder gear is rendered in the collapse panel's `extra`, which is NOT
   inside .at-folder-row, so the hover rule must be on the whole header: with
   only the .at-folder-row rule the gear stayed invisible on every folder. */
.at-folder-row-gear {
  opacity: 0;
  transition: opacity 0.1s ease;
}
.at-folder-row:hover .at-folder-row-gear,
.ant-collapse-header:hover .at-folder-row-gear {
  opacity: 1;
}
.at-folder-row-gear:hover {
  color: #fff !important;
}
/* Vibes AI track rows (VibesBoard.js Library + Seeds tables) — hover needs a
   real CSS rule since the row background is otherwise only set inline for
   the checked/selected state. !important wins over the inline non-important
   background without fighting the checked-row highlight. */
.vibes-row-hover:hover {
  background: rgba(179, 117, 240, 0.07) !important;
}
/* Songs quick-add popover options (SongsTable.js) + per-row/tray chips. */
.at-quickadd-option:hover {
  background: rgba(179, 117, 240, 0.14);
}
.at-quickadd-btn {
  opacity: 0;
  transition: opacity 0.1s ease;
}
.ant-table-row:hover .at-quickadd-btn {
  opacity: 1;
}
.at-tray-chip:hover {
  border-color: rgba(179, 117, 240, 0.4) !important;
}
/* AddToExistingPlaylistModal.js — dark chrome to match the rest of the
   redesigned app; bodyStyle only reaches the Modal's body, not its header
   or close icon. */
.at-add-to-playlist-modal .ant-modal-content {
  background: #0f0b22;
  border-radius: 14px;
  overflow: hidden;
}
.at-add-to-playlist-modal .ant-modal-header {
  background: #0f0b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.at-add-to-playlist-modal .ant-modal-footer {
  background: #0f0b22;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.at-add-to-playlist-modal .ant-modal-close {
  color: rgba(255, 255, 255, 0.5);
}
.at-add-to-playlist-modal .ant-modal-close:hover {
  color: #fff;
}
.at-add-to-playlist-modal .ant-list-empty-text {
  color: rgba(255, 255, 255, 0.4);
}
/* Filter popover (SelectedPlaylistSongs.js) — the "Filter" pill in the
   Filter & Stats Bar opens this as a tray-anchored popover instead of a
   centered Modal, so dark theme it like the rest of the redesigned panels. */
.at-filter-popover .ant-popover-inner {
  background: #0f0b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.at-filter-popover .ant-popover-inner-content {
  padding: 16px;
  max-height: 70vh;
  overflow-y: auto;
}
.at-filter-popover .ant-popover-arrow-content::before {
  background: #0f0b22;
}
.at-filter-popover .ant-select-selector,
.at-filter-popover .ant-input-number {
  background: #1c1930 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
.at-filter-popover .ant-input-number-input {
  color: #fff;
}
.at-filter-popover .ant-select-selection-placeholder,
.at-filter-popover .ant-input-number-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.at-columns-popover .ant-popover-inner {
  background: #0f0b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.at-columns-popover .ant-popover-inner-content {
  padding: 8px;
}
.at-columns-popover .ant-popover-arrow-content::before {
  background: #0f0b22;
}

.dzu-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 120px;
  overflow: scroll;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  transition: all 0.15s linear;
  border: 2px solid #d9d9d9;
  border-radius: 4px;
}
.dzu-dropzoneActive {
  background-color: #DEEBFF;
  border-color: #2484FF;
}
.dzu-dropzoneDisabled {
  opacity: 0.5;
}
.dzu-dropzoneDisabled *:hover {
  cursor: unset;
}
.dzu-input {
  display: none;
}
.dzu-inputLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: 'Helvetica', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2484FF;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
.dzu-inputLabelWithFiles {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  padding: 0 14px;
  min-height: 32px;
  background-color: #E6E6E6;
  color: #2484FF;
  border: none;
  font-family: 'Helvetica', sans-serif;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  margin-left: 3%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
.dzu-previewContainer {
  padding: 40px 3%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 60px;
  z-index: 1;
  border-bottom: 1px solid #ECECEC;
  box-sizing: border-box;
}
.dzu-previewStatusContainer {
  display: flex;
  align-items: center;
}
.dzu-previewFileName {
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.dzu-previewImage {
  width: auto;
  max-height: 40px;
  max-width: 140px;
  border-radius: 4px;
}
.dzu-previewButton {
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  cursor: pointer;
  opacity: 0.9;
  margin: 0 0 2px 10px;
}
.dzu-submitButtonContainer {
  margin: 24px 0;
  z-index: 1;
}
.dzu-submitButton {
  padding: 0 14px;
  min-height: 32px;
  background-color: #2484FF;
  border: none;
  border-radius: 4px;
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFF;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
.dzu-submitButton:disabled {
  background-color: #E6E6E6;
  color: #333333;
  cursor: unset;
}