.inline-player__wrap{
	display:inline-flex;
	align-items:center;
	gap: 5px;
}
.inline-player__wrap.started{
	min-width: 200px;
}

tr .inline-player__wrap.started{
	min-width: unset;
}

main .fa.inline-player,
.inline-player{
	cursor:pointer;
	color:#ab343a;
	border: 2px solid;
	border-radius: 2em;
	transition: color .4s ease, background .4s ease, border .3s ease;
	
	display: inline-flex;
	align-items:center;
	justify-content:center;
	
	width:1.75em;
	height:1.75em;
	min-width: 1.75em;
}
.inline-player audio{
	display:none;
}
.article-single-content .inline-player__wrap.active .fa.inline-player,
.inline-player__wrap.active .inline-player{
	color:#fff;
	background:#900;
	box-shadow: 0 0 8px #900;
	border-color: #fff;
}
.inline-player__wrap.active .fa.inline-player:before{
	content: "\f04c";
    font-size: 0.6em;
    padding: 0.2em;
}

.inline-player__wrap.loading .inline-player:before{
	content: "\f021"!important;
}

.player-total,
.player-time{
	font-family: sans-serif;
	font-size:0.8em;
	font-weight: bold;
	color:#ab343a;
	white-space:nowrap;
}

.player-line{
	display:inline-block;
	width:100px;
	max-width:0px;
	transition:max-width 1.5s ease, margin 1.5s ease;
}
.inline-player__wrap.started .player-line{
	flex-grow:100;
	position:relative;
	margin: 0;
	max-width:100vw;
	height:1rem;
	cursor:pointer;
	background: linear-gradient(to right, #900 0%, #900 var(--player-percent), #ccc var(--player-percent), #ccc 100%);
}
.inline-player__wrap.active .player-line:after{
	content:'';
	position:absolute;
	left: calc(var(--player-percent) - 4px);
	width:1rem;
	height:calc(100% + .5rem);
	top:-.25rem;
	background: #fff;
	border: 1px solid #ccc;
	z-index:1;
}

.inline-audio-bar{
	position: fixed;
    bottom: 6px;
    right: 50px;
    z-index: 100;
    font-size: 2rem;
	display:none;
}
.inline-audio-bar.active{
	display:flex
}
.inline-audio-bar .fa{
	justify-content:center;
	height: 2.5rem;
    width: 2.5rem;
    color: #900;
    border-width: 4px;
    font-size: 1.2rem;
    line-height: 1.3;
}
.inline-audio-bar .fa-play{
	padding-left: 5px;
}

.play-pause{
	cursor: pointer;
}
.play-pause.active:before{
	content: "\f04c";
}

.play-mode{
	text-align: center;
	font-family: FontAwesome;
	position: relative;
}
.play-mode.single:before{
	content: '\f021';
}
.play-mode.single:after{
	content: '';
    position: absolute;
    margin-top: 1.1em;
    margin-left: -0.96em;
    border-top: 3px solid;
    width: 1.333em;
    transform-origin: 0 0;
    transform: rotate(-45deg);
}
.play-mode.loop:before{
	content: '\f0e2';
}
.play-mode.all:before{
	content: '\f063';
}
.play-mode.loop-all:before{
	content: '\f021';
}

@media (min-width: 921px){
	.inline-audio-bar{
		bottom: 20px;
		right: 100px;
	}
}