/* vim:set tabstop=8 softtabstop=8 shiftwidth=8 noexpandtab: */

/**
 *
 * LICENSE: GNU Affero General Public License, version 3 (AGPL-3.0-or-later)
 * Copyright Ampache.org, 2001-2024
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

@font-face {
    font-family: 'DejaVuSansCondensed';
    src: url('fonts/dejavusanscondensed.eot?') format('embedded-opentype'), url('fonts/dejavusanscondensed.woff') format('woff'), url('fonts/dejavusanscondensed.ttf') format('truetype'), url('fonts/dejavusanscondensed.svg#DejaVuSansCondensed') format('svg');
}

/* --------------------------
   General style rules
   -------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    outline: 0;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

svg {
    height: 1em;
    width: 1em;
}

body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    font-family: "DejaVuSansCondensed", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5em;
    height: 90%;
}

body#main-page {
    min-width: 1024px;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none;
}

:focus {
    outline: 0;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
    cursor: pointer;
}

h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

hr {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-right: 0;
    border-left: 0;
}

input,
button,
textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}

input[type=password],
input[type=text],
input[type=url],
input[type=number] {
    line-height: normal;
    height: 23px;
}

input[type=file] {
    padding: 4px 6px;
    line-height: normal;
    height: 40px;
}

input[type=password],
input[type=text],
input[type=url],
input[type=number],
select,
textarea {
    padding: 4px 6px;
    background-repeat: repeat-x;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    box-sizing: border-box;
}

button,
input[type=button],
input[type=submit] {
    background-repeat: repeat-x;
    position: relative;
    padding: 5px 12px 4px;
    font-size: 18px;
    line-height: normal;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    outline: 0;
}

button:hover,
input[type=button]:hover,
input[type=button]:focus,
input[type=submit]:hover,
input[type=submit]:focus {
    background-position: 0 -10px;
    transition: background-position 0.1s linear;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

button:focus:active,
input[type=button]:focus:active,
input[type=submit]:focus:active {
    transition: background-position 0.1s linear;
}

label {
    cursor: pointer;
}

.box-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.alert-danger {
    color: #c33;
}

div#autoupdate > span,
div#autoupdate_plugins > span {
    color: #f00;
}

/* --------------------------
   Main
   -------------------------- */
#maincontainer {
    width: 100%;
    position: relative;
    z-index: 1;
}

#ajax-loading {
    background-repeat: no-repeat;
    background-position: right;
    display: none;
    font-size: 12px;
    left: 52px;
    position: absolute;
    text-align: center;
    top: 39px;
    width: 120px;
}

/* --------------------------
   Header
   -------------------------- */
#header {
    z-index: 5;
    height: 64px;
    padding: 0 5px;
    font-size: 15px;
}

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 97%;
}

#header a {
    display: inline-block;
}

#header .box-top,
#header .box-bottom {
    display: none;
}

#header #headerlogo,
#header #headerbox,
#header .box_headerbox,
#header .box-inside,
#header .box-content {
    height: 100%;
    overflow: hidden;
}

#header #headerlogo {
    float: left;
    width: 20%;
}

#header #logo img {
    height: 128px;
    width: 128px;
}

#header #headerlogo img {
    height: 64px;
    width: 64px;
}

#mobileheader {
    height: 64px;
    padding-bottom: 64px;
    padding-top: 24px;
}

#mobileheader #logo img {
    height: 128px;
    width: 128px;
}

#header #headerbox {
    float: left;
    width: 80%;
}

#header .box-inside {
    text-align: right;
    float: right;
    width: 100%;
}

#header .box-content {
    display: flex;
    align-items: center;
    justify-content: end;
}

#header .box-content input,
#header .box-content select {
    height: 30px;
    font-size: 15px;
}

#cookie_notice {
    padding-top: 20px;
    text-align: center;
}

#play_type_switch {
    margin-left: 50px;
    margin-right: 4px;
}

#rightbar-minimize {
    position: absolute;
    top: 44px;
    right: 12px;
}

#rightbar-minimize .material-symbol-dock_to_left {
    color: #ccc;
}

#sb_Subsearch form {
    display: flex;
    gap: 4px;
    align-items: center;
}

#loginInfo {
    position: absolute;
    left: 80px;
    top: 17px;
}

#sb_Subsearch input[type=submit] {
    min-width: 100px;
}

#sb_Subsearch input[type=text] {
    width: 175px;
    padding: 0 10px;
    border-radius: 15px;
}

#headerbox select {
    min-width: 150px;
}

#sb_Subsearch a {
    font-size: 11px;
    vertical-align: bottom;
}

#ui-id-1 {
    min-width: 20%;
    max-width: 630px;
}

/* --------------------------
   Login / Registration
   -------------------------- */
#loginPage {
    display: flex;
    height: 100%;
    flex-direction: column;
}

#loginPage #maincontainer,
#registerPage #maincontainer {
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 20px 0 20px 0;
}

#loginPage #maincontainer {
    margin: auto;
}

#loginPage #header,
#registerPage #header {
    height: 128px;
    background-color: transparent;
    width: 128px;
    margin: auto;
    border: none;
    box-shadow: none;
}

#loginPage #logo,
#registerPage #logo {
    width: 128px;
    height: 128px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: auto;
}

#registerPage #content {
    margin: 0 5px;
}

.registerfield {
    padding-bottom: 5px;
}

div.registerfield.center {
    text-align: center;
}

.agreementContent {
    padding-bottom: 20px;
}

#loginbox,
#registerbox {
    margin: auto;
    max-width: 350px;
}

#loginbox h2 {
    display: none;
}

#registerbox h2,
#registerbox h3 {
    padding-bottom: 10px;
    margin-bottom: 0;
}

#loginbox div,
#registerbox div {
    font-size: 18px;
    line-height: 1.5em;
}

#loginbox .alert,
#registerbox .alert {
    margin-top: 5px;
}

.loginfield {
    padding: 15px 0 15px;
    overflow: auto;
}

.loginfield input[type=password],
.loginfield input[type=text],
.registerfield input[type=password],
.registerfield input[type=text] {
    float: none;
    margin-left: 0;
    width: 100%;
    min-height: 28px;
    box-sizing: border-box;
    border-radius: 7px;
    height: 32px;
}

.submit-registration {
    width: 100%;
    overflow: auto;
    padding-top: 10px;
}

#accept_agreement {
    min-height: 0;
    height: unset;
    cursor: pointer;
    width: 40px;
}

#registerPage #registerbox .submit-registration #agreementCheckbox {
    font-size: 16px;
    display: inline;
}

#submit-registration-button {
    float: right;
}

.require,
.require label::after {
    color: #c33;
    content: " *";
}

#remembermefield,
#agreementCheckbox {
    padding-top: 4px;
}

#loginPage #loginbox #agreementCheckbox,
#loginPage #loginbox #remembermefield {
    vertical-align: middle;
    font-size: 16px;
    padding: 0;
    float: left;
}

#loginPage #loginbox #remembermefield input {
    cursor: pointer;
    width: 40px;
}

.loginoptions {
    padding: 15px 0 15px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.loginoptions a {
    font-size: 15px;
}

#registerbutton,
#lostpasswordbutton,
#miniplayerbutton {
    flex: 0 0 auto;
}

/* the mini player button only sets where you land after logging in, so show which one is active */
#loginPage #miniplayerbutton.selected {
    font-weight: bold;
}

