/*
 GenEasy GSS Compiler 2.0 (c) MVP 2015-2025
 Version 16/04/2025 15:56:47

 *** IMPORTANT : DO NOT EDIT BY HAND, EDIT .gss FILE ! ***

 Copyright (c)  MVP - All Rights Reserved
 Unauthorized copying of this file, via any medium is strictly prohibited
 Licenced to Steetch project
 MVP, 2025
*/

html
{
	--SCREEN-BACKGROUND:#575756 ;
	--GREEN-VALUE:#57a67f ;
	--MENU-BACKGROUND:#3c3c3b ;
	--MENU-COLOR:white ;
	--MENU-HILITE:#5c5c5b ;
	--DLG-BACKGROUND:#F0F0F1 ;
	background-color:var(--SCREEN-BACKGROUND) ;
	padding:0 ;
	margin:0 ;
	font-size:16px ;
}

body
{
	font-family:Asap ;
	padding:0 ;
	margin:0 ;
	display:flex ;
	flex-direction:column ;
}

a[onclick], button[onclick]
{
	cursor:pointer ;
}

a
{
	text-decoration:none ;
	color:inherit ;
}

nav
{
	background-color:var(--MENU-BACKGROUND) ;
	margin:0 ;
	padding:0 16px ;
	height:80px ;
	color:var(--MENU-COLOR) ;
	box-shadow:0 0 12px 4px #202020 ;
	font-size:1.5rem ;
	position:relative ;
}

nav > ul
{
	background-image:url(/__album/logo-steetch-txt-blanc.png) ;
	background-repeat:no-repeat ;
	background-size:contain ;
	display:flex ;
	height:100% ;
	padding:0 ;
	padding-left:320px ;
	margin:auto ;
	align-items:center ;
	flex-direction:row ;
	gap:20px ;
}

nav > ul > li
{
	padding:0 ;
	margin:0 ;
	height:50px ;
	display:flex ;
	border-right:solid 1px var(--GREEN-VALUE) ;
	padding-right:16px ;
	flex-direction:column ;
	justify-content:center ;
}

nav > ul > li > *:not(:first-child)
{
	display:none ;
}

nav > ul > li > a
{
}

nav > ul > li > a:hover
{
	text-decoration:underline ;
}

nav > ul > li:not(:last-child):not(:first-child)
{
	flex-direction:row ;
	gap:16px ;
	align-items:center ;
}

nav > ul > li:not(:last-child):not(:first-child)::before
{
	background-repeat:no-repeat ;
	background-position:center center ;
	background-size:contain ;
	width:32px ;
	height:32px ;
}

nav > ul > li:last-child
{
	flex-grow:1 ;
	align-items:end ;
	border-right-style:none ;
}

nav > ul > li:hover > menu
{
	display:flex ;
	flex-direction:column ;
	position:absolute ;
	top:0px ;
	margin-left:-8px ;
	min-width:100px ;
	padding:0 ;
	padding-top:81px ;
	font-size:1rem ;
}

nav > ul > li:hover > menu::after
{
	position:absolute ;
	top:80px ;
	bottom:0 ;
	background:var(--MENU-BACKGROUND) ;
	width:100% ;
	content:'' ;
	z-index:-1 ;
	box-shadow:2px 2px 3px 1px #202020 ;
}

nav > ul > li:hover > menu > li
{
	background:var(--MENU-BACKGROUND) ;
	display:block ;
	padding:4px 4px ;
}

nav > ul > li:hover > menu > li > a
{
	display:block ;
	padding:4px 8px ;
}

nav > ul > li:hover > menu > li > a:hover
{
	background:var(--MENU-HILITE) ;
}

nav > ul > li:hover > menu > li.separator
{
	background:var(--MENU-HILITE) ;
	height:1px ;
	padding:0 ;
	margin:0 8px ;
}

