:root {
    /*--body: #314448;*/
    /*--inner-body: #1b2321;*/
    /*--header: #172527;*/
    /*--subheader: #9ccac0;*/
    /*--button: #00a77e;*/
    /*--button-hover: #0b8567;*/
    /*--button-text: #e7fff9;*/
    /*--link: #00a77e;*/
    /*--link-hover: #44e3bc;*/
    /*--link-press: #7cf7d9;*/
    /*--modal-back: #d3e8e3;*/
    /*--modal-header: #172527;*/
    --body: #303842;
    --body-text: #d7e5f5;
    --inner-body: #1b2321;
    --header: #1d2229;
    --subheader: #88a2c1;
    --header-active: #88a2c1;
    --button: #405978;
    --button-hover: #526f92;
    --button-text: #c9dcf3;
    --button-go:#784065;
    --button-go-hover:#8a4c75;
    --button-go-text:#f5bfe2;
    --button-dark:#1e262f;
    --button-dark-hover:#11161c;
    --button-dark-text:#8493a6;
    --link: #81d1f3;
    --link-hover: #c8ebf9;
    --link-press: #f5bfe2;
    --modal-back: #d9e3ef;
    --modal-header: #1d2229;
    --text-go: #81d1f3;
    --text-stop: #aaa;
}

h1, h2, h3, h4, h5, h6 {
    color:#fff;
}

.text-go {
    color:var(--text-go);
}

.text-stop {
    color:var(--text-stop);
}


body, html {
    color:var(--body-text);
    background-color:var(--body);
    font-family: Poppins, sans-serif;
    font-size:16px;
    margin:0;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    height:100%;
    min-width:100%;
}

input, select, textarea, button, a.button, a.button:visited {
    font-family: Poppins, sans-serif;
    font-size:1rem;
    padding:8px 12px;
    background-color:var(--button);
    color:var(--button-text);
    border:1px solid var(--button-text);
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color .2s;
    height:43px;
}

button, .button {
    border-bottom-width:3px;
    box-sizing: border-box;
}

input {
    background-color:var(--header);
    color:#fff;
    outline:none;
    border-width:0 0 2px 0;
}

input:focus, textarea:focus {
    outline:none;
    box-shadow: 0 0 4px var(--button-text);
}

button.large, a.button.large {
    font-size:1.4rem;
    height:53px;
}

a.button {
    display:inline-block;
    box-sizing: border-box;
}

button:hover, a.button:hover {
    background-color:var(--button-hover);
}

button:active:not(.disabled), a.button:active:not(.disabled) {
    text-shadow: rgba(255, 255, 255, 0.7) 0 0 5px;
}

button.sm {
    font-size:0.9rem;
    padding:6px 9px;
    height:39px;
}

button.off, button.disabled {
    background-color:#777;
    color:#ddd;
    border-color:#ccc;
}

button.off:hover, button.disabled:hover {
    background-color:#666;
    color:#ccc;
}

button.cancel {
    background-color:var(--button-dark);
    color:var(--button-dark-text);
    border-color:var(--button-dark-text);
}

button.cancel:hover {
    background-color:var(--button-dark-hover);
}

button.on {
    background-color:var(--button-go);
    color:var(--button-go-text);
    border-color: var(--button-go-text);
}

button.on:hover {
    background-color:var(--button-go-hover);
}

body.inner {
    background-color:var(--inner-body);
}

text.on {
    color:;
}

h1.display-6 {
    margin-bottom: 0;
}

button.modal-button {
    font-size:0.9rem;
    padding:6px 10px;
}

.body-container {
    width:100vw;
    overflow: auto;
    min-height:100vh;
}

.inner-container {
    width:100%;
    height:100%;
    background-color:var(--inner-body);
    color:#fff;
}

.body-content {

}

.hiw-container {
    margin-top:1rem;
}

.topbar {
    background-color:var(--header);
    color:#fff;
    padding:0;
    margin-bottom:2rem;

    border-bottom: 1px solid #000;
}

#topbar a.nav-link {
    /*background-color:#000;*/
    border-radius: 0;
    padding:1rem 1.4rem;
}

.topbar .container-fluid {
    padding:0;
}

.menu-button-container {
    position:absolute;
    top:-3.2rem;
    right:.6rem;
}