/* Push the lost-password link to the right even when it is the only link on the row. */
#lostpasswordbutton {
    margin-left: auto;
}

/* `oidc_button_text` is admin configurable, so the label can be any length. Give it its own row and a real
   button footprint instead of letting it run into the links either side of it, and clip anything oversized. */
#oidcbutton {
    flex: 0 0 100%;
    order: 1;
    box-sizing: border-box;
    max-width: 100%;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#submit-lostpassword {
    padding-top: 20px;
}

#loginPage #footer,
#registerPage #footer {
    margin: 15px;
    padding: 0 5px;
}

#loginPage span.error {
    display: block;
    clear: left;
    border: 1px solid;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
}

/* --------------------------
   Sidebar
   -------------------------- */
#sidebar {
    font-size: 12px;
}

.sidebar-collapsed {
    width: 70px !important;
}

.sidebar-header-title {
    display: inline-block;
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar-header {
    height: 20px;
    width: 148px;
    border: 2px solid;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: center;
    font-size: 10px;
}

#sidebar-header:hover {
    cursor: pointer;
}

#sidebar-header span {
    line-height: 15px;
}

.sidebar-header-collapsed {
    width: 70px !important;
    position: fixed;
}

#sidebar-content,
#sidebar-content-light,
#sidebar-light {
    border: 2px solid;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 10px;
}

.sidebar-content-collapsed {
    display: none !important;
}

#sidebar-content {
    width: 148px;
}

#sidebar-content-light {
    padding: 0;
    display: none;
    width: 70px;
}

#sidebar-light {
    width: 70px;
    position: fixed;
    left: 0;
    margin: 17px auto 5px 5px;
    padding: 5px 0 10px 0;
    text-align: center;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-light-default {
    border: 2px solid;
    border-radius: 2px;
    box-sizing: border-box;
    width: 70px;
    position: fixed;
    left: 0;
    margin: 0 auto 5px 5px;
    padding: 5px 0 10px 0;
    text-align: center;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-light li {
    padding-top: 5px;
}

#sidebar-light img {
    margin: auto;
    height: 32px;
    width: 32px;
}

.sidebar-content-light-collapsed {
    display: block !important;
}

.sidebar-float {
    margin: 5px auto auto 5px;
    float: left;
}

.sidebar-fixed {
    margin: 0 auto auto 5px;
    float: left;
}

/* For sidebar tabs */
#sidebar-tabs {
    height: 29px;
}

#sidebar-tabs li.sb1 {
    float: left;
}

#sidebar-tabs li.sb1 + li {
    margin-left: 8px;
}

#sidebar-tabs > li > a {
    font-size: 15px;
    line-height: 1;
    vertical-align: top;
}

#sidebar-tabs .active > a {
    position: relative;
}

#sidebar-tabs .active > a:after {
    content: "";
    display: inline-block;
    position: absolute;
    background-color: currentColor;
    border-radius: 2px;
    height: 2px;
    bottom: -7px;
    left: 0;
    right: 0;
}

/* Tabs content */
#sidebar-page {
    width: 148px;
    margin: 3px auto 5px 5px;
    border-radius: 2px;
    border: 2px solid;
    box-sizing: border-box;
}

.sidebar-page-float {
    position: absolute;
    left: 0;
}

#sidebar-tabs .sb2 li h4 {
    height: 23px;
    margin: 10px 0 5px 0;
    padding: 0 10px 0 20px;
    border-bottom: 1px solid;
}

#sidebar-tabs .sb2 li h4:hover {
    cursor: pointer;
}

#sidebar-tabs .sb2 li ul li a {
    width: 100%;
    margin: 0 0 0 5px;
    background-color: transparent;
    transition: color 0.1s;
    box-sizing: border-box;
    display: inline-block;
}

#sidebar-tabs .sb2 li ul li a:hover {
    width: 95%;
    padding-left: 5px;
}

#sidebar-tabs .sb2 #browse_filters li {
    margin: 3px auto 5px 0;
}

#sidebar-tabs .sb2 #browse_filters #multi_alpha_filterLabel {
    margin: 5px 3px 0;
    display: block;
}

#sidebar-tabs .sb2 #browse_filters #multi_alpha_filter {
    border: 1px solid;
    border-radius: 2px;
    padding: 4px;
    width: 130px;
}

#sidebar-page .sb2 {
    margin-bottom: 100px;
}

.sb2 {
    display: flex;
    flex-direction: column;
}

#sidebar-tabs #catalog_select {
    width: 130px;
}

.image-topmenu-album,
.image-topmenu-artist,
.image-topmenu-favorite,
.image-topmenu-home,
.image-topmenu-logout,
.image-topmenu-playlist,
.image-topmenu-radio,
.image-topmenu-smartlist,
.image-topmenu-tagcloud,
.image-topmenu-upload {
  height: 32px;
  width: 32px;
  margin-bottom: -5px;
}

/* Localplay */
.active_instance {
    border: 1px solid;
}

span#sidebar-header-content::after {
    content: "<<<";
    left: 67px;
    position: absolute;
}

#sidebar-header.sidebar-header-collapsed > span#sidebar-header-content::after {
    content: ">>>";
    left: 20px;
    position: absolute;
}

/* --------------------------
   Rightbar
   -------------------------- */
#rightbar {
    position: fixed;
    overflow-y: auto;
    right: 10px;
    top: 66px;
    min-width: 100px;
    max-width: 250px;
    margin: 5px 15px auto auto;
    max-height: 85%;
    padding: 4px;
    border-radius: 2px;
    border: 2px solid #161616;
    box-sizing: border-box;
    z-index: 10000;
}

/* For jQuery scrolling feature */
.fixedrightbar {
    position: fixed !important;
    top: -20px !important;
    right: 10px !important;
}

.fixedrightbarsubmenu {
    position: fixed !important;
    top: 33px !important;
    right: 15px !important;
}

/* ---------------------------- */

#rightbar #rb_action {
    list-style-type: none;
}

#rightbar #rb_action li {
    display: inline;
    margin-right: 5px;
    padding-bottom: 3px;
}

#rightbar li #rb_add,
#rightbar li #pl_add {
    position: relative;
}

#rightbar #rb_current_playlist li {
    min-height: 29px;
    font-size: 14px;
    width: 100%;
    display: table;
}

#rightbar #rb_current_playlist li a {
    width: 100%;
    padding: 4px 7px 3px;
    display: table-cell;
}

#rightbar #rb_current_playlist li a:hover,
#rightbar #rb_current_playlist li a:focus {
    text-shadow: none;
    background-repeat: repeat-x;
}

/* Submenus open/close by clicking their trigger (class toggled in footer.inc.php); */
#rightbar li.submenu-open .submenu {
    display: block;
}

#rightbar li:has(> .submenu) {
    cursor: pointer;
}

#rightbar .submenu {
    display: none;
    position: fixed;
    top: 98px;
    right: 15px;
    border: 2px solid;
    width: 214px;
    padding: 0.6em;
    font-size: 12px;
    z-index: 99;
    overflow: hidden;
    overflow-y: scroll;
    max-height: 350px;
}

#rightbar #rb_action .submenu li {
    margin: 0;
}

#rightbar .submenu a {
    display: block;
    border-bottom: 1px dotted;
    text-decoration: none;
    text-align: left;
    padding: 0.4em;
    width: 100%;
}