li#mainDashboard::before
{
	content:'' ;
	background-image:url(/__album/home.svg) ;
}

li#projectDashboard::before
{
	content:'' ;
	background-image:url(/__album/project-dashboard.svg) ;
}

li#knowledgeBase::before
{
	content:'' ;
	background-image:url(/__album/knowledge-base.svg) ;
}

input, select, table
{
	font:inherit ;
}

div.dlg
{
	position:fixed ;
	left:0 ;
	top:80px ;
	width:100vw ;
	height:100vh ;
	display:flex ;
	flex-direction:row ;
	align-items:center ;
	justify-content:center ;
	background:rgba(255,255,255,0.25) ;
	backdrop-filter:blur(2px) ;
	overflow:hidden ;
}

body.dialog-only div.dlg
{
	background:none ;
}

div.dlg > div
{
	position:relative ;
	background:var(--DLG-BACKGROUND) ;
	background:var(--MENU-BACKGROUND) ;
	padding:20px ;
	color:white ;
	display:flex ;
	flex-direction:column ;
	gap:16px ;
	box-shadow:0 0 4px 2px #404040 ;
}

div.dlg > div h1
{
	text-align:center ;
	font-weight:normal ;
	color:var(--GREEN-VALUE) ;
}

div.dlg > div form
{
	width:350px ;
	margin:32px 0 ;
	display:flex ;
	flex-direction:column ;
	align-items:center ;
	gap:16px ;
}

div.dlg > div form input:not([type='submit'])
{
	padding:8px ;
	width:80% ;
	margin:0 ;
	background:#202020 ;
	color:white ;
	border:solid 1px var(--SCREEN-BACKGROUND) ;
	box-sizing:border-box ;
}

div.dlg > div form select
{
	padding:8px ;
	width:80% ;
	font-family:inherit ;
}

div.dlg > div form select option
{
	font-family:segoe ui ;
}

div.dlg > div form label
{
	display:flex ;
	flex-direction:column ;
	justify-content:left ;
	gap:4px ;
	width:80% ;
	padding:0 ;
}

div.dlg > div form label span
{
	font-size:0.8em ;
}

div.dlg > div form label input:not([type='submit']), div.dlg > div form label select
{
	width:100% ;
}

div.dlg > div form div.opt
{
	display:flex ;
	flex-direction:row ;
	padding-left:16px ;
	box-sizing:border-box ;
	gap:4px ;
	width:80% ;
	margin-top:-12px ;
	align-items:center ;
}

div.dlg > div form div.opt span
{
	white-space:nowrap ;
	font-size:0.8em ;
}

div.dlg > div form div.opt input
{
	flex-grow:1 ;
}

div.dlg > div form input[type='submit']
{
	margin-top:16px ;
	background:var(--GREEN-VALUE) ;
	color:white ;
	font-weight:bold ;
	border-style:none ;
	padding:8px 16px ;
	cursor:pointer ;
}

div.dlg > div form input[type='submit']:hover
{
	text-decoration:underline ;
}

h1
{
	padding:0 ;
	margin:0 ;
}

#login
{
}

#login form
{
}

a.clickable
{
	text-decoration:underline ;
	color:white ;
}

body:not(.connected)
{
}

body:not(.connected) nav > ul> li:not(#knowledgeBase):not(#profile)
{
	display:none ;
}

.openable:not(.open) > div, .openable:not(.open) > form
{
	display:none ;
}

.openable > div, .openable > form
{
	padding-left:16px ;
}

a.closeBtn
{
	position:absolute ;
	right:8px ;
	top:8px ;
	width:24px ;
	height:24px ;
	background:orange ;
}

.smallButton
{
	padding:4px 16px ;
	background:green ;
	color:white ;
	border-style:none ;
	border-radius:5px ;
	margin:0 5px ;
	opacity:0.8 ;
	cursor:pointer ;
}

.smallButton:hover
{
	opacity:1 ;
}