/* ///////// */
/* Variables */
/* ///////// */

/* Colors */

:root{
	--font-primary: 'Rubik', sans-serif;
	
	--color-success: rgb(79 173 93);
	--color-success-brighter: rgb(122 194 133);
	--color-success-darker: rgb(60 100 60);
	--color-warning: rgb(255 136 0);
	--color-warning-brighter: rgb(255 195 128);
	--color-warning-darker: rgb(205 108 0);
	--color-error: rgb(220 56 56);
	--color-error-brighter: rgb(237 94 94);
	--color-error-darker: rgb(195 48 48);
	
	--color-booked-green: rgb(79 173 93);
	--color-booked-green-darker: rgb(60 100 60);
	--color-booked-orange: rgb(244, 157, 55);
	--color-booked-orange-darker: rgb(207 126 32);
	--color-booked-red: rgb(220 56 56);
	--color-booked-red-minimal-darker: rgb(195 48 48);
	--color-booked-red-darker: rgb(168 56 56);
	--color-booked-red-much-darker: rgb(138 51 51);
	
	--border-width-default: 1px;
	--border-width-panel: var(--border-width-default);
	--border-width-input: var(--border-width-default);
	--border-width-button: var(--border-width-default);
	
	--border-radius-default: 3px;
	--border-radius-panel: 5px;
	--border-radius-input: var(--border-radius-default);
	--border-radius-button: var(--border-radius-default);
	
	--button-gap: 0.3em;
	--button-gap-more: 0.4em;
	--button-gap-less: 0.2em;
	--button-size-coarse: 2rem;
	--button-size-fine: 1.6rem;
	--button-svg-size: 1.2rem;
	--icon-svg-size: var(--button-svg-size);
}
		
		
/* //////////////// */
/* General ELEMENTS */
/* //////////////// */

*:not(td){
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
}

html{
	font-family: var(--font-primary);
	font-size: 15px;
}

body{
	padding: 0px;
	margin: 0px;
	overflow-y: scroll;
	color: var(--color-text);
	background-color: var(--color-bg-0);
}

pre{
	margin:0px;
	padding:0px;
}

a{
	cursor: pointer;
	text-decoration: none;
	color: var(--color-primary);
}

a.link-color-neutral{
	color: var(--color-text);
}

@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	a:hover,
	a:active,
	a:focus{
		color: var(--color-secondary);
	}
	
	a.link-color-neutral:hover,
	a.link-color-neutral:active,
	a.link-color-neutral:focus{
		color: var(--color-primary);
	}
}

hr{
	height: 6px;
	margin: 25px auto 25px auto;
	border:0;
	border-radius: 5px;
}

ul{
	list-style:none;
	margin: 0;
	padding: 0;
}

table{
	page-break-inside:auto;
}

table.table-rounded tr:first-child td:first-child,
.table-rounded .table-rounded-top-left{
    border-top-left-radius: 5px;
}

table.table-rounded tr:first-child td:last-child,
.table-rounded  .table-rounded-top-right{
    border-top-right-radius: 5px;
}

table.table-rounded tr:last-child td:first-child,
.table-rounded  .table-rounded-bottom-left{
    border-bottom-left-radius: 5px;
}

table.table-rounded tr:last-child td:last-child,
.table-rounded  .table-rounded-bottom-right{
    border-bottom-right-radius: 5px;
}

tr{
	page-break-inside:avoid;
	page-break-after:auto;
}

th{
	text-align:center;
	background:rgb(255,255,255,0.15);
	padding:10px;
}

h1{
	font-weight:normal;
	font-size:22px;
	text-align:center;
}

h3{
	color:#33aaff;
	font-size:15px;
	margin:0px 0px 10px 0px
}

h4{
	color:#ff5533;
	font-size:15px;
	margin:0px 0px 10px 0px
}

h5{
	color:#ffad33;
	font-size:15px;
	margin:0px 0px 10px 0px
}


/* ///////////// */
/* General FLAGS */
/* ///////////// */

.hidden,
.hidden-hard,
.invisible,
.wip,
.template{
	display: none !important;
}

.hidden-soft{
	display: none;
}

.inactive,
.grayed,
.disabled,
:disabled{
	opacity: 0.5;
}

.autofill_prevent{
	display: block;
	height: 0px;
	width: 0px;
	padding: 0px !important;
	margin: 0px !important;
	opacity: 0;
}

.clear{
	width: 0px;
	height: 0px;
	clear: both;
}

