/*
 * CSS Name: player
 * Plugin URI:
 * Description: audio player - frontend 
 * Version: 2.2.0
 * Requires at least: 
 * Requires PHP: 
 * Author: Tomáš Černý
 * Author URI: https://www.navoru.cz
 * License:
 * License URI:
 */

:root {
    --album-background-color: 119, 1, 123;
    --album-background-color-opacity: 1;
    --album-text-color: 254, 236, 254;
    --album-text-color-opacity: 1;
    --album-text-shadow: none;
    --album-coverimage-border: none;
    --player-sm-margin: 1rem;
    --player-lg-margin: 2rem;
    --player-background-color: 123, 9, 127;
    --player-background-color-opacity: 1;
    --player-background-controls-color: 72, 4, 74;
    --player-background-controls-color-opacity: 0.6;
    --player-text-color: 255, 255, 255;
    --player-text-color-opacity: 1;
    --player-subtext-color: 210, 210, 210;
    --player-subtext-color-opacity: 1;
    --player-highlight-color: 242, 179, 243;
    --player-highlight-color-opacity: 0.4;
    --player-text-shadow: 0 0 0.5rem srgba(0, 0, 0, 0.5);
    --player-prog_back-color1: rgba(32, 32, 32, 0.5);
    --player-prog_back-color2: rgba(132, 132, 132, 0.3);
    --player-skin: none;
}

.album-colors-olive {
    --album-background-color: 1, 34, 27;
    --album-text-color: 191, 235, 194;
    --album-text-shadow: 0 0 0.5rem rgba(210, 253, 212, 0.5);
    
    
    --player-background-color: 11, 93, 15;
    --player-background-controls-color: 5, 41, 7;
    --player-highlight-color: 173, 235, 177;
}

.album-colors-blackie {
    --album-background-color: 0, 0, 0;
    --album-text-color: 235, 242, 255;
    --album-coverimage-border: 2px solid #ffffff;
    
    --player-background-color: 38, 18, 94;
    --player-background-controls-color: 20, 10, 52;
    --player-highlight-color: 177, 170, 200;
}

.album-colors-redie {
    --album-background-color: 0, 0, 0;
    --album-text-color: 254, 241, 236;
    --album-text-shadow: 0 0 0.5rem rgba(254, 16, 19, 0.5), 0 0 1rem rgba(254, 16, 19, 0.5);
    
    --player-background-color: 160, 16, 23;
    --player-background-controls-color: 87, 7, 10;
    --player-highlight-color: 243, 121, 127;
}

