/* Global */

:root {
    --usaRed: #cc2127;
    --usaBlue: #21449d;
    --usaLightBlue: #4161b3;
    --usaLighterBlue: #627cbf;
    --usaLighterLighterBlue: #E6ECFA;
    --usaExtraLightBlue: #F2F6FC;
    --usaSuperLightBlue: #F5F7FC;

    --boldlyRed: rgb(148, 2, 2);

    --monetaryGreen: #118C4F;

/*     --maxWidthDesktop: 1300px; */
    --maxWidthDesktop: 1000px;
    --maxWidthMobile: 100%;

    --pageBackgroundColor: white;
/*     --pageBackgroundColor: rgba(200, 200, 200, 0.3); */
    --headerBackgroundColor: white;
    --contentBackgroundColor: transparent;
    --footerBackgroundColor: rgba(230, 230, 230, 1);;
}

body {
    /*     font-family: 'Carrois Gothic', Arial, sans-serif; */
    /*     font-family: sans-serif; */
    background-color: var(--pageBackgroundColor);
    margin: 0 auto;
    max-width: var(--maxWidthDesktop);
}

* {
    font-family: sans-serif;
    font-size: 16px;
    box-sizing: border-box;
}

p {
    line-height: 1.5;
/*     max-width: 40rem; */
}

/* Header */

.header {
    background-color: var(--headerBackgroundColor);
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
}

.header > .logo {
    flex: 0 0 auto;
}


