html {
    position: relative;
    min-height: 100%
}

body {
	font-family:"Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
	display: flex;
    min-height: 100vh;
    flex-direction: column;
}

p {
    text-indent: 1em
}

.maincontainer {
	flex: 1 0 auto;
}

.page-footer {
	padding-top: 0;
}

.mejs__container {
	background: none;
	margin-top: 30px;
}

.mejs__controls{
	height: 60px;
}

.mejs__controls:not([style*='display: none']) {
	background: none;
}

.mejs__controls .mejs__play, .mejs__controls .mejs__replay, .mejs__controls .mejs__pause {
	width: 60px;
    height: 60px;
}
.mejs__controls .mejs__play button, .mejs__controls .mejs__replay button, .mejs__controls .mejs__pause button {
	width: 60px;
	height: 60px;
	margin: 0;
	background: none;
	background-color: #00897b;
}
.mejs__controls .mejs__play button, .mejs__controls .mejs__replay button {
    -webkit-mask-image: url('../resources/play.svg');
    mask-image: url('../resources/play.svg');
}
.mejs__controls .mejs__pause button {
    -webkit-mask-image: url('../resources/pause.svg');
    mask-image: url('../resources/pause.svg');
}
 
.mejs__controls .mejs__mute, .mejs__controls .mejs__unmute {
	width: 36px;
	height: 36px;
	margin: 12px 10px;
}
.mejs__controls .mejs__mute button, .mejs__controls .mejs__unmute button {
	width: 36px;
	height: 36px;
	margin: 0;
	background: none;
	background-color: #00897b;
}
.mejs__controls .mejs__mute button {
    -webkit-mask-image: url('../resources/speaker_with.svg');
    mask-image: url('../resources/speaker_with.svg');
}
.mejs__controls .mejs__unmute button {
    -webkit-mask-image: url('../resources/speaker_mute.svg');
    mask-image: url('../resources/speaker_mute.svg');
}

.mejs__controls .mejs__horizontal-volume-slider {
	margin: 10px 0;
	flex:1;
}
.mejs__controls .mejs__horizontal-volume-total {
	width: 100%;
	background: #a0a0a0;
    -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
    -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
    box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.mejs__controls .mejs__horizontal-volume-current {
	width: 60%; /* init volume */
	background-color: #00897b;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}


#plist {
	/* max-height: 434px; */
	/* overflow-y: scroll; */
}
#plist .collection-item:hover {
	cursor: pointer;
	background-color: #eeeeee;
}
#plist div.secondary-content{
	top: 10px;
}