@font-face {
  font-family: 'player';
  src:
    url('./fonts/player.ttf?cxp7hr') format('truetype'),
    url('./fonts/player.woff?cxp7hr') format('woff'),
    url('./fonts/player.svg?cxp7hr#player') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'player' !important;
  font: normal normal normal 18px/1 player;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
  content: "\ea1c";
}
.icon-pause:before {
  content: "\ea1d";
}
.icon-backward:before {
  content: "\ea1f";
}
.icon-forward:before {
  content: "\ea25";
}
.icon-volume-up:before {
  content: "\ea27";
}
.icon-volume-off:before {
  content: "\ea29";
}

/* Custom CSS for Audio Player */
/*
@media (min-width: 512px) {
  .player-container {
    max-width: 512px;
    width: 100%;
    margin: 0 auto;
    background-color: red;
  }
}
*/
.player-container {
  width: 100%;
  margin: 0 auto;
  display: flex; 
  height: 100vh;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: 100%;
  /*border: 5px solid yellow;*/
  background-color: black;
  box-shadow: inset 0px 0px 10px #d4d48c, 0px 0px 10px #d4d48c;
}

#cover_playlist {
  display: flex;
  @media (orientation: landscape) {
    flex-wrap: nowrap;
    flex-direction: row;
  }
  @media (orientation: portrait) {
    flex-direction: column;
    align-items: center;
  }
  width: 100%;
  height: calc(100% - 40px);
 /* border: 5px solid green;*/
}
/* Playlist  CSS */
#playlist {
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 5px;
  color: #ffffff;
  /*border: 5px solid red;*/
  overflow: auto;
  text-align: left;
  flex: 1;
  background-color: #000;
}
audio {
  width: 100%;
  display: none;
  margin-bottom: -4px;
}

/* Controls - Player  CSS */
.controlBar {
	/*position: relative;*/
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	padding: 0;
	background-color: black; /*rgba(26,26,26,.8);*/
	--height: 40px;
	--width: 98%;
	width: var(--width);
	height: var(--height);
  top: 0;
  border: 1px solid #393919;
  vertical-align: top;
  
  position: sticky;
  top: 0;
  z-index: 888;
}

.buttonContainer {
  width: calc(var(--width) * 0.09);
  display:flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0px 12px;
  background-color: #312c16;
  border: 1px solid #393919;
}
.bt {
  border: 1px solid #393919;
  padding: 0 2px 0 2px;
  background-color: #312c16;
  margin: 2px;
}

.player-button {
	color: white;
}

@media (hover:hover) {
    .buttonContainer:hover > .player-button {
        color:#ff5647;
    }
}

#playButton {
    margin-left: 0px;
    margin-right: 0px;
}

#progressBar {
    width:0%;
    height: calc(var(--height) * 0.25);
    background: #ff5647;
    margin: 0px;
    flex: 1;
   /* border: 1px solid red;*/
}

#progressRail {
    background: #F7F1C0;
    margin: 0px 4px;
}

#volumeBar {
    height: calc(var(--height) * 0.25);
    background: #ff5647;
    margin: 0px;
}

#volumeRail { /* range-track */
    background: #F7F1C0;
    margin: 0px 12px 0px 0px;
}

.currentTime {
    /*width: calc(var(--width) * 0.12);*/
    text-align: right;
    margin:2px;
    user-select: none;
    color:white;
    font-family: sans-serif;
    font-size:12px;
    /*border: 1px solid red;*/
    white-space: nowrap;
}

