/* @override 
	https://dev.nailalliance.fr/front/frontShop/phenyx-theme-default/css/autoload/adminFront.css */

/* Règles de design et d'ergonomie pour un compte admin connecté en front  */

/* 
 *
 *
 * C H O I X   1 
 */
 
#backenLink {
    position: fixed;
    top:0; left: 0;
    width: 100%;
    height: 55px;
    z-index: 99999999;

	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: center;

	color: white;
	background: linear-gradient(to bottom, #292831 0%, #242328 100%) #3e3c49;
	box-shadow: inset 0 -3px 7px rgba(0, 0, 0, 0.38);
	padding-left: 1%;
	padding-right: 1%;
	border-bottom: 6px solid #292831;
}
.logo,
.logOut,
.burger {
	display: inline-block;
	width: 60px; height: 60px;
	border-radius: 50%;
	margin: 0 11px 0 0;
	border: 2px solid;
	color: #d1b370;
	position: relative;
	text-align: center;
}
.logo#phenyx {
	background: url(https://admin.ld-formation.fr/themes/blacktie/img/ephenyx-avatar-header_shopname.png) -15px;
}
.logo#nailalliance {
	font: 40px/62px Zuerbig;
	letter-spacing: -7px;
	text-indent: -10px;
}
.logOut {
	line-height: 55px;
}
.burger {
	transform: rotate(90deg);
	font-weight: 700;
	line-height: 52px;
	text-indent: 1px;
}
.welcome {
	margin-right: auto;
}


/* 
 *
 *
 * C H O I X   2 
*/

/*#backenLink {
	position: fixed;
	z-index: 10000;
	
	top: 0;
	left: calc(50% - 150px);
	width: 300px;
	height: 300px;
	
	background-color: #d1b370;
	color: white;
	border-radius: 50%;
	padding-top: 150px;
	
	text-align: center;
	
	margin-top: -60px;
	transform-origin: 50% 0;
	transform: scale(.5);
	transition: transform .5s ease-in-out 0s, margin-top .5s ease-in-out .5s, background .9s ease-in-out 0s;
}
#backenLink:hover {
	background-color: #292831;
	margin-top: -20px;
	transform: scale(1);
	transition: transform .5s ease-in-out 0s, margin-top .3s ease-in-out 0s, background .9s ease-in-out 0s;
}
.backendItem {
	position: absolute;
	display: block;
	width: 60px; height: 60px; line-height: 55px;
	border-radius: 50%;
	
	background-color: #d1b370;
	color: #d1b370;
	text-align: center;
	
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	transition: top .5s ease-in-out 0s, left .5s ease-in-out 0s;	
}
#backenLink:hover .backendItem {
	color: white;
	transition: top .5s ease-in-out .3s, left .5s ease-in-out .3s;	
}
#backenLink:hover .backendItem.logOut {
	top: 180px;
	left: 250px;
}
#backenLink:hover .backendItem.burger {
	top: 240px;
	left: 195px;
}
#backenLink:hover .backendItem#nailalliance {
	top: 240px;
	left: 35px;
}
#backenLink:hover .backendItem#phenyx {
	top: 180px;
	left: -15px;
}
.welcome {
	position: relative;
	z-index: 1;
	font-size: 16px;
}


/* Pour les besoins de l'exercice */
.burger {
	transform: rotate(90deg);
}
.logo#phenyx {
	background-image: url(https://admin.ld-formation.fr/themes/blacktie/img/ephenyx-avatar-header_shopname.png);
	background-position: -15px -10px;
	background-color: white;
}
.logo#nailalliance {
	font: 50px/70px Zuerbig;
	letter-spacing: -7px;
	text-indent: -3px;
	text-align: left;
}