:root {
	--transparent: transparent;
	--white: #fff;
	--black: #000;
	--black-semi-transparent: rgba(0, 0, 0, 0.5);

	--c1: #c93f6f;
	--c2: #652e89;
	--c3: #3398ca;
	--accent: #652e89;

	--grey-lightest: #f9f9f9;
	--grey-lighter: #f3f3f3;
	--grey-light: #eee;
	--grey-medium: #ccc;
	--grey-dark: #777;
	--grey-darker: #555;

	--success: #5c5;
	--warn: #c55;

	--msg-scs-text: #484;
	--msg-scs-bkg: #efe;
	--msg-scs-brd: 1px solid #beb;

	--msg-wrn-text: var(--warn);
	--msg-wrn-bfr-text: var(--white);
	--msg-wrn-bfr-bkg: var(--warn);

	--hdr-bold-txt: var(--c2);
	--hdr-brd-top: 1px solid var(--grey-light);
	--hdr-brd-btm: 1px solid var(--c2);

	--h2-txt: var(--grey-darker);
	--h2-brd: 1px solid var(--grey-medium);

	--main-txt: var(--black);
	--main-bkg: var(--white);

	--title-txt: var(--black);

	--element-txt: var(--black);
	--element-brd: var(--grey-light);
	--element-bkg: var(--white);
	--element-phold: var(--grey-medium);

	--button-txt: var(--black);
	--button-brd: 1px solid var(--grey-dark);
	--button-bkg: linear-gradient(#e9e9e9 0%, #d7d7d7 100%);
	--button-hvr-brd: 1px solid #26a0da;
	--button-hvr-bkg: #a6f4ff;
	--button-txt-disabled: var(--grey-medium);
	--button-brd-disabled: 1px solid var(--grey-light);
	--button-bkg-disabled: var(--grey-lighter);

	--link: #01689b;
	--link-hvr: #01496d;
	--link-vst: #848;

	--instruct-bkg: #ebf8f4;

	--hint-txt: var(--grey-darker);
	--hint-txt-bld: var(--c1);
	--hint-bkg: var(--grey-lightest);

	--menu-icon-txt: var(--grey-darker);

	--home-svg: url(tab-home.svg);
	--actie-svg: url(tab-checklist.svg);
	--deelnemer-svg: url(tab-users.svg);
	--module-svg: url(tab-school.svg);
	--project-svg: url(tab-calendar.svg);
	--lijst-svg: url(tab-list.svg);
	--feedback-svg: url(tab-message.svg);
	--dashboard-svg: url(tab-chart.svg);
	--organisatie-svg: url(tab-orgchart.svg);
	--logoff-svg: url(tab-logout.svg);
	--save-svg: url(tab-save.svg);
	--cancel-svg: url(tab-cancel.svg);
	--delete-svg: url(tab-eraser.svg);
	--previous-svg: url(tab-previous.svg);
	--next-svg: url(tab-next.svg);
	--send-svg: url(tab-send.svg);
	--check-svg: url(tab-check.svg);
	--thumbs-up-svg: url(tab-thumbs-up.svg);
	--inspector-svg: url(tab-leaf.svg);

	--list-hi: var(--accent);
	--list-hvr-bkg: var(--grey-light);

	--form-lbl: var(--grey-dark);

	--period-txt: var(--grey-dark);

	--dtree-sld: var(--list-hi);
	--dtree-hvr: var(--list-hvr-bkg);

	--ctree-brd: 1px solid var(--grey-light);
	--ctree-item-brd: 1px solid var(--white);
	--ctree-item-fxd: var(--grey-lightest);
	--ctree-item-foc: var(--instruct-bkg);
	--ctree-item-aft: var(--c2);
	--ctree-srch-img: none;

	--ltable-lbl-txt: var(--grey-dark);
	--ltable-val-txt: var(--light);
}

body {
	font-family: system-ui, arial, sans-serif;
	color: var(--main-txt);
	background-color: var(--main-bkg);
}

h1, h2, h3, h4 {
	font-family: system-ui, arial, sans-serif;
	font-weight: normal;
}

h2, h3 {
	color: var(--title-txt);
}

h2 {
	font-size: 125%;
	color: var(--h2-txt);
	text-wrap: nowrap;
}

h2 span.actions {
	font-size: 80%;
}

a, a:visited {
	color: var(--link);
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: var(--link-hvr);
	text-decoration: underline;
}

a.last {
	color: var(--link-vst);
}

b {
	color: var(--c2);
}

p {
	margin: 0;
	padding: 0.7em 0 0 0;
}

ul {
	list-style-type: square;
}

input[type=submit],
input[type=text],
input[type=search],
input[type=password],
span.text input,
select,
span.dropdown select,
span.text textarea,
textarea {
	color: var(--element-txt);
	padding: 2px 0.3em;
	margin-left: 0;
	margin-right: 0.2em;
	border: 1px solid var(--element-brd);
	background-color: var(--element-bkg);
}

select,
span.dropdown select {
	padding: 1px 0.3em;
}

button,
input[type=submit],
input[type=button] {
	color: var(--button-txt);
	padding: 2px 0.4em;
	margin-left: 0;
	border: var(--button-brd);
	background: var(--button-bkg);
}

button:hover,
input[type=submit]:hover,
input[type=button]:hover {
	border: var(--button-hvr-brd);
	background: var(--button-hvr-bkg);
}

button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled {
	color: var(--button-txt-disabled);
	padding: 2px 0.4em;
	border: var(--button-brd-disabled);
	background: var(--button-bkg-disabled);
}

input::placeholder {
	color: var(--element-phold);
	font-size: 90%;
}

dl {
	margin: 2em 2em;
}

dl dt {
	font-size: 110%;
	font-weight: normal;
	color: var(--accent);
	margin: 0.3em 0;
}

dl dd {
	padding: 0;
	margin: 0 0 1em 0;
}

dl.overzicht dt:hover {
	cursor: pointer;
}

:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--accent);
}