#rightbar .submenu a:hover {
    cursor: pointer;
}

#rightbar #localplay-control {
    padding-left: 5px;
}

#rightbar #localplay-control {
    padding: 5px;
    text-align: center;
    margin: 7px 0;
}

#rightbar #localplay-control img {
    vertical-align: bottom;
}

/* --------------------------
   Content
   -------------------------- */
#content {
    z-index: 3000000;
    transition: top 0.5s;
    width: auto;
    max-height: 85%;
    border-radius: 2px;
    border: 2px solid;
    box-sizing: border-box;
    padding: 20px 20px 40px;
}

.content-float {
    margin: 5px 0 0 160px;
}

.content-right-wild {
    margin-right: 20px !important;
}

.content-left-wild {
    margin-left: 80px !important;
}

.content-fixed {
    margin: 86px 250px 0 205px;
}

.content-fixed-topmenu {
    margin: 0 250px 0 205px;
}

.browse_content {
    margin-bottom: 20px;
}

.list-header,
.list-header a {
    margin: 10px 0 10px 0;
    font-size: 13px;
}

.list-header a:hover,
.list-header a:focus {
    text-decoration: none;
}

.ui-sortable-helper {
    display: table; /* maintain column widths during move */
}

table.gatherart,
table.tabledata {
    width: 100%;
    text-align: left;
    font-size: 14px;
    margin-bottom: 20px;
}

.box_debug_tools table {
    table-layout: fixed;
}

table.tabledata thead .th-top,
table.tabledata tfoot .th-bottom {
    font-size: 12px;
}

table.tabledata thead .th-top {
    border-bottom: 1px solid;
}

table.tabledata thead th.cel_play {
    text-align: right;
    padding-right: 10px;
}

table.tabledata thead th.cel_ratings {
    padding-left: 8px;
}

table.tabledata tfoot .th-bottom {
    border-top: 1px solid;
    display: none;
}

table.tabledata td {
    vertical-align: middle;
    overflow: hidden;
    padding: 3px 10px 3px 0;
    word-wrap: break-word;
    min-width: 50px;
}

table.tabledata tr:hover,
table.tabledata tr:focus {
    text-shadow: none;
    background-repeat: repeat-x;
}

table.tabledata .th-top:hover,
table.tabledata .th-bottom:hover,
table.tabledata .th-top:focus,
table.tabledata .th-bottom:focus {
    background-image: none;
    background-repeat: no-repeat;
}

table.tabledata tbody .cel_play {
    max-width: 60px;
    min-width: 60px;
    width: 40px !important;
    text-align: right;
}

table.tabledata tbody .cel_play_content {
    display: block;
}

table.tabledata tbody .cel_play_hover {
    display: none;
}

table.tabledata tbody tr:hover .cel_play_hover,
table.tabledata tbody tr:focus .cel_play_hover {
    display: block;
}

table.tabledata tbody tr:hover .cel_play_content,
table.tabledata tbody tr:focus .cel_play_content {
    display: none;
}

table.tabledata tbody tr.unread {
    font-weight: bold;
}

table.tabledata tbody .cel_add {
    max-width: 60px;
    min-width: 60px;
    width: 60px !important;
    text-align: right;
}

table.tabledata tbody .cel_add_list {
    max-width: 80px;
    min-width: 80px;
    width: 80px !important;
    text-align: right;
}

table.tabledata tbody .cel_item_add {
    display: none;
}

table.tabledata tbody tr:hover .cel_item_add,
table.tabledata tbody tr:focus .cel_item_add {
    display: block;
}

table.tabledata tbody .cel_time {
    min-width: 40px;
    width: 40px !important;
}

table.tabledata tbody .cel_action {
    width: 90px !important;
    max-width: 90px;
}

table.tabledata tbody .cel_action_text {
    max-width: 100% !important;
}

table.tabledata tbody td.cel_counter {
    text-align: center;
}

table.tabledata td.cel_ratings {
    width: 140px !important;
    min-width: 140px;
}

/* the generic td rule sets a 50px floor that would leave a checkbox swimming in its own column */
table.tabledata .cel_select {
    width: 24px !important;
    min-width: 24px;
    text-align: center;
    padding-right: 4px;
}

/* sticky, not fixed: it stays in flow so it never fights the stacking context #maincontainer creates, and the
   z-index sits below the mobile #header (100) and the fixed webplayer so neither is ever covered */
.multiselect-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 90;
    margin: 5px 0;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Nothing checked means nothing to act on, so the bar hides until a row is selected. visibility rather than
   display, so it keeps its box and the table does not jump down the moment the first row is picked. */
.multiselect-actions.multiselect-empty {
    visibility: hidden;
}

.multiselect-actions a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.multiselect-actions a[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.multiselect-summary {
    font-weight: bold;
}

table.tabledata tbody .cel_cover {
    overflow: visible;
    padding-top: 10px;
}

table.tabledata tbody .cel_cover,
table.tabledata tbody .cel_tags,
table.tabledata tbody .cel_moods,
table.tabledata tbody .cel_license {
    width: 150px !important;
    max-width: 150px;
}

table.tabledata tbody td.grid_cover {
    height: auto;
    overflow: visible;
}

table.tabledata tbody .grid_cover img,
table.tabledata tbody .cel_cover img {
    vertical-align: middle;
    border-radius: 2px;
    object-fit: cover;
}

table.tabledata .cel_drag {
    max-width: 16px;
    width: 16px !important;
}

table.tabledata .cel_drag img:hover {
    cursor: pointer;
}

table.tabledata .cel_agent {
    text-align: center;
    width: 45px;
}

table.tabledata .cel_agent img:hover {
    cursor: help;
}

table.gatherart {
    width: 100%;
    text-align: left;
    border: 2px solid black;
    font-size: 14px;
    margin-bottom: 20px;
}

table.gatherart td {
    vertical-align: middle;
    overflow: hidden;
    padding: 3px 5px 3px 0;
    word-wrap: break-word;
    min-width: 50px;
}

table.gatherart thead .th-top,
table.gatherart tfoot .th-bottom {
    font-size: 12px;
}

table.gatherart thead .th-top {
    border-bottom: 1px solid;
}

table.gatherart thead th.cel_ratings {
    padding-left: 7px;
}

table.gatherart tfoot .th-bottom {
    border-top: 1px solid;
    display: none;
}

th.center,
td.center {
    vertical-align: middle;
    text-align: left;
}

table.gatherart tr:hover,
table.gatherart tr:focus {
    text-shadow: none;
    background-repeat: repeat-x;
}

table.gatherart .th-top:hover,
table.gatherart .th-bottom:hover,
table.gatherart .th-top:focus,
table.gatherart .th-bottom:focus {
    background-image: none;
    background-repeat: no-repeat;
}

#shoutbox-input {
    font-size: 14px;
}

#searchLimit {
    width: 4em;
}

#gatherYear {
    padding-right: 8px;
}

#gatherLimit {
    padding-right: 3px;
}

input:invalid {
    border: 4px solid red;
}

.box_preferences h4 {
    font-size: 15px;
    margin-bottom: 10px;
}

div.box.box_current_configuration {
    margin-top: 20px;
}

table.gridview thead {
    display: none;
}

/* The row keeps whatever space it cannot fill: centred, that space sits either side rather than
   leaving the covers hanging off to the left. */
