/* 
 * version 5.0 JBGMusic
 * @copyright Copyright (C) 2020 Jfriendly.net. All rights reserved.
 * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
*/


@font-face {
  font-family: 'icomoon-jbg';
  src:  url('../fonts/icomoon.eot?txbc3c');
  src:  url('../fonts/icomoon.eot?txbc3c#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?txbc3c') format('truetype'),
    url('../fonts/icomoon.woff?txbc3c') format('woff'),
    url('../fonts/icomoon.svg?txbc3c#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


[class^="icon-jbg"], [class*=" icon-jbg"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon-jbg' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;

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

[class^="icon-jbg"]:before,
[class*=" icon-jbg"]:before {
	font-family: 'icomoon-jbg' !important;
	  speak: never;
	  font-style: normal;
	  font-weight: normal;
	  font-variant: normal;
	  text-transform: none;
	  line-height: 1;
	  display: inline-block;

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


.icon-jbgheadphones:before {
  content: "\e910";
}
.icon-jbgmusic:before {
  content: "\e911";
}
.icon-jbgmic:before {
  content: "\e91e";
}
.icon-jbgfile-music:before {
  content: "\e928";
}
.icon-jbgenvelop:before {
  content: "\e945";
}
.icon-jbgdownload:before {
  content: "\e960";
}
.icon-jbgspinner:before {
  content: "\e97f";
}
.icon-jbgequalizer:before {
  content: "\e992";
}
.icon-jbgcog:before {
  content: "\e994";
}
.icon-jbgcogs:before {
  content: "\e995";
}
.icon-jbgmenu:before {
  content: "\e9bd";
}
.icon-jbgmenu3:before {
  content: "\e9bf";
}
.icon-jbgmenu4:before {
  content: "\e9c0";
}
.icon-jbgcloud-download:before {
  content: "\e9c2";
}
.icon-jbghappy:before {
  content: "\e9df";
}
.icon-jbgplay2:before {
  content: "\ea15";
}
.icon-jbgpause2:before {
  content: "\ea16";
}
.icon-jbgstop2:before {
  content: "\ea17";
}
.icon-jbgprevious2:before {
  content: "\ea18";
}
.icon-jbgnext2:before {
  content: "\ea19";
}
.icon-jbgrewind2:before {
  content: "\ea1a";
}
.icon-jbgforward2:before {
  content: "\ea1b";
}
.icon-jbgplay:before {
  content: "\ea1c";
}
.icon-jbgpause:before {
  content: "\ea1d";
}
.icon-jbgstop:before {
  content: "\ea1e";
}
.icon-jbgrewind:before {
  content: "\ea1f";
}
.icon-jbgforward:before {
  content: "\ea20";
}
.icon-jbgprevious:before {
  content: "\ea21";
}
.icon-jbgnext:before {
  content: "\ea22";
}
.icon-jbgprevious1:before {
  content: "\ea23";
}
.icon-jbgnext1:before {
  content: "\ea24";
}
.icon-jbgeject:before {
  content: "\ea25";
}
.icon-jbgvolume-high:before {
  content: "\ea26";
}
.icon-jbgvolume-medium:before {
  content: "\ea27";
}
.icon-jbgvolume-low:before {
  content: "\ea28";
}
.icon-jbgvolume-silent:before {
  content: "\ea29";
}
.icon-jbgvolume-mute:before {
  content: "\ea2a";
}
.icon-jbgvolume-increase:before {
  content: "\ea2b";
}
.icon-jbgvolume-decrease:before {
  content: "\ea2c";
}
.icon-jbgloop2:before {
  content: "\ea2d";
}
.icon-jbgloop:before {
  content: "\ea2e";
}
.icon-jbginfinite:before {
  content: "\ea2f";
}
.icon-jbgshuffle:before {
  content: "\ea30";
}



.jbgmusic {
	max-width: 300px;
    font-size: 15px;
    position: relative;
    display: inline-block;
}

	
.jbgmusic .player-background{
    border-radius: 25px;
    border: 1px solid #acadaa;
    background: #fff;
    padding: 0px 15px;
}

.jbgmusic .form-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.jbgmusic .jbgbutton{	
    margin-top: 8px;
    padding-bottom: 7px;
}

.jbgbutton:hover {
	-moz-transform: translate(-1px, -1px);
	-ms-transform: translate(-1px, -1px);
	-o-transform: translate(-1px, -1px);
	-webkit-transform: translate(-1px, -1px);
	transform: translate(-1px, -1px);
	cursor: pointer;

}

.jbgmusic .progressBar {	
    border-radius: 7px;
	width: 80px;
	height: 6px;
    margin-top: 5px;
	margin-left: 5px;
	overflow:hidden;
}


.jbgmusic .progressDuration {	
    border-radius: 7px;
	height: 100%;
}

.jbgmusic .jbgbutton:active {
  cursor: pointer;
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -o-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

.jbgmusic .volume-slider {
	margin-left: 7px;
	margin-top:auto;
	width: 19px;
	overflow:hidden;
	display: inline-flex; 
	transition: width .5s;
}

.jbgmusic .volume-slider:hover,
.jbgmusic .volume-slider:active {	
	width: 60px;
}

.jbgmusic .volumeIcon {
    margin-top: 5px !important;
    margin-left: 3px !important;
    font-size: 14px !important;
    width: 14px !important;
}

.jbgmusic .slidecontainer {
	margin-bottom: 3px;
	margin-left: 2px;
}

.jbgmusic .slider {
  -webkit-appearance: none;
  width: 40px;
  height: 5px;
  padding: 0px;
  border: none;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}


.jbgmusic .slider::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2.0px;
}

.jbgmusic .slider::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}