.spacer{
	width: 100%;
	height: 5px;
	background: rgba(0,0,0,0.2);
	margin: 10px 0px 10px 0px;
}

.spacer-big{
	margin: 8px 10px;
}

.spacer-medium{
	margin: 4px 8px;
}

.spacer-small{
	margin:2px 5px;
}

.spacer-very-small{
	margin:0px 1px;
}

.sorting, .sorting a{
	cursor: move !important;
}

.bold{
	font-weight:bold;
}

.placeholder{
  color: var(--color-text);
}

.scroll-wrapper{
	width:100%;
	height:100%;
}

.flex-left{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.flex-right{
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.flex-center{
	display:flex;
	justify-content:center;
	align-items:center;
}

.rounded-top-left{
	border-top-left-radius: 3px;
}

.rounded-top-right{
	border-top-right-radius: 3px;
}

.rounded-bottom-left{
	border-bottom-left-radius: 3px;
}

.rounded-bottom-right{
	border-bottom-right-radius: 3px;
}

.message-box{
	display:none;
}

.error{
	color: var(--color-error);
}

.warning{
	color: var(--color-warning);
}

.inline-margin{
	margin: 0em 0.5em 0em 0.5em;
}

.not-allowed{
	cursor: not-allowed;
}

.print{
	display: none;
}


/* ////////// */
/* General UI */
/* ////////// */

/* Inputs / General */

input,
button,
textarea{
	font-family: inherit;
	font-size: inherit;
    line-height: inherit;
}

input,
textarea,
button.counter,
select + .ui-selectmenu-button,
input[type="checkbox"] + .ui-checkbox{
	color: var(--color-text);
	background-color: var(--color-dimmed-less);
	border-width: var(--border-width-button);
	border-color: var(--color-dimmed);
	border-radius: var(--border-radius-input);
	outline: 0;
}

input,
textarea,
select + .ui-selectmenu-button{
	padding: 6px;
}

button.counter,
input[type="checkbox"] + .ui-checkbox{
	padding: 0px;
}

input:not(:disabled):focus,
input:not(:disabled):active,
textarea:not(:disabled):focus,
textarea:not(:disabled):active,
button.counter:not(:disabled):focus,
button.counter:not(:disabled):active,
select:not(:disabled) + .ui-selectmenu-button:focus,
select:not(:disabled) + .ui-selectmenu-button:active,
input[type="checkbox"]:not(:disabled) + .ui-checkbox:focus,
input[type="checkbox"]:not(:disabled) + .ui-checkbox:active{
	border-color: var(--color-primary);
}

@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	input:not(:disabled):hover,
	textarea:not(:disabled):hover,
	button.counter:not(:disabled):hover,
	select:not(:disabled) + .ui-selectmenu-button:hover,
	input[type="checkbox"]:not(:disabled) + .ui-checkbox:hover{
		border-color: var(--color-primary);
	}
}

.disabled input,
.disabled input:hover,
.disabled input:focus,
.disabled input:active,
.disabled textarea,
.disabled textarea:hover,
.disabled textarea:focus,
.disabled textarea:active,
.disabled button.counter,
.disabled button.counter:hover,
.disabled button.counter:focus,
.disabled button.counter:active,
.disabled select + .ui-selectmenu-button,
.disabled select + .ui-selectmenu-button:hover,
.disabled select + .ui-selectmenu-button:focus,
.disabled select + .ui-selectmenu-button:active,
.disabled input[type="checkbox"] + .ui-checkbox,
.disabled input[type="checkbox"] + .ui-checkbox:hover,
.disabled input[type="checkbox"] + .ui-checkbox:focus,
.disabled input[type="checkbox"] + .ui-checkbox:active{
	border-color: var(--color-dimmed);
	cursor: default;
}

input:-webkit-autofill,
input:-webkit-autofill:focus{
	transition: background-color 0s 600000s, color 0s 600000s;
}


/* Inputs / Filter Input */

input.filter{
	width: 100%;
	margin-bottom: 10px;
	color: var(--color-text);
	background: none;
	border-width: 0px 0px 1px 0px;
	border-style: dotted;
	border-color: var(--color-border-2);
	box-shadow: unset;
}

input.filter:focus,
input.filter:active{
	border-color: var(--color-primary);
	box-shadow: unset !important;
}
	
@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	input.filter:hover{
		border-color: var(--color-primary);
		box-shadow: unset !important;
	}
}


