/* css conventions
	position, layout (incl. margin), overflow
	size, padding
	border, shadows, background
	content, typography
	interaction, animations
*/



/**//**//* universal defaults *//**//**/ 
html, body, head, title, base, link, meta, style, address, article, aside, footer, header, h1, h2, h3, h4, h5, h6, hgroup, main, nav, section, blockquote, dd, div, dl, dt, figcaption, figure, hr, li, menu, ol, p, pre, ul, a, abbr, b, bdi, bdo, br, cite, code, data, dfn, em, i, kbd, mark, q, rp, rt, ruby, s, samp, small, span, strong, sub, sup, time, u, var, wbr, del, ins, area, audio, img, map, track, video, svg, math, caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr, button, datalist, fieldset, form, input, label, legend, meter, optgroup, option, output, progress, select, textarea,
details, dialog, summary, slot, template {
    all:unset;
}
head, title {
	display:none;
}
html, body {
	width:100%; margin:0; padding:0;
	background-color:#FEFEFE; color:#172B4D; font-family:Roboto; font-size:1rem; font-weight:400;
}
input[type="text"], input[type="email"], textarea {
	overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer;
	background-color:#FEFEFE;
}
input[type="text"]:hover, input[type="email"]:hover, textarea:hover, input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	background-color:#DEEBFF;
}
input[type="text"]:hover, input[type="email"]:hover, textarea:hover {
	cursor:pointer;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	cursor:text;
}
button {
	transition:background-color 0.25s ease, color 0.25s ease; cursor:pointer;
}
label {
	font-size:0.8rem;
}



/**//**//* universal z-indexes *//**//**/ 
.toast--container {
	z-index:100;
}
.login--container {
	z-index:99;
}
.login--wrapper {
	z-index:98;
}
.nav--wrapper {
	z-index:97;
}



/**//**//* toast *//**//**/ 
.toast--container {
	position:fixed; display:flex; flex-direction:column; gap:0.5rem; top:1rem; left:50%; transform:translateX(-50%); pointer-events:none;
}
.toast--span {
	padding:0.5rem 1rem; pointer-events:auto; transform:translateY(-2rem); transition:all 0.3s ease; text-align:center;
	 border:solid 0.1rem #FEFEFE; border-radius:999rem; box-shadow:0 0 0.75rem 0.25rem rgba(0,0,0,0.1); background-color:#172B4D; opacity:0; color:#FEFEFE; font-size:0.8rem;
}
.toast--visible {
	transform:translateY(0);
	opacity:1;
}



/**//**//* tooltip *//**//**/
.nav--level1--tooltip, .stakeholder--level2--tooltip {
	position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%, 0.25rem); white-space:nowrap;
	padding:0.25rem;
	background-color:#172B4D; border-radius:0.25rem; opacity:0;
	color:#FEFEFE; font-size:0.8rem;
	pointer-events:none;
}
.nav--level1--button:hover .nav--level1--tooltip, .stakeholder--level2--button:hover .stakeholder--level2--tooltip {
	opacity:1;
}


/**//**//* login *//**//**/ 
.login--wrapper {
	position:fixed; display:none; justify-content:center; align-items:center; inset:0;
	background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);
}
.login--container {
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.25rem; width:22rem; padding:2rem; text-align:left; animation:popIn 0.25s ease;
	border-radius:1rem; background-color:#FEFEFE; box-shadow:0 0 0.75rem 0.25rem rgba(0,0,0,0.1);
}
.login--img {
	width:5rem;
}
.login--label {
	font-size:0.9rem; color:#333333;
}
.login--input {
	width:100%;
	border-bottom:solid 0.1rem #B3D4FF; border-left:solid 0.1rem #2684FF;
}
.login--button {
	position:relative; display:inline-flex; align-items:center; justify-content:center; align-self:stretch; padding:0.5rem;
	border:solid 0.2rem #DEEBFF; border:solid 0.2rem #DEEBFF; border-radius:999rem;
}
.login--button:hover, .login--button:focus {
	background-color:#DEEBFF;
}