.album-colors-brownie {
    --album-background-color: 51, 0, 0;
    --album-text-color: 255, 241, 235;
    
    --player-background-color: 130, 42, 0;
    --player-background-controls-color: 72, 23, 0;
    --player-highlight-color: 251, 148, 97;
}
body{
    margin:0;
    padding:0;
    /*background-color: orangered;*/
    background-color: rgba(var(--album-background-color), var(--album-background-color-opacity));
}
.cid-player-header {
    padding: 10px;
    /*background-color: grey;*/
}
.cid-player-header .header-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    /*align-items: stretch;*/
    padding: 10px;
    color: rgba(var(--album-text-color), var(--album-text-color-opacity));
    background-color: rgba(var(--album-background-color), var(--album-background-color-opacity));
    /*background-color: orange;*/
}
.cid-player-header .header-wrap .header-img-wrap{
    padding: 10px;
    max-width: calc(20rem + 20rem);
}
.cid-player-header .header-wrap .header-img-wrap img {
    width: 100%;
    height: auto;
    border: var(--album-coverimage-border);
    border-radius: 5%;
    /*background-color: lightgreen;*/
}
.cid-player-header .header-wrap .header-text-wrap{
    display: flex;
    flex-flow: column nowrap;
    max-width: 40rem;
    padding: 10px;
    /*background-color: pink;*/
}
.cid-player-header .header-wrap .header-text-wrap .header-text{
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    padding: 10px;
    overflow-wrap: break-word;
    text-align: center;
    text-wrap: pretty;
    font-family: 'CoreRhino45Regular';
    font-size: 1.5rem;
    text-shadow: var(--album-text-shadow);
    /*background-color: blue;*/
}
.cid-player-header .header-wrap .header-text-wrap .header-text span{
    padding: 5px;
}
.cid-player-header .header-wrap .header-text-wrap .header-playlists-list{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
    scrollbar-color: rgba(var(--player-highlight-color), var(--player-highlight-color-opacity)) rgba(var(--player-background-color), var(--player-background-color-opacity));
    scrollbar-width: thin;
    /*background-color: yellowgreen;*/
}
.cid-player-header .header-wrap .header-text-wrap .header-playlists-list div{
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    position: relative;
    text-align: center;
    max-width: 7rem;
    margin: 0 5px 0 5px;
    /*background-color: yellow;*/
}
.cid-player-header .header-wrap .header-text-wrap .header-playlists-list div img{
    width: 100%;
    border: var(--album-coverimage-border);
}
.cid-player-header .header-wrap .header-text-wrap .header-playlists-list div span{
    display: inline-flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-shadow:0 0 2px rgba(255, 255, 255, 0.6), 0 0 6px rgba(255, 255, 255, 0.3);
    scrollbar-color: rgba(var(--player-highlight-color), var(--player-highlight-color-opacity)) rgba(var(--player-background-color), var(--player-background-color-opacity));
    scrollbar-width: thin;
    font-family: 'CoreRhino45Regular';
    font-size: 1.5rem;
    /*background-color: rgba(128, 16, 41, 0.3);*/
}
.cid-player-header .header-wrap .header-text-wrap .header-playlists-list div span a{
    color: rgba(var(--album-text-color), 0.2);
    text-decoration: none;
}
.cid-player-header .header-wrap .header-text-wrap .header-playlists-list div span a:hover{
    color: rgba(var(--album-text-color), 1);
}
/* ---- Fluid typography for mobile devices ---- */
/* 1.4 - font scale ratio ( bootstrap == 1.42857 ) */
/* 100vw - current viewport width */
/* (48 - 20)  48 == 48rem == 768px, 20 == 20rem == 320px(minimal supported viewport) */
/* 0.65 - min scale variable, may vary */
@media (max-width: 768px) {
  .header-text-style{
    font-size: 1.2rem;
    font-size: calc( 1.175rem + (1.5 - 1.175) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (1.175rem + (1.5 - 1.175) * ((100vw - 20rem) / (48 - 20))));
  }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 0.5;
    }
    20% {
        -webkit-transform: rotate(100deg);
        transform: rotate(100deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 1;
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 0.5;
    }
}