/* Inputs / Textarea */

textarea{
	resize: vertical;
}


/* Inputs / Selectmenu */

.ui-menu-item:hover{
	background-color: var(--color-primary);
}


/* Inputs / Checkbox & Counter */

button.counter,
input[type="checkbox"] + .ui-checkbox{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 3px;
}

@media (-moz-touch-enabled: 0), (pointer:fine){
	button.counter,
	input[type="checkbox"] + .ui-checkbox{
		width: 1.6rem;
		height: 1.6rem;
	}
}

button.counter:not(:disabled),
input[type="checkbox"]:not(:disabled) + .ui-checkbox{
	cursor: pointer;
}


/* Inputs / Checkbox */

.ui-checkbox-wrapper{
	display: inline-flex;
}

input[type="checkbox"]{
	display: none;
}

input[type="checkbox"] + .ui-checkbox > .ui-checkbox-checked{
	color: var(--color-success);
}

input[type="checkbox"] + .ui-checkbox > .ui-checkbox-unchecked{
	color: var(--color-error);
}

input[type="checkbox"]:checked + .ui-checkbox > .ui-checkbox-unchecked{
	display: none;
}

input[type="checkbox"]:not(:checked) + .ui-checkbox > .ui-checkbox-checked{
	display: none;
}


/* Inputs / Checkbox / Preview */

.icon.ui-checkbox-preview{
	width: var(--button-size-coarse);
	height: var(--button-size-coarse);
}

@media (-moz-touch-enabled: 0), (pointer:fine){
	.icon.ui-checkbox-preview{
		width: var(--button-size-fine);
		height: var(--button-size-fine);
	}
}

.icon.ui-checkbox-preview[data-name="check"]{
	color: var(--color-success);
}

.icon.ui-checkbox-preview[data-name="re"]{
	color: var(--color-error);
}


/* Inputs / Counter */

.counter-array,
.counter-array-buttons{
	display: inline-flex;
	align-items: center;
	gap: var(--button-gap-more);
	height: var(--button-size-coarse);
}

@media (-moz-touch-enabled: 0), (pointer:fine){
	.counter-array,
	.counter-array-buttons{
		height: var(--button-size-fine);
	}
}

.counter-array-buttons{
	gap: var(--button-gap-less);
}

/* Inputs / Counter / Display */

*[class^="count-display"],
*[class*=" count-display"]{
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}


/* Buttons & Icons */
/* Buttons & Icons / General */

.button,
.icon{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--button-gap);
	border-radius: 3px;
}

.button-svg,
.icon{
	padding: 0px;
	color: inherit;
}

.button{
	cursor: pointer;
	color: var(--color-text);
	white-space: nowrap;
}

.button-svg{
	width: var(--button-size-coarse);
	height: var(--button-size-coarse);
	background-color: var(--color-elevated);
    border-width: var(--border-width-button);
    border-color: var(--color-elevated-less); /* Adds up with bg-color above, so it is more elevated visually */
}

@media (-moz-touch-enabled: 0), (pointer:fine){
	.button-svg{
		width: var(--button-size-fine);
		height: var(--button-size-fine);
		border-width: 0px;
		background: none;
	}
}

.icon{
	border: none;
	background: none;
}


/* Buttons & Icons / Hover, Focus, Active */

.button-svg,
.button-svg:focus,
.button-svg:active{
	opacity: 1;
}

@media (-moz-touch-enabled: 0), (pointer:fine){	
	.button-svg,
	.disabled .button-svg:hover,
	.disabled .button-svg:focus,
	.disabled .button-svg:active{
		opacity: 0.8;
	}
	
	.button-svg:hover{
		opacity: 1;
	}
	
	.button-svg.transparent:hover{
		opacity: 0.8;
	}
}

.button-svg.button-svg:disabled,
.disabled .button-svg{
	cursor: default;
}

.button-svg.button-svg:disabled{
	opacity: 0.1;
}

.icon.transparent,
.button-svg.transparent{
	opacity: 0.4;
}

.icon.red,
.button-svg.red{
	color: var(--color-error);
}

.icon.green,
.button-svg.green{
	color: var(--color-success);
}

.button-svg[data-name="re"]{
	color: var(--color-error);
}

.icon[data-name="info"]{
	cursor: help;
}


/* Button-, Icon-, Checkbox- & Counter-SVGs */

