[hidden] {
  display: none !important;
}

.notes-static-style .notes-mobile-list-head,
#notes-table-wrap > .notes-mobile-list-head {
  display: none;
}

.notes-static-style .notes-empty,
#notes-table-wrap .notes-empty,
#creators-list-wrap .creators-empty {
  margin: 18px 0 0;
}

.notes-static-record .notes-title-button {
  max-width: 100%;
}

.creators-static-artist .creators-title-button {
  max-width: 100%;
}

@media (max-width: 850px) {
  #notes-table-wrap {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .notes-static-style .notes-mobile-list-head,
  #notes-table-wrap > .notes-mobile-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
  }

  .notes-mobile-list-head-side {
    display: flex;
    gap: 8px;
  }

  .notes-mobile-sort-button {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #dbecc4;
    border-radius: 12px;
    background: #fff;
    color: #25451b;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
  }

  .notes-mobile-sort-button.is-active {
    background: #e9f5d8;
  }

  #notes-table-wrap .notes-static-style .notes-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  #notes-table-wrap .notes-static-style table.notes-table,
  body[data-list-type] #notes-table-wrap table.notes-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    background: transparent !important;
  }

  #notes-table-wrap .notes-static-style thead,
  body[data-list-type] #notes-table-wrap thead {
    display: none !important;
  }

  #notes-table-wrap .notes-static-style tbody,
  body[data-list-type] #notes-table-wrap tbody {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }

  #notes-table-wrap .notes-static-style tr.notes-static-record,
  body[data-list-type] #notes-table-wrap tr[data-record-row] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #dbecc4 !important;
    border-radius: 15px;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(35, 62, 24, 0.07);
  }

  #notes-table-wrap .notes-static-style td,
  body[data-list-type] #notes-table-wrap td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  #notes-table-wrap .notes-static-style td.notes-title-cell,
  body[data-list-type] #notes-table-wrap td.notes-title-cell {
    grid-column: 1 / -1;
  }

  #notes-table-wrap .notes-static-style .notes-title-main,
  body[data-list-type] #notes-table-wrap .notes-title-main {
    overflow-wrap: anywhere;
  }

  #notes-table-wrap .notes-static-style td.notes-value-cell,
  body[data-list-type] #notes-table-wrap td.notes-value-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #25451b;
    font-weight: 700;
    text-align: right !important;
  }

  body[data-list-type] #notes-table-wrap td.notes-value-cell::before {
    content: attr(data-label);
    color: #68765f;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: inherit;
  }

  body[data-list-type="dan"] #notes-table-wrap td[data-label="SP/DP"],
  body[data-list-type="dan"] #notes-table-wrap td[data-label="段位"] {
    padding-bottom: 5px !important;
    font-size: 0.875rem;
  }

  body[data-list-type="dan"] #notes-table-wrap td[data-label="1st"],
  body[data-list-type="dan"] #notes-table-wrap td[data-label="2nd"],
  body[data-list-type="dan"] #notes-table-wrap td[data-label="3rd"],
  body[data-list-type="dan"] #notes-table-wrap td[data-label="FINAL"] {
    grid-column: 1 / -1;
    padding-top: 8px !important;
    border-top: 1px solid #edf2e7 !important;
    text-align: left !important;
  }

  body[data-list-type="dan"] #notes-table-wrap td[data-label="1st"]::before,
  body[data-list-type="dan"] #notes-table-wrap td[data-label="2nd"]::before,
  body[data-list-type="dan"] #notes-table-wrap td[data-label="3rd"]::before,
  body[data-list-type="dan"] #notes-table-wrap td[data-label="FINAL"]::before {
    display: block;
    color: #68765f;
    content: attr(data-label);
    font-size: 0.75rem;
  }

  #notes-table-wrap .notes-static-style td[data-difficulty]::before {
    content: attr(data-difficulty);
    color: #68765f;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  #notes-table-wrap .notes-static-style td[data-difficulty] {
    display: none !important;
  }

  #notes-table-wrap .notes-static-style[data-mobile-difficulty="beginner"] td[data-difficulty="beginner"],
  #notes-table-wrap .notes-static-style[data-mobile-difficulty="normal"] td[data-difficulty="normal"],
  #notes-table-wrap .notes-static-style[data-mobile-difficulty="hyper"] td[data-difficulty="hyper"],
  #notes-table-wrap .notes-static-style[data-mobile-difficulty="another"] td[data-difficulty="another"],
  #notes-table-wrap .notes-static-style[data-mobile-difficulty="leggendaria"] td[data-difficulty="leggendaria"] {
    display: flex !important;
  }

  #creators-list-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  #creators-list-wrap .creators-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #creators-list-wrap .creators-table thead {
    display: block !important;
    margin-bottom: 10px;
  }

  #creators-list-wrap .creators-table thead tr {
    display: flex !important;
    gap: 8px;
  }

  #creators-list-wrap .creators-table th {
    flex: 1 1 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #creators-list-wrap .creators-sort-button {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #dbecc4;
    border-radius: 12px;
    background: #fff;
    color: #25451b;
    font: inherit;
    font-size: 0.875rem;
  }

  #creators-list-wrap .creators-table tbody {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }

  #creators-list-wrap tr.creators-static-artist {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid #dbecc4 !important;
    border-radius: 15px;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(35, 62, 24, 0.07);
  }

  #notes-table-wrap .notes-static-style tr.notes-static-record[hidden],
  body[data-list-type] #notes-table-wrap tr[data-record-row][hidden],
  #creators-list-wrap tr.creators-static-artist[hidden] {
    display: none !important;
  }

  #creators-list-wrap td.creators-name-cell {
    grid-column: 1 / -1;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #creators-list-wrap td.creators-count-cell {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 10px !important;
    border-radius: 999px;
    background: #e9f5d8 !important;
    color: #25451b;
    font-weight: 700;
  }

  #creators-list-wrap .creators-title-button {
    width: 100%;
    padding-right: 72px;
    overflow-wrap: anywhere;
  }

  #creators-list-wrap .creators-song-item[hidden] {
    display: none !important;
  }
}