table.gridview tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, max(170px, 15%));
    justify-content: center;
    row-gap: 24px;
}

/* The legacy percentage width fought the track it sits in, piling the slack into the last column. */
table.gridview tbody tr {
    max-width: none;
    width: auto;
}

/* Between the mobile breakpoint and the theme's 1024px floor the page was laid out wider than the
   window, so anything centred in it ran off screen. Let it follow the window instead. */
@media (min-width: 769px) and (max-width: 1023px) {
    body#main-page {
        min-width: 0;
    }
}

table.gridview tr {
    max-width: 15%;
    min-width: 170px;
    padding: 0.5%;
    text-align: center;
    width: 15%;
}

/* Six per row is right up to a point; past it the cell keeps growing around a cover that does not,
   which is how a wide screen ends up with postage stamps adrift in empty boxes. */
@media (min-width: 2400px) {
    table.gridview tbody {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    table.gridview tbody tr {
        float: none;
        max-width: none;
        width: auto;
    }
}

table.gridview tr {
    background-color: transparent !important;
}

table.gridview td {
    display: block !important;
    height: 25px;
    margin-left: 4%;
    margin-right: 4%;
}

table.gridview td.optional {
    display: none !important;
}

table.gridview td.cel_cover {
    display: block !important;
    height: auto !important;
}

table.gridview td.cel_year,
table.gridview td.cel_drag {
    display: none !important;
}

table.gridview tbody tr {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: center;
}

table.gridview tbody td {
    flex: 0 0 92%;
    box-sizing: border-box;
}

table.gridview td.cel_play {
    order: 1;
}

table.gridview td.cel_add,
table.gridview td.cel_add_list {
    order: 2;
}

table.gridview td.cel_ratings {
    order: 3;
}

/* the actions cell was hidden outright, and grid view has no other way to reach edit or delete */
table.gridview td.cel_action {
    order: 4;
}

table.gridview td.cel_play,
table.gridview td.cel_add,
table.gridview td.cel_add_list,
table.gridview td.cel_action {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
    min-width: initial !important;
    max-width: initial !important;
    height: auto;
    margin: 2px 0 0 !important;
    justify-content: center;
    text-align: center;
}

table.gridview td.cel_play .cel_play_content {
    display: none !important;
}

table.gridview td.cel_play .cel_play_hover,
table.gridview td.cel_add .cel_item_add,
table.gridview td.cel_add_list .cel_item_add {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

table.gridview td.cel_ratings {
    display: flex !important;
    width: initial !important;
    min-width: initial !important;
    justify-content: center;
    gap: 10px;
}

/* Home dashboard + personal favorites: responsive card grid that fills the box width, */
/* capped at two rows; extra rows are clipped instead of wrapping or scrolling. */
.homedash table.gridview,
.personalfav table.gridview {
    display: block;
    overflow: hidden;
}

.homedash table.gridview tbody,
.personalfav table.gridview tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 200px));
    grid-template-rows: repeat(2, auto);
    grid-auto-rows: 0;
    align-content: start;
    justify-content: start;
    overflow: hidden;
}

.homedash table.gridview tbody tr,
.personalfav table.gridview tbody tr {
    float: none;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* Home dashboard: pack the covers left in fixed-width cells so there are no centre gaps. */
.homedash table.gridview tbody {
    grid-template-columns: repeat(auto-fill, 170px);
    justify-content: start;
}

.personalfav table.gridview tbody {
    grid-template-columns: repeat(auto-fill, 160px);
    gap: 10px;
    justify-content: start;
}

.personalfav table.gridview tbody tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 160px;
    height: 145px;
    padding: 8px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.personalfav table.gridview tbody td {
    flex: 0 0 auto;
    width: 100%;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden;
}

.personalfav table.gridview tbody td:first-child a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.personalfav table.gridview tbody td span {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin-right: 0 !important;
}

.personalfav table.gridview tbody td span a {
    display: inline-flex;
    width: auto;
}

.tableform {
    border-collapse: separate;
    border-spacing: 5px 0;
}

#col_php_setting,
#col_configuration {
    width: 20%;
}

.upload_select {
    display: grid;
    max-width: 90%;
}

.vakata-context,
.vakata-context ul {
    z-index: 3000001;
}

/* --------------------------
   Content (info-box)
   -------------------------- */
#content .info-box h3 {
    margin-top: 10px;
}

#content .info-box .box-content div.star-rating {
    width: 150px;
    max-width: 150px;
}

/* Random album (homepage) */
.random_selection {
    margin-bottom: 20px;
}

/* The cover is 100px or 150px depending on the grid preference, so the tile takes its size from what
   it holds rather than from a percentage that only ever suited one of them. */
.box_random_albums .box-content,
.box_random_videos .box-content {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 40px;
    justify-content: center;
}

.random_selection .random_album,
.random_selection .random_video {
    text-align: center;
}

.random_selection .random_album .art_album img {
    vertical-align: middle;
    border-radius: 2px;
}

.random_selection .random_video .art_album img {
    vertical-align: middle;
    border-radius: 2px;
    width: 100px;
    height: 150px;
    margin: 2px;
}

.random_selection .random_album .star-rating,
.random_selection .random_video .star-rating {
    margin: auto;
}

.random_selection .random_album .play_album,
.random_selection .random_video .play_video {
    margin-left: 7px;
}

.random_selection .random_album .play_album img,
.random_selection .random_video .play_video img {
    border: 0;
    box-shadow: 0 0 0 0;
}

.random_selection .box-bottom {
    clear: left;
}

tr#search_item_count td,
tr#search_length td,
tr#search_size_limit td,
tr#search_max_results td,
tr#random_results td {
    width: 150px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

.operatoris_true {
    display: none;
}

div.box.box_rules {
    margin: 30px 0 30px 0;
}

#content .missing_art {
    width: 128px;
    height: 128px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cel_song,
.cel_album,
.cel_artist,
.cel_composer {
    width: 15%;
    text-align: left;
}

.cel_left {
    text-align: left;
}
.cel_counter,
.cel_songs,
.cel_albums,
.cel_year {
    width: 60px;
    text-align: center;
}

.cel_song,
.cel_album,
.cel_artist,
.cel_composer,
.cel_counter,
.cel_songs,
.cel_albums,
.cel_year {
    white-space: normal !important;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* --------------------------
    Content (now playing)
   -------------------------- */
#now_playing {
    margin-bottom: 20px;
    width: auto;
}

#now_playing .np_group {
    float: left;
    padding-right: 8px;
}

#now_playing .np_row {
    display: table;
    margin-bottom: 10px;
}

#now_playing .np_cell {
    line-height: 15px;
    font-size: 13px;
}

#now_playing .cel_ratings label {
    display: none;
}

#now_playing .cel_userflag label {
    display: none;
}

#now_playing .np_group label {
    font-weight: bold;
}

#now_playing .cel_username {
    width: 140px;
}

#now_playing .cel_song,
#now_playing .cel_album,
#now_playing .cel_artist,
#now_playing .cel_video,
#now_playing .cel_year {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#now_playing .cel_albumart {
    float: left;
    width: 110px;
}

#now_playing .cel_albumart img {
    vertical-align: middle;
    border-radius: 2px;
    float: left;
    margin: 2px;
}

#now_playing .cel_lyrics {
    margin-top: 5px;
}

