jp-container{
  width: 100%;
  height: 50px;
  display: block;
  background-color: #ffffff;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
}

jp-controls{
  height: 100%;
  width:100%;
  display: table;
  font-family: 'FontAwesome' !important;
  color: #505050;
}

/* Controls */
.jp-play {
  display: table-cell;
  width:50px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer
}
.jp-mute{
  display: table-cell;
  width:50px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer
}
.jp-volume-max{
  display: table-cell;
  width:50px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer
}
.jp-volume-bar{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background: #ffffff;
  cursor: pointer
}
.jp-volume-bar-value{
}

/* Control Icons */
.jp-play:before{
  content: "\f04b" !important;
}
.jp-state-playing .jp-play:before{
  content: "\f04c" !important;
}
.jp-state-seeking .jp-state-playing .jp-play:before{
  content: "\f110" !important;
}
.jp-mute:before{
  content: "\f027" !important;
}
.jp-state-muted .jp-mute:before{
  content: "\f026" !important;
}
.jp-volume-max:before{
  content: "\f028" !important;
}

/* Volume Bar CSS */
jp-controls .progress {
  height: 100%;
  background: #06245b;
  border-radius: 0px;
}
jp-controls .progress-bar {
  background: rgb(255, 255, 255);
  box-shadow: none;
}

.borderme {
    border-style: solid;
    border-width: 1px;
    border-color: #D5D5D5 #D5D5D5;
}

*:focus {
    outline: 0;
}