@font-face {
	font-family: Stix;
	src: url('/asset/font/stix/STIX2Text-Regular.woff');
}
@font-face {
	font-family: Stix;
	src: url('/asset/font/stix/STIX2Text-Bold.woff');
	font-weight: bold;
}
@font-face {
	font-family: Stix;
	src: url('/asset/font/stix/STIX2Text-Italic.woff');
	font-style: italic;
}
@font-face {
	font-family: Stix;
	src: url('/asset/font/stix/STIX2Text-BoldItalic.woff');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: "Stix Math";
	src: url('/asset/font/stix/STIX2Math.woff');
}

html { font-family: Stix; }
* { box-sizing: border-box; }
b { font-weight: bold; }
i { font-style: italic; }
h1 { font-size: 200%; font-weight: bold; }
h2 { font-size: 175%; font-style: italic; }
h3 { font-size: 150%; font-weight: bold; }
h4 { font-size: 125%; font-style: italic; }
h5 { font-weight: bold; }
h6 { font-style: italic; }
p { padding: 0.25em; line-height: 1.125em; }

.panel {
	display: block;
	margin: 4px;
	padding: 4px;
	border: 2px solid #777777;
	border-radius: 8px;
	
	background-color: #cccddd;
}

.panel.inline { display: inline-block; }

.btn {
	display: inline-block;
	font-family: inherit;
	text-align: center;
	white-space: nowrap; 
	color: black;

	margin: 4px;
	padding: 4px 8px 2px;

	border-radius: 8px;
	border-top: 2px solid #eeeeee;
	border-bottom: 2px solid #444444;
	border-left: 2px solid #eeeeee;
	border-right: 2px solid #444444;
	background-color: #dddddd;
	outline: none;

	cursor: pointer;
	user-select: none;
	transition: 0.3s;
}
.btn.flat {
	border: 2px solid #777777;
}

.btn:hover {
	background-color: #cceeee;
}

.btn.active { background-color: #bbbbbb; }

.btn.down {
	border-top: 2px solid #444444;
	border-bottom: 2px solid #eeeeee;
	border-left: 2px solid #444444;
	border-right: 2px solid #eeeeee;
	background-color: #bbbbbb;

}


menu > ul { display: flex; }
menu a > * { width: 100%; }

menu.horizontal, menu.vertical {
	display: flex;
	background-color: #cccccc;
	justify-content: space-between;
	align-items: center;
}

menu .btn, menu .item {
	margin: 0;
	padding: 4px 8px;
	border-radius: 0;
}

menu .dropdown {
	position: relative;
}

menu .dropdown > menu {
	display:none;
	position: absolute;
	top: calc(100% + 2px);
	z-index: 10;
}
menu .dropdown > menu.right {
	right: -2px;
}

menu .item {
	text-align: center;
	white-space: nowrap; 
	
	border: none;
	background-color: transparent;
}

menu.horizontal {
	flex-direction: row;
}

menu.vertical {
	flex-flow: column nowrap;
	align-items: stretch;
	height: 100%;

}

menu.vertical .item {
	text-align: left; 
}

menu.vertical menu.vertical {
	padding: 0 8px;
}

menu.vertical > ul {
	flex-direction: column;
}

menu.horizontal .btn {
}

menu.vertical .btn {
}

nav.sidebar {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
}

nav.sidebar > .toggle {
	flex: 0 0;
	display: flex;
	align-items: center;
	padding: 4px;
	background-color: #cccccc;
	border-top: 2px solid #eeeeee;
	border-bottom: 2px solid #444444;
	border-left: 2px solid #eeeeee;
	border-right: 2px solid #444444;
}
nav.sidebar > .toggle[data-sidebar-state] > * { 
	display: none;
	font-size: 75%;
	user-select: none;
}
nav.sidebar > .toggle[data-sidebar-state="open"] > .close { display: inline; }
nav.sidebar > .toggle[data-sidebar-state="close"] > .open { display: inline; }

nav.sidebar > .content {
	flex: 1 1;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: stretch;
	overflow-y: auto;
}
/**[title] { position: relative; }
*[title]:after {
  content: "hello" attr(title);
*//*  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20;
  border-radius: 5px;  
  box-shadow: 0px 0px 4px #222;  
  background-color: #cccccc;
*/  /*background-image: linear-gradient(top, #eeeeee, #cccccc);  */
}