.hidden {
	display: none;
}

.comment {
	color: var(--warn);
}

.prewrap {
	white-space: pre-wrap;
}

span.collectief {
	color: var(--c1);
	font-weight: 700;
}

.periods {
	font-size: 85%;
	color: var(--period-txt);
}

#container {
	;
}

#main {
	position:relative;
	display: grid;
	grid-template-columns: 12em 1fr;
	grid-template-rows: 4em 1fr;
	grid-template-areas:
		"nav header"
		"nav app";
	height: 100vh;
	max-width: initial;
	margin:0;
	padding: 0;
	color: var(--main-txt);
	background-color: var(--main-bkg);
}

nav {
	z-index: 10;
	position: fixed;
	top: 0;
	bottom: 0;
	width: 12em;
	padding-top: 5em;
	background-color: #f6f6f6;
	background-image: url(/llo/llo-portaal.svg);
	background-repeat: no-repeat;
	background-size: 160px;
	background-position: 1em 1.1em;
	grid-area: nav;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 5;
	position: sticky;
	top: 0;
	padding-inline: 0.5em;
	background-color: var(--main-bkg);
	border-bottom: 1px solid #ddd;
	grid-area: header;
}

#app {
	padding: 1em;
	grid-area: app;
}

header h1 {
	font-family: system-ui, arial, sans-serif;
	font-size: 150%;
	font-weight: normal;
	color: var(--c1);
	padding-left: 0.3em;
	margin: 0;
}

header b {
	color: var(--hdr-bold-txt);
	font-weight: normal;
}

span.darkmode-toggle {
	font-size: 120%;
	padding: 0.2em 0 0.2em 0.5em;
	cursor: pointer;
}

span.darkmode-toggle:hover {
	color: var(--c2);
}

div.instruct {
	display: inline-block;
	min-width: 28em;
	line-height: 1.4;
	color: var(--main-txt);
	padding: 1em 0.5em;
	background-color: var(--instruct-bkg);
}

div.announcement {
	background-color: yellow;
	margin: 0 0 0.5em 0;
	padding: 0.5em 1em;
}

div.panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1em;
	max-width: 100em;
	min-width: 44em;
}