#now_playing .similars {
    margin-right: 10px;
}

#recent_more {
    text-align: right;
    width: 100%;
}

#browse_header {
    margin-right: 140px;
}

.album_group_disks_title {
    float: left;
    margin-right: 30px;
}

/* --------------------------
    Content (Tag cloud)
   -------------------------- */
.box_tag_cloud,
.box_mood_cloud {
    margin-bottom: 35px;
}

.clearfix {
    clear: left;
}

.box-bottom {
    clear: both;
}

span.fatalerror {
    padding: 5px;
    display: block;
}

.box-content #tag_filter div,
.box-content #mood_filter div {
    float: left;
    height: 32px;
}

.box-content #tag_filter .tag_container,
.box-content #mood_filter .tag_container {
    margin: 20px 0 0 15px;
}

.box-content #tag_filter .tag_button,
.box-content #mood_filter .tag_button {
    margin: 20px 0 0 15px;
    font-size: 14px;
    vertical-align: middle;
    text-align: center;
}

.box-content #tag_filter .tag_actions,
.box-content #mood_filter .tag_actions {
    margin: 15px 0 0 -8px;
}

.box-content #tag_filter .tag_button span,
.box-content #mood_filter .tag_button span {
    padding: 8px 10px 8px;
    cursor: pointer;
    background-repeat: repeat-x;
    border-radius: 2px 4px 4px 2px;
    background-color: #5f5f5f;
    background-image: linear-gradient(to top, #6d6d6d, #4a4a4a);
    border-bottom-color: #b3b3b3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2);
}

.box-content #tag_filter .tag_button span:hover,
.box-content #mood_filter .tag_button span:hover {
    background-repeat: repeat-x;
}

.box-content #tag_filter li,
.box-content #mood_filter li {
    height: 16px;
}

/* --------------------------
    Content (inline edit)
   -------------------------- */
.inline-edit select {
    max-width: 200px;
}

/* --------------------------
    Content (information-actions)
   -------------------------- */
#information_actions {
    margin: 20px 0 10px 0;
    width: 300px;
    font-size: 12px;
}

#content .info-box {
    margin-bottom: 30px;
    margin-right: 140px;
}

#content .info-box .box-content .item_art {
    float: right;
}

.item_info {
    float: right;
}

.item_properties {
    text-align: right;
    font-size: 13px;
    clear: right;
    max-width: 128px;
}

.item_art {
    display: inline-block;
    position: relative;
}

.item_art .item_art_play {
    display: none;
    height: 64px;
    margin: 35% auto 0 auto;
    position: relative;
    width: 64px;
}

.item_art .item_art_play_150 {
    display: none;
    height: 64px;
    margin: 43px auto 0 auto;
    position: relative;
    width: 64px;
}

.item_art .item_art_play .item_art_play_icon,
.item_art .item_art_play_150 .item_art_play_icon {
    display: block;
    height: 64px;
    opacity: 0.4;
    position: relative;
    text-align: center;
    width: 64px;
}

.item_art .item_art_play .item_art_play_icon:hover,
.item_art .item_art_play_150 .item_art_play_icon:hover {
    opacity: 1;
}

/* The markup nests these links inside the lightbox anchor, which browsers split apart, so they are
   laid out from wherever the parser leaves them rather than from the original nesting. */
.item_art .item_art_actions {
    display: none;
    gap: 4px;
    position: absolute;
    right: 6px;
    top: 6px;
}

.item_art .item_art_actions a:not(:empty) {
    align-items: center;
    background-color: rgb(0 0 0 / 65%);
    border-radius: 4px;
    color: #fff;
    display: flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.item_art .item_art_actions a:not(:empty):hover {
    background-color: rgb(0 0 0 / 85%);
}

.item_art .item_art_actions span {
    padding-right: 6px;
}

.item_art img {
    vertical-align: middle;
    border-radius: 2px;
    float: left;
}

.item_art > a {
    display: block;
}

.item_art:hover {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.item_art_actions img {
    margin: 2px;
    float: none;
}

.item_art:hover .item_art_actions,
.item_art:focus-within .item_art_actions {
    display: flex;
}

.item_art:hover  .item_art_play,
.item_art:hover  .item_art_play_150 {
    display: block;
}

#information_actions ul li {
    border-radius: 4px;
    transition: color 0.1s;
}

#information_actions h3 {
    font-size: 13px;
}

#information_actions a {
    margin-right: 5px;
}

#information_actions input {
    margin: 0 5px 0 2px;
}

#information_actions .star-rating li {
    padding: 0;
}

#information_actions li img {
    margin-right: 4px;
    vertical-align: top;
}

#information_actions li a {
    vertical-align: bottom;
}

.item_uploaded_by {
    padding-left: 0;
    padding-top: 10px;
    font-size: small;
}

.item_right_info {
    float: right;
    max-width: 60%;
}

.external_links {
    margin-top: 10px;
    text-align: right;
}

.external_links a {
    margin: 0 5px 0 0;
    opacity: 0.7;
}

.external_links a:hover {
    opacity: 1;
}

#item_summary {
    margin-right: 33%;
    padding-bottom: 20px;
    max-height: 340px;
    overflow-y: auto;
}

/* -------------------------
    Styles for star ratings
   ------------------------- */
.star-rating ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.star-rating .global-rating {
    bottom: 2px;
    font-size: 0.95em;
    margin-left: 0.45em;
    position: relative;
    top: 0.9px;
    white-space: nowrap;
}

/* a table cell has no room for the wording, and its title carries the count instead */
.cel_rating .global-rating-count {
    display: none;
}

.star-rating .current-rating {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -1000em;
    height: 15px;
    line-height: 15px;
    outline: none;
    overflow: hidden;
    border: none;
}

.rating {
    display: flex;
}

.cel_ratings .rating {
    gap: 10px;
}

.random_album .rating {
    justify-content: space-around;
}

/* --------------------------
   Content (Track view)
   -------------------------- */
.media_details {
    margin-bottom: 20px;
    margin-top: 20px;
}

dl.media_details dt {
    float: left;
    clear: left;
    width: 200px;
    text-align: right;
}

dl.media_details dd {
    margin: 10px 0 10px 250px;
    min-height: 24px;
}

/* --------------------------
   Footer
   -------------------------- */
#footer {
    bottom: 0;
    margin: 15px 250px 0 0;
    right: 0;
    text-align: right;
    width: auto;
    z-index: 5;
}

.footer-wild {
    margin-right: 20px !important;
}

#footer a:hover {
    text-decoration: underline;
}

/* ------------------------
   Wunderbaum tree (upload page)
   ------------------------ */
.wunderbaum.wunderbaum.wunderbaum {
    font-family: inherit;
    --wb-active-border-color: transparent;
    --wb-active-border-color-grayscale: transparent;
    --wb-hover-border-color: transparent;
    --wb-active-hover-border-color: transparent;
    --wb-border-color: transparent;
    --wb-focus-border-color: transparent;
}

/* --------------------------
   Other
   -------------------------- */
.material-symbol {
    height: 1.2em;
    width: 1.2em;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.material-symbol-lock {
    font-size: 15px;
    line-height: 1;
    vertical-align: top;
}

ol,
ul,
#rightbar ul {
    list-style: none;
}

.browse-options {
    float: right;
}

.browse-options form {
    display: inline;
}

.browse-options input[type=text] {
    width: 50px;
}