.menu-button {
    padding:.8rem 1.2rem;
    background-color:var(--button);
    color:var(--button-text);
    border-radius:4px;
    border:1px solid var(--button-text);
    border-bottom-width: 3px;
    box-sizing: border-box;
}

.menu-container {
    position:relative;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5);
}

a, a:visited, a.nav-link, a.nav-link:visited {
    color:var(--link);
    text-decoration: none;
}

a:hover, a:focus, a:active
{
    color:var(--link-hover);
}

a:active:not(.disabled) {
    color: var(--link-press);
    text-shadow: rgba(255, 255, 255, 0.5) 0 0 3px;
}

a.nav-link:hover, a.nav-link:focus, a.nav-link:active {
    color:var(--link-hover);
    background-color:rgba(0, 0, 0, 0.2);
}

.navbar-nav a.nav-link.active {
    background-color:var(--button);
    color:#fff;
    border-radius: 4px;
}

.title {
    color:var(--header);
}

.subtitle {
    color:var(--subheader);
}

.subtitle strong {
    color:var(--subheader);
}

.inner-page {
    width:100%; height:100%; border:none; overflow:visible;
}

.playlist-items {
    margin-top:1rem;
    display:flex;
    flex-direction: column;
    gap:.5rem;
}

.playlist-cover {

}

.playlist-cover img {
    border-radius: 4px;
    border:1px solid var(--button-text);
    box-sizing: border-box;
}

.playlist-item {
    display:flex;
    flex-direction: row;
    gap:.5rem;
}

.playlist-data {
    display:flex;
    flex-direction: column;
    flex-grow:1;
    gap:.2rem;

    /* HACK FROM https://codepen.io/psyrendust/pen/ZWPxmM/ */
    &, & > * {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
}

.artist-buttons {
    display:flex;
    align-items: center;
}

.artist-items {
    margin-top:1rem;
    display:flex;
    flex-direction: column;
    gap:.5rem;
}

.artist-item {
    display:flex;
    flex-direction: row;
    gap:.5rem;
}

.artist-cover {

}

.artist-cover img {
    border-radius: 4px;
    border:1px solid var(--button-text);
    box-sizing: border-box;
}

.artist-data {
    display:flex;
    flex-direction: column;
    flex-grow:1;
    gap:.2rem;

/* HACK FROM https://codepen.io/psyrendust/pen/ZWPxmM/ */
    &, & > * {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
}

.artist-buttons {
    display:flex;
}

.search-input {
    width:100%;
}

#searcher {
    margin-top:.5rem;
}

#results {
    min-height:6rem;
    margin-bottom:2rem;
}

#modal-search-input {
    width:100%;
}

#modal-search-result {
    margin:1rem 0;
}

.modal {
    backdrop-filter: blur(2px);
}

.modal-dialog .modal-header {
    background-color:var(--modal-header);
    color:#fff;
    display:flex;
    justify-content:space-between;
    border:none;
    padding:6px;
    padding-left:10px;
    border-radius: 0;
}

.modal-dialog .modal-content {
    background-color:var(--body);
    color:#fff;
    display:flex;
    justify-content:space-between;
    padding:0;
    border-radius: 4px;
    overflow: hidden;
    border:1px solid #000;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
    max-height:calc(100vh - 4rem);
}

.modal-dialog-scrollable {
    height:100vh;
}

.modal-dialog .modal-body {

    font-size:0.9rem;
}

.modal-footer {
    border:none;
}

.stats-container {
    display:flex;
    flex-direction: column;
    gap:5px;
    margin-bottom:3rem;
}

.stats-row {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.stats-label {
    min-width: 150px;
}

.stats-meter {
    display:flex;
    flex-grow: 1;
    position:relative;
    background-color:var(--header);
    overflow:hidden;
    border-radius: 10px;
    height:20px;
}

.stats-bar {
    position:absolute;
    width:0;
    top:0;
    left:0;
    height:100%;
    border-radius: 10px;
    background-color:var(--button);
    transition: width 1s ease-in-out;
}

#cover {
    background-image: url('../images/cover-1.jpg');
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    height:12rem;
    text-shadow: #000 2px 2px 10px;
    color:#fff !important;
}