.lpanel, .rpanel {
	min-width: 22em;
	padding-inline: 0.1em;
	overflow-x: hidden;
}

div.duoform {
	display: flex;
	flex-wrap: wrap;
	column-gap: 6em;
}

section.main {
	padding: 0 1em 1em 1em;
}

div.hint {
	max-width: 60em;
}

div.hint:empty,
div.tip:empty {
	display: none;
}

div.hint,
div.tip {
	margin: 0.5em 0em;
	padding: 0.8em 0.5em;
	color: var(--hint-txt);
	border: none;
	background-color: var(--hint-bkg);
}

div.hint b,
div.tip b {
	color: var(--hint-txt-bld);
}

.flex {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 1em;
}

.grid {
	display: grid;
}

div.notfound {
	font-style: italic;
	text-align: center;
	margin: 2em;
}

div.filters, div.nofilters {
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.3em;
	align-items: center;
	justify-content: space-between;
}

div.nofilters {
	font-size: 110%;
	color: var(--c2);
}

div.traject_header,
div.account_header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5em;
	margin-bottom: -0.5em;
}

div.account_header {
	margin-top: 0.2em;
}

div.traject_header h2 img.traject {
	margin-inline: 0.3em;
	vertical-align: text-bottom;
}

div.traject_header h2 img.support {
	margin-left: 0.2em;
	vertical-align: text-top;
}

span.lijstname {
	color: var(--c2);
}

span.hname {
	color: var(--c2);
}

span.actions button,
span.typeahead button {
	border: none;
	background: none;
	padding: 0 0.3em;
	margin: 0 0 0 0.2em;
	cursor: pointer;
}

span.typeahead button {
	margin: 0;
	vertical-align: bottom;
}

span.actions button:disabled {
	cursor: auto;
}

span.actions button img,
span.typeahead button img {
	vertical-align: bottom;
}

span.actions button:disabled img {
	filter: opacity(0.3);
}

div.dname {
	font-size: 125%;
	color: var(--c2);
	margin: 0;
	padding-bottom: 0.3em;
	text-align: right;
	border-bottom: 1px solid #eee;
}

img.explain {
	vertical-align: text-bottom;
}


/* scrollable containers */