.button-svg svg,
.icon svg,
.ui-checkbox svg,
.counter svg{
	width: var(--button-svg-size);
	height: var(--button-svg-size);
	fill-rule: evenodd;
	fill: currentColor;
}

.counter svg{
	width: 1rem;
	height: 1rem;
}


/* Buttons */
/* Buttons / Big Button */
/* Buttons / Big Button / General */

.button-big{
	padding: 10px;
	color: var(--color-text);
	background-color: var(--color-bg-2);
	border-width: var(--border-width-button);
	border-color: var(--color-border-2);
	border-radius: 5px;
}


@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	.button-big:hover{
		color: var(--color-text);
		background-color: var(--color-primary);
	}
}

.button-big:focus,
.button-big:active{
	color: var(--color-text);
	background-color: var(--color-primary);
}


/* Buttons / Big Button / Caution */

.button-big.button-caution{
	background-color: var(--color-error);
}

@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	.button-big.button-caution:hover{
		background-color: var(--color-error-brighter);
	}
}

.button-big.button-caution:focus,
.button-big.button-caution:active{
	background-color: var(--color-error-brighter);
}


/* Buttons / Big Button / Call to Action */

.button-big.button-action{
	background-color: var(--color-primary);
}

@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	.button-big.button-action:hover,
	.button-big.button-action:focus,
	.button-big.button-action:active{
		background-color: var(--color-secondary);
	}
}


/* Buttons / Big Button / Disabled */

.button-big:disabled,
.button-big:disabled:hover,
.button-big:disabled:focus,
.button-big:disabled:active{
	background-color: var(--color-bg-2-alt) !important;
	cursor: not-allowed !important;
}

.button-big-array{
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	width: 100%
}

.button-big-array .button-big{
	flex-basis: 0;
	flex-grow: 5;
	min-width: 250px;
}


/* Buttons / Small Button / General */

.button.button-small{
	padding: 7px;
	font-size: 0.9rem;
}

@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	.button.button-small:hover{
		color: var(--color-text);
		background-color: var(--color-primary);
	}
}

.button.button-small:focus,
.button.button-small:active{
	color: var(--color-text);
	background-color: var(--color-primary);
}


/* Buttons / Small Button / Active */

.button.button-small.active{
	color: var(--color-text);
	background-color: var(--color-primary);
}

@media (hover: hover) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	.button-small.active:hover,
	.button-small.active:focus,
	.button-small.active:active{
		color: var(--color-text);
		background-color: var(--color-secondary);
	}
}


/* Buttons / Small Button / Disabled */

.button-small:disabled,
.button-small:disabled:hover,
.button-small:disabled:focus,
.button-small:disabled:active{
    cursor: default;
    opacity: 0.2;
}

@media (-moz-touch-enabled: 0), (pointer:fine){		
	.button-small{
		font-size: 0.9rem;
		padding: 5px 7px;
	}
}

.button-small-array{
	display: flex;
    flex-wrap: wrap;
	gap: var(--button-gap-less);
}


/* Buttons / Function Execute */

input.function-execute{
	height:40px;
	border:0px;
	font-size:1.2em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#fff;
	cursor:pointer;
}



/* Knobs */
/* Knobs / Knob Group */

.knob-group{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 40px;
	border-radius: var(--border-radius-panel);
	border: 1px solid var(--color-bg-2-alt-1);
	overflow: hidden;
}

.knob-group > .knob:last-child,
.knob-group > .knob.knob-last{
	border-bottom-width: 0px;
}

.knob-group .knob-label,
.knob-group .knob-value-display,
.knob-group .knob-value-edit,
.knob-group .knob-value-info{
	background-color: var(--color-bg-2);
}

.knob-group-header{
	padding: 10px;
	background-color: var(--color-bg-2);
	border-bottom: 1px var(--color-bg-1) solid;
}


/* Knobs / General */

.knob{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px transparent solid;
}

.knob[knob-style="single-row"]{
	flex-wrap: nowrap;
	gap: 10px;
}


/* Knobs / Labels */

.knob-label{
	display: flex;
	align-items: center;
	width: 100%;
	padding: 12px 12px 0px 12px;
	box-sizing: border-box;
	border-style: solid;
	border-width: 0px;
	border-color: transparent;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
}

.knob[knob-style="single-row"] .knob-label{
	width: auto;
	flex-shrink: 2;
}


.knob[knob-type="text"] .knob-label{
	align-items: flex-start;
}

.page-nav .knob-label{
	padding-left: 0px;
	padding-bottom: 10px;
}

