/*
    * range css
    */
		.nf-range-track.nf-hor{
			width:100%;
			height:5px;
			background:#f5f5f5;
			position:relative;
			border: 1px solid #888;
      border-radius: 2.5px;
      margin:10px 0px;
		}
		.nf-range-track.nf-hor .nf-range-location{
			position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #797979;
  border: 2px solid #fff;
  top: 50%;
  transform: translate3d(-50%, -50%, 0px);
  box-shadow: 0px 2px 2px 1px #68686863;
		}

		.nf-range-track.nf-hor .nf-range-progress{
			position: absolute;
  height: 5px;
  left: -1;
  width: 0%;
  background: #007aff;
  border: 1px solid #0066de;
  border-radius: 2.5px;
  top: -1;

		}

		.nf-range-track:hover, .nf-range-location:hover{
			filter:brightness(0.9);
		}

		.nf-range-location:active{
			background: #007aff;
			filter:brightness(1.0);
		}

		.nf-range-track.nf-vert{
      min-height:200px;
      bottom:0;
      width:5px;
			background:#f5f5f5;
			position:relative;
			border: 1px solid #888;
      border-radius: 2.5px;
      margin:0px 10px;
		}

		.nf-range-track.nf-vert .nf-range-location{
			position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #797979;
  border: 2px solid #fff;
  left: 50%;
  bottom:0%;
  transform: translate3d(-50%, 50%, 0px);
  box-shadow: 0px 2px 2px 1px #68686863;
		}


		.nf-range-track.nf-vert .nf-range-progress{
			position: absolute;
  width: 5px;
  bottom: 0;
  height: 0%;
  background: #007aff;
  border: 1px solid #0066de;
  border-radius: 2.5px;
  left: -1;

		}



    /*
    * default theme
    */
		.nf-audio-default{
    	width:100%;
    	--main-control-color: #4c4c55;
    	--main-control-color-filter: invert(27%) sepia(13%) saturate(338%) hue-rotate(202deg) brightness(96%) contrast(86%);
    	--main-control-hover-light: #fdfdfdf7;
      --slider-control-hover-light: #fdfdfdf7;
    	--main-control-border-color: 1px solid #d5d5d9;
    	--main-slider-progress-border-color: 1px solid #34343c;
    	--main-slider-bg-color: #f3f3f3;
    	--main-font:monospace;
    	--main-text-color:#333;

    }
    
    /*
    * dark theme
    */
    .nf-audio-dark{
    	width:100%;
    	--main-control-color: #ffffff;
    	--main-control-color-filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(169deg) brightness(111%) contrast(103%);

      --main-control-hover-light: #fdfcfc45;
      --slider-control-hover-light: #fdfdfdf7;
    	--main-control-border-color: 1px solid #ffffff;
    	--main-slider-progress-border-color: 1px solid #34343c;
    	--main-slider-bg-color: #e6e6e6a1;
    	--main-font:monospace;
    	--main-text-color:#fff;

    }


    /*
    * nf player main styles
    */

    .nf-audio-player{
    	font-family:var(--main-font);
    	color:var(--main-text-color);
    }

    .nf-audio-player button{
    	background:none;
    	border:none;
    	border-radius:none;

    }
    .nf-audio-player button:hover{
    	cursor:pointer;
    	/*filter:brightness(90%);*/
    	opacity:0.9;
    }

    .nf-audio-player svg{
    	width: 100%;
    	/* #4c4c55 */
    	filter: invert(27%) sepia(13%) saturate(338%) hue-rotate(202deg) brightness(96%) contrast(86%);
    	filter:var(--main-control-color-filter);
    }

    .nf-audio-player .nf-range-track{
    	background:var(--main-slider-bg-color);
    }
     
    .nf-audio-player .nf-range-track.nf-hor .nf-range-location, .nf-audio-player .nf-range-track.nf-vert .nf-range-location{
    	background:var(--main-control-color);
    }
    .nf-audio-player .nf-range-track.nf-vert .nf-range-progress, .nf-audio-player .nf-range-track.nf-hor .nf-range-progress{
      background:var(--main-control-color);
      border:var(--main-slider-progress-border-color);
      opacity:0.4;
    }

    .nf-audio-player .nf-audio-big-play-left{
      width: 80px;
      height: 80px;
      float:left;
      box-sizing:border-box;
      border:var(--main-control-border-color);
      border-radius:3px;
      display:flex;
    	justify-content:center;
    	align-items:center;
    }

    .nf-audio-player .nf-audio-big-play-left .nf-audio-play{
    	width:100%;
    	padding:1em;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    }
    .nf-audio-player .nf-audio-big-play-left:hover{
    	background:var(--main-control-hover-light);
    }

    .nf-audio-player .nf-audio-big-play-left .nf-audio-play.nf-audio-paused svg{
    	width: 50%
    	
    }
    .nf-audio-player .nf-audio-big-play-left .nf-audio-play svg{
    	width:40%;
    	
    }



   .nf-audio-player .nf-audio-controls-right{
    	width:calc(100% - 100px);
      height:100px;
      float:left;
      box-sizing:border-box;
      padding:0 1em;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }



    .nf-audio-player .nf-audio-controls-right .nf-audio-progress{
    	width:100%;
    	display:flex;
    	align-items:center;
    }

    .nf-audio-player .nf-audio-controls-right .nf-audio-progress .nf-audio-progress-bar{
     /* width:calc(100% - 14ch);*/
     flex-grow:1;

    }



    .nf-audio-player .nf-audio-controls-right .nf-audio-progress .nf-audio-time-display{
    	width:14ch;
    	font-family:monospace;
    	text-align:right;
    }


    .nf-audio-player .nf-audio-controls-right .nf-audio-next-prev-vol{
      margin-top: 0.5em;
  position: relative;
  display: flex;
  justify-content: end;
  gap: 0.5em;

    }

    .nf-audio-player .nf-audio-controls-right .nf-audio-next-prev-vol .nf-audio-current-track-name{
    	flex-grow:1;
    	text-align:left;
    }

    .nf-audio-player .nf-audio-controls-right .nf-audio-next-prev-vol button{
    	width:25px;
    }

    .nf-audio-player .nf-audio-controls-right .nf-audio-next-prev-vol .nf-audio-volume-toggle{
    	align-self:end;
    }
    
    .nf-audio-player .nf-audio-controls-right .nf-audio-next-prev-vol .nf-audio-volume-toggle.nf-vol-mute{
      position:relative;
    }
    .nf-audio-player .nf-audio-controls-right .nf-audio-next-prev-vol .nf-audio-volume-toggle.nf-vol-mute:after{
      position: absolute;
      width: 3px;
      background: red;
      height: 100%;
      transform: translate3d(-50%,0%,0px) rotate(45deg);
      content: "";
      left: 50%;
      top: 0;

    }

    .nf-audio-player .nf-audio-controls-right .nf-audio-next-prev-vol .nf-audio-volume{
      position:absolute;
      bottom:-0.5em;
      transform:translate3d(0%, 100%, 0px);
      right:0px;
      background: var(--slider-control-hover-light);
      padding: 10px 2px;
      border-radius: 3px;
      box-shadow: 0px 3px 3px 1px #33333357;
    }


    .nf-audio-tracks{
    	color:var(--main-text-color);
        margin-top: 1em;
        list-style: none;
        padding-left: 0;
        display:flex;
        flex-direction:column;
        width:100%;
    }

    .nf-audio-tracks li{
    	  margin-left:0px;
    	  padding-left:0px;
    	  font-family:monospace;
    	  border-top:1px solid #d5d5d9;
    	  padding:0.5em;
    	  cursor:pointer;
    	  display:flex;
    	  align-items:center;
    }
    .nf-audio-tracks li:hover{
    	background: var(--main-control-hover-light);
    	
    }

    .nf-audio-tracks .nf-audio-track-list-item-play{

    	width:1.5em;
    	height:1.5em;
    	background:none;
    	border:none;
    	border-radius:3px;
    	padding:0.2em;
      border:var(--main-control-border-color);
      margin-right:0.5em;
    }


    .nf-audio-tracks button:hover{
    	cursor:pointer;
    	filter:brightness(90%);
    }

    .nf-audio-tracks .nf-audio-track-list-item-play svg{
    	width:60%;
      filter:var(--main-control-color-filter);
    }