/* top-banner.css
the banner with playlist data, errors, back-to-playlist button etc
*/


#top-banner{
	xborder:1px solid lime;
	min-height:50px;
	max-height:50px;
	width:100%;
	max-width:100vw;
    xdisplay:none; 
	xopacity:0;
	xtransition: opacity 0.5s;

	position:fixed;
	display:flex;
	justify-content: space-between;
	justify-content:left;
	flex:1;
	xjustify-content: stretch;

	xmargin-bottom:500px;
	z-index:4;
	xbackground-color: #333333;
	background-color: #22262a;
	background-color:black;
	background-color:rgba(10,10,13,0.93);
    xbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
	xborder-bottom:1px solid #383838;
}

#top-bar-darkener {
	
}

#top-banner > .buttons{
    xborder:1px solid red;
    padding:2px;
    xdisplay:inline-block;
	display:none;
	width:50px;
	max-width:50px;
	aspect-ratio: 1/1;

}

#top-banner > .buttons > .button{
    xborder:1px solid darkblue;
	xdisplay:inline-block;
	xpadding: 10px;
	z-index:3;
	margin:auto;
	width:100%;
	xheight:50%;
	xwidth:50%;
	aspect-ratio: 1/1;
	xbox-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
	xbox-shadow:none;
	
  
    background-color: #1d1d1d;
    color: #fff;
    border-radius: 5px;
    cursor:pointer;
    user-select:none;
    text-align:center;
    xfont-size:1.2em;
    font-weight:800;

	xposition:relative;
	display: flex;
	justify-content: center;
	align-items: center;

    border: 2px solid #333333; /*189a46  333333*/


}

#top-banner > .buttons > .button:hover {
    background-color:#353535;
    xborder:0px solid black;
}

#top-banner > .buttons > .button:active {
    background-color:#1d1d1d;
	border:2px solid #1db954; 
}







#status-container{
	position:absolute;
	left:0;
	top:0;
	padding: 5px;
	color:#a19f9f;
	user-select:none;
	text-shadow: 1px 1px 0px black;
}



#playlist-info-container{
    xborder: 1px solid red;
	xposition:absolute;
	right:0;
	top:0;	
	padding: 5px 5px 0px 0px;
	color:#a19f9f;
	visibility:hidden;
	user-select:none;
	text-shadow: 1px 1px 0px black;
    text-align:right;
	font-family:consolas, monospace;
}



#playlist-length-container {
	xborder: 1px solid orange;
}


#playlist-length {
	xcolor:#00e600;
	color:#1eb753;
	
}

/* element to have margin on the top bar.
We can't use margin on top bar as it's position:fixed*/
#top-banner-margin {
	xborder: 1px solid orange;
	xbackground-color:green;
	width:100vw;
	xheight:50px;

}



#top-bar-info {
	xborder: 1px solid orange;
	display:inline-flex;
	xbackground-color:green;
	width:100vw;
	xheight:50px;
	width:100%;
	max-width:700px;
	xwidth: calc(100% - 100px);

	color:#DCEBDD; 
	margin-left:30px;
	display:inline-flex;
	justify-content: left;
	align-items:center;
}

#top-bar-rows {
	min-width:200px;
}

#top-bar-rows > .row {
	xborder:1px solid grey;
	height:50%;
	overflow:hidden;
	color:grey;

}

#top-bar-rows  > #top.row {
	color:#1db954; 
	padding-top:5px;
}



#search-container {
	xborder:1px solid red;
	height:100%;
	width:50%;

	transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
	display:inline-flex;
	display:none;
	xjustify-content: center;
	align-items:center;
	margin-left:10px;

}

#search {
	border:2px solid rgb(94, 94, 94);
	border-radius:8px;
	width:100%;
	height:80%;
	font-size:1em;
	font-weight:400;
	font-family: 'Roboto', sans-serif;
	padding: 0px 5px 0px 10px;

	background-color:#202425;
	color:white;

}

#search:hover {
	xwidth:100%;
}

#search:focus {
	border:2px solid #1db954; 
	outline: none !important;
	xwidth:100%;
}

#clear-search {
	xborder:1px solid grey;
	xborder-radius:50px;
	width: 50px;
	height:50px;
	float:right;
	xdisplay:inline-block;
	display:inline-flex;
	justify-content: center;
	align-items:center;
	font-size:1.5em;
	cursor:pointer;
	color:grey;
}

#clear-search:hover {
	color:rgb(85, 85, 85);
}

#clear-search:active {
	color:rgb(51, 51, 51);
}