.page-nav .knob[knob-style="single-row"] .knob-label{
	padding: 5px;
}

@media only screen and (min-width: 450px){
	.page-nav .knob-label{
		width: auto;
		padding: 12px 12px 12px 0px;
	}
}

@media only screen and (min-width: 1100px){	
	.page-nav .knob-label{
		width: 100%;
		padding-top: 12px;
		padding-bottom: 10px;
	}
	
	.knob[knob-style="single-row"] .knob-label{
		width: auto;
	}
}

@media only screen and (min-width: 1300px){	
	.page-nav .knob-label{
		width: auto;
		padding: 12px 12px 12px 0px;
	}
}

.page-content .knob-label{
	font-size: 0.9em;
	color: var(--color-text-dimmed);
	gap: 0px 5px;
}


/* Knobs / Values */

.knob-value{
	display: flex;
	flex-grow: 2;
	flex-shrink: 2;
	flex-basis: 0;
	align-items: center;
	gap: 5px;
    border-style: solid;
    border-width: 0px;
    border-color: transparent;
}

@media only screen and (min-width: 600px){
	.knob-value{
		gap: 0px;
		padding: 0px;
	}
}

.knob[knob-value-align="right"] .knob-value{
	justify-content: flex-end;
}

.knob[knob-style="single-row"] .knob-value{
	flex-shrink: 2;
	min-width: revert;
}

.page-content .knob-value{
	padding: 12px;
}

@media only screen and (min-width: 600px){
	.page-content .knob-value{
		padding: 0px;
	}
}

.page-content .knob-group .knob-value{
	background-color: var(--color-bg-2);
}

@media only screen and (min-width: 600px){
	.page-content .knob-group .knob-value{
		background-color: revert;
	}
}

.knob-value-display{
	display: flex;
	flex-grow: 2;
	flex-shrink: 2;
	align-items: center;
	width: 1em;
	height: 100%;
	padding: 0px;
	border-style: solid;
	border-width: 0px;
	border-color: transparent;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
}

@media only screen and (min-width: 600px){
	.knob-value-display{
		padding: 6px;
	}
}

.knob-value-text-wrapper{
	display: flex;
	align-items: baseline;
}

.knob-value-text{
	max-width: 100%;
	padding: 6px;
	border: 1px transparent solid;
	overflow-wrap: break-word;
	hyphens: manual;
}

.knob[knob-type="bool"] .knob-value-text{
	padding: 0px;
	border: 0px;
}

.knob[knob-type="text"] .knob-value-text{
	border: 0px;
}

.knob[knob-type="count"] .knob-value-display,
.knob[knob-type="duration"] .knob-value-display{
	font-variant-numeric: tabular-nums;
}

.knob[knob-type="count"] .knob-value-text,
.knob[knob-type="duration"] .knob-value-text{
	border: 0px;
	display: flex;
    flex-wrap: wrap;
	gap: 5px 15px;
	padding: 4px 6px;
}

.knob .knob-value-input-wrapper{
	display: flex;
    align-items: center;
	width: 100%;
}

@media (-moz-touch-enabled: 0) or (pointer:fine){	
	.knob[knob-type="bool"] .knob-value-text,
	.knob[knob-type="bool"] .knob-value-input{
		margin-left: 2px;
	}
}

input.knob-value-input,
textarea.knob-value-input,
.knob-value-input + .ui-selectmenu-button{
	width: 100%;
	max-width: 100%;
	font-size: 1em;
}

textarea.knob-value-input{
	min-height: 5em;
}

.knob[knob-type="color"] .knob-value-input{
	width: 100px;
}

.knob[knob-type="count"] .knob-value-input,
.knob[knob-type="duration"] .knob-value-input{
	display: flex;
    flex-wrap: wrap;
	padding: 4px 6px;
	gap: 5px 15px;
}

@media only screen and (min-width: 600px){
	.page-content .knob{
		flex-wrap: nowrap;
	}
	
	.page-content .knob-label{
		justify-content: center;
        align-items: flex-start;
        flex-direction: column;
		gap: 0px;
		padding: 12px;
		font-size: revert;
		color: revert;
	}
	
	.page-content .knob-label + .knob-value,
	.page-content .knob-value-display + .knob-value-edit,
	.page-content .knob-value-display + .knob-value-info,
	.page-content .knob-value-edit + .knob-value-info{
		border-width: 0px 0px 0px 1px;
	}
}


