/* path.css v0.4 Last modification : 2017/06/04
	   			0.4 : Change header bar name from "path" to header-bar (id to class)
	* Desc:	Custom header for template page
	*		Contains 
	*				 - a ul element for horizontal menu with eye-candy tab
	*				 - a base title with same color of ul background
	*
	*		Usage : <ul id="path">
	*				<li><a href="#"> Menu</a></li>
	*				</ul>
	*				<span id="title">Title<i>version</i></span>
	*
	*		Color : 	#path, #title,{
	*					background-color: color1;
	*					color : color3;}
	*
	*					#path li{
	*					color: color4
	*					border-top: solid 1px color2;
	*					border-bottom: solid 1px color2;
	*					}
	*	
	*					#path li:before{border-left-color: color2;}
	*					#path li:after{border-left-color: color1;}
	*					#path li a{color: color4;} 
	*
	*					color1 : global bgcolor
	*					color2 : brighter global bgcolor
	*					color3 : main color (basically, black)
	*					color4 : link color 
	*
	*					Made by ney
	*/
	
	
	body{
		width: 100%;
		height: 100%;
		overflow-x: hidden;
	}
	
	.jgknk-head{
		position: sticky;
		display: flex;
		align-items: center;
		justify-content: space-between;
		top: 0px;
		width: 100%;

		transition: background-color 1s;
		z-index: 1000002;
	}
	
	.header-bar{
		margin : 0em;
		height : 46px;
		
		white-space: nowrap;
		border-bottom: solid 1px #CCC;
		//-webkit-margin-before: 0em;
		//-webkit-margin-after: 0em;
		//-webkit-padding-start: 0px;
		padding-left: 0px;
		//-moz-padding-start : 0px;
	}
	
	.header-bar#header-top{
		display: flex;
		width: 100%;
		height: 45px;
		box-sizing: border-box;
		align-items: center;
		gap: var(--spacer-s);
		background-clip: border-box;
		//transform: translateZ(0); 
		transition: background-color 0.3s ease;
		z-index: 1000; 
		//gap: var(--spacer-s);
		top : 0;
		flex-direction: row;
		justify-content: space-between;
		background-image: url("../../../base/img/logo_w.png");
		background-repeat: no-repeat;
		background-position: left center;
		background-size: contain;
		//padding: 
		//	env(safe-area-inset-top) 
		//	env(safe-area-inset-right) 
		//	env(safe-area-inset-bottom) 
		//	env(safe-area-inset-left);
	}
	
	
	.header-mobile{
		display: none;
	}
	
	#header-nav{
		display: inline-block;
		text-align: center; 
		height: 19px; 
		padding : 5px 10px 2px;
		background-color: #ececec; 
		border-radius: 10px 0px 0px 10px;
		border: 1px solid #ddd;
		line-height: 16px;
		font-size: 12px;
		}
		
	#imglink .avatar{
		display: block;
		float: right;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		margin-right: 4px;
		padding: 5px 6px !important;
	}	
	
	#imglink .user-img{
		display: inline;
		float: right;
	}	
	
		
	#imglink .avatar:hover{opacity: 0.5;}
		
	.header-bar#option{
		color:#000 !important;
		background-color: #FFF !important;
		line-height: 4px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	
	#lefttext{
		background-color: #474444;
    	display: block;
    	padding-left: 70px !important;
    	border-right: solid 2px #323232;
        }
    
    #avatar{
		width: 60px;
		height: 60px;
		padding: 2px;
		background: white;
		position: relative;
		top: 3px;
		left: 12px;
		float: left;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		border : solid 2px #ccc;
		z-index: 3;
	}
	
	#imglink{
		margin:auto;
		float: right;
		}
		
	#imglink img:hover{
		border-top: 2px solid white;
	}
	
	#header-top img{
		height: 16px;
		padding: 14px;
		border-top: 2px solid #272424;
	}
	
	span#imglink{
		padding: 0;
		float: right;
		left: 0;
		margin-right: 25px;
	}
	
	#sort-opt-mobile select,#sort-opt-mobile form{
		display: none;
		}
		
		
	
	.no-bar{
		display: none !important;
	}
	
	#nav-content{
		flex-grow: 8;
		/* text-align: center; */
		border-right: solid 1px #e9e9e9;
		border-left: solid 1px #e9e9e9;

	}
	
	#option-search-icon{
		width: 20px;
		display: inline-flex;
		padding: 12 13;
		line-height: 1.7;
	}
	
	// useless ???
	#user-menu-choice{
		margin: 0;
		display: none;
		position: absolute;
		z-index: 1;
		width: 300px;
		background-color : rgba(255,255,255,0.9);
		margin: 47 0 0;
	}
	
	#user-menu-choice > li{
		display: flex;
		height: 25px;
		text-transform: uppercase ;
		padding: 0	0 15 0;
		font-weight: 500;
		font-size: 12px;
		line-height: 3.4;
		border-bottom: solid 1px #efefef;
		border-right: solid 1px #efefef;
	}
	
	.menu-cat{
		width: 5px;
		height: 30;
		padding: 0 0 10 0;
		margin-right: 10px;
		display: inline-block;
	}
	.collection{background-color: #1fbaca;}
	.mod{background-color: #eedb07;}
	.admin{background-color: #ff0000;}
		
	
@media screen and (max-width: 420px) and (orientation: portrait) {
		
#sort-opt-mobile select{
	display: inline-flex;
	height: 46px;
	flex-grow: 8;
	border: 0px;
	background-color: white;
	-webkit-appearance: listitem;
	border-radius: 0px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;

}
#sort-opt-mobile form{
	display: inline-block;
	margin: 0 0 0 10px;			
	font-size: 12px;
	font-weight: 500;
}

#sort-opt{
	display: none !important;
}
		
@supports(padding:max(0px)) {
	body, header, footer {
		padding-left: min(0vmin, env(safe-area-inset-left));
		padding-right: min(0vmin, env(safe-area-inset-right));
	}
}

@media only screen and (orientation: portrait) {
	body {
		.shrink {
			width: 95%;
		}
	}
}
@media only screen and (orientation: landscape) {
	body {
		.shrink {
			width: 90%;      /* Shrink a little more to avoid the notch. */
		}
	}
}