.browse-options-content {
    display: none;
}

.browse-options-content span {
    margin-right: 5px;
}

.jscroll-next {
    width: 50%;
    display: block;
    border: 1px solid;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    margin: auto;
}

.missing_album {
    text-decoration: none;
    border-bottom: 1px dotted;
}

.user_avatar {
    float: right;
}

#plugins_user_field {
    margin-top: 15px;
}

.list-header-navmenu-border {
    border: 1px solid;
    border-radius: 2px;
}

input.list-header-navmenu-input {
    padding: 0;
    margin-bottom: 2px;
    width: 50px;
    height: 16px;
    text-align: center;
}

span.item-count,
span.item-duration {
    font-size: 11px;
}

span.query-count {
    font-size: 11px;
    float: right;
}

a.option-list {
    border: solid 1px transparent;
    width: 100%;
    margin: 0;
    display: inline-block;
}

a.option-list:hover {
    border: 1px solid;
}

.stats_graph {
    text-align: center;
}

.followbtn {
    background-repeat: repeat-x;
    position: relative;
    padding: 5px 12px 4px;
    font-size: 15px;
    line-height: normal;
    border: 0 none;
    cursor: pointer;
    border-radius: 2px;
    background-position: 0 -10px;
    transition: background-position 0.1s linear 0s;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    text-decoration: none;
    min-width: 100px;
}

.formValidation {
    margin: 0;
    padding: 0;
    float: right !important;
}

.formValidation input {
    border: none;
    min-width: 150px;
}

.formValidation a {
    font-size: 15px;
    vertical-align: bottom;
    margin-right: 20px;
}

.error.show-disabled {
    text-align: center;
}

/* a withdrawn or unplayable item keeps its page, so the page says so above everything else on it */
.object-header-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgb(204 51 51 / 45%);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 15px;
    /* tinted rather than a flat fill, so the one rule reads on the light and the dark skin alike */
    background-color: rgb(204 51 51 / 12%);
    color: #c33;
}

/* the same state, named again where the kind is read, for anyone who lands mid-page */
.object-header-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background-color: #c33;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.find-duplicates strong {
    display: block;
}

/* The hamburger selector is scoped to #header to outrank `#header a`. */
#header #mobile-menu-toggle,
#sidebar #mobile-drawer-close,
#mobile-nav-backdrop {
    display: none;
}

/* --------------------------
   Mobile layout (<= 768px) -- off-canvas navigation
   --------------------------
   The reborn theme is desktop-only: body#main-page forces min-width:1024px and the shell is positioned with floated/fixed
   offsets. On a phone that overflows the viewport width, so mobile browsers shrink-to-fit (zoom out) the whole page
   A zoomed page pins position:fixed (the webplayer) to the zoomed document instead of the visible screen, which is why
   the player looked stuck to the bottom of the content.
   Scoped to <=768px (portrait phones) plus short landscape viewports (phones rotated: wider than 768px but
   only ~400-500px tall, which would otherwise fall back to the desktop min-width:1024px and re-trigger the zoom).
   The landscape arm is capped at 1024px wide: a window that short but wider than that is a desktop one someone
   resized (docked devtools, say), and it has room for the sidebar.
   @see //REBORN_MEDIA and keep in sync with dark.css light.css */
