/*Recreate design with absolute positions*/
.now-playing-bar{
	position:relative;
}
.now-playing-bar>*,
.connect-bar{
	position:absolute;
}
@keyframes connect-bar{
	from {width:20px;}
	to {width:176px;}
}
.connect-bar{
	bottom:0;
	left:calc(100% - 176px);
	width:176px;
	text-align:left;
	font-size:0;
	padding:0 3px;
	animation: connect-bar 200ms;
	color:#383838;
}
.connect-bar:after{
	right:auto;
	left:0;
}
.connect-bar__device-icon{
	display:none;
}
.connect-bar__device-name{
	line-height:28px;
}
.connect-bar:before{
	content: "\F1A3";
	font-size:16px;
	font-family: glue1-spoticon;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    line-height: 24px;
    vertical-align: top;
    display: inline-flex;
    text-decoration: inherit;
	padding-right:3px;
}
.connect-bar__device-name{
	font-size:12px;
}
.now-playing-bar__left{
	left:16px;
}
.now-playing-bar__center{
	left:calc(30%);
	max-width:none;
}
.now-playing-bar__right{
	left:calc(100% - 152px);
}
/**/
.spoticon-skip-back-16,
.spoticon-skip-forward-16{
	transition: opacity 400ms ;
}
#main:not(:hover) .spoticon-skip-back-16,
#main:not(:hover) .spoticon-skip-forward-16{
	opacity:0;
}
/**/
.now-playing-bar,
.now-playing-bar-container{
	height:100%;
}
#main:not(:hover) .nowPlayingBar-container{
	height:calc(100%);
}
.nowPlayingBar-container{
	height:90px;
	transition: height 400ms ;
}
/**/
#main .root .nowPlayingBar-container{
	background-color:transparent;
}
.now-playing-bar-container{
	background-color:#282828;
	transition: background-color 400ms ;
}
#main:not(:hover) .now-playing-bar-container{
	background-color:#282828cc;
}
/**/
.connect-device-picker{
	transition: opacity 200ms ease 100ms, width 400ms, left 400ms;
	opacity:1;
	width:32px;
	left:-32px;
	position:absolute;
}
#main:not(:hover) .connect-device-picker{
	transition: opacity 500ms, width 400ms, left 400ms;
	opacity:0;
	width:0px;
	left:0;
	overflow:hidden;
}
/**/
.now-playing-bar__right__inner,
.extra-controls{
	width:100%;
	min-width:0;
}
.now-playing-bar__right{
	width:136px;
	min-width:0;
	bottom:calc(50% - 16px);
	transition: width 400ms, left 400ms, bottom 400ms
}
.volume-bar{
	width:100%;
}
#main:not(:hover) .now-playing-bar__right{
	width:136px;
	left:calc(50% - 84px);
	bottom:calc(10% - 16px);
}
/**/
.spoticon-add-16,
.spoticon-added-16{
	transition: opacity 200ms ease 100ms, width 400ms, right 400ms;
	opacity:1;
	width:32px;
	right:-22px;
	position:absolute;
}
#main:not(:hover) .spoticon-add-16,
#main:not(:hover) .spoticon-added-16{
	transition: opacity 200ms, width 400ms, right 400ms;
	opacity:0;
	width:0px;
	right:0;
	overflow:hidden;
}
.now-playing-bar__left{
	width:auto;
	min-width:0;
	max-width:30%;
	top:calc(50% - 28px);
	transition: top 400ms, left 400ms;
}
#main:not(:hover) .now-playing-bar__left{
	display:flex;
	top:auto;
	bottom:calc(35% + 30.5px);
	left:calc(30vw - 8px);
	margin:auto;
	height:calc(40vh + 50px);
	width:calc(40vw);
	max-width:none;
	justify-content:flex-end;
}
@media (orientation:landscape){
	#main:not(:hover) .now-playing-bar__left{
		left:calc(30vw - (100vw - 100%));
	}
}
#main:not(:hover) .now-playing{
	height:calc(40vw + 50px);
	width:calc(40vh);
	max-height:calc(40vh + 50px);
	max-width:calc(40vw);
	display:flex;
	flex-direction:column;
	padding:0;
	margin:auto;
}
.now-playing{
	position:relative;
}
#main:not(:hover) .now-playing a{
	height:calc(100% - 50px);
	width:100%;
}
#main:not(:hover) .now-playing__cover-art{
	margin:0;
	padding:0;
	height:100%;
	width:100%;
}
#main:not(:hover) .track-info{
	width:100%;
	margin:0;
}
#main:not(:hover) .track-info__name{
	width:auto;
	margin:auto;
	height:30px;
	font-size:24px;
	line-height:30px;
}
#main:not(:hover) .track-info__artists{
	width:auto;
	margin:auto;
	height:20px;
	font-size:16px;
	line-height:20px;
}
/**/
.now-playing-bar__center{
	transition: bottom 400ms;
	bottom:calc(50% - 30.5px);
}
#main:not(:hover) .now-playing-bar__center{
	bottom:calc(30% - 30.5px);
}
/**/
.now-playing-bar-container{
	min-width:0;
}
@media (max-width:690px){
#main .root .spoticon-add-16,
#main .root .spoticon-added-16{
	bottom:9px;
	right:5px;
}
#main .root .nowPlayingBar-container:hover .spoticon-add-16,
#main .root .nowPlayingBar-container:hover .spoticon-added-16{
	right:-27px;							
}
.nowPlayingBar-container:hover {
	height:calc(100% - 20px);
}
.nowPlayingBar-container:hover .now-playing-bar-container{
	background-color:#282828cc;
}
.nowPlayingBar-container:hover .now-playing-bar__right{
	width:136px;
	left:calc(50% - 84px);
	bottom:calc(10% - 16px);
}
.nowPlayingBar-container:hover .now-playing-bar__left{
	display:flex;
	top:auto;
	bottom:calc(35% + 30.5px);
	left:calc(30vw - 8px);
	margin:auto;
	height:calc(40vh + 50px);
	width:calc(40vw);
	max-width:none;
	justify-content:flex-end;
}
.nowPlayingBar-container:hover .now-playing{
	height:calc(40vw + 50px);
	width:calc(40vh);
	max-height:calc(40vh + 50px);
	max-width:calc(40vw);
	display:flex;
	flex-direction:column;
	padding:0;
	margin:auto;
}
.nowPlayingBar-container:hover .now-playing a{
	height:calc(100% - 50px);
	width:100%;
}
.nowPlayingBar-container:hover .now-playing__cover-art{
	margin:0;
	padding:0;
	height:100%;
	width:100%;
}
.nowPlayingBar-container:hover .track-info{
	width:100%;
	margin:0;
}
.nowPlayingBar-container:hover .track-info__name{
	width:auto;
	margin:auto;
	height:30px;
	font-size:24px;
	line-height:30px;
}
.nowPlayingBar-container:hover .track-info__artists{
	width:auto;
	margin:auto;
	height:20px;
	font-size:16px;
	line-height:20px;
}
.nowPlayingBar-container:hover .now-playing-bar__center{
	bottom:calc(30% - 30.5px);
}
}
/**/
.nav-bar-container:not(:hover){
	width:50px;
}
.nav-bar-container{
	transition: width 200ms;
}
.nav-bar-container:not(:hover) + .main-view-container {
	padding-left:50px;
}
.main-view-container{
	transition: padding 200ms;
}
.nav-bar-container:not(:hover) .navBar-group,
.nav-bar-container:not(:hover) .sessionInfo{
	border:none;
	padding-top:11px;
}
.nav-bar-container:not(:hover) .navBar-header .logo{
	transform: translateX(-15px);
}.nav-bar-container:not(:hover) .navBar-item .search-icon{
	transform: translateX(-15px);
}
.nav-bar-container:not(:hover) .user-widget .user-avatar{
	transform: translateX(-12px);
}
.navBar-header .logo,
.navBar-item .search-icon,
.user-widget .user-avatar{
	transition: transform 200ms;
}

.navBar>ul{
	display:none;
}
.navBar-expand{
height:100px;
}