.totalTime{
    /*width: calc(var(--width) * 0.12);*/
    margin:2px;
    user-select: none;
    color:#cfcfe1c9;
    font-family: sans-serif;
    font-size:12px;
    /*border: 1px solid green;*/
    white-space: nowrap;
    display: none;
}
.pl_line {
  display: flex;
  width: 100%;
  margin-bottom: 5px;
  height:40px;
  border: 1px solid #393919;
  background-color: #000;
  flex-wrap: wrap;
  flex-basis: auto;
  justify-content: space-between; 
}
.pl_line:hover {
background-color: #181407;
}
.pl_info {
  display: flex;
  flex-wrap: wrap;
  width: 80px;
  font-size: 12px;
  color: #F0E68C;
  margin-right: 5px;
  margin-left: auto;
  border-left:  1px solid #393919;
  align-content: flex-start;
  justify-content: right;
}
.pl_info:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
}
.pl_info a {
  cursor: pointer;
  text-decoration: none;
  color: #F0E68C;
}

.playlist-item {
  position: relative;
  display: inline-block;
  padding: 2px 2px;
  margin: 1px 5px;
  text-decoration: none;
  height:32px;
  flex: 1;
  color: #F0E68C;
  white-space: pre;
  overflow: hidden;
  font-family: Arial, sans-serif;
  @media (min-width: 320px) {
    background-size: 32px, 32px;
    background-repeat: no-repeat;
    background-position: left center;  
    padding-left: 40px;
    font-size: 16px;
  }
  @media (max-width: 320px) and (orientation: portrait) {
    background-image: none !important;
    font-size: 12px;
  }

}
.playlist-item:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.playlist-item.active {
    color: #F7F1C0;
    border: 1px solid #F7F1C0;
    background-color: #181407;
}

.playlist-item > span {
    float:right;
}
#text {
  overflow: auto;
  top: 0;
  position: fixed;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: #000;
  color: #F0E68C;
  padding: 0 20px 100px 20px;
  z-index: 999;
  font-family: Arial, sans-serif;
  font-size: 12px;
  /*overflow: scroll;*/
}

#cover {
  display: flex;
  flex-direction: column-reverse;
  text-align: center;
  padding: 5px; 
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url('https://av77.ru/player/assets/loading.gif');
    @media screen and (min-width: 800px) and (orientation: landscape) {
      @media (min-height: 450px) {
        background-size: 400px, 400px;
        width: 400px;
      }
      @media (min-height: 350px) and (max-height: 450px) {
        background-size: 300px, 300px;
        width: 300px;
      }
      @media (max-height: 350px) {
        background-size: 200px, 200px;
        width: 200px;
      }
    }
    @media screen and (min-width: 700px) and (max-width: 800px) and (orientation: landscape) {
      @media (min-height: 350px) {
        background-size: 300px, 300px;
        width: 300px;
      }
      @media (max-height: 350px) {
        background-size: 200px, 200px;
        width: 200px;
      }
    }
    @media screen and (max-width: 700px) and (orientation: landscape) {
        background-size: 200px, 200px;
        width: 200px;
    }
    
    
    @media screen and (min-width: 420px) and (orientation: portrait) {
      background-size: 400px, 400px;
      width: 100%;
      height: 400px;
    }
    @media screen and (min-width: 320px) and (max-width: 420px)and (orientation: portrait) {
      background-size: 300px, 300px;
      width: 100%;
      height: 300px;
    }
    @media screen and (max-width: 320px) and (orientation: portrait) {
      background-size: 200px, 200px;
      width: 100%;
      height: 200px;
    }
  /*border: 5px solid gray;*/
}
#buttonPlay {
  /*width: 70px;*/
  padding: 20px 30px 20px 30px;
  margin: auto;
  font-size: 24px;
  color: black;
  /*box-shadow: inset 0px 0px 10px #d4d48c, 0px 0px 10px #d4d48c;*/
  cursor: pointer;
  text-shadow: -2px 0 #d4d48c, 0 2px #d4d48c, 2px 0 #d4d48c, 0 -2px #d4d48c;
  opacity: 100%;
}
#cover_info {
  background-color: rgba(0, 0, 0, 0.5); /* чёрный с 50% прозрачностью */
  font-family: Arial, sans-serif;
  top: 50%;
  left: 50%;
}
#buttonPlay:hover {
  color: #d27d19;
  opacity: 60%;
}