@media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (max-width: 1024px) {
    /* Fit the device width instead of forcing a 1024px page (kills the zoom). */
    body#main-page {
        min-width: 0;
        padding-bottom: 110px; /* clearance for the fixed 100px player */
    }

    /* Drop #maincontainer's stacking context so the fixed drawers sit above the backdrop. */
    #maincontainer {
        position: static;
        z-index: auto;
    }

    /* Topmenu (if enabled) flows normally below the header. */
    #topmenu_container,
    .topmenu_container-float,
    .topmenu_container-fixed {
        position: static;
        float: none;
        width: auto;
        max-width: none;
        margin: 5px;
        box-sizing: border-box;
    }

    /* Sticky compact top bar: hamburger + logo + search + play-type on one wrapping row. */
    #header,
    .header-float,
    .header-fixed {
        position: sticky;
        top: 0;
        z-index: 100;
        float: none;
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 4px 6px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
    }

    /* Hamburger opens the nav drawer; first item in the bar. */
    #header #mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin: 0;
        padding: 2px;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    #header #headerlogo {
        float: none;
        width: auto;
        height: auto;
        overflow: visible;
        margin: 0;
        flex: 0 0 auto;
    }

    #header #headerlogo img {
        height: 40px;
        width: 40px;
    }

    /* The search/play-type box takes the rest of the row (wraps to line 2). */
    #header #headerbox {
        float: none;
        width: auto;
        height: auto;
        overflow: visible;
        flex: 1 1 100%;
    }

    #header .box-inside {
        float: none;
        width: auto;
        text-align: left;
    }

    #header .box-content {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px 6px;
    }

    /* Put the login info (admin/message count) right next to the logo on the top row. */
    #header #loginInfo {
        position: absolute;
        top: 13px;
        left: 95px;
        right: auto;
    }

    #header #rightbar-minimize {
        position: static;
        top: auto;
        right: auto;
        margin-left: auto;
    }

    #header #play_type_switch {
        margin-left: 0;
    }

    /* Trim the widgets so they fit a phone row. */
    #header #sb_Subsearch input[type="text"] {
        width: 130px;
    }

    #header #headerbox select {
        min-width: 0;
    }

    /* Content takes the full width -- the drawers slide OVER it. */
    #content,
    .content-float,
    .content-fixed,
    .content-fixed-topmenu,
    .content-left-wild,
    .content-right-wild {
        margin: 5px !important;
        max-height: none;
    }

    /* Off-canvas sidebar (slides in from the left) */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 185px;
        max-width: 80%;
        margin: 0;
        float: none;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 10001;
    }

    body.sidebar-open #sidebar {
        transform: translateX(0);
    }

    /* Close (X) at the drawer's top-LEFT so it lands where the hamburger and open and close share the same spot. */
    #sidebar #mobile-drawer-close {
        display: block;
        position: sticky;
        top: 0;
        margin-left: 0;
        margin-right: auto;
        width: -moz-fit-content;
        width: fit-content;
        padding: 6px 8px;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        z-index: 2;
    }

    #sidebar-header,
    #sidebar-header.sidebar-header-collapsed {
        display: block;
        position: static !important;
        width: auto !important;
        margin: 5px 5px 0;
        text-align: center;
        box-sizing: border-box;
    }

    #sidebar-header span#sidebar-header-content {
        display: block;
        width: 100%;
        text-align: center;
    }

    #sidebar-header span#sidebar-header-content::after,
    #sidebar-header.sidebar-header-collapsed > span#sidebar-header-content::after {
        position: static;
        left: auto;
    }

    /* Let the <<< / >>> toggle switch between the full menu and the light menu. */
    #sidebar-content,
    #sidebar-content-light {
        width: auto;
        margin: 5px;
        box-sizing: border-box;
    }

    /* Light sidebar  */
    #sidebar-light,
    #sidebar-light-default {
        position: static;
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    #sidebar-light li,
    #sidebar-light-default li {
        list-style: none;
        text-align: center;
    }

    #sidebar-page,
    .sidebar-page-float {
        position: absolute;
        left: 5px;
        right: 5px;
        width: auto;
        margin: 0;
        box-sizing: border-box;
    }

    /* Temp-playlist: drops DOWN from the header toggle button (no off-canvas slide, no backdrop). Shown/hidden by ToggleRightbarVisibility  */
    #rightbar,
    #rightbar.fixedrightbar {
        position: fixed !important;
        top: 116px !important; /* just below the ~114px sticky header */
        right: 5px !important;
        left: auto !important;
        bottom: auto;
        width: 260px;
        min-width: 0;
        max-width: 90%;
        max-height: calc(100vh - 230px);
        margin: 0;
        transform: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 10005;
    }

    /* Rightbar submenus (add-to-playlist / random items). Open/close is click-toggled globally (footer.inc.php). */
    #rightbar .submenu,
    #rightbar .submenu.fixedrightbarsubmenu {
        top: 160px !important;
        right: 10px !important;
        max-width: 90%;
        max-height: calc(100vh - 280px);
    }

    /* Dim/close backdrop -- sidebar drawer only (the temp-playlist drops down inline without an overlay). */
    body.sidebar-open #mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    /* AJAX "Loading..." indicator */
    #ajax-loading {
        position: fixed;
        top: 8px;
        right: 10px;
        left: auto;
        width: auto;
        padding: 3px 10px;
        border-radius: 2px;
        background-image: none !important;
        z-index: 9997;
    }

    /* Wide data tables scroll sideways inside their box so they don't widen the page. */
    table.tabledata,
    table.tabledata2,
    table.table-data {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Grid-view cards don't scroll -- zoom them down so more blocks fit per row (zoom reflows, transform wouldn't). */
    table.tabledata.gridview {
        zoom: 0.8;
        overflow-x: visible;
    }

    /* Zoomed grid cards keep name + artist; drop the genre line (shown on artist cards) and ratings so both text lines fit. */
    table.gridview td.grid_tags,
    table.gridview td.grid_moods,
    table.gridview td.cel_ratings {
        display: none !important;
    }

    /* The 140px right gutter on the browse header is desktop-only space -- reclaim it. */
    #browse_header {
        margin-right: 0;
    }

    /* Detail lists (song/podcast pages): the 200px label column + 250px dd indent overflow a phone -- compact them. */
    dl.media_details dt {
        width: 140px;
    }

    dl.media_details dd {
        margin-left: 150px;
    }

    /* Waveform image (song/podcast detail): squash to the available width instead of overflowing the page. */
    div[id^="waveform_"] img {
        max-width: 100%;
    }

    /* Let the browse type switcher (Songs/Albums/...) wrap instead of overflow. */
    .category_options {
        flex-wrap: wrap;
    }

    /* Art block (.item_right_info) floats right and overlaps the Actions list on a phone. Stack it */
    .item_right_info {
        float: none;
        width: 100%;
        max-width: 100%;
        display: flow-root;
        box-sizing: border-box;
    }

    .item_right_info img {
        max-width: 100%;
        height: auto;
    }

    /* AJAX artist/label biography floats its art block right and shrink-wraps the column tall and narrow. Unfloat. */
    .item_info {
        float: none;
    }

    .item_info img {
        max-width: 100%;
        height: auto;
    }

    .item_properties {
        max-width: none;
        text-align: end;
    }

    /* art floats right by default. Pull it to the left edge  when collapsed. */
    #content .info-box .box-content .item_art {
        float: left;
    }

    /* The external-links row is right-aligned by default; pull it left to match the art. */
    .external_links {
        text-align: left;
    }

    /* Detail pages: reclaim the 140px desktop gutter and let the Actions list size itself. */
    #content .info-box {
        margin-right: 0;
    }

    #information_actions {
        width: auto;
    }

    /* Tab strip wraps on a phone: add row spacing so the active tab's underline doesn't strike the row below. */
    #tabs_container ul#tabs li {
        line-height: 2;
        margin-right: 16px;
    }

    /* Hide update-available notice on a phone. */
    #update_notify {
        display: none;
    }

    /* Footer: drop the 250px desktop right gutter. */
    #footer {
        margin: 15px 5px 0 0;
    }

    /* Home page shoutbox widget is a fixed 400px + 40px padding on desktop. */
    .shout {
        width: auto;
        max-width: 100%;
        padding-right: 0;
    }

    /* Textareas rendered with cols="44"-"70" are 400-600px intrinsic (shout/pvmsg/label/license forms). */
    #content textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Home plugin widgets (RSS view etc.) emit inline-floated title/date rows and indents; stack and wrap them. */
    .home_plugin td div[style*="float"] {
        float: none !important;
    }

    .home_plugin td div[style*="margin-left"] {
        margin-left: 0 !important;
    }

    .home_plugin td {
        overflow-wrap: anywhere;
    }

    /* #header already owns top: 0 here and is 120px of auto height, so a second sticky strip would either hide
       behind it or need an offset that breaks whenever the header rewraps. The bar scrolls with the list instead. */
    .multiselect-actions {
        position: static;
    }
}

/* --------------------------
    Content (object header)
   -------------------------- */
.object-page {
    container-type: inline-size;
}

/* The header is fixed at 64px, so an anchored jump has to stop short of it. */
:target,
.tab_content {
    scroll-margin-top: 80px;
}

/* Anchored jumps glide instead of cutting, so the reader keeps their bearings. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.object-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.object-header-art {
    max-width: 168px;
}

.object-header-art a {
    display: block;
}

.object-header-art img,
.object-header-art svg {
    border: 1px solid var(--amp-border);
    border-radius: 6px;
    display: block;
    height: auto;
    max-width: 100%;
}

.object-header-id {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 62em;
    min-width: 0;
}

.object-header-kind {
    color: var(--amp-muted);
    font-size: 11px;
    letter-spacing: 0.11em;
    margin: 0;
    text-transform: uppercase;
}

.object-header-title {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
}

.object-header-crumb {
    color: var(--amp-muted);
    margin: 0;
}

.object-header-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A chip only wraps when it alone is wider than the column: flex puts it on its own line first. */
.object-header-chips li {
    background-color: var(--amp-raised);
    border-radius: 20px;
    color: var(--amp-muted);
    font-size: 12px;
    max-width: 100%;
    overflow-wrap: break-word;
    padding: 2px 10px;
}

.object-header-chips li.numeric {
    font-family: monospace;
    font-variant-numeric: tabular-nums;
}

.object-header-chips li.genre {
    background-color: transparent;
    border: 1px solid var(--amp-border);
    padding: 1px 9px;
}

.object-header-chips li.accent {
    background-color: color-mix(in srgb, var(--amp-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--amp-accent) 50%, transparent);
    padding: 1px 9px;
}

.object-header-chips li a {
    color: inherit;
    display: block;
    margin: -2px -10px;
    padding: 2px 10px;
}

.object-header-chips li:has(a):hover {
    background-color: var(--amp-accent);
}

.object-header-chips li:has(a):hover a {
    color: var(--amp-accent-ink);
}

.object-header-chips li.accent,
.object-header-chips li.accent a {
    color: var(--amp-accent);
}

.object-header-chips li.accent:hover a {
    color: var(--amp-accent-ink);
}

/* The legacy 150px star-rating cap made the stars spill over the heart. */
#content .info-box .box-content .object-page div.star-rating {
    max-width: none;
    width: auto;
}

.object-header-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.object-header-meta > span,
.object-header-meta > div,
.object-header-meta .star-rating,
.object-header-meta .userflag {
    display: inline-flex;
    margin: 0;
}

