:root {
    /* see whatsamook.css for more on the --light and --dark system */
    --mu-color-main: #6B6A8A;   /* deprecated? */
    --mu-body-bg: var(--light, #000000) var(--dark, #0F0F0F);
    --mu-body-fg: var(--light, #000000) var(--dark, #C2C2C2);
    --mu-home-main-bg: var(--light, white) var(--dark, var(--mu-lobby-bg));
    --mu-home-main-fg: var(--light, #333) var(--dark, var(--mu-lobby-fg));
    --mu-header-bg: var(--light, #6B6A8A) var(--dark, #414070);
    --mu-game-logo-opacity: var(--light, 1) var(--dark, .8);
    --mu-info-room-bg: var(--light, #82c3d7) var(--dark, #316B7D);
    --mu-info-room-site-fg: var(--light, #212529) var(--dark, #E0E0E0);
    --mu-info-room-code-fg: var(--light, #ffffff) var(--dark, #E0E0E0);
    --wamg-volume-bar-empty-bg: var(--light, #9190b7) var(--dark, #363650);
    --wamg-volume-bar-filled-bg: var(--light, #4b4a60) var(--dark, #6D6B95);
    --mu-button-settings-bg: var(--light, #FBACBE) var(--dark, #8C3A4C);
    --mu-button-settings-filter:
        var(--light, invert(99%) saturate(2573%) hue-rotate(321deg) brightness(87%) contrast(112%) drop-shadow(2px 2px #666))
        var(--dark, invert(99%) saturate(2573%) hue-rotate(321deg) brightness(80%) contrast(112%) drop-shadow(2px 2px #000));
    --mu-lobby-bg: var(--light, #6B6A8A) var(--dark, #252531);
    --mu-lobby-fg: var(--light, #ffffff) var(--dark, #C2C2C2);
    --mu-ingame-bg: var(--light, #ffffff) var(--dark, #252531);
    --mu-ingame-fg: var(--light, #000000) var(--dark, #C2C2C2);
    --mu-li: var(--light, #333333) var(--dark, #C2C2C2);
    --mu-player-list-bg: var(--light, #cccccc) var(--dark, #272727);
    --mu-player-list-entry-bg: var(--light, #FFFFFF) var(--dark, #212121);
    --mu-player-list-entry-team-2-bg: var(--light, #f8dae1) var(--dark, #2f1919);
    --mu-player-list-entry-team-3-bg: var(--light, #c7dae2) var(--dark, #1e2641);
    --mu-player-list-entry-divider: var(--light, #000000) var(--dark, #555555);
    --mu-player-list-score-icon: var(--light, #FF69B4) var(--dark, #EB42AC);
    --mu-player-list-score-change-highlight: var(--light, #c0ebcf) var(--dark, #2B363D);
    --mu-status-header-bg:
        var(--light, linear-gradient(90deg, #81BDD7 0%, #6B6A8A 46%, #6B6A8A 54%, #FBACBE 100%))
        var(--dark, linear-gradient(90deg, #316B7D 0%, #4A496B 46%, #4A496B 54%, #8B4152 100%));
    --mu-status-bg:
        var(--light, linear-gradient(90deg, #E0EBF1 0%, #D7D7DF 46%, #D7D7DF 54%, #FDEAEE 100%))
        var(--dark, linear-gradient(90deg, #2C383F 0%, #424254 46%, #424254 54%, #654A4F 100%));
    --mu-status-fg: var(--light, black) var(--dark, #C2C2C2);
    --mu-button-start-game-bg: var(--light, #a4d4b5) var(--dark, #316B7D);
    --mu-button-start-game-fg: var(--light, #416d51) var(--dark, #DEDEDE);
    --mu-button-start-game-stroke: var(--light, #000000) var(--dark, #1C1C1C);
    --mu-mode-box-bg: var(--light, #5A5671) var(--dark, #302D41);
    --mu-current-theme-fg: var(--light, rgb(var(--bs-warning-rgb))) var(--dark, #C29100);
    --mu-your-song-choice-fg: var(--light, rgb(var(--bs-warning-rgb))) var(--dark, #C29100);
    --mu-status-header-player-name-bg: var(--light, white) var(--dark, #2F2E2E);
    --mu-status-header-player-name-fg: var(--light, black) var(--dark, #ABABAB);
    --mu-status-header-player-name-outline: var(--light, black) var(--dark, #1C1C1C);
    --mu-status-header-player-banner-filter: var(--light, brightness(.8)) var(--dark, brightness(.09) contrast(.8));
    --mu-clock-bar-empty-bg: var(--light, rgba(0, 0, 0, 0)) var(--dark, #352830);
    --mu-clock-bar-filled-bg: var(--light, var(--mu-color-main)) var(--dark, #55547B);
    --mu-clock-icon-paused-bg: var(--light, #f96f5d) var(--dark, #8C3A4C);
    --mu-chat-bg: var(--light, #F5F5F5) var(--dark, #212121);
    --mu-chat-fg: var(--light, #666666) var(--dark, #C2C2C2);
    --mu-chat-input-bg: var(--light, #EBEBEB) var(--dark, #272626);
    --mu-chat-input-fg: var(--light, #000000) var(--dark, #C2C2C2);
    --mu-chat-resume-auto-scroll-bg: var(--light, #eee) var(--dark, #444);
    --mu-chat-resume-auto-scroll-fg: var(--light, #333) var(--dark, var(--mu-chat-fg));
    --mu-song-action-menu-muted: var(--light, #ddd) var(--dark, #666);
    --mu-chat-new-game-fg: var(--light, darkorange) var(--dark, orange);
    --mu-chat-new-turn-fg: var(--light, blue) var(--dark, #23B5DF);
    --mu-chat-worth-most-fg: var(--light, green) var(--dark, #12b76a);
    --mu-chat-chooser-pts-fg: var(--light, purple) var(--dark, #825dcd);
    --mu-chat-reveal-answer-fg: var(--light, rebeccapurple) var(--dark, mediumpurple);
    --mu-chat-you-rated-fg: var(--light, darkorange) var(--dark, darkorange);
    --mu-chat-you-unrated-fg: var(--light, #c3873d) var(--dark, #c3873d);
    --mu-chat-you-bookmarked-fg: var(--light, mediumseagreen) var(--dark, mediumseagreen);
    --mu-chat-you-unbookmarked-fg: var(--light, darkseagreen) var(--dark, darkseagreen);
    --mu-chat-alt-scoring-fg: var(--light, red) var(--dark, #dc3545);
    --mu-chat-alt-playback-rate-fg: var(--light, red) var(--dark, #dc3545);
    --mu-modal-wamu-content-bg:
        var(--light, linear-gradient(90deg, #E0EBF1 0%, #D7D7DF 46%, #D7D7DF 54%, #FDEAEE 100%))
        var(--dark, linear-gradient(90deg, #1E262B 0%, #2D2D3D 46%, #2D2D3D 54%, #40292E 100%));
    --mu-modal-settings-premium-header-fg: var(--light, #C71585) var(--dark, #EB42AC);
    --mu-modal-splash-new-turn-game-starting-fg: var(--light, red) var(--dark, #EB42AC);
    --mu-modal-splash-new-turn-chooser-name-fg: var(--light, #198754) var(--dark, var(--mu-body-fg));
    --mu-modal-choose-song-search-results-bg: var(--light, var(--mu-lobby-bg)) var(--dark, #1C1C1C);
    --mu-modal-choose-song-search-results-fg: var(--light, var(--mu-lobby-fg)) var(--dark, var(--mu-body-fg));
    --mu-modal-choose-song-search-year-fg: var(--light, #ccc) var(--dark, #888);
    --mu-modal-playlist-info-description-bg: var(--light, white) var(--dark, var(--mu-mode-box-bg));
    --mu-modal-playlist-info-description-label-fg: var(--light, #6c757d) var(--dark, #888);
    --mu-modal-playlist-info-description-body-fg: var(--light, black) var(--dark, var(--mu-lobby-fg));
    --mu-modal-playlist-info-status-creator-bg: var(--light, #f6f2d9) var(--dark, var(--mu-modal-playlist-info-description-bg));
    --mu-modal-playlist-info-status-creator-fg: var(--light, darkred) var(--dark, #d8a1c3);
    --mu-table-playlist-browse-highlight: var(--light, #f3e6b5) var(--dark, #524c37);
    --mu-table-playlist-browse-secondary-fg: var(--light, #6c757d) var(--dark, #777);
    --mu-playlist-portal-browse-tabs-top-active-bg: var(--light, #F4B766) var(--dark, #9d6f33);
    --mu-checkbox-checked-bg: var(--light, #7A5BCA) var(--dark, #8E74D2);
}

html {
    font-size: 80%;
}
body {
    background-color: var(--mu-body-bg);
    color: var(--mu-body-fg);
    font-family: 'Rubik', sans-serif;
}

@media (max-width: 650px) {
    .row {
        --bs-gutter-x: 0;   /* for mobile: default was adding space on the right */
    }
}

.displayIfChoseSong, .displayIfNotChoseSong { display: none; }
body.choseSong .displayIfChoseSong, body:not(.choseSong) .displayIfNotChoseSong { display: revert; }

a {
    color: #7a5bca;
}
a:hover {
    color: #987be2;
}
.table {  /* bootstrap */
    --bs-table-bg: revert;
    --bs-table-color: var(--mu-body-fg);
}
li {
    color: var(--mu-li);
}

.btn-wamu-primary {
    /* light mode vals copied straight from btn-primary */
    --bs-btn-color: var(--light, #fff);
    --bs-btn-bg: var(--light, #0d6efd) var(--dark, #5C5B9F);
    --bs-btn-border-color: var(--light, #0d6efd) var(--dark, #5C5B9F);
    --bs-btn-hover-color: var(--light, #fff) var(--dark, #fff);
    --bs-btn-hover-bg: var(--light, #0b5ed7) var(--dark, #4c4b82);
    --bs-btn-hover-border-color: var(--light, #0a58ca) var(--dark, #4c4b82);
    --bs-btn-focus-shadow-rgb: var(--light, 49, 132, 253) var(--dark, 49, 132, 253);
    --bs-btn-active-color: var(--light, #fff) var(--dark, var(--mu-body-fg));
    --bs-btn-active-bg: var(--light, #0a58ca) var(--dark, #5C5B9F);
    --bs-btn-active-border-color: var(--light, #0a53be) var(--dark, #5C5B9F);
    --bs-btn-active-shadow: var(--light, inset 0 3px 5px rgba(0, 0, 0, 0.125)) var(--dark, inset 0 3px 5px rgba(0, 0, 0, 0.125));
    --bs-btn-disabled-color: var(--light, #fff) var(--dark, var(--mu-body-fg));
    --bs-btn-disabled-bg: var(--light, #0d6efd) var(--dark, #0d6efd);
    --bs-btn-disabled-border-color: var(--light, #0d6efd) var(--dark, #0d6efd);
}

.modal-header { border-bottom: revert; }
.modal { --bs-modal-color: var(--mu-body-fg); }

.modalWamu .modal-content {
    outline: 6px solid var(--mu-header-bg);
    background: var(--mu-modal-wamu-content-bg);
}
.modalWamu .modal-header { background-color: var(--mu-header-bg); color: var(--mu-lobby-fg); }
.modalWamu .modal-header .btn-close {
    /* Enforce a light fg (as if it were dark mode) for .modalWamu close buttons */
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}
.modalWamu a { color: var(--light, #444) var(--dark, #aaa); }
.modalWamu a:hover { color: var(--light, #666) var(--dark, #888); }

#modalSplashNewTurn .modal-content { border-width: 8px; }
#modalSplashNewTurn .modal-body {
    font-size: 2rem; text-transform: uppercase; min-height: 20rem;
}
#modalSplashNewTurn .chooserName {
    color: var(--mu-modal-splash-new-turn-chooser-name-fg);
    font-weight: bold;
    margin-top: .4rem; margin-bottom: 1rem;
}

.nav { --bs-nav-link-color: var(--light, #333) var(--dark, #ae98da); }
.nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--light, #81C3D7) var(--dark, #6B6A8A);
    --bs-nav-tabs-link-hover-border-color: rgba(0, 0, 0, 0);
}
.nav-tabs .nav-link:hover {
    --bs-nav-link-hover-color: #806599;
}
.pagination { --bs-pagination-color: var(--light, #333) var(--dark, #6B6A8A); }

.ui-tooltip {
    background-color: var(--light, white) var(--dark, var(--mu-lobby-bg));
    color: var(--light, #333) var(--dark, var(--mu-lobby-fg));
}
/* overwrite bootstrap tooltip shadow which doesn't account for dark mode */
.ui-tooltip.ui-widget-shadow {
    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
}

/* make dataTables sorting arrows the way I like them */
/* by default, they're an up triangle on top of a down triangle, placed via :before and :after */
/* hide :before, and place :after next to the word, with either up or down triangle as appropriate */
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting:before,
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting_asc:before,
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting_desc:before {
    display: none !important;
}
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting:after,
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting_asc:after,
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting_desc:after {
    display: inline;
    position: relative;
    opacity: .5;
    left: 5px;
    top: revert;
    bottom: revert;
    right: revert;
}
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting:after {
    content: '';
}
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting_asc:after {
    content: '▲';
}
.dataTables_scrollHead .tablePlaylistBrowse thead .sorting_desc:after {
    content: '▼';
}
.dataTables_filter input {
    width: 170px !important;
}
.playlistRowSecondary { color: var(--mu-table-playlist-browse-secondary-fg); }

/* pagination page numbers */
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--mu-color-main);
    border-color: var(--mu-color-main);
}
.table.dataTable>:not(caption)>*>* { color: var(--mu-body-fg); }
[data-bs-theme="dark"] table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.25);
}


.altRowBkgdColor {
    background-color: blue;
}
.modal.marginForNarrowViewports {
    /* Puts a margin on left & right sides for narrow viewports */
    margin-left: 1rem;
    margin-right: 1rem;
    width: calc(100% - 2rem);
}
/* between default modal size and .modal-lg */
@media (min-width: 992px) {
    .modal-mlg { max-width: 650px; }
}

.noBorders td {
    border-style: none;   /* get rid of the default borders on bootstrap table td's */
}
.visibleToPublicHostView, .visibleToHost, .visibleToNonHostPlayer, .visibleToPremiumUsers {
    display: none;
}
input.form-check-input {
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--mu-checkbox-checked-bg);
    border-color: var(--mu-checkbox-checked-bg);
}

.divSplashOptionsContainer {
    background-color: var(--mu-home-main-bg);
    color: var(--mu-home-main-fg);
}
@media (min-width: 650px) {
    .divSplashOptionsContainer { width: 600px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1100px) {

    /* WIDER BROWSERS */

    /* 3 player cards per row */
    .divPlayerCard { flex-basis: calc(33% - 5px); }

    /* padding on the left & right sides */
    .bodyContainer { padding: 0 5rem; }
}

/* Medium browsers: 2 player cards per row */

@media (min-width: 600px) and (max-width: 1100px) {
    .divPlayerCard { flex-basis: calc(50% - 5px); }
}

/* Narrow browsers: 1 player card per row */

@media (max-width: 600px) {
    .divPlayerCard { flex-basis: 100%; }
    .divTeamScoreLabel { display: none; }
}

@media (max-width: 850px) {
    /* No player list if too narrow */
    .columnLeft { display: none; }
}

/* Hide left column for 1P mode (gameMode3) */
.gameMode3 .columnLeft { display: none; }

.outline {
    outline: 2px solid black;
}
.imgGameLogo {
    opacity: var(--mu-game-logo-opacity);
}
.divTopButtons {
    display: flex;
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    opacity: var(--light, 1) var(--dark, .8);
    height: 3rem;
    line-height: 3rem;
}
.divHowToPlayButton, .divWhatsNewButton {
    flex-grow: 1;
    background-color: black;
    cursor: pointer;
}
.divHowToPlayButton {
    border-radius: 0 0 0 20px;
}
.divWhatsNewButton {
    border-radius: 0 0 20px 0;
}
.divLogin {
    margin-top: 3rem;
    padding: 4rem 0 2rem 0;
    background: var(--light, var(--mu-header-bg)) var(--dark, var(--mu-status-header-bg));
}
.divJoinStartTabs {
    display: flex;
    text-align: center;
    background: var(--light, white) var(--dark, var(--mu-status-bg));
}
@media (max-width: 600px) {
    .divJoinStartTabs { font-size: 1.6rem; }
}
@media (min-width: 600px) {
    .divJoinStartTabs { font-size: 2rem; }
}
.tabJoinRoom, .tabStartRoom {
    flex-grow: 1;
    padding: 1rem 0;
    margin-top: 5px;   /* to offset the bottom border */
    border-bottom: 5px solid var(--light, var(--mu-home-main-bg)) var(--dark, var(--mu-lobby-bg));
    color: var(--light, lightgrey) var(--dark, #888);
    cursor: pointer;
}
.tabJoinRoom.selected, .tabStartRoom.selected {
    color: var(--light, green) var(--dark, #4696b0);
    border-bottom: 5px solid var(--light, green) var(--dark, #4696b0);
}
.tabJoinRoom:hover, .tabStartRoom:hover {
    color: var(--light, #66A182) var(--dark, #50afcd);
}
.divJoinRoom {
    height: 15rem;
}
.divJoinRoom, .divStartRoom {
    padding: 2rem 0 2rem 0;
    color: var(--light, #333) var(--dark, var(--mu-body-fg));
}
.divSplashStagingWarning {
    background-color: darkred;
    color: white;
    padding: 2rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
}
.divSplashWhatsamusicIs {
    background-color: var(--light, #e9b9dc) var(--dark, #316b7d);
    color: var(--light, #2c292e) var(--dark, #C2C2C2);
    border-top: 3px solid var(--light, #b3a0c1) var(--dark, #4596af);
}
.divSplashPlaylists {
    background-color: var(--light, #f5e6a2) var(--dark, #414070);
    color: var(--light, #2d2d3c) var(--dark, #C2C2C2);
}
.divSplashPlaylists a { color: var(--light, #7a5bca) var(--dark, #9f80ef);  }
.divSplashPlaylists a:hover { color: var(--light, #987be2) var(--dark, #8c71d3); }
.divSplashDiscord {
    background-color: var(--light, initial) var(--dark, #8b4152);
}
.divSplashDiscord a { color: var(--light, #444) var(--dark, var(--mu-body-fg)); }
.divSplashDiscord a:hover { color: var(--light, #666) var(--dark, #aaa); }
.divLoggedOut, .divLoggedIn {
    width: fit-content;
    font-size: 1.3rem;
    margin: .5rem auto 0 auto;
}
.divLoggedOut a, .divLoggedIn a { color: var(--light, #e5e2f1) var(--dark, #aba6b2); }
.divLoggedOut a:hover, .divLoggedIn a:hover { color: var(--light, #cbc9d6) var(--dark, #928e98); }

input[name="name"] {
    padding: .9rem;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    border: 0;
    color: var(--light, black) var(--dark, var(--mu-body-fg));
}
input[name="name"], input[name="name"]:disabled {
    /* Don't dim the username input field when disabled */
    background-color: var(--light, white) var(--dark, var(--mu-lobby-bg));
}
input[name="joinRoomCode"] {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    border: 2px solid var(--light, #66A182) var(--dark, var(--mu-color-main));
    background-color: var(--light, #F0F5F0) var(--dark, #1e1e28);
    color: var(--light, black) var(--dark, #ddd);
    border-bottom: 4px solid var(--light, #66A182) var(--dark, var(--mu-color-main));
    text-transform: uppercase;
}
.buttonJoinRoom, .buttonStartNewRoom {
    margin-top: 1rem;
    width: 100%;
    height: 4rem;
    color: var(--light, #876608) var(--dark, #533f07);
    font-size: 2rem;
    outline: var(--light, 2px solid #8e6f1a) var(--dark, 0);
}
.divStartRoomBox {
    background-color: var(--light, #F0F5F0) var(--dark, #343444);
    width: 80%;
    margin: 1rem auto;
    padding: 1rem 2rem;
    font-size: 1.2rem;
}
@media (min-width: 650px) {
    .divStartRoomBox .innerWrapper { width: 70%; margin: auto; }
}
.divStartRoomOptionRow {
    display: flex; align-items: center; line-height: 4.2rem;
}
.divStartRoomOptionRow div.form-check { padding-left: 2.5em; margin-top: -.3em; }
.divStartRoomOptionRow .form-check-input { width: 3.75rem; height: 1.8rem; }
.divStartRoomOptionSeparator { height: 1px; background-color: var(--light, #ccc) var(--dark, #666); }

#gameView {
    padding: 0px 20px 2rem 20px;
    border-bottom: 1px solid #999;
    max-width: 1100px;
}
@media (max-width: 650px) {
    #gameView {
        padding: 0;
    }
    .divFooter, .divFooterExtra, .divFooterSupportUs, .divFooterCopyright {
        display: none;
    }
}

.imgSettingsButton {
    width: 3.8rem;
}
@media (max-width: 650px) {
    .imgSettingsButton { width: 2.5rem; }
}
.divInfoRoomCode {
    flex: 1;
    max-width: 210px;
    filter: drop-shadow(5px 5px black);
    cursor: pointer;
}
.divInfoRoomCode .innerWrapper{
    min-width: 190px;
    max-width: 210px;
    width: fit-content;
    background-color: var(--mu-info-room-bg);
    transform: rotate(-5.5deg); 
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 96% 100%, 2% 100%);
}
.presenter {
    outline: 2px solid red;
}
.currentPlayer {
    background-color: #D0DFD7 !important;
}
.censored {
    visibility: hidden;
}
.divPlayerListNumPlayers, .divTeamListHeader {
    background-color: var(--mu-header-bg);
    color: var(--mu-lobby-fg);
}
.olPlayerList, .olTeamList {
    padding-left: 0;
    margin-bottom: 1rem;
    list-style-type: none;
}
.olPlayerList {
    padding-bottom: 5rem;
}
.olTeamList { font-size: 1.15rem; }
.liPlayerOnTeamList, .liTeamOnTeamList {
    background-color: var(--mu-player-list-entry-bg);
    height: 4rem;
    padding: 0 1rem;
    border-bottom: 2px solid var(--mu-player-list-entry-divider);
    cursor: pointer;
    flex-wrap: nowrap;
}
.liTeamOnTeamList { display: flex; align-items: center; }
[data-option-teamMode="1"] .liPlayerOnTeamList[teamId="2"]:not(.scoreChangeHighlight),
.liTeamOnTeamList[teamId="2"]:not(.scoreChangeHighlight), .ulAssignTeams li.liPlayer[teamId="2"]
    { background-color: var(--mu-player-list-entry-team-2-bg); }
[data-option-teamMode="1"] .liPlayerOnTeamList[teamId="3"]:not(.scoreChangeHighlight),
.liTeamOnTeamList[teamId="3"]:not(.scoreChangeHighlight), .ulAssignTeams li.liPlayer[teamId="3"]
    { background-color: var(--mu-player-list-entry-team-3-bg); }

.divPlayerContent {
    min-width: 0;   /* constrains width to container */
}
.divPlayerScore { display: flex; }
.divPlayerScore .icon { color: var(--mu-player-list-score-icon); margin-right: 4px; }
.liPlayerOnTeamList.playerInactive .divPlayerListAvatar, .liPlayerOnTeamList.playerInactive .divPlayerContent {
    opacity: var(--light, .6) var(--dark, .4);
}

.divPlayerList, .divTeamList {
    background-color: var(--mu-player-list-bg);
    overflow-y: auto;
    overflow-x: hidden;
}
.divPlayerList { max-height: 97vh; }
.divTeamList { margin-bottom: 1rem; }

.iconPlayerChoseSong {
    margin-right: 2rem;
    color: green;
}
.iconPlayerAFK {
    margin-right: 1.25rem;
    margin-top: 1px;   /* cancel whatsamook.css */
    color: #a26c75;
}
.iconPlayerTeamAffiliation {
    margin-right: .75rem;
    font-size: 1.4rem;
    color: var(--mu-player-list-score-icon);
}
.divPlayerListAvatar {
    flex-grow: 0;
}
.imgAvatarSize1 {
    border-radius: 9000px;
    width: 2.5rem;
}
.imgAvatarSize2 {
    border-radius: 9000px;
    width: 5rem;
}

.ulAssignTeams {
    list-style-type: none;
    padding-left: 0;
}
.ulAssignTeams li.liPlayer, .ulAssignTeams li.ui-sortable-placeholder {
    height: 3rem;
}
.ulAssignTeams li.liPlayer {
    background-color: var(--mu-player-list-entry-bg);
    height: 3rem;
    line-height: 3rem;
    padding: 0 .5rem;
    margin: .25rem 0;
    border: 1px solid var(--mu-player-list-entry-divider);
    cursor: move;
}
li.ui-sortable-placeholder.liAssignTeamsPlaceholder {
    opacity: var(--light, .4) var(--dark, .2) !important;
    background-color: #fffa90;
}

@media (min-width: 650px) {
    body.notSubscribed .divRight2ColumnsWrapper {
        height: calc(100vh - 209px);   /* leaves extra room for bottom rail ad */
    }
    body.subscribed .divRight2ColumnsWrapper {
        height: calc(100vh - 109px);
    }
}
.divMainColumn {
    float: left;
    width: 61%;
    display: flex;
    flex-direction: column;
}
.divClockMobile {
    position: absolute;
    height: 3px;
    background-color: darkorange;
    top: -4px;
    z-index: 2;
}
.divCurrentSong, .divCurrentSongRevealed {
    position: relative;
    background-color: var(--mu-ingame-bg);
    color: var(--mu-ingame-fg);
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}
.divCurrentSongRevealed {
    .divCurrentSongTitle .content, .divCurrentSongArtist .content {
        font-size: calc(1.275rem + .3vw);  /* fs-4 */
    }
}
@media (max-width: 650px) {
    .divCurrentSongRevealed {
        .divCurrentSongTitle .content, .divCurrentSongArtist .content {
            font-size: 1.25rem;  /* fs-5 */
        }
    }
}
.divThemeDuringGame, .divPlaylistDuringGame {
    margin-bottom: 2rem;
}
@media (max-width: 650px) {
    .divThemeDuringGame, .divPlaylistDuringGame { margin-bottom: 1rem; }
}
.divCurrentSong .divCurrentSongArtwork, .divCurrentSong .divCurrentSongTitle, .divCurrentSong .divCurrentSongArtist {
    width: 100%;
    margin-bottom: 3rem;
}
.titleChar, .artistChar { font-family: "Azeret Mono"; text-align: center; }

@media (min-width: 650px) {
    .divMainColumn {
        height: 100% !important;
    }
    .titleChar, .artistChar { font-size: 2rem; }
}
@media (max-width: 650px) {
    .divMainColumn {
        width: 100%;
        height: calc(100vh - 5.5rem);
        height: calc(100dvh - 51px - var(--virtualKeyboardHeight));
    }
    .android-chrome .divMainColumn {
        height: calc(100dvh - 51px);   /* because dvh maybe factors in the virtual keyboard? */
        /* OLD height: calc(100vh - 5.5rem - 56px);  /* Chrome on Android includes interface bar as part of the viewport */
    }
    .divCurrentSong {
        padding: 1rem;
    }
    .titleChar, .artistChar { font-size: 1.8rem; }
    .divCurrentSong, .divCurrentSongRevealed {
        /* display: flex; flex-direction: column; justify-content: center;   no longer necessary since we're no longer vertically centering */
    }
    .divCurrentSong .divCurrentSongArtwork, .divCurrentSong .divCurrentSongTitle, .divCurrentSong .divCurrentSongArtist {
        margin-bottom: 1rem;
    }
    .divCurrentSongArtwork .content img { width: 125px; }
}
.divChat {
    position: relative;
    background-color: var(--mu-chat-bg);
    display: flex;
    flex-direction: column;
}
.divChat.notPhonePortrait {
    float: right;
    width: 37%;
    height: 100%;
}
.divChat.phonePortrait {
    padding-top: .5rem;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #999;
    height: revert;
    display: none;
    .divChatContent .msg { font-size: 1.1rem; }
}

.divChat.viewCozy .msg { font-size: 1.1rem; }
.divChat.viewCozy .msg { margin-top: 3px; margin-bottom: 3px; }

/* chatSafeMode */
/* Hide all msgs that are not either system, or the user's own */
body.chatSafeMode .divChat .msg:not(.msgSystem):not(.usersOwn) { display: none; }
/* Hide the user's own msgs entirely if streamer mode is on */
body.streamerMode.chatSafeMode .divChat .msg.usersOwn { display: none; }
body.chatSafeMode .divChat .msg.usersOwn { opacity: .8; font-style: italic; }
body:not(.chatSafeMode) .divChat .spanIconMsgHidden { display: none; }
.spanIconMsgHidden { margin-right: 2px; }

.divChat .msg img { height: 24px; margin-top: -2px; border-radius: 9000px; }
.divChat.viewCompact .msg img { display: none; }
.newGame { color: var(--mu-chat-new-game-fg); font-weight: bold; padding-top: 1rem; }
.newTurn { color: var(--mu-chat-new-turn-fg); font-weight: bold; border-bottom: 1px solid #ccc; padding-top: 1rem; }

/* Default to secondary color... */
.correctTitle, .correctTitleAlso, .correctArtist, .correctArtistAlso { color: cadetblue; }
/* ... overridden by primary color if worth most (it's possible for both title & artist to be worth most) */
.worthMost { color: var(--mu-chat-worth-most-fg) !important; font-weight: bold !important; }
.revealAnswer { color: var(--mu-chat-reveal-answer-fg); font-weight: bold; }
.chooserPoints { color: var(--mu-chat-chooser-pts-fg); }
.msg.youRatedThisSong { color: var(--mu-chat-you-rated-fg);; font-style: italic; }
.msg.youUnratedThisSong { color: var(--mu-chat-you-unrated-fg); font-style: italic; }
.msg.youBookmarkedThisSong { color: mediumseagreen; font-style: italic; }
.msg.youUnbookmarkedThisSong { color: darkseagreen; font-style: italic; }
.msg.finalSongRating { color: mediumvioletred; }
.msg.censored { display: none; }
.altScoring { color: var(--mu-chat-alt-scoring-fg); }
.altPlaybackRate { color: var(--mu-chat-alt-playback-rate-fg); }


.divChatContent {
    color: var(--mu-chat-fg);
    padding: .5rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 3rem;
    overflow-y: scroll;
    overflow-wrap: anywhere;
}
.divChatInput {
    position: absolute;
    bottom: 0;
    border-top: 1px solid black;
    width: 100%;
    height: 3rem;
}
.divChatInput input {
    border: 1px solid black;
    background-color: var(--mu-chat-input-bg);
    color: var(--mu-chat-input-fg);
    width: 100%;
    height: 3rem;
    padding: 0 2.8rem 0 1rem;
}
.divResumeAutoScroll {
    border-top: 1px solid black;
    margin-bottom: 3rem;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    background-color: var(--mu-chat-resume-auto-scroll-bg);
    color: var(--mu-chat-resume-auto-scroll-fg);
    padding-left: 1rem;
    opacity: .85;
    cursor: pointer;
}
.divButtonToggleChatLog {
    width: 38px; height: 38px;	
}
@media (max-width: 650px) {
    .divChat.notPhonePortrait {
        display: none !important;
    }
    .divChat.phonePortrait {
        display: flex;
    }
    .divChat.hidden .divChatContent {
        display: none;
    }
    .divChatInput input { border-radius: 0; }
    .divChat.shown.mobileHeightFull .divChatContent {
        /* 50px for .divHeader, 50px for .divMainColumn .divStatus, 3rem for .divChatContent's margin-bottom,
           .5rem for .divChat's padding-top, -2px for... idfk */
        min-height: calc(100dvh - 50px - 50px - 3rem - .5rem - 2px);
        max-height: calc(100dvh - 50px - 50px - 3rem - .5rem - 2px);
        transition: min-height .25s ease-in-out, max-height .25s ease-in-out;
    }
    .divChat.shown.mobileHeightHalf .divChatContent {
        min-height: 5rem;
        max-height: 5rem;
        transition: min-height .25s ease-in-out, max-height .25s ease-in-out;
    }
    .divChat.mobileHeightFull .divButtonToggleChatLog {
        background: url('https://d1n054gwwwonzz.cloudfront.net/img/button_chat_log_toggle_down.svg') no-repeat;
        background-size: cover;
    }
    .divChat.mobileHeightHalf .divButtonToggleChatLog {
        background: url('https://d1n054gwwwonzz.cloudfront.net/img/button_chat_log_toggle_up.svg') no-repeat;
        background-size: cover;
    }
}

.buttonStartGame {
    background-color: var(--mu-button-start-game-bg);
    color: var(--mu-button-start-game-fg);
    width: 131px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    border: 2.5px solid var(--mu-button-start-game-stroke);
    border-radius: .6rem;
    font-weight: bold;
}
/* Hack to vertically center on non-phone browsers */
@media (min-width: 650px) {
    .buttonStartGame { margin-bottom: 7px; }
}

.divPlayerName, .divStatusHeaderPlayerName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
}
.divClock {
    background-color: var(--mu-clock-bar-empty-bg);
    height: .5rem;
    width: 100%;
    margin: 1rem auto 0 auto;
    display: flex;
}
.divClock.idle {
    opacity: .6;
}
.divClockFilled {
    height: 100%;
    overflow: visible !important;   /* to counteract jquery .animate's forcing of overflow: hidden */
}
.divClockFilled.plentyOfTimeLeft {
    background-color: var(--mu-clock-bar-filled-bg);
}
.divClockFilled.timeRunningOut, .divClockMobile.timeRunningOut {
    background-color: red;
}
.divClockMobile.paused {
    background-color: grey;
}
.divClockIcon {
    background-size: 2rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1px;
}
.divClock.running .divClockIcon {
    background-image: url('https://d1n054gwwwonzz.cloudfront.net/img/icon_clock_running.svg');
    background-size: 2rem;
    width: 2rem;
    height: 2rem;
}
.divClock.paused .divClockIcon {
    background-image: url('https://d1n054gwwwonzz.cloudfront.net/img/icon_clock_paused.svg');
    background-size: 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
}
.divClockIconBkgd { border-radius: 9000px; }

.divClock.running .divClockIconBkgd {
    background-color: var(--mu-color-main);
    height: 1.4rem; width: 1.4rem; margin-top: -1px;
}
.divClock.paused .divClockIconBkgd {
    background-color: var(--mu-clock-icon-paused-bg);
    height: 1.55rem; width: 1.55rem;
}
.divClock.running .divClockIconBkgd, .divClock.running .divClockIcon { animation: clockBounce .5s infinite; }

.divClockIcon.running, .divClockIcon.idle {
    background-image: url('https://d1n054gwwwonzz.cloudfront.net/img/icon_clock_wamu.svg');
}
.divClockIcon.paused {
    background-image: url('https://d1n054gwwwonzz.cloudfront.net/img/icon_clock_paused.png');
}
.divVolume {
    flex: 1;
    height: .5rem;
    margin: 1rem auto 0 2rem;
    background-color: var(--wamg-volume-bar-empty-bg);
    border: 0 !important;
}
.divVolumeFilled {
    position: relative;
    border-radius: 99px;
}
.divVolume .ui-slider-handle {
    margin-top: -5px; width: 24px; height: 24px; line-height: 21px;
    background: url('https://d1n054gwwwonzz.cloudfront.net/img/icon_volume.svg') no-repeat; background-size: 24px; border: 0;
}

.tooltipBH {
    background-color: var(--mu-ingame-bg);
    color: var(--mu-ingame-fg);
    line-height: 1.8rem;
    font-size: 1.2rem;
    z-index: 10;
}
.tooltipPauseClock {
    padding: .3rem 3rem 1rem 3rem;
}
.tooltipSettingsMenu {
    width: revert;   /* to cancel width: 100% inherited from .row>* */
    padding: .3rem .3rem 1rem .3rem;
    margin-top: -1px;
    margin-right: 4rem;
}
.tooltipStreamerMode {
    background-color: #ccc;
    padding: .3rem;
    margin-top: -2rem;
    margin-left: 1rem;
}
.card-body {
    padding: .5rem;   /* overwrites default boostrap .card-body */
}

.divHeader {
    height: 4rem;
    background-color: var(--mu-header-bg);
}
.divGameName {
    flex: 1;
    max-width: 200px;
    line-height: 3.9rem;
}
.divGameName img {
    width: 180px;
}
.divGameHeader {
    margin-bottom: 1rem;
}
.divRowMain {
	padding-top: 1rem;
	min-height: 30rem;
	display: flex;
	flex-wrap: nowrap;
}
.divStatusHeader {
    height: 4.7rem;
    min-height: 4.7rem;
    background: rgb(129,189,215);
    background: var(--mu-status-header-bg);
}
@media (max-width: 650px) {
    .divHeader { height: 50px; }
    .divGameName {
        line-height: 3.5rem;
    }
    .divGameName img {
        width: 140px;
    }
    .divRowMain {
        padding-top: 0;
    }
    .divStatusHeader {
        height: 0;
        min-height: 0;
    }
}
.divStatus {
    background: var(--mu-status-bg);
    color: var(--mu-status-fg);
    font-size: 1.2rem;
}
@media (min-width: 650px) {
    .divMainColumn .divStatus {
        padding: 1rem 0 .3rem 0;
        min-height: 50px;
    }
}
@media (max-width: 650px) {
    .divMainColumn .divStatus {
        display: flex; justify-content: center; align-items: center;
        height: 50px;
    }
}
.divGameName {
    color: white;
    font-family: 'Ranchers', cursive;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    padding-left: 1rem;
}
.divTeamScore {
    margin-right: 4rem;
    display: flex;
}
.divTeamScoreLabel {
    background-color: #EADCA7;
    color: black;
    padding: .4rem;
    border-right: 2px solid black;
}
.divTeamScoreContent {
    background-color: #93928B;
    color: white;
    font-weight: bold;
    padding: .4rem;   
}
.divSettingsButton {
    flex: 1; max-width: 0;
    margin-right: 4rem;
    cursor: pointer;
}
.divSettingsButton .innerWrapper {
    background-color: var(--mu-button-settings-bg);
    margin-top: 10px;
    width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(3px 3px var(--mu-body-bg));
    border-radius: 9000px;
}
.divSettingsButton .innerWrapper img {
    width: 30px; height: 30px;
    margin-left: -1px; margin-top: -1px;
    filter: var(--mu-button-settings-filter);
}
@media (max-width: 650px) {
    .divSettingsButton .innerWrapper { width: 32px; height: 32px; filter: drop-shadow(2px 2px black); }
    .divSettingsButton .innerWrapper img { width: 22px; height: 22px; }
}

.divStatusHeaderPlayerAvatar {
    top: -33px;
}
.divStatusHeaderPlayerBannerL, .divStatusHeaderPlayerBannerR {
    position: absolute; background-size: 24px !important; width: 24px; height: 24px; top: -17px;
    filter: var(--mu-status-header-player-banner-filter);
}
.divStatusHeaderPlayerBannerL {
    background: url('https://d1n054gwwwonzz.cloudfront.net/img/username_banner_edge_l.svg') no-repeat;
    left: -99px;
}
.divStatusHeaderPlayerBannerR {
    background: url('https://d1n054gwwwonzz.cloudfront.net/img/username_banner_edge_r.svg') no-repeat;
    left: 75px;
}
.divStatusHeaderPlayerName {
    position: absolute;
    background-color: var(--mu-status-header-player-name-bg);
    color: var(--mu-status-header-player-name-fg);
    outline: 2px solid var(--mu-status-header-player-name-outline);
    width: 165px;
    font-size: .8rem;
    font-weight: bold;
    padding: 1px 2rem;
    text-transform: uppercase;
}
.divHelpClueGiving {
    background-color: #eee;
    border: 7px solid #BAB9B5;
    color: #363;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    padding: 1rem 5rem;
}

.divLobby, .divChooseOwnSongsMode, .divSongChoiceSplash {
    font-size: 1.2rem;
}

.divLobby, .divGameOver {
    background-color: var(--mu-lobby-bg);
    color: var(--mu-lobby-fg);
    padding: 2rem 1rem 5rem 1rem;
}
.divChooseOwnSongsMode, .divPlaylistMode {
    padding: 0 1rem;
}
.divChooseOwnSongsModeContent, .divPlaylistModeContent {
    background-color: var(--mu-mode-box-bg);
    margin-top: 1rem;
}

.divGameOver {
    font-size: 1.4rem;
}
.divFinalTop3 {
    background-color: var(--mu-mode-box-bg);
    outline: 2px solid var(--mu-body-fg);
    margin-bottom: 2rem;
}
.divPlaylistRate {
    margin-bottom: 2rem;
}
.divGameOverSongList .table>*>* {
    --bs-table-color-state: var(--mu-lobby-fg);
}

.divPresenterList {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
}

.divInputAnswer {
    margin-bottom: 2em;
}
.divLinkClueGuide {
    font-size: 1.2rem;
    text-decoration: underline;
    margin-top: .3rem;
    cursor: pointer;
}
.divAFKLeaveButtons {
    margin-top: 1em;
}
.divWhatIsThisInMenu, #modalSettingsHost .buttonWhatsNew, #modalSettingsPlayer .buttonWhatsNew {
    color: var(--light, brown) var(--dark, #54b6d5);
    text-decoration: underline;
    cursor: pointer;
}
/* For narrow browsers with only one column of clues, don't let well-liked clues scale up */
@media (max-width: 600px) {
    .divPlayerCard.aboveLikesThreshold, .divPlayerCard.maxAboveLikesThreshold {
        transform: scale(1) !important;
    }
}

input[name="answer"] {
    width: 20rem;
}

.modal .menuFinePrint { font-size: 1rem; line-height: 1.2rem; }

#modalSettingsHost .modal-body, #modalEditPlayer .modal-body {
    width: 80%;
    font-size: 1.2rem;
    line-height: 3.2rem;
}
@media (max-width: 650px) {
    #modalSettingsHost .modal-body { width: 90%; }
}

@media (max-width: 650px) {
    #modalChooseSong .divSongSearchBar { width: 100%; }
}
input[name="songSearchQuery"] {
    color: var(--mu-body-fg);
    border: var(--light, 2px solid black) var(--dark, 0);
}
.ulSearchAttribute a.dropdown-item {
    color: #212529;
}
.divSearchResults {
    background-color: var(--mu-modal-choose-song-search-results-bg);
    color: var(--mu-modal-choose-song-search-results-fg);
    height: 50vh;
    max-height: 550px;
    overflow-y: scroll;
    margin-top: 1rem;
    padding-left: 5px;
    padding-right: 5px;
}
.divSearchPageHeader {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--mu-modal-choose-song-search-results-fg);
    text-align: center;
}
.divTrackResult, .divAlbumResult {
    display: flex;
    text-align: left;
    padding: 3px;
}
.divTrackResult img, .divAlbumResult img {
    width: 50px;
}
.divTrackResultText, .divAlbumResultText {
    width: 60%;
    padding-left: 1rem;
    padding-top: .5rem;
    line-height: 1.2rem;
    flex: 1;
}
.spanTrackResultTrackNumber {
    color: #ccc;
    margin-right: .1rem;
}
.spanTrackResultTitle, .spanAlbumResultTitle {
    font-weight: bold;
    font-size: 1.2rem;
}
.spanTrackResultYear, .spanAlbumResultYear {
    font-size: 1rem;
    color: var(--mu-modal-choose-song-search-year-fg);
    margin-left: .1rem;
}
.spanTrackResultArtist, .spanAlbumResultArtist {
    font-size: 1rem;
}
.divTrackResultButtons {
    margin-top: 2px;
}
.divTrackResultButtons button {
    padding: .3rem .65rem;
}
.divTrackResultButtons button span {
    font-size: 1.1rem;
}
.buttonTrackChoose {
    margin-left: 4px;
}

.divArtistResult {
    width: 90%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .75rem;
}
.spanTrackResultArtist, .spanArtistResultName, .spanAlbumResultTitle, .spanArtistResultLinkSongs, .spanArtistResultLinkAlbums, .spanAlbumResultArtist, .divArtistLinkAlbums, .divArtistLinkSongs {
    cursor: pointer;
}
.spanTrackResultArtist:hover, .spanArtistResultName:hover, .spanAlbumResultTitle:hover, .spanArtistResultLinkSongs:hover, .spanArtistResultLinkAlbums:hover, .spanAlbumResultArtist:hover, .divArtistLinkAlbums:hover, .divArtistLinkSongs:hover {
    text-decoration: underline;
}
.spanArtistResultGenre {
    color: var(--mu-modal-choose-song-search-year-fg);
    margin-left: .5rem;
}
.spanArtistResultLinkSongs {
    margin-left: 1rem;
}
.spanArtistResultLinkDivider {
    color: #bbb;
}

.divButtonBookmarkSong {
    position: absolute;
    top: -7px;
    right: 0;
    margin-right: 1rem;
    cursor: pointer;
}

.divSongActionMenu {
    margin-bottom: 3rem;
    margin-right: 1px;
    height: 3.2rem;
    line-height: 3.2rem;
    background-color: var(--mu-chat-bg);
    color: var(--mu-song-action-menu-muted);
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    max-width: 100px;   /* starting value which gets animated */
}
.divSongActionMenu .opened div {
    margin: 0 .5rem;
    opacity: .5;
}
.divSongActionMenu .opened div.clicked {
    opacity: 1;
}
.imgRateSongBlank {
    width: 1.6rem;
}
.divFloatingReaction {
    position: absolute;
    font-size: 3rem;
    right: 3rem;
    z-index: 5;
}
.divButtonBookmarkSong {
    font-size: 2.5rem;
}
.divButtonBookmarkSong, .divButtonRateSongBookmark {
    opacity: .4;
    color: forestgreen;
}
.divButtonRateSong {
    color: orange;
}
.divButtonBookmarkSong.clicked, .divButtonRateSongBookmark.clicked {
    opacity: 1;
}

#audioSongPreview {
    /* Make the audio controls bar thinner.  iOS apparently has their own rendering of this, but this doesn't affect
       its appearance there (it adds a little bit of extra margin underneath, which is fine) */
    height: 35px;
}

/* CREATE PLAYLIST */

#modalChoosePlaylist .nav-tabs button {
    padding-left: 1.5rem; padding-right: 1.5rem;
}
@media (max-width: 650px) {
    #modalChoosePlaylist .nav-tabs button {
        padding-left: 1rem; padding-right: 1rem;
    }
}

#modalPlaylistInfo .playlistDescription {
    background-color: var(--mu-modal-playlist-info-description-bg);
    color: var(--mu-modal-playlist-info-description-label-fg);
}
#modalPlaylistInfo .playlistDescription .content {
    color: var(--mu-modal-playlist-info-description-body-fg);
}

.divPlaylistUserPortal {
    background-color: var(--mu-ingame-bg);
    color: var(--mu-ingame-fg);
}

.ulPlaylistUserPortalTabsMain {
    border-bottom: 3px solid var(--mu-playlist-portal-browse-tabs-top-active-bg);
}
.ulPlaylistUserPortalTabsMain button.nav-link {
    padding-left: 3rem; padding-right: 3rem;
    margin-bottom: -2px;
}
.ulPlaylistUserPortalTabsMain button.nav-link.active {
    color: white;
    background-color: var(--mu-playlist-portal-browse-tabs-top-active-bg);
    border: 0;
}
.ulPlaylistBrowseTabs {
    border-bottom: 0;
}
.ulPlaylistBrowseTabs button.nav-link.active {
    color: white;
    border: 0;
}
.ulPlaylistBrowseTabs .nav-link {
    padding-left: 3rem;
    padding-right: 3rem;
    margin-bottom: -2px;
}
@media (max-width: 650px) {
    .ulPlaylistBrowseTabs .nav-link {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.tablePlaylistBrowse tbody tr {
    cursor: pointer;
}
.tablePlaylistBrowse tbody tr:hover {
    background-color: var(--mu-table-playlist-browse-highlight);
    --mu-table-playlist-browse-secondary-fg: #a5a5a5;
}
.tablePlaylistBrowse.official .spanPlaylistBy {
    display: none;
}
#tabPanePlaylistCreate .buttonPlaylistEditCreateSubmitConfirm::before {
    content: 'Yes, create the playlist';
}
.divPlaylistEdit .buttonPlaylistEditCreateSubmitConfirm::before {
    content: 'Yes, save changes';
}
.divPlaylistCreateHeader {
    width: 100%;
    margin: 1rem 0;
    padding: .5rem;
    font-weight: bold;
    text-align: center;
    background: var(--light, var(--mu-status-bg)) var(--dark, var(--mu-body-bg));
}
.divConfirmSubmitPlaylist {
    background-color: var(--light, #eeeeee) var(--dark, var(--mu-body-bg));
}
.divPlaylistInfoStatusForCreator {
    color: var(--mu-modal-playlist-info-status-creator-fg);
    background-color: var(--mu-modal-playlist-info-status-creator-bg);
    padding: 1.5rem;
}

.liPlaylistTrack {
    display: flex;
    list-style-type: none;
    border: var(--light, 1px solid black) var(--dark, 0);
    background-color: var(--light, #eee) var(--dark, var(--mu-mode-box-bg));
    margin-bottom: .4rem;
    height: 3rem;
    line-height: 2.8rem;
    padding-left: 1rem;
    cursor: grab;
}
.liPlaylistTrack div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.liPlaylistTrack .iconButtonDeleteTrack {
    color: var(--light, darkred) var(--dark, #a72f2f);
    cursor: pointer;
}

.greyedOut {
    background-color: grey !important;
    color: #ccc !important;
}
.scoreChangeHighlight {
    background-color: var(--mu-player-list-score-change-highlight);
}

.isOnPhoneIndicator {
    display: none;
    background-color: green; position: absolute; width: 2px; height: 3px; bottom: -1px; left: 0;
}
/* .isOnPhone .isOnPhoneIndicator { display: revert; } */