div.scroll,
div.scrollfewer {
	color: var(--main-txt);
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 30em;
	text-wrap: nowrap;
	margin: 0.5em 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

div.scrollfewer {
	overflow-y: auto;
	overflow-x: initial;
	border-bottom: 1px solid var(--transparent);
}

/* regular trees */

div.display-tree div.tleaf {
	user-select: none;
}

div.display-tree div.tleaf > div.tleaf {
	padding-left: 1.2em;
}

div.display-tree div.tleaf > div.tleaf div.tcaption {
	position: relative;
	display: list-item;
	list-style-type: square;
	margin-left: 1em;
}

div.display-tree div.tleaf > div.tleaf div.tcaption.hilighted {
	list-style-type: none;
}

div.display-tree div.tcaption {
	white-space: nowrap;
	padding: 0.14em;
    margin: 0.1em 0 0.1em 0.2em;
	cursor: pointer;
}

div.display-tree div.tcaption.hilighted {
	color: var(--dtree-sld);
}

div.display-tree div.tcaption:hover {
	background-color: var(--dtree-hvr);
}

/* compact trees */

input.flashed {
	color: var(--white);
	background-color: var(--c1);
}

div.display-compact-tree {
	position: relative;
	margin: 0;
	padding: 0;
	overflow-y: auto;
}

div.display-compact-tree div.controls {
	margin: 0.2em 0 0.5em 0;
}

div.display-compact-tree div.controls input {
	margin-right: 0.1em;
}

div.display-compact-tree div.controls input[type=text] {
	width: 9em;
}

div.display-compact-tree div.listing {
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 22em;
	border: var(--ctree-brd);
}

div.display-compact-tree ul {
	user-select: none;
	list-style-type: none;
	margin: 0;
	padding: 0 0.1em 0 0.1em;
}

div.display-compact-tree ul li {
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	margin: 0.1em 0;
	padding: 0.2em 0.5em 0.2em 1.3em;
	border: var(--ctree-item-brd);
}

div.display-compact-tree ul li.fixed {
	padding-left: 0.5em;
	background-color: var(--ctree-item-fxd);
}

div.display-compact-tree ul li.focussed,
div.display-compact-tree ul li.hilighted {
	background-color: var(--ctree-item-foc);
}

div.display-compact-tree ul li.focussed::after,
div.display-compact-tree ul li.hilighted::after {
	color: var(--ctree-item-aft);
	content: '\276E';
	font-size: 110%;
	position: absolute;
	right: 0.3em;
}

div.display-compact-tree ul li:hover {
	border-bottom: 1px dotted var(--grey-medium);
}

div.display-compact-tree button img {
	height: 1em;
	vertical-align: middle;
	filter: var(--ctree-srch-img);
}

div.display-compact-tree * b {
	font-weight: normal;
	color: var(--c1);
}

/* lvs/display-object */

div.display-object {
	margin: 0.7em 0 1em 0;
	padding-block: 0.5em;
	border-top: 1px solid #eee;
	line-height: 1.4;
}

div.display-object div.label {
	color: var(--form-lbl);
	padding-left: 0;
}

div.display-object div.value {
	margin-bottom: 0.5em;
}

div.display-object.leaf-info {
	border-top: none;
}

div.display-object.leaf-info:empty {
	display: none;
}

/* module */

div.display-object.module {
	margin-bottom: 0;
}

div.module-info {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 0.5em;
}

div.module-info div {
	text-wrap: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

div.filters span.typeahead button {
	padding-right: 0;
}

/* lvs/display-objects */

div.display-objects.scroll.lpanel-auto {
	height: calc(100vh - 250px);
	max-height: initial;
}

div.display-objects.scroll.dln-auto {
	height: calc(100vh - 423px);
	max-height: initial;
}

div.display-objects ul {
	margin: 0;
	padding: 0 0;
	user-select: none;
}

div.display-objects li {
	list-style-type: none;
	margin: 0;
	cursor: pointer;
	border-left: 4px solid var(--transparent);
	border-bottom: 1px solid #eee;
	border-radius: 0.3em 0 0 0.3em;
}

div.display-objects li.hilighted {
	color: var(--list-hi);
	border-left: 4px solid var(--c2);
	border-radius: 0.3em 0 0 0.3em;
}

div.display-objects li:hover {
	background-color: #f8f8f8;
}

/* objects in display-objects */

div.do-item {
	line-height: 1.4;
	padding: 0.5em;
}

div.do-item div.traject {
	display: grid;
	grid-template-columns: 1fr 6em 6em;
}

div.do-item div.support {
	display: grid;
	grid-template-columns: 1fr 7em;
}

div.do-item div.notitie {
	display: grid;
	grid-template-columns: 1fr 7em;
}

div.do-item div.organisatie {
	display: grid;
	grid-template-columns: 3em auto;
}

div.do-item div.account {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
}

div.do-item div.account span.state {
	font-size: 90%;
	color: #777;
}

div.do-item div.code {
	color: var(--c1);
	text-wrap: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

div.do-item div.label {
	text-align: right;
	color: #999;
}

div.do-item div.stamp,
div.do-item div.hours {
	text-align: right;
}

div.do-item span.value,
div.do-item div.info,
div.do-item div.code span.value {
	font-size: 90%;
	color: var(--grey-darker);
}

div.do-item div.info {
	margin: 0.2em 0 0 0;
	padding: 0;
}

div.do-item div.stamp,
div.do-item div.label,
div.do-item div.value {
	font-size: 90%;
}

div.do-item div.label.center {
	text-align: center;
}

div.do-item div.deelnemer {
	display: grid;
	grid-template-columns: 1fr auto 1.8em 1.8em;
}

div.do-item div.module_deelnemer {
	display: grid;
	grid-template-columns: 1fr auto;
}

div.do-item div.name {
	text-wrap: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

/* surveys */

div.surveys {
	margin-top: 0.8em;
	border-bottom: 1px solid #eee;
}

div.survey {
	display: grid;
	grid-template-columns: 2em 1fr auto;
	align-items: center;
	height: 2.5em;
	padding-left: 0.5em;
	padding-right: 0;
	border-top: 1px solid #eee;
}

div.survey div.code {
	color: var(--c1);
}

div.survey div.action {
	text-align: right;
}

div.survey a.action {
	display: block;
	width: 3em;
	text-align: center;
	color: var(--white);
	background-color: var(--c1);
	padding: 0.3em 1em;
	border-radius: 3px;
}

div.survey a.action:hover {
	text-decoration: none;
	background-color: var(--c2);
}

div.survey-legend {
	display: flex;
	align-items: center;
	column-gap: 2em;
	font-size: 85%;
	padding-block: 0.7em;
}

div.survey-legend span {
	margin-right: 0.2em;
}

/* ui/actionbar */

div.actionbar {
	;
}

div.actionbar ul {
	padding: 0;
}

div.actionbar ul li {
	color: #4a4a4a;
	font-size: 105%;
	padding: 0.6em 0.5em 0.6em 2.5em;
	margin-bottom: 0;
	border-radius: initial;
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: 0.8em 50%;
}

div.actionbar ul li.selected {
	color: var(--c2);
	background-color: #fff;
}

div.actionbar ul li.enabled:hover {
	color: var(--c2);
	background-color: #fff;
}

div.actionbar ul li.header {
	color: var(--main-txt);
}

div.actionbar ul li + li.header {
	margin-top: 0;
}

div.actionbar li.home {
	background-image: var(--home-svg);
}

div.actionbar li.acties {
	background-image: var(--actie-svg);
}

div.actionbar li.deelnemers {
	background-image: var(--deelnemer-svg);
}

div.actionbar li.modules {
	background-image: var(--module-svg);
}

div.actionbar li.project {
	background-image: var(--project-svg);
}

div.actionbar li.lijsten {
	background-image: var(--lijst-svg);
}

div.actionbar li.feedback {
	background-image: var(--feedback-svg);
}

div.actionbar li.organisaties {
	background-image: var(--organisatie-svg);
}

div.actionbar li.dashboard {
	background-image: var(--dashboard-svg);
}

div.actionbar li.inspectie {
	background-image: var(--inspector-svg);
}

div.actionbar li.logoff {
	background-image: var(--logoff-svg);
}

div.actionbar li.save {
	background-image: var(--save-svg);
}

div.actionbar li.cancel {
	background-image: var(--cancel-svg);
}

div.actionbar li.delete {
	background-image: var(--delete-svg);
}

div.actionbar li.previous {
	background-image: var(--previous-svg);
}

div.actionbar li.next {
	background-image: var(--next-svg);
}

div.actionbar li.send {
	background-image: var(--send-svg);
}

div.actionbar li.check {
	background-image: var(--check-svg);
}

div.actionbar li.thumbs-up {
	background-image: var(--thumbs-up-svg);
}

div.actionbar li.divider {
	padding: 0;
    margin-block: 2em;
}

/* ui/message */

div.msg-success {
	display: inline-block;
	color: var(--msg-scs-text);
	min-width: 20em;
	margin: 0.5em 0;
	padding: 0.5em 0.5em 0.5em 2em;
	background-color: var(--msg-scs-bkg);
	border-bottom: var(--msg-scs-brd);
}

div.msg-success::before {
	left: 12px;
	top: 9px;
	border-color: var(--msg-scs-text);
}

div.msg-warning {
	color: var(--msg-wrn-text);
}

div.msg-warning::before {
	color: var(--msg-wrn-bfr-text);
	background-color: var(--msg-wrn-bfr-bkg);
}

/* pg/form */

div.form {
	margin: 1em 0 0.5em 0;
}

div.form div.label,
div.form td.label {
	color: var(--form-lbl);
	padding-left: 0;
}

div.form div.navigation {
	margin: 1em 0 0.5em 0;
}

.form textarea {
	min-width: 28em;
}


/* hum/temp: demo only */
div.deelnemer span.intake {
	font-size: 120%;
	margin-right: 0.3em;
}

div.deelnemer div.intake,
div.deelnemer div.exit {
	text-align: center;
}

div.deelnemer div.intake.finished,
div.deelnemer div.exit.finished,
div.survey-legend span.finished {
	color: var(--success);
}

div.deelnemer div.intake.started,
div.deelnemer div.exit.started,
div.survey-legend span.started {
	color: var(--warn);
}

div.deelnemer div.intake.needed,
div.deelnemer div.exit.needed,
div.survey-legend span.needed {
	color: #ddd;
}

div.dashboard {
	display: grid;
	grid-template-columns: 400px 400px 400px;
	column-gap: 1em;
}

div.dfilter select {
	font-size: 100%;
	padding: 0.2em 0.5em;
}

div.dfilter input[type=checkbox] {
	;
}

div.chart {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-template-areas:
		"title"
		"svg"
		"legend";
	box-sizing: border-box;
	width: 100%;
	padding-left: 0.5em;
	padding-bottom: 0.5em;
	background-color: #fff;
}

div.chart:empty {
	margin: 0;
	border: none;
}

div.chart text.val, div.chart text.pvalue {
	font-family: system-ui;
	/* font-size: 1.1em; */
	font-weight: 600;
	color: #444;
}

div.chart.lgd_top {
	grid-template-areas:
		"title"
		"legend"
		"svg";
}

div.chart.lgd_bottom {
	grid-template-areas:
		"title"
		"svg"
		"legend";
}

div.chart.lgd_left {
	grid-template-columns: max-content max-content;
	grid-template-areas:
		"title title"
		"legend svg"
}

div.chart.lgd_right {
	grid-template-columns: max-content max-content;
	grid-template-areas:
		"title title"
		"svg legend"
}

div.chart_title {
	font-family: system-ui;
	font-size: 120%;
	/*font-weight: 600;*/
	color: #652e89;
	text-align: left;
	padding-left: 0.3em;
}

div.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-left: 0.5em;
}

div.compare div.value {
	font-family: system-ui;
	font-size: 2.4em;
	font-weight: 600;
	color: #444;
}

div.compare div.label {
	font-size: 1em;
	color: #222;
}

/* ltable */

table.ltable td.key {
	color: var(--ltable-lbl-txt);
	padding: 0;
}

table.ltable td.value {
	color: var(--ltable-val-txt);
	padding: 0;
	padding-left: 1em;
}

/* cards */

div.cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

div.card {
	flex-basis: 320px;
	flex-grow: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 1em;
	border: 1px solid var(--grey-lighter);
	border-radius: 8px;
	box-shadow: 2px 2px 4px 0px #ccc;
	background-color: var(--white);
}

div.card h2 {
	color: var(--c2);
}

div.card div.logo {
	background-repeat: no-repeat;
	height: 80px;
}

div.card.itta div.logo {
	background-image: url(/llo/itta.svg);
	background-size: 130px;
}

div.card.les div.logo {
	background-image: url(/llo/les.svg);
	background-size: 130px;
}

div.card.abc div.logo {
	background-image: url(/llo/abc.jpg);
	background-size: 80px;
}

div.card div.links {
	text-align: right;
	margin-top: 1.5em;
}


@media screen and (max-width: 1000px) {

div.panels {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: initial;
	max-width: initial;
	min-width: initial;
}

.lpanel, .rpanel {
	width: 100%;
	min-width: initial;
}

.lpanel {
	margin-bottom: 1em;
}

.rpanel {
	overflow-x: initial;
}

div.scroll {
	max-height: 18em
}

div.display-objects.scroll.lpanel-auto,
div.display-objects.scroll.dln-auto {
	height: initial;
	max-height: 18em;
}

div.dashboard {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: initial;
}

}

@media screen and (max-width: 768px) {

#main {
	grid-template-columns: 3em 1fr;
}

nav {
	width: 3em;
	overflow: hidden;
	padding-top: 5em;
	background-color: #eee;
	background-image: initial;
}

div.actionbar ul li,
div.actionbar ul li.selected,
div.actionbar ul li.enabled:hover {
	color: var(--transparent);
}

}