body {
  background-color: transparent;
  font-family: "MS UI Gothic", "Arial", sans-serif;
  width: 260px;
  margin: 10px auto;
  background: transparent;
}

main{
  width: 230px;
  margin-top: 70px;
}

.bgi{
  background-image: url(/images/radio\ \(1\).png);
  width: 400px;
  height: 450px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -153px;
  margin-top: -45px;
  position: absolute;
  z-index: 0;
}

.player {
  height: 72px;
  min-width: 120px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: #000000;
  padding-top: 5px;
  position: relative;
}

.displayname{
  position: relative;
  text-align: center;
  padding: 10px 20px 1px;
  cursor: default;
  display: table;
  margin: -10px auto 2px;
}

.play {
  margin-top: 2px;
  width: 13px;
  height: 17px;
  font-size: larger;
}

.play:hover, #volume-slider:hover {
  cursor: pointer;
}

.vol{
  display: flex;
  width: 25px;
  cursor: default;
}
.vol span{
  filter:saturate(30%);
}
.vol:hover #volume-slider {
  opacity: 1;
}

.top{
  display: flex;
  justify-content: space-between;
  width: 214px;
  height: 25px;
  gap: 5px;
  margin-left: 3%;
  margin-top: 4px;
}

#volume-slider{
  width: 50px;
  height: 25px;
  position: absolute;
  margin-top: 34px;
  margin-left: -15px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #00000000;
  opacity: 0;
  z-index: 2;
  transform: rotate(-90deg);
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  border-radius: 10px;
}
input[type=range]::-webkit-slider-thumb {
  height: 14px;
  width: 14px;
  border-radius: 25px;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  border-radius: 10px;
}
input[type=range]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 25px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  border-radius: 20px;
}
input[type=range]::-ms-fill-upper {
  border-radius: 20px;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  height: 14px;
  width: 14px;
  border-radius: 25px;
  cursor: pointer;
}

.seek-bar {
  height: 15px;
  margin: 5px;
  display: flex;
  width: 65%;
  border-radius: 10px;
  cursor: pointer;
}

.slider {
  height: 15px;
  border-radius: 10px;
  cursor: pointer;
}

.time, .max-time {
  padding-top: 3px;
  cursor: default;
}

.duration {
  display: flex;
  width: 80%;
  cursor: default;
}

.playlist-box {
  position: relative;
  display: flex;
  border-radius: 0px 0px 10px 10px;
}

.playlist {
  border-radius: 0px 0px 8px 8px;
  height: 260px;
  overflow: auto;
}

.playlist > li:hover {
  cursor: pointer;
}

.playlist > li {
  margin: 5px 0px;
  margin-bottom: 2px;
}

ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 5px 10px;
  border-radius: 0px 0px 5px 5px;
}

.credits{
  display: flex;
}

a{
  display: block;
  position: relative;
  margin-left: 182px;
  margin-top: 2px;
  text-decoration: none;
  border-bottom: dashed 1px;
  width: fit-content;
}

.cred2::before, .cred1::after{
  opacity:0;      
  -webkit-transition:opacity 0.4s;
  transition:opacity 0.4s;
  position: absolute;
  line-height: 20px;
}

.cred1{
  margin-left: 5px;
  font-size: smaller;
}

.cred2{
  font-size: smaller;
}

.cred1:hover::after{
  content:attr(title);
  width:150px;
  opacity:1;
  margin-left: 2px;
}

.cred2:hover::before{
  width:150px;
  content:attr(title);
  margin-left: -132px;
  opacity:1;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: auto;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 20px;
}