[data-glossary-panel] {
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 100;
	background: #fff;
	top: 0; right: 0;
	height: 100vh;
	max-width: 300px;
	-webkit-transform: translateX(300px);
	transform: translateX(300px);
	-webkit-transition: transform 300ms ease-out;
	transition: transform 300ms ease-out;
}

[data-glossary-panel-header], [data-glossary-panel-footer], [data-glossary-panel-body] {
	padding: 0 1rem 0 2rem;
}

[data-glossary-panel-header], [data-glossary-panel-footer] {
	flex: 0;
}

[data-glossary-panel-footer] {
	margin-top: auto;
}

[data-glossary-panel-body] {
	flex: 1 auto;
	overflow: auto;
	padding: 0 1rem 0 2rem;
}

[data-glossary-term].is-active {
	background: yellow;
}

.glossar-opener {
	position: absolute;
	top: 1rem;
	left: 0;
	-webkit-transform: translate(-100%, 50%) translate(20px, 50%) rotate(-90deg);
	transform: translate(-100%, 50%) translate(20px, 50%) rotate(-90deg);
	padding: 10px;
	background: #ccc;
	border-radius: 3px 3px 0 0;
	cursor: pointer;
}

body.admin-bar [data-glossary-panel]{
	top: 46px;
}

html.glossary-panel-open [data-glossary-panel] {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

@media screen and (min-width: 783px){
	body.admin-bar [data-glossary-panel]{
		top: 32px;
	}
}

html.js [data-glossary-termlink] {
	cursor: help;
	border-bottom: 1px dotted currentColor;
}