#cover.cover-1 {
    background-image: url('../images/cover-1.jpg');
}
#cover.cover-2 {
    background-image: url('../images/cover-2.jpg');
}
#cover.cover-3 {
    background-image: url('../images/cover-3.jpg');
}
#cover.cover-4 {
    background-image: url('../images/cover-4.jpg');
}
#cover.cover-5 {
    background-image: url('../images/cover-5.jpg');
}
#cover.cover-6 {
    background-image: url('../images/cover-6.jpg');
}
#cover.cover-7 {
    background-image: url('../images/cover-7.jpg');
}
#cover.cover-8 {
    background-image: url('../images/cover-8.jpg');
}

@media screen and (min-width: 800px) {
    #cover {
        height:21rem;
        font-size:24px;
    }
}

.loader-container {
    width:100%;
    min-height: 100px;
    display:flex;
    justify-content: center;
    align-items: center;
}

/* HTML: <div class="loader"></div> */
/*
.loader {
    width: 45px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(var(--link) 0 0);
    background:
            var(--c) 0%   50%,
            var(--c) 50%  50%,
            var(--c) 100% 50%;
    animation: l7 1s infinite linear;
}
@keyframes l7 {
    0%  {background-size: 20% 50% ,20% 50% ,20% 50% }
    20% {background-size: 20% 20% ,20% 50% ,20% 50% }
    40% {background-size: 20% 100%,20% 20% ,20% 50% }
    60% {background-size: 20% 50% ,20% 100%,20% 20% }
    80% {background-size: 20% 50% ,20% 50% ,20% 100%}
    100%{background-size: 20% 50% ,20% 50% ,20% 50% }
}

 */


/**
  * equalizer
  *
  * @author jh3y - jheytompkins.com
*/
.equalizer {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(5, 15px);
    height: 40px;
    /*border-bottom:2px solid var(--link);*/
}
.equalizer div {
    background: linear-gradient(0deg, var(--button-go), var(--button-go-text));
    height: 100%;
    animation: equalize 2.8s infinite;
}

.equalizer div:nth-child(1) {
    animation-delay: -0.34s;
}
.equalizer div:nth-child(2) {
    animation-delay: -0.09s;
}
.equalizer div:nth-child(3) {
    animation-delay: -0.71s;
}
.equalizer div:nth-child(4) {
    animation-delay: -0.59s;
}
.equalizer div:nth-child(5) {
    animation-delay: -0.18s;
}

/*.equalizer div:nth-child(1) {*/
/*    animation-delay: -0.6s;*/
/*}*/
/*.equalizer div:nth-child(2) {*/
/*    animation-delay: -0.45s;*/
/*}*/
/*.equalizer div:nth-child(3) {*/
/*    animation-delay: -0.3s;*/
/*}*/
/*.equalizer div:nth-child(4) {*/
/*    animation-delay: -0.15s;*/
/*}*/
/*.equalizer div:nth-child(5) {*/
/*    animation-delay: -0.0s;*/
/*}*/

@keyframes equalize {
    0%, 100% { clip-path: inset(5% 0 0 0); }
    10% { clip-path: inset(90% 0 0 0); }
    20% { clip-path: inset(40% 0 0 0); }
    30% { clip-path: inset(100% 0 0 0); }
    40% { clip-path: inset(0% 0 0 0); }
    50% { clip-path: inset(40% 0 0 0); }
    60% { clip-path: inset(15% 0 0 0); }
    70% { clip-path: inset(70% 0 0 0); }
    80% { clip-path: inset(10% 0 0 0); }
    90% { clip-path: inset(80% 0 0 0); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 0 var(--button-text); }
    10% { box-shadow: 0 0 8px var(--button-text); }
}

/*@keyframes equalize {*/
/*    0%, 100% {*/
/*        clip-path: inset(5% 0 0 0); }*/
/*    10% {*/
/*        clip-path: inset(25% 0 0 0); }*/
/*    20% {*/
/*        clip-path: inset(80% 0 0 0); }*/
/*    30% {*/
/*        clip-path: inset(50% 0 0 0); }*/
/*    40% {*/
/*        clip-path: inset(100% 0 0 0); }*/
/*    50% {*/
/*        clip-path: inset(20% 0 0 0); }*/
/*    60% {*/
/*        clip-path: inset(45% 0 0 0); }*/
/*    70% {*/
/*        clip-path: inset(10% 0 0 0); }*/
/*    80% {*/
/*        clip-path: inset(30% 0 0 0); }*/
/*    90% {*/
/*        clip-path: inset(90% 0 0 0); }*/
/*}*/