body > .header > .title {
    flex: 1 1 0;
    font-size: 200%;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

body > .header > .buttons {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

body > .header > .buttons > a {
   margin: 0.25rem;
}

body > .header > .buttons > a > img {
    height: 32px;
}


/* Content */

.content {
    margin: 0 auto;
    padding: 0.5rem;
    background-color: var(--contentBackgroundColor);
}

/* Footer */

.footer {
    margin: 2rem auto 0 auto;
    padding: 1rem;
    background-color: var(--footerBackgroundColor);
}

.footer > .copyright {
    text-align: center;
    font-size: 90%;
}

/* Audio player */

audio {
    display: block;
    width: 100%;
    border-radius: 0;
}

.audio-player {
    height: 500px;
    display: flex;
    flex-direction: column;
}

.audio-player > .player-row {
/*     flex: 1 1 0; */
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
}

.audio-player > .control-row {
/*     flex: 1 1 0; */
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
}


.audio-player > .stats-row {
/*     flex: 1 1 0; */
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
}


.well {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(100, 100, 100);
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.well > .title {
    flex: 0 0 auto;
    /* transform: rotate(-90deg); */
    display: flex;
    flex-direction: row;
    align-items: center;
/*     border-bottom: 1px solid rgb(100, 100, 100); */
    padding: 0.25rem;
    text-align: center;
    background-color: rgb(150,150, 150);
    color: white;
    font-weight: bold;
}

/* .well > .title > .content { */
/*     transform: rotate(-90deg); */
/*     height: 10rem; */
/* } */


.well > .body {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}


.audio-player  .current-track {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
/*     border: 1px solid rgb(100, 100, 100); */
/*     border-radius: 0.5rem; */
/*     margin-top: 1rem; */
}

.audio-player  .current-track .row {
   display: flex;
   flex-direction: row;
   padding: 0.25rem;
}

/*.audio-player  .current-track .row.title {
    justify-content: center;
    font-weight: bold;
    color: rgb(100, 100, 100);
}*/

.audio-player  .current-track .row > .label {
    flex: 0 0 7rem;
    text-align: right;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-weight: bold;
    color: rgb(150, 150, 150);
}

.audio-player  .current-track .row > .value {
    flex: 1 1 0;
}

/* controls */

.audio-player > .control-row > .play-button {
    flex: 0 0 auto;
}

.audio-player > .control-row > .pause-button {
    flex: 0 0 auto;
}

.audio-player > .control-row > .timeline {
    flex: 1 1 0;
}

.audio-player > .control-row > .volume {
    flex: 0 0 auto;
}

.audio-player > .stats-row > .timestamp {
    flex: 1 1 0;
    text-align: center;
    font-family: monospace;
}

.audio-player .button {
    padding: 0.25rem;
    position: relative;
    background-color: white;
    border: 1px silver solid;
    border-radius: 0.25rem;
}
.audio-player .button.friend-right {
    border-radius: 0.25rem 0 0 0.25rem;
    border-right: none;
}
.audio-player .button.friend-left {
    border-radius: 0 0.25rem 0.25rem 0;
    border-left: none;
}

.button.friend-right + .button.friend-left {
   border-left: 1px silver solid;
}

.audio-player .button:hover {
    background-color: silver;
}

.audio-player .button:active {
    background-color: aqua;
}

.audio-player .button.disabled {
    background-color: silver;
    color: gray;
}



.audio-player .button.disabled:hover {
    background-color: white;
}

.audio-player .button > .tooltip {
    display: none;
    position: absolute;
    z-index: 10;
    width: 10rem;
    padding: 0.25rem;
    border: 1px solid gray;
    border-radius: 0.25rem;
    background-color: white;
}

.audio-player .button > .tooltip.show {
    display: block;
    left: 0;
    top: calc(100% + 0.25rem);
/*     left: 2rem; */
}

.audio-player .control-row > .timeline {
    flex: 3 1 0;
    background-color: rgba(220, 220, 220, 1);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
/*     border-radius: 1rem; */
/*     margin-left: 0.25rem; */
/*     margin-right: 0.25rem; */
}

.audio-player .control-row > .timeline > .value {
    z-index: 10;
}

.audio-player .control-row > .timeline > .durationValue {
    position: absolute;
    right: 0.5rem;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.audio-player .control-row > .timeline > .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(180, 180, 180, 1);
    border-radius: inherit;
/*    border-top-left-radius: inherit;
    border-top-right-radius: none;
    border-bottom-right-radius: none;
    border-bottom-left-radius: inherit;*/
}

.audio-player .control-row > .volume {
    flex: 1 1 0;
    background-color: rgba(220, 220, 220, 1);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
/*     border-radius: 1rem; */
/*     margin-left: 0.25rem; */
/*     margin-right: 0.25rem; */
}


.audio-player .control-row > .volume > .value {
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.audio-player .control-row > .volume > .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(180, 180, 180, 1);
    margin: 0;
}

/* Audio controls */

/* playlist - now flex table */

.playlist {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.playlist > .header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;

    font-weight: bold;
    color: rgba(150, 150, 150);
}

.playlist > .body {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
}

.playlist > .body > .body-row {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    background-color: rgb(230, 230, 230);
    padding: 0.5rem;
}
.playlist > .body > .body-row + .body-row {
/*     margin-top: 1rem; */
}

.playlist > .body > .body-row:hover {
    background-color: rgb(210, 210, 210);
    cursor: pointer;
}

.playlist .body-row.selected {
    background-color: rgb(200, 200, 200);
}

/* specific columns */

.playlist .timestamp {
    flex: 1 1 0;
    padding: 0.25rem;
}

.playlist .body-row > .timestamp > button {
    width: 100%;
    font-family: monospace;
}

.playlist .tracknum {
    flex: 0 0 2rem;
    padding: 0.25rem;
}

.playlist .title {
    flex: 1 1 0;
    padding: 0.25rem;
}

.playlist .artist {
    flex: 1 1 0;
    padding: 0.25rem;
}

/* timeline list */

.timeline .timestamp button.selector-button {
    cursor: pointer;
}

/* grid */

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

.grid .row {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
}

.grid .col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.grid .col.-span-1 {
    flex: 1 1 0;
}

.grid .col.-span-2 {
    flex: 2 1 0;
}

.grid .col.-span-3 {
    flex: 3 1 0;
}
.grid .col.-span-4 {
    flex: 4 1 0;
}
/* styling for specific areas of the page */

.navigation {
    background-color: gray;
    align-items: flex-end;
    justify-content: center;
}


.main-image {
}

.audio-player-container {
/*     background-color: yellow; */
}

.artist-list {
    background-color: aqua;
}

/* class pages */

.header > .class {
    flex: 0 0 auto;
    font-style: italic;
    font-size: 200%;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    border-right: 3px solid rgb(200, 200, 200);
}

.link {
    display: inline-block;
    font-size: 150%;
    padding: 1rem;
    margin:  0 2rem;
    border: 2px solid var(--usaBlue);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.link:hover {
    background-color: rgb(220, 220, 220);
}

.link a {
    font-size: 130%;
}