@keyframes simple_rotation {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.cid-player .simple-rotation:before {
    -webkit-animation-name: simple_rotation;
    animation-name: simple_rotation;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    animation-timing-function: linear;
}
.cid-player .mdi-action-cached:before{
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    animation-timing-function: linear;
}

.cid-player .mdi-av-play-arrow, .cid-player .mdi-av-pause, .cid-player .no-animation  {
    -webkit-animation-name: none;
    animation-name: none;
}

.cid-player {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    background-color: rgba(var(--album-background-color), var(--album-background-color-opacity));
    /*background-color: violet;*/
}

.cid-player .tmc-audio-player:before {
    content:"";
    background-image: var(--player-skin);
    width: 100%;
    height: 100%;
    border-radius: 40px;
    /*background-color: rgba(0, 0, 0, 0.8);*/
    z-index: -1;
    filter: blur(10px) opacity(0.85);
    /*opacity: 0.5;*/
    position:absolute;
}
.cid-player .tmc-audio-player {
    /*max-width: 40rem;*/
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    font-size: 14px;
    font-family: "CoreRhino35Light";
    color: rgba(var(--player-text-color), var(--player-text-color-opacity));
    border-radius: 40px;
    overflow: hidden;
    /*background-color: orange;*/
    background-color: rgba(var(--player-background-color), var(--player-background-color-opacity));
    position: relative;
    z-index: 0;
}

.cid-player .tmc-audio-player .audio-display {
  /*overflow: hidden;*/
    max-height: 10rem;
    margin: var(--player-lg-margin) var(--player-lg-margin) var(--player-sm-margin) var(--player-lg-margin);
    /*padding: 15px 20px 15px 20px;*/
    transition: max-height 0.5s ease-in-out;
    /*background-color: gray;*/
}
.cid-player .tmc-audio-player .audio-album{
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-stretch;
    /*background-color: lightgray;*/
 }
.cid-player .tmc-audio-player .audio-album .audio-cover {
  margin-right: 3px;
  flex-grow: 0;
}
.cid-player .tmc-audio-player .audio-album .audio-cover img {
  max-width: 6rem;
  min-width: 5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  border-radius: 5px;
}
.cid-player .tmc-audio-player .audio-album .audio-info {
    flex-grow: 2;
    display: flex;
    flex-flow: column wrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: 3px;
    scrollbar-color: rgba(var(--player-highlight-color), var(--player-highlight-color-opacity)) rgba(var(--player-background-color), var(--player-background-color-opacity));
    scrollbar-width: thin;
    /*background-color: orange;*/
 }
.cid-player .tmc-audio-player .audio-album .audio-info .audio-title {
  font-size: 120%;
  display: block;
  flex-grow: 0;
  font-weight: bold;
}
.cid-player .tmc-audio-player .audio-album .audio-info .audio-artist {
  font-size: 90%;
  display: block;
  flex-grow: 0;
  color: rgba(var(--player-subtext-color), var(--player-subtext-color-opacity));
}
.cid-player .tmc-audio-player .audio-album .audio-info .audio-time-display {
    display: inline-block;
    margin-top: auto;
    font-size: 105%;
    flex-grow: 0;
}
.cid-player .tmc-audio-player .audio-progress {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    flex-grow: 0;
    margin: var(--player-sm-margin) var(--player-lg-margin) var(--player-sm-margin) var(--player-lg-margin);
}
.cid-player .tmc-audio-player .audio-progress-items {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-radius: 10px;
    padding: 0 5px 0 5px;
    flex-grow: 1;
    background-image: radial-gradient(var(--player-prog_back-color1), var(--player-prog_back-color2));
}
.cid-player .tmc-audio-player .audio-progress .audio-progress-item {
    display: inline-flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    opacity: 0.1;
    cursor: pointer;
    /*background-color: black;*/
}
.cid-player .tmc-audio-player .audio-shide-wrapper{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    margin-left: 10px;
    align-items: end;
    flex-grow: 1;
    /*background-color: rosybrown;*/
}
.cid-player .tmc-audio-player .audio-controls {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: var(--player-sm-margin) var(--player-lg-margin) var(--player-sm-margin) var(--player-lg-margin);
    /*background-color: greenyellow;*/
}
.cid-player .tmc-audio-player .audio-controls .audio-plause-pre-nex{
    flex-grow: 3;
    display:flex;
    flex-flow: row nowrap;
    /*background-color: brown;*/
}
.cid-player .tmc-audio-player .audio-controls .audio-plause-pre-nex .audio-plause{
   flex-grow: 3;
   /*background-color: blanchedalmond;*/
}
.cid-player .tmc-audio-player .audio-controls .audio-plause-pre-nex .audio-prev,
.cid-player .tmc-audio-player .audio-controls .audio-plause-pre-nex .audio-next{
   flex-grow: 1;
   /*background-color: blanchedalmond;*/
}
.cid-player .tmc-audio-player .audio-controls .audio-others {
    flex-grow: 1;
    flex-flow: row nowrap;
    display: flex;
    justify-content: flex-end;
    /*background-color: yellow;*/
}
.cid-player .tmc-audio-player .audio-controls .audio-others button:is(.audio-endplay.item-inactive){
    opacity: 0.4;
}

.cid-player .tmc-audio-player .audio-controls .audio-others button:is(.audio-shidelyrics):before {
    content: '\e7a8';
}
.cid-player .tmc-audio-player .audio-controls .audio-others button:is(.audio-shidelyrics.item-inactive):before {
    content: '\e78e';
}

/*.cid-player .tmc-audio-player .audio-controls .audio-plause-pre-nex button,
.cid-player .tmc-audio-player .audio-controls .audio-others button:is(.audio-endplay),*/
.cid-player .tmc-audio-player .audio-controls button,
.cid-player .tmc-audio-player .audio-shide-wrapper button{
    color: rgba(var(--player-text-color), var(--player-text-color-opacity));
    cursor: pointer;
    border-bottom: solid 5px;
    border-top: solid 5px;
    border-left: solid 0px;
    border-right: solid 0px;
    border-color: transparent;
    margin: 0.5px;
    background-color: rgba(var(--player-background-controls-color), var(--player-background-controls-color-opacity));
}
.cid-player .tmc-audio-player .audio-controls button[disabled],
.cid-player .tmc-audio-player .audio-shide-wrapper button[disabled]{
  opacity: 0.4;
  cursor: initial;
  }
.cid-player .tmc-audio-player .audio-controls button:not([disabled], .mdi-action-cached):hover,
.cid-player .tmc-audio-player .audio-shide-wrapper button:not([disabled]):hover{
  border-color: rgba(var(--player-highlight-color), var(--player-highlight-color-opacity));
}
.cid-player .tmc-audio-player .audio-lyrics-ul {
    min-height: 30%;
    max-height: 40vh;
    margin: var(--player-sm-margin) var(--player-lg-margin) var(--player-sm-margin) var(--player-lg-margin);
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: rgba(var(--player-highlight-color), var(--player-highlight-color-opacity)) rgba(var(--player-background-color), var(--player-background-color-opacity));
    scrollbar-width: thin;
    background: rgba(var(--player-background-color), 0.5);
    /*background-color: orange;*/
}
.cid-player .tmc-audio-player .audio-lyrics-li{
    color: rgba(var(--player-subtext-color), var(--player-subtext-color-opacity));
    text-shadow: var(--player-text-shadow);
    text-align: center;
    font-size: 150%;
    padding: calc(var(--player-sm-margin) * 0.5) calc(var(--player-sm-margin) * 0.25) calc(var(--player-sm-margin) * 0.5) calc(var(--player-sm-margin) * 0.25);
    /*background-color: darkgoldenrod;*/
}

.cid-player .tmc-audio-player .audio-lyrics-highlight {
    color: rgba(var(--player-text-color), var(--player-text-color-opacity));
    font-size: 170%;
  /*backdrop-filter: blur(30px) brightness(80%) contrast(120%);*/
}

.cid-player .tmc-audio-player .audio-playlist-ul {
    flex-grow: 0;
    min-height: 30%;
    max-height: 70vh;
    margin: var(--player-sm-margin) var(--player-lg-margin) var(--player-lg-margin) var(--player-lg-margin);
    scrollbar-color: rgba(var(--player-highlight-color), var(--player-highlight-color-opacity)) rgba(var(--player-background-color), var(--player-background-color-opacity));;
    scrollbar-width: thin;
    overflow-y: auto;
    display: flex;
    flex-flow: column nowrap;
    list-style: none;
    overflow-x: hidden;
    background-color: transparent;
    /*background-color: violet;*/
}
.cid-player .tmc-audio-player .audio-playlist-ul .playlist-li-wrapper{
    display: flex;
    flex-flow: row wrap;
    overflow:no-content;
}

.cid-player .tmc-audio-player .audio-playlist-ul .audio-song{
    display: flex;
    font-size: 120%;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
    overflow: hidden;
    text-shadow: var(--player-text-shadow);
    cursor: pointer;
    /*background-color: skyblue;*/
}
.cid-player .tmc-audio-player .audio-playlist-ul .song-name,
.cid-player .tmc-audio-player .audio-playlist-ul .song-desc{
    font-size: 100%;
    /*padding: 1px 2px 1px 2px;*/
    margin: 1px 2px 1px 2px;
    /*background-color: orangered;*/
    vertical-align: baseline;
}

/*
.cid-player .tmc-audio-player .audio-playlist ul li:not(.item-active):nth-child(odd) {
  backdrop-filter: brightness(0.9);
}
*/
.cid-player .tmc-audio-player .audio-playlist-ul .audio-song:hover{
    backdrop-filter: blur(50px) opacity(0.4) invert(40%);
}
.cid-player .tmc-audio-player .audio-playlist-ul span{
    border-bottom: 2px dotted transparent;
}
.cid-player .tmc-audio-player .audio-playlist-ul .item-active span:nth-child(2),
.cid-player .tmc-audio-player .audio-playlist-ul .item-active span:nth-child(3){
    border-color: rgba(var(--player-subtext-color), var(--player-subtext-color-opacity));
}
.cid-player .tmc-audio-player .audio-playlist-ul .song-desc {
  font-size: 90%;
  margin-left: 5px;
  text-shadow: var(--player-text-shadow);
  color: rgba(var(--player-subtext-color), var(--player-subtext-color-opacity));
}
.player-hide{
    display:none !important;
    margin:0 !important;
    padding: 0 !important;
 }
  .player-fullview{
    max-width: 100vw !important;
    height: 100vh !important;
 }
.cid-player .tmc-audio-player .drop {
  pointer-events: none;
}