.w3-container{padding:0.01em 16px}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}

.background {position: absolute; width: 100%; background: #47637e url(../images/avvd_handwriting.png) repeat 50% 0;}

.audioplayer {
    height: 150px;
    width: 200px;
	position: relative;
    padding-bottom: 5px;
}
.player {
    background-color: #0182C1;
    height: 20px;
    width: 100%;
	float: left;
}
.playlist {
    background-color: #F4F4F4;
	list-style-type: none;
    width: 95%;
	height: 130px;
	float: left;
	margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
	/*padding: 0;*/
	overflow-y: scroll;
}
.playlist li:nth-child(odd){
    background-color: #E6E6E6;
}
.playlist li {
    color: #555555;
    cursor: pointer;
}
.playlist li.active {
    font-weight: bold;
}

.controls .play, .controls .pause, .controls .rew, .controls .fwd, .volume_on, .volume_off, .controls .seekbar_icon {
	position: relative;
	height: 10px;  /* icon size */
	width: 10px;  /* icon size */
	margin: 5px;
    /*padding: 5px;  /* icon padding */
	z-index: 10;
	float: left;
	cursor: pointer;
}
.controls .play {
	/*content: url("../images/play.png");*/
    background:  url("../images/play.png");
    background-size: contain;
}
.controls .pause {
    /*content: url("../images/pause.png");*/
    background:  url("../images/pause.png");
    background-size: contain;
    display: none;
}
.controls .rew {
    /*content: url("../images/prev.png");*/
    background:  url("../images/prev.png");
    background-size: contain;
}
.controls .fwd {
    /*content: url("../images/next.png");*/
    background:  url("../images/next.png");
    background-size: contain;
}
.controls .play:hover {
    /*content: url("../images/play_hover.png");*/
    background:  url("../images/play_hover.png");
    background-size: contain;
}
.controls .pause:hover {
    /*content: url("../images/pause_hover.png");*/
    background:  url("../images/pause_hover.png");
    background-size: contain;
}
.controls .rew:hover {
    /*content: url("../images/prev_hover.png");*/
    background:  url("../images/prev_hover.png");
    background-size: contain;
}
.controls .fwd:hover {
    /*content: url("../images/next_hover.png");*/
    background:  url("../images/next_hover.png");
    background-size: contain;
}
.controls .visible {
    display: block;
}
.hidden {
    display: none;
}

.volume_on {
	/*content: url("../images/volume_on.png");*/
    background:  url("../images/volume_on.png");
    background-size: contain;
}
.volume_on:hover {
	/*content: url("../images/volume_on_hover.png");*/
    background:  url("../images/volume_on_hover.png");
    background-size: contain;
}
.volume_off {
	/*content: url("../images/volume_off.png");*/
    background:  url("../images/volume_off.png");
    background-size: contain;
	display: none;
}
.volume_off:hover {
	/*content: url("../images/volume_off_hover.png");*/
    background:  url("../images/volume_off_hover.png");
    background-size: contain;
}


.volume {
	position: relative;
	width: 30px;  /* volume width */
	height: 10px;  /* icon size */
	padding: 5px;  /* icon padding */
	padding-left: 0px;
	z-index: 10;
	float: left;
}
.volume_background, .volume_slider {
	position: absolute;
	width: 30px;  /* volume width */
}
.volume_background {
	background-color: #949494;
	height: 10px;  /* icon size */
}
.volume_slider .ui-slider-range {
	background-color: #3B3B3B;
	height: 10px;  /* icon size */
}

.seekbar {
	position: relative;
	width: 48px;  /* seekbar width */
	height: 10px;  /* icon size */
	padding: 5px;  /* icon padding */
	padding-left: 0px;
	z-index: 10;
	float: left;
}
.seekbar_background, .seekbar_slider {
	position: absolute;
	width: 48px;  /* seekbar width */
}
.seekbar_background {
	background-color: #949494;
	height: 10px;  /* icon size */
}
.seekbar_slider .ui-slider-range {
	background-color: #3B3B3B;
	height: 10px;  /* icon size */
}

.separator {
	position: relative;
	background-color: #000000;
	height: 18px;
	width: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 2px;
	margin-right: 2px;
	z-index: 10;
	float: left;
}