/* Knobs /  Edit */

.knob-value-edit,
.knob-value-info{
	display:flex;
	justify-content: center;
	align-items: center;
	gap: var(--button-gap);
	height: 100%;
	padding: 0px;
	box-sizing: border-box;
	border-style: solid;
	border-width: 0px;
	border-color: transparent;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
}

@media only screen and (min-width: 600px){
	.knob-value-edit,
	.knob-value-info{
		padding: 5px;
	}
}

@media only screen and (min-width: 600px) and ((-moz-touch-enabled: 0) or (pointer:fine)){
	.knob-value-edit,
	.knob-value-info{
		padding: 10px;
	}
}

.knob[knob-type="text"] .knob-value-edit,
.knob[knob-type="text"] .knob-value-info,
.knob[knob-type="document"] .knob-value-edit,
.knob[knob-type="document"] .knob-value-info{
	align-items: flex-start;
}


.knob-value-info .icon{
	margin: 0px;
}


/* Editing mode LEGACY */

.editing .editing-show{
	display:revert;
}

.editing .editing-hide{
	display:none;
}


/* Pulldowns */

.pulldown-wrapper.pulldown-closed:not(.pulldown-opened) > .pulldown-target,
.pulldown-wrapper:not(.pulldown-closed):not(.pulldown-opened) > .pulldown-target{
	display:none;
}


/*  Loading Animation */

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #cef;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


/* Snow */

div.snowflake {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 64px;
    width: 34px;
    height: 34px;
    overflow: hidden;
	font-weight: 100;
}


/* Document View */

.document-view-wrapper{
	width: 100%;
	max-width: 210mm;
	overflow: hidden;
}

.document-view{
	transform-origin: 0% 0%;
}


/* ///// */
/* Pages */
/* ///// */

.page-wrapper{
	display: none;
	width: 100%;
	margin: 1em auto 1em auto;
}

.page-wrapper.page-master{
	display: flex;
}

.page{
	width: 100%;
	display: none;
}

.page.page-master{
	display: block;
}

@media only screen and (min-width: 1100px){	
	.page.page-content{
		width:65%;
		min-height:800px;
	}

	.page-wrapper.page-master .page{
		display:revert;
	}
	
	.page-content-back-link{
		display:none;
	}
}

@media only screen and (min-width: 1200px){
	/* Large screen, non-retina */
	
	.page-wrapper.page-master .page{
		display:revert;
	}
}

.page-content-back-link.button.button-big{
	margin-bottom: 20px;
}

@media only screen and (max-width: 700px){
	.page-content .mobile{
		display: flex;
	}

	.page-content .desktop{
		display: none !important;
	}
}

@media only screen and (min-width: 701px){
  	.page-content .mobile{
		display: none !important;
	}

	.page-content .desktop{
		display: flex;
	}
}


/* ///////////////////// */
/* Page Navigation-Lists */
/* ///////////////////// */

.page-nav{
	position: relative;
}

@media only screen and (min-width: 1100px){
	.page.page-nav{
		width: 35%;
		margin-right: 10px;
	}
}