.object-header-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.object-header-links a svg,
.object-header-links a img {
    height: 20px;
    width: 20px;
}

.object-header-note {
    color: var(--amp-muted);
    font-size: 12px;
}

.object-page #information_actions {
    margin: 8px 0 24px;
    width: auto;
}

.object-page #information_actions ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.object-page #information_actions li {
    background-color: var(--amp-raised);
    border-radius: 6px;
    margin: 0;
    padding: 0;
    transition: background-color 0.1s;
}

.object-page #information_actions li:hover,
.object-page #information_actions li:focus-within {
    background-color: var(--amp-accent);
}

.object-page #information_actions li:hover a,
.object-page #information_actions li:focus-within a {
    color: var(--amp-accent-ink);
}

.object-page #information_actions li a {
    align-items: center;
    display: flex;
    gap: 4px;
    padding: 5px 10px;
    white-space: nowrap;
}

.object-page #information_actions li .material-symbol {
    height: 18px;
    width: 18px;
}

/* Wide enough for three columns: art, identity and actions sit together on the left rather than the
   identity stretching to the edge and pushing the actions away from it. */
@media (min-width: 1280px) {
    .object-page {
        align-items: start;
        column-gap: 24px;
        display: grid;
        grid-template-columns: 224px minmax(0, 44em) 15em;
        justify-content: start;
    }

    .object-page:has(> .object-header.wide-art) {
        grid-template-columns: 320px minmax(0, 44em) 15em;
    }

    .object-page > * {
        grid-column: 1 / 3;
        margin-top: 32px;
    }

    .object-page > .object-header {
        margin-top: 0;
    }

    .object-page > .object-header {
        display: contents;
    }

    .object-page > .object-header > .object-header-art {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
    }

    .object-page > .object-header > .object-header-id {
        grid-column: 2;
        grid-row: 1;
    }

    .object-page > #information_actions {
        grid-column: 3;
        grid-row: 1 / span 99;
        margin: 0;
    }

    .object-page > #information_actions ul {
        flex-direction: column;
    }
}

@container (min-width: 460px) {
    .object-header {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .object-header-art {
        max-width: none;
    }
}

@container (min-width: 900px) {
    .object-header {
        grid-template-columns: 224px minmax(0, 1fr);
    }

    .object-header.wide-art {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

#information_actions .actions-help {
    display: none;
}

#information_actions .actions-help input {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

/* Narrow screens keep the icons only; the help button brings the labels back. */
@container (max-width: 459px) {
    .object-page #information_actions ul:not(:has(.actions-help input:checked)) li a,
    .object-page #information_actions ul:not(:has(.actions-help input:checked)) li label {
        font-size: 0;
        gap: 0;
        padding: 7px 9px;
    }

    .object-page #information_actions .actions-help {
        display: block;
    }

    /* Finger-sized ratings and favourite. */
    .object-header-meta a {
        padding: 2px;
    }

    .object-header-meta .material-symbol {
        height: 22px;
        width: 22px;
    }

    /* Finger-sized external links. */
    .object-header-links a {
        padding: 4px;
    }

    .object-header-links a svg,
    .object-header-links a img {
        height: 22px;
        width: 22px;
    }

    /* No text node inside, so no line-height strut: fill the row to stay centred. */
    .object-page #information_actions .actions-help label {
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        gap: 4px;
        height: 100%;
        justify-content: center;
        padding: 5px 10px;
    }

    .object-page #information_actions .actions-help:has(input:checked) {
        background-color: var(--amp-accent);
    }

    .object-page #information_actions .actions-help:has(input:checked) label {
        color: var(--amp-accent-ink);
    }

    .object-page #information_actions .actions-help input:focus-visible + label {
        outline: 2px solid var(--amp-accent);
        outline-offset: 2px;
    }
}

/* Metadata groups below the header: two columns at most, left aligned rather than stretched. */
/* Multi-column rather than grid: the browser balances the blocks by height, so a long first group
   pushes the others into the second column instead of leaving a gap under itself. */
.object-groups {
    column-gap: 12px;
    columns: 22em 2;
    max-width: 70em;
}

.object-group {
    border: 1px solid var(--amp-border);
    border-radius: 6px;
    break-inside: avoid;
    margin-bottom: 12px;
    overflow: hidden;
}

.object-group > summary,
.object-group-head {
    background-color: var(--amp-surface);
    font-weight: bold;
    padding: 6px 10px;
}

.object-group > summary {
    cursor: pointer;
}

.object-group dl {
    display: grid;
    grid-template-columns: minmax(90px, 38%) 1fr;
    margin: 0;
}

.object-group dt,
.object-group dd {
    border-top: 1px solid var(--amp-border);
    margin: 0;
    min-height: 0;
    padding: 5px 10px;
}

.object-group .of-total {
    color: var(--amp-muted);
}

.object-group dt {
    color: var(--amp-muted);
    float: none;
    text-align: left;
    width: auto;
}

.item-prose {
    background-color: var(--amp-surface);
    border: 1px solid var(--amp-border);
    border-radius: 6px;
    margin-bottom: 24px;
    max-width: 70em;
}

.item-prose-body {
    overflow-wrap: anywhere;
    padding: 14px 16px 18px;
}

/* Folded by default when the text is long: the checkbox is the only state a stylesheet can hold on its
   own, so it stands in for a toggle rather than asking for a script. */
.item-prose-toggle {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

.item-prose-toggle:not(:checked) ~ .item-prose-body {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    display: -webkit-box;
    line-clamp: 8;
    overflow: hidden;
    padding-bottom: 0;
}

.item-prose-more {
    color: var(--amp-accent);
    cursor: pointer;
    display: block;
    padding: 0 16px 16px;
}

.item-prose-toggle ~ .item-prose-body {
    padding-bottom: 6px;
}

.item-prose-more .less,
.item-prose-toggle:checked ~ .item-prose-more .more {
    display: none;
}

.item-prose-toggle:checked ~ .item-prose-more .less {
    display: inline;
}

.item-prose-toggle:focus-visible ~ .item-prose-more {
    outline: 2px solid var(--amp-accent);
    outline-offset: 2px;
}

/* Structure of the confirm dialog opened by ampacheConfirm(). jQuery UI's own metrics left the
   buttons cramped and the panes flush against the edges; colours are set per theme. */
.confirmdialogstyle.ui-dialog {
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.confirmdialogstyle.ui-dialog .ui-dialog-titlebar {
    background-image: none;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    padding: 10px 14px;
    font-size: 16px;
}

.confirmdialogstyle.ui-dialog .ui-dialog-content {
    padding: 18px 14px;
    font-size: 15px;
    line-height: 1.5;
}

.editdialogstyle.ui-dialog .ui-dialog-buttonpane {
    padding: 12px 16px;
}

.editdialogstyle.ui-dialog .ui-dialog-buttonset button {
    margin-left: 8px;
    padding: 10px 22px;
    font-size: 15px;
    border-radius: 3px;
}

.confirmdialogstyle.ui-dialog .ui-dialog-buttonpane {
    background-image: none;
    border: 0;
    border-top: 1px solid transparent;
    border-radius: 0 0 4px 4px;
    margin: 0;
    padding: 10px 14px;
}

.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button {
    margin-left: 8px;
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 3px;
}