/* @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");	 */


/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src:
    local('Open Sans Regular'),
    local('OpenSans-Regular'),
      url('assets/fonts/open-sans-v15-latin-regular.eot?#iefix')
      format('embedded-opentype'),
    /* Super Modern Browsers */
      url('assets/fonts/open-sans-v15-latin-regular.woff')
      format('woff'),
    /* Modern Browsers */
      url('assets/fonts/open-sans-v15-latin-regular.ttf')
      format('truetype');
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 0;
}

header *, footer * {font-weight: 400!important;}
header#panooMenu {
	font-family: 'Open Sans';
	display:grid;
	grid-template-rows: 60px 1px 60px 10px;  		/* 1 px for the rainbow */
	grid-template-columns: 1fr 200px 800px 1fr; 	/* 1fr for left/right margin, 200px for the logo */
	gap: 0;
	width: 100vw;
	height: 100px; /* corresponds to body padding-top */
	overflow:hidden;
	position: fixed;
	top:0;
	left:0;
	z-index: 10000;
	opacity: 1!important;
	z-index: 100000;
}
header#panooMenu div#menu {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: auto repeat(5, max-content);
	padding: 0;
	gap: 0.8rem 20px;
	font-size: 22.4px;
	text-transform: uppercase;
	list-style-type: none;
	grid-area: 1/3/2/4;
	margin-top:1em;
	position:relative;
}
header#panooMenu div#menu #submenu {
	flex-direction: row;
	list-style: none;
	gap: 1rem;
	grid-column: 2/-1;
	padding: 0;
	font-size: 16px;
	display: none;
}
header#panooMenu #submenu {display: flex!important;}

header#panooMenu #logo {
	margin-top: 30px;
	display: flex;    /* vertical flex, gap controls text position */
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	color: white;
	background: #242529;
	padding: 0 12px;
	font-size: 15px;
	position:absolute;
	left: -10px;
}
.menuspace {
	width:100%;
	height:100px;
}

/* some more stuff to make it look like the original */
header#panooMenu {background: #242529}
header#panooMenu #rainbow {
	background: linear-gradient(90deg, rgba(255,89,0,1) 0%, rgba(255,201,0,1) 16%, rgba(0,255,34,1) 31%, rgba(0,241,255,1) 50%, rgba(0,18,255,1) 67%, rgba(248,0,255,1) 85%, rgba(255,72,0,1) 100%);
}
header#panooMenu #logo div {
	color: #fff;
	letter-spacing: 0.7px;
	font-size: 15px;
}
header#panooMenu #logo img {height: 30px}
header#panooMenu a.colored {
	pointer-events:none;
	margin-left:20px;
}

header#panooMenu a.colored.motu   {color: #D9EA3F}
header#panooMenu a.colored.manage {color: #da78ff} /* #CB56F7 */
header#panooMenu a.colored.create {color: #55b9ff} /* #3FA3EA */

header#panooMenu a, footer#panooFooter a{
	text-decoration: none;
	color: #b1b1b1;
}
header#panooMenu .active, footer#panooFooter .active, header#panooMenu a:hover:not([href="#"]), footer#panooFooter a:hover:not([href="#"]) {
	color: white;
}

footer#panooFooter {
	width:100vw; 
	background: #242529;
	position: fixed; 
	bottom:0; 
	left:0; 
	font-family: 'Open Sans';
	display:grid;
	grid-template-columns: 1fr minmax(500px, 1000px) 1fr;
	grid-template-rows: 100%;
	opacity: 1!important;
	z-index: 100000;
	border-top: 1px solid #3e3f42;
}
footer#panooFooter > div {
	display: flex;  /* horizontal flex */
	flex-direction: row;
	align-items: center;
	gap: 1em;
	font-size: 15px;
	height:100%;
	grid-area: 1/2/2/3;
	margin: 0;
	padding: 12px 0;
	box-sizing:border-box;
}

footer#panooFooter > div span:after {
	content:"|";
	margin-left:20px;
	color: #7f7d7d;	
}

#supermenu {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 12px;
    color:white;
    display: flex;
    gap: 10px;
}