.page-nav-scrollbar:not(.scroll-wrapper){
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
	
	/* -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, rgb(0, 0, 0) 20%); */
	mask-image:  -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	-webkit-mask-image:  -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	mask-image:  linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 93%, rgba(0,0,0,0) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

@media only screen and (max-width: 1100px) {
	.page-nav .scroll-wrapper{
		position:relative !important;
	}

	.page-nav-scrollbar{
		max-height:none !important;
	}
}

.page-nav-element{
	display: flex;
    flex-wrap: wrap;
	margin: 0px 0px 20px 0px;
}

@media only screen and (min-width: 1100px){	
	.item-list-element,
	.page-nav-element{
		width:calc(100% - 20px);
	}
}
	
.page-nav-element form{
	width: 100%;
}

.page-nav-button{
	width: 100%;
	background: none;
	border: none;
	justify-content: flex-start;
}

.page-nav-modify{
	display: flex;
	flex-flow: column;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-bottom: 5px;
    padding: 10px;
	border-radius: 5px;
}

.page-nav-modify-header{
	display: flex;
	flex-grow: 2;
	align-items: center;
}

.page-nav-modify-header-text{
	flex-grow: 2;
}

.page-nav-modify-header-edit{
	display: flex;
	gap: var(--button-gap);
}

.page-nav-filter-button{
	background-color: var(--color-bg-2);
	border-color: var(--color-border-2);
}


/* Categories */

/* mcat: master category */
/* cat:  normal category */

.page-nav-mcats{
	width: 100%;
	min-height: 0px;
	padding: 0px 0px 50px 0px;
	overflow-x: hidden;
}

.page-nav-cats{
	width: 100%;
	min-height: 0px;
	padding: 0px 0px 20px 0px;
}

.page-nav-mcat,
.page-nav-cat{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.page-nav-cat-header{
	display: flex;
    flex-direction: column;
	gap: 10px;
    width: 100%;
	margin-bottom: 5px;
    border-radius: 5px;
	padding: 10px 5px;
	cursor: pointer;
}

@media (-moz-touch-enabled: 0), (pointer:fine){	
	.page-nav-cat-header{
		padding: 5px;
	}
}

.page-nav-mcat > .page-nav-cat-header + .page-nav-cats-wrapper > .page-nav-cats .page-nav-cat > .page-nav-cat-header{
	padding-left: 15px;
}

.page-nav-cat-header:hover{
	background-color: var(--color-bg-2);
}

.page-nav-cat-header-main{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}

.page-nav-cat-header-icon,
.page-nav-cat-header-chevron{
	opacity: 0.4;
}

@media (-moz-touch-enabled: 0), (pointer:fine){	
	.page-nav-cat-header-chevron{
		opacity: 0;
	}
}

.page-nav-cat-header:hover .page-nav-cat-header-icon,
.page-nav-cat-header:hover .page-nav-cat-header-chevron,
.page-nav-cat.active .page-nav-cat-header-icon,
.pulldown-opened > .page-nav-cat-header .page-nav-cat-header-icon,
.pulldown-opened > .page-nav-cat-header .page-nav-cat-header-chevron{
	opacity: 1;
}

.page-nav-cat-header:hover .icon{
	cursor: inherit;
}

.page-nav-cat-header-chevron .icon{
	-webkit-transition: transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
}

.pulldown-opened > .page-nav-cat-header .page-nav-cat-header-chevron .icon{
	transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.page-nav-cat-header-icon .icon svg{
	width: 1.3rem;
	height: 1.3rem;
}

.page-nav-cat-header-text{
	display: flex;
	align-items: center;
	flex-grow: 2;
	flex-basis: 0;
	margin: 1px 0px;
}

.page-nav-mcat > .page-nav-cat-header .page-nav-cat-header-text{
	font-weight: 500;
}

.page-nav-cat-header-name{
	padding: 3px 0px 3px 0px;
}

.page-nav-cat-header-appendix{
	margin-left: 5px;
}


/* Items */

.page-nav-items{
	width: 100%;
	min-height: 0px;
	padding: 0px 0px 20px 0px;
}

.page-nav-item,
.page-nav-item-placeholder{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
	margin-bottom: 5px;
	font-weight: 350;
}

.page-nav-item-placeholder{
	padding-left: 30px;
	font-style: italic;
}

@media only screen and (min-width: 1100px){	
	.page-nav-item,
	.page-nav-item-placeholder{
		font-size: 0.9em;
	}
}

.page-nav-mcat[data-active="false"] .page-nav-item,
.page-nav-cat[data-active="false"] .page-nav-item,
.page-nav-item[data-active="false"]{
	opacity: 0.4;
}

.page-nav-item-header{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 5px;
	border-radius: 5px;
	color: var(--color-text);
}

.page-nav-mcat > :first-child:not(.page-nav-cat-header) .page-nav-cat-header + .page-nav-items-wrapper > .page-nav-items .page-nav-item-header,
.page-nav-cat .page-nav-cat-header + .page-nav-items-wrapper > .page-nav-items .page-nav-item-header{
	padding-left: 15px;
}

.page-nav-mcat > :first-child:not(.page-nav-cat-header) .page-nav-cat-header + .page-nav-items-wrapper > .page-nav-items-full-indent .page-nav-item-header,
.page-nav-cat .page-nav-cat-header + .page-nav-items-wrapper > .page-nav-items-full-indent .page-nav-item-header{
	padding-left: 35px;
}

.page-nav-mcat > .page-nav-cat-header + .page-nav-cats-wrapper > .page-nav-cats .page-nav-item-header{
	padding-left: 30px;
}

.page-nav-item-header:hover{
	background-color: var(--color-bg-2);
}

.page-nav-item-header.active{
	color: var(--color-primary);
}

.page-nav-item-header.active:hover{
	color: var(--color-secondary);
}

.page-nav-item-image, 
.page-nav-item-icon{ 
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2em;
	height: 2em;
}

.page-nav-item-icon{
	width: auto;
	height: auto;
}

.page-nav-item-image img{
	max-width: 100%;
	max-height: 100%;
	border-radius: 2px;
}

.page-nav-item-image-substitute{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--color-bg-2-alt-1);
	font-size: 0.9em;
}

.page-nav-item-text{
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.page-nav-item-name,
.page-nav-item-appendix{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-nav-item-appendix{
	font-size: 0.8em;
}


/* Active (Master-)Category or Item */

/*
.page-nav-mcat.active .page-nav-cat-header,
.page-nav-cat.active .page-nav-cat-header,
*/
.page-nav-item.active .page-nav-item-header{
	color: var(--color-primary);
}


/* ////// */
/* Colors */
/* ////// */

.color-text,
.color-text-hover:hover,
.color-text-hover:active,
.color-text-hover:focus{
	color: var(--color-text);
}

/* darker main/primary color */
.color-darker,
.color-darker-hover:hover,
.color-darker-hover:active,
.color-darker-hover:focus{
	color: var(--color-text-dimmed);
}

/* Success main/primary color */
.color-success,
.color-success-hover:hover,
.color-success-hover:active,
.color-success-hover:focus{
	color: var(--color-success);
}

/* Success side/secondary color */
.color-success-side,
.color-success-side-hover:hover,
.color-success-side-hover:active,
.color-success-side-hover:focus{
	color: var(--color-success-brighter);
}


/* Warning main/primary color */
.color-warning,
.color-warning-hover:hover,
.color-warning-hover:active,
.color-warning-hover:focus{
	color: var(--color-warning);
}

/* Warning side/secondary color */
.color-warning-side,
.color-warning-side-hover:hover,
.color-warning-side-hover:active,
.color-warning-side-hover:focus{
	color: var(--color-warning-brighter);
}


/* Error main/primary color */
.color-error,
.color-error-hover:hover,
.color-error-hover:active,
.color-error-hover:focus{
	color: var(--color-error);
}

/* Error side/secondary color */
.color-error-side,
.color-error-side-hover:hover,
.color-error-side-hover:active,
.color-error-side-hover:focus{
	color: var(--color-error-brighter);
}


/* Key colors */

.color-main-static-bg{
	background-color: var(--color-primary);
	color:#fff;
}
.color-side-static-bg{
	background-color:var(--color-secondary);
	color:#fff;
}
.color-main-static-text{
	color:var(--color-primary);
}
.color-side-static-text{
	color:var(--color-secondary);
}

.color-main-active.active{
	color:var(--color-primary);
}
.color-side-active.active{
	color:var(--color-secondary);
}

.color-main-active-bg.active{
	background-color:var(--color-primary);
	color:#fff;
}

.color-side-active-bg.active{
	background-color:var(--color-secondary);
	color:#fff;
}

.color-main-hover-bg:hover,
.color-main-hover-bg:active,
.color-main-hover-bg:focus{
	background-color:var(--color-primary);
	color:#fff;
	cursor:pointer;
}

.color-side-hover-bg:hover,
.color-side-hover-bg:active,
.color-side-hover-bg:focus{
	background-color:var(--color-secondary);
	color:#fff;
	cursor:pointer;
}
		
.color-side-hover-active-bg.active:hover,
.color-side-hover-active-bg.active:active,
.color-side-hover-active-bg.active:focus{
	background-color:var(--color-secondary);
	color:#fff;
}

.color-main-hover-text:hover,
.color-main-hover-text:active,
.color-main-hover-text:focus{
	color:var(--color-primary);
	cursor:pointer;
}

.color-side-hover-text:hover,
.color-side-hover-text:active,
.color-side-hover-text:focus{
	color:var(--color-secondary);
	cursor:pointer;
}

.color-main-hover-border:hover,
.color-main-hover-border:focus,
.color-main-hover-border:focus-visible,
.color-main-hover-border:active{
	border-width: 1px;
	border-style: solid;
	border-color:var(--color-primary);
}

.color-side-hover-border:hover,
.color-side-hover-border:focus,
.color-side-hover-border:focus-visible,
.color-side-hover-border:active{
	border-width: 1px;
	border-style: solid;
	border-color:var(--color-secondary);
}