.nui-outdated {
	display: none;
	position: fixed;
	height: 100%;
	width: 100%;
	color: white;
	padding: var(--space-frame);
	background-color: rgb(var(--color-shade3));
	z-index: 1000;
}

:root {
	--nui-main: "nui_css_2.0.0";
	--space-base: 14;
	--space-frame: 2rem;
	--space-bottom-frame: 1rem;
	--space-scrollbar-width: 0.7rem;
	--space-page-maxwidth: 62rem;
	
	--test-color: rgba(var(--color-shadeX), 0.2);
	--color-highlight: rgb(76, 132, 229);
	--color-highlight-dim: rgb(67, 112, 191);

	--shadow-color: 0, 0, 0;
	--shadow-alpha: 0.2;
	--shadow-radius0: 0.5rem;
	--shadow-radius1: 1rem;
	--ui-alpha: 0.9;
	--icon-size: 1.5rem;
	accent-color: var(--color-highlight);
	--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
	
	--color-shade0: 255,255,255;
	--color-shade1: 250, 250, 250;
	--color-shade2: 245, 245, 245;
	--color-shade3: 235, 235, 235;
	--color-shade4: 120, 120, 120;
	--color-shade5: 90, 90, 90;
	--color-shade6: 80, 80, 80;
	--color-shade8: 120, 120, 120;
	--color-shade9: 80, 80, 80;
	--color-shadeX: 0,0,0;

	--border-thickness: thin;
	--border-radius0: 0.2rem;
	--border-radius1: 0.25rem;
	--border-radius2: 0.35rem;
	--border-shade1: rgb(220,220,220);
	--border-shade2: rgb(190,190,190);
	--border-shade3: rgb(120,120,120);


	
	
	--color-text-dim: rgb(var(--color-shade9));
	--color-text: rgb(var(--color-shadeX));
	--color-text-shade0: rgba(var(--color-shadeX),0.3);
	--color-text-shade1: rgba(var(--color-shadeX),0.5);
	--color-text-shade3: rgba(var(--color-shadeX),0.7);

	/* Sidebar */
	--sidebar-width: 21rem;
	--sidebar-background: rgba(var(--color-shade2),var(--ui-alpha));
	--sidebar-item-height: 3.6rem;
	--sidebar-shadow: 0 0 var(--shadow-radius1) rgba(var(--shadow-color), 0.25);
	--sidebar-text: rgba(var(--color-shadeX),0.7);

	/* Topbar */
	--topbar-height: 3.6rem;
	--topbar-background: rgb(var(--color-shade9), var(--ui-alpha));
	--topbar-shadow: 0 0 var(--shadow-radius1) 0 rgba(var(--shadow-color),0.25);
	--topbar-text: rgba(var(--color-shade0),0.7);

	/* Card / Article */
	--card-padding: var(--space-frame);
	--card-border: solid var(--border-thickness) var(--border-shade1);
	--card-border-radius: var(--border-radius0);
	--card-background: rgba(var(--color-shade0),var(--ui-alpha));
	--card-shadow: 0 0 var(--shadow-radius0) 0 rgba(var(--shadow-color),var(--shadow-alpha));
	--card-bottom-space: var(--space-bottom-frame);

	/*Inputs */
	--input-background: rgb(255, 255, 255);
	--input-background-focus: rgb(255, 255, 255);
	--input-border: solid var(--border-thickness) rgba(var(--color-shadeX),0.25);
	--input-border-focus: solid var(--border-thickness) rgba(var(--color-shadeX),0.5);
	--input-text: var(--color-text-dim);
	--input-text-focus: var(--color-text);
	--input-label-text: var(--color-text-shade1);
	--input-min-height: 2.5rem;
	--input-min-width: 5rem;
	--input-padding: 0.8rem;
	--ss-min-height: var(--input-min-height);

	--button-color-background: var(--color-highlight-dim);
	--button-color-highlight: var(--color-highlight);
	--button-color-text: rgba(var(--color-shade0),0.8);
	--button-color-text-hi: rgba(var(--color-shade0),1);
	--button-border-radius: var(--border-radius0);
	--button-border: solid var(--border-thickness) transparent;
	--button-margin: 0.8rem;
	--button-font-size: 0.85rem;
	--button-min-width: 2.2rem;
	--button-min-height: 2.2rem;

	--overlay-background: rgba(240,240,240,0.95);
	--contextmenu-background: rgb(var(--color-shade4));
	--contextmenu-background-hi: rgba(var(--color-shadeX),0.1);
	--contextmenu-text: rgba(var(--color-shade0),0.8);
	--contextmenu-text-hi: rgba(var(--color-shade0),1);
	--contextmenu-space: 1.5rem;

	--palette-gray: rgba(130,130,130);
	--palette-gray-hi: rgba(150,150,150);

	--palette-mark: rgb(203, 184, 55);
	--palette-mark-hi: rgb(197, 181, 83);

	--palette-activate: rgb(54, 137, 43);
	--palette-activate-hi: rgb(74, 178, 60);

	--palette-alert: rgb(181, 36, 36);
	--palette-alert-hi: rgb(222, 61, 61);

}


body.dark {
	--color-shade0: 0,0,0;
	--color-shade1: 25, 25, 25;
	--color-shade2: 35, 35, 35;
	--color-shade3: 50, 50, 50;
	--color-shade4: 80, 80, 80;
	--color-shade5: 90, 90, 90;
	--color-shade6: 120, 120, 120;
	--color-shade8: 150, 150, 150;
	--color-shade9: 190, 190, 190;
	--color-shadeX: 255,255,255;

	--border-thickness: thin;
	--border-radius0: 0.15rem;
	--border-radius1: 0.25rem;
	--border-radius2: 0.35rem;
	--border-shade1: rgb(55,55,55);
	--border-shade2: rgb(70,70,70);
	--border-shade3: rgb(80,80,80);



	--color-text-dim: rgb(var(--color-shade9));
	--color-text: rgb(var(--color-shadeX));
	--color-text-shade0: rgba(var(--color-shadeX),0.3);
	--color-text-shade1: rgba(var(--color-shadeX),0.3);
	--color-text-shade3: rgba(var(--color-shadeX),0.7);

	/* Sidebar */
	--sidebar-background: rgba(var(--color-shade2),var(--ui-alpha));
	--sidebar-shadow: 0 0 var(--shadow-radius1) rgba(var(--shadow-color), var(--shadow-alpha));
	--sidebar-text: rgba(var(--color-shadeX),0.5);

	/* Topbar */
	--topbar-background: rgba(var(--color-shade2),var(--ui-alpha));
	--topbar-shadow: 0 0 var(--shadow-radius1) 0 rgba(var(--shadow-color),var(--shadow-alpha));
	--topbar-text: rgba(var(--color-shadeX),0.5);

	/* Card / Article */
	--card-padding: var(--space-frame);
	--card-border: solid var(--border-thickness) var(--border-shade1);
	--card-border-radius: var(--border-radius0);
	--card-background: rgba(var(--color-shade2),var(--ui-alpha));
	--card-shadow: 0 0 var(--shadow-radius0) 0 rgba(var(--shadow-color),var(--shadow-alpha));

	/*Inputs */
	--input-background: rgb(43, 43, 43);
	--input-background-focus: rgb(var(--color-shade3));
	--input-border: solid var(--border-thickness) var(--border-shade1);
	--input-border-focus: solid var(--border-thickness) var(--border-shade2);
	--input-text: var(--color-text-dim);
	--input-text-focus: var(--color-text);
	--input-label-text: var(--color-text-shade1);


	--button-color-background: var(--color-highlight-dim);
	--button-color-highlight: var(--color-highlight);
	--button-color-text: rgba(var(--color-shadeX),0.8);
	--button-color-text-hi: rgba(var(--color-shadeX),1);
	--button-border-radius: var(--border-radius0);
	--button-border: solid var(--border-thickness) transparent;


	--overlay-background: rgba(20,20,20,0.95);

	--contextmenu-background: rgb(var(--color-shade4));
	--contextmenu-background-hi: rgb(var(--color-shade3));
	--contextmenu-text: rgba(var(--color-shadeX),0.8);
	--contextmenu-text-hi: rgba(var(--color-shadeX),1);

	--palette-gray: rgba(80,80,80);
	--palette-gray-hi: rgba(100,100,100);

	--palette-mark: rgb(203, 184, 55);
	--palette-mark-hi: rgb(197, 181, 83);

	--palette-activate: rgb(54, 137, 43);
	--palette-activate-hi: rgb(74, 178, 60);

	--palette-alert: rgb(181, 36, 36);
	--palette-alert-hi: rgb(222, 61, 61); 
}


html {
	width: 100%;
	height: 100%;
	font-size: calc(var(--space-base) * 1px);
}



body {
	position: relative;
	background-color: rgb(var(--color-shade3));
	margin: 0;
	padding:0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	line-height: 1.5rem;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	
	color: var(--color-text-dim);
	font: caption;
	font-display: optional;
	font-family: var(--system-ui);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
}

p {
	margin-bottom: var(--space-bottom-frame);
	margin-block-start: 0;
	margin-block-end: var(--space-bottom-frame);
	margin-inline-start: 0;
	margin-inline-end: var(--space-bottom-frame);
}


a {
	text-decoration: unset;
	color: var(--color-highlight);
	cursor: pointer;
}

a:hover {
	color: var(--color-highlight-dim);
	border-bottom: solid var(--border-thickness) var(--color-highlight-dim);
}

b {
	font-weight: 600;
	color: var(--color-text);
}

strong {
	font-weight: 600;
	color: var(--color-text);
}

i {
	color: var(--color-text);
}

u, ins, abbr {
	text-decoration: none;
	border-bottom: solid var(--border-thickness) var(--border-shade3);
}

abbr {
	border-bottom-style: dashed;
}

mark {
	background-color:var(--palette-mark);
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}

.nui-hr,
hr {
	border: unset;
	border-top: solid var(--border-thickness) var(--border-shade2);
	margin-bottom: var(--space-bottom-frame);
}

h1, h2, h3, h4, h5, h6 {
	margin: unset;
	padding: unset;
	margin-bottom: var(--space-bottom-frame);
}


h1 {
	color: var(--color-highlight);
	font-size: 1.8rem;
	line-height: 2rem;
	margin-bottom: calc(var(--space-bottom-frame)*2);
	font-weight: 300;
}

h2 {
	color: var(--color-highlight);
	font-size: 1.4rem;
	line-height: 1.8rem;
	font-weight: 300;
}

h3{
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 2rem;
}

h4{
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.5rem;
}

h5{
	font-weight: 600;
	font-size: 1rem;
}

h6{
	font-weight: 600;
	font-size: 0.8rem;
}

::marker {
	color: var(--color-highlight);
}

progress {
	width: 100%;
	height: 0.4rem;
	border: 0;
	appearance: none;
	background-color: rgb(var(--color-shade3));
}
progress::-webkit-progress-bar {
	background-color: rgb(var(--color-shade3));
}

progress::-webkit-progress-value {
	background-color: var(--color-highlight);
}



progress:not([value])::-webkit-progress-bar {
	
	background-color: var(--color-highlight);
}
progress:not([value])::-webkit-progress-value {
	background-color: var(--color-highlight);
}
progress:not([value])::-moz-progress-bar {
	background-color: var(--color-highlight);
}

progress[value],
progress:not([value]) {
	appearance: none;
	height: 0.4rem;
	border: none;
	background-color: rgba(var(--color-shade3),1);
}

progress[value]::-webkit-progress-bar,
progress:not([value])::-webkit-progress-bar {
  background-color: rgba(var(--color-shade3),1);
  appearance: none;
}

progress[value]::-webkit-progress-value,
progress[value]::-moz-progress-bar {
	appearance: none;
	background-color: var(--color-highlight);
}

pre {
	background-color: rgba(var(--color-shadeX),0.05);
	border: solid var(--border-thickness) var(--border-shade1);
	padding: var(--space-frame);
}

blockquote {
	margin-left: 0rem;
	padding-left: 1.2rem;
	border-left: solid 0.2rem var(--color-highlight);
}

table {
	width: 100%;
	border-spacing: 0;
    border-collapse: separate;
	margin: 0;
	padding: 0;
	margin-bottom: var(--space-bottom-frame);
}


table caption, tr, th, td {
	text-align: left;
	font-weight: 400;
	padding: 0.7rem;
}


tbody td {
	border-top: solid var(--border-thickness) var(--border-shade2);
	border-left: solid var(--border-thickness) var(--border-shade2);
}
tbody tr:last-of-type td{
	border-bottom: solid var(--border-thickness) var(--border-shade2);
}

tbody td:last-of-type{
	border-right: solid var(--border-thickness) var(--border-shade2);
}

thead th {
	background-color: rgba(var(--color-shadeX),0.1);
	border-left: solid var(--border-thickness) var(--border-shade2);
}

thead th:first-of-type {
	border-left: unset;
	border-radius: 0.3rem 0 0 0;
}

thead th:last-of-type {
	border-radius: 0 0.3rem 0 0;
}

tfoot th {
	background-color: rgba(var(--color-shadeX),0.1);
	border-left: solid var(--border-thickness) var(--border-shade2);
}

tfoot th:first-of-type {
	border-left: unset;
	border-radius: 0 0 0 0.3rem;
}

tfoot th:last-of-type {
	border-radius: 0 0 0.3rem 0;
}

img {
	display: block;
}

article img {
	max-width: 100%;
	height: auto;
}

figure {
	position: relative;
	background-color: rgba(var(--color-shadeX),0.03);
	padding: unset;
	margin: unset;
}

figure > img {
	margin-left: auto;
	margin-right: auto;
}

figure figcaption{
	background-color: rgba(var(--color-shadeX),0.03);
	padding: var(--space-frame);
}

article iframe,
article embed,
article object {
	width: 100%;
	min-height: 22rem;
	border: solid var(--border-thickness) var(--border-shade1);
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

fieldset > ul{
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: var(--space-bottom-frame);
}

fieldset > legend {
	display: block;
	color: var(--color-text-shade0);
	width: 100%;
	font-size: 0.8rem;
	text-transform: uppercase;
	padding-bottom: 0.5rem;
}

video {
	width: 100%;
	height: auto;
	margin-bottom: var(--space-bottom-frame);
}


.nui-logo {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-highlight);
}

.nui-logo span:nth-child(2){
	font-weight: 200;
}

.nui-icon-container {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.nui-icon-container > i {
	font-style: normal;
	font-family: 'Material Icons';
	font-size: var(--icon-size);
	color: var(--color-text-dim);
	text-transform: none;
}

.nui-icon-container > img {
	width: var(--icon-size);
	height: var(--icon-size);
	object-fit: contain;
}

.nui-icon{
	width: var(--icon-size);
	height: var(--icon-size);
	fill: var(--color-text-dim);
}

.nui-copy {
	font-style: normal;
	font-weight: 300;
	font-size: 1rem;
}

.nui-headline {
	color: var(--color-highlight);
	font-size: 1.4rem;
	margin-bottom: var(--space-bottom-frame);
	font-weight: 300;
}

.nui-content {
	position: fixed;
	top: var(--topbar-height);
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	transition: left 0.2s;
	-webkit-overflow-scrolling: touch;
}

.nui-page,
main {
	 min-height: 100%;
	 width: auto;
	 display: grid;
	 grid-template-rows: 1fr auto;
}

header {
	width: 100%;
	padding: var(--space-frame);
	padding-left: unset;
	padding-right: unset;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--space-page-maxwidth);
	box-sizing: border-box;
}
.nui-block,
article {
	width: 100%;
	padding: var(--space-frame);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--space-page-maxwidth);
	box-sizing: border-box;
}

.nui-columns{
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
	gap: var(--space-frame);
}

.nui-col-two {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-frame);
}

.nui-col-three {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-frame);
}


.nui-page > footer,
main > footer {
	padding: var(--space-frame);
	border-top: var(--card-border);
	background-color: rgba(var(--color-shade4),0.5);
	color: var(--color-text-dim);
}

.nui-window {
	position: absolute;
	z-index: 10;
	filter: drop-shadow(0 0 2rem rgba(0,0,0,0.5))
}

.nui-page-modal {
	position: absolute;
	inset: var(--space-frame);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}



.nui-page-modal .main {
	--bodyshade-height: 1rem;
	position: absolute;
	width: 100%;
	max-width: var(--space-page-maxwidth);
	top: 0;
	bottom: 0;
	display: grid;
	
	grid-template-rows: 4rem auto 4rem;
	border: solid var(--border-thickness) var(--border-shade1);
	border-radius: var(--border-radius2);
	overflow: hidden;
	filter: drop-shadow(0 0 var(--shadow-radius1) rgba(var(--shadow-color),var(--shadow-alpha)))
}

.nui-page-modal .main.relative {
	position: relative;
	top:auto;
	bottom:auto;
	grid-template-rows: 4rem minmax(1fr,80vh) 4rem;
}

.nui-page-modal .main.noFoot {
	grid-template-rows: 4rem auto 0rem;
}

.nui-page-modal .main > .header {
	position: relative;
	background-color: rgba(var(--color-shade3),1);
	padding: calc(var(--space-frame)*1);
	display: flex;
	align-items: center;
}
.nui-page-modal .main > .header h2{
	margin: 0;
	margin-top: 0.1rem;
}
.nui-page-modal .main > .header .close {
	position: absolute;
	right:0;
	width: calc(var(--space-frame)*2.5);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.2;
	cursor: pointer;
	
}
.nui-page-modal .main > .header .close:hover {
	opacity: 1;
}
.nui-page-modal .main > .header .close .nui-icon-container{
	pointer-events: none;
}
.nui-page-modal .main > .header .close .nui-icon{
	width: 1.8rem;
	height: 1.8rem;
	
}

.nui-page-modal .main > .body{
	position: relative;
	background-color: rgba(var(--color-shade2),1);
	padding: calc(var(--space-frame)*1);
	overflow-x: hidden;
	overflow-y: auto;
}

.nui-page-modal .main > .footer{
	position: relative;
	background-color: rgba(var(--color-shade3),1);
	padding-left: calc(var(--space-frame)*0.5);
	padding-right: calc(var(--space-frame)*0.5);
	display: grid;
	grid-template-columns: auto auto auto;
	height: 100%;
	align-items: center;
}

.nui-page-modal .main > .footer .right {
	justify-self: right;
}
.nui-page-modal .main > .footer .center {
	justify-self: center;
}
.nui-page-modal .main > .footer button{
	margin-bottom: 0;
}

.nui-page-modal .main > .header::after{
	position: absolute;
	content: '';
	bottom:calc(var(--bodyshade-height)*-1);
	left:0;
	right:var(--space-scrollbar-width);
	height: var(--bodyshade-height);
	background: linear-gradient(180deg, rgba(var(--color-shade2),1) 0%, rgba(var(--color-shade2),0) 100%);
	z-index: 1;
	border-top: solid var(--border-thickness) var(--border-shade1);
	pointer-events: none;
}

.nui-page-modal .main > .footer::before{
	position: absolute;
	content: '';
	top:calc(var(--bodyshade-height)*-1);
	left:0;
	right:var(--space-scrollbar-width);
	height: var(--bodyshade-height);
	background: linear-gradient(180deg, rgba(var(--color-shade2),0) 0%, rgba(var(--color-shade2),1) 100%);
	z-index: 1;
	border-bottom: solid var(--border-thickness) var(--border-shade1);
	pointer-events: none;
}

@media only screen and (max-width: 640px) {
	.nui-page-modal {
		position: absolute;
		inset: 0;
	}
}

.nui-hero {
	position: relative;
	width: 100%;
	min-height: 5rem;
	background-color: rgba(var(--color-shade1),0.2);
}


.nui-hero img{
	position: absolute;
	z-index: -1;
}

.nui-card{
	position: relative;
	padding: var(--card-padding);
	margin-bottom: var(--card-bottom-space);
	border: var(--card-border);
	border-radius: var(--card-border-radius);
	background: var(--card-background);
	box-shadow: var(--card-shadow);
}

.nui-card.split_left {
	padding: 0;
	display: grid;
	grid-template-columns: 30% auto;
}
.nui-card.split_right {
	padding: 0;
	display: grid;
	grid-template-columns: auto 30%;
}
.nui-card.split_left > div,
.nui-card.split_right > div {
	padding: var(--card-padding);
}

.nui-card.split_left > div:nth-child(1) {
	background-color: rgba(var(--color-shadeX),0.03);
	border-right: solid var(--border-thickness) var(--border-shade0);
}

.nui-card.split_right > div:nth-child(2) {
	background-color: rgba(var(--color-shadeX),0.03);
	border-left: solid var(--border-thickness) var(--border-shade0);
}

.nui-card.nopad{
	padding: 0;
}

@media only screen and (max-width: 640px) {
	.nui-col-two,
	.nui-columns,
	.nui-col-three {
		grid-template-columns: 100%;
	}
	.nui-card.split_left {
		padding: 0;
		display: grid;
		grid-template-columns: 100%;
	}
	.nui-card.split_right {
		padding: 0;
		display: grid;
		grid-template-columns: 100%;
	}
}


/* n000b Topbar */
/* ######################################################################################### */

.nui-topbar {
	position: fixed;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--topbar-height);
	background: var(--topbar-background);
	box-shadow: var(--topbar-shadow);
	border-bottom: solid var(--border-thickness) var(--border-shade3);
	z-index: 3;
	overflow: hidden;
}


.nui-topbar-menu {
	cursor: pointer;
}

.nui-topbar-menu > div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1rem;
	line-height: var(--topbar-height);
	color: var(--topbar-text);
	
}
.dark .nui-topbar-menu > div {
	color: var(--color-highlight);
}

.nui-topbar-menu .nui-icon-container {
	width: 4rem;
	margin-left: 0.3rem;
}

.nui-topbar-menu .nui-icon {
	fill:var(--topbar-text);
	width: 1.8rem;
}
.nui-topbar-menu:hover .nui-icon {
	fill: var(--color-highlight);
}

.nui-topbar-items{
	position: absolute;
	display: table;
	vertical-align: middle;
	right: var(--space-frame);
	height: 100%;
}

.nui-topbar-item{
	position: relative;
	display: table-cell;
	vertical-align: middle;
	text-transform: uppercase;
	padding-left: 1rem;
	padding-right: 1rem;
	height: 100%;
	color: var(--topbar-text);
	transition: all 0.2s;
	cursor: pointer;
	margin-top: 0.17rem;
	border-bottom: 0.17rem solid transparent;
}

.nui-topbar-item:hover{
	color: var(--color-highlight);
	border-bottom: 0.17rem solid var(--color-highlight);
}

.nui-topbar-item .nui-icon-container {
	vertical-align: middle;
	padding-right: 0.5rem;
	color:var(--topbar-text);
	height: 100%;
}

.nui-topbar-item .nui-icon-container i,
.nui-topbar-item .nui-icon-container .nui-icon {
	color:var(--topbar-text);
	fill:var(--topbar-text);
}

.nui-topbar-item span{
	font-size: 0.8rem;
	height: 100%;
}



.nui-page-settings {
	position: absolute;
	right:0;
	top: var(--topbar-height);
	z-index: 1;
	background-color: var(--topbar-background);
	height: 100%;
	width: var(--sidebar-width);
	display: none;
}
/* n000b Sidebar */
/* ######################################################################################### */


.nui-sidebar {
	position: fixed;
	top: var(--topbar-height);
	left:0;
	bottom:0;
	width: var(--sidebar-width);
	background: var(--sidebar-background);
	box-shadow: var(--sidebar-shadow);
	border-right: var(--border-thickness) solid var(--border-shade1);
	z-index: 2;
	overflow-x: hidden;
	overflow-y: auto;
	transition: left 0.2s;
	/*backdrop-filter: blur(0.3em);*/
	display: grid;
	grid-template-rows: 1fr auto;
}



.nui-sidebar-item {
	display: table;
	width: 100%;
	height: var(--sidebar-item-height);
	cursor: pointer;
	color: var(--sidebar-text);
	border-left: 0.3rem solid rgba(0,0,0,0);
}

.nui-sidebar-item .item{
	position: relative;
	display: table;
	width: 100%;
	height: var(--sidebar-item-height);
	cursor: pointer;
	border-left: 0.3rem solid transparent;
}

.nui-sidebar-item .item .nui-icon-container {
	color: var(--sidebar-text);
	width: 4rem;
	height: var(--sidebar-item-height);
	margin-left: -0.3rem;
}

.nui-sidebar-item .item .nui-icon{
	width: 1.8rem;
}

.nui-sidebar-item .item span {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	padding-right: 1.2rem;
	padding-left: unset;
	font-size: 0.9rem;
	line-height: 1rem;
}

.nui-sidebar-item .item:hover {
	color: var(--color-highlight);
	background-color: rgba(var(--color-shadeX),0.05);
}

.nui-sidebar-item.active {
	background-color: rgba(var(--color-shadeX),0.1);
	color: rgb(var(--color-shadeX));
	border-left: 0.3rem solid var(--color-highlight);
}

.nui-sidebar-item.active .item:hover {
	color: inherit;
}

.nui-sidebar-item .item .special{
	display: none;
}

.nui-sidebar-item.open .item .special {
	position: absolute;
	right: 0;
	top: 0;
	width: 5rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-shade2);
}

.nui-sidebar-item .item .special:hover .nui-icon,
.nui-sidebar-item .item .special:hover i {
	fill: var(--color-highlight);
	color: var(--color-highlight);
}

.nui-sidebar-item.open .item:hover .special {
	color: rgba(var(--color-shadeX),0.3);
}
.nui-sidebar-item.open .item .special:hover {
	color: var(--color-highlight);
}

.nui-sidebar-item .sub {
	overflow: hidden;
	height: 0;
	transition: height 0.2s;
	background-color: rgba(var(--color-shade0),0.15);
}

.nui-sidebar-item .sub .hline{
	height: 0;
	border-bottom: solid var(--border-thickness) var(--border-shade2);
	/*background-color: rgba(225,225,225,0.1);*/
}

.nui-sidebar-item .sub .sub-item:hover {
	color: var(--color-highlight);
	background-color: rgba(var(--color-shadeX),0.03);
}

.nui-sidebar-item .sub .sub-item {
	display: table;
	width: 100%;
	height: var(--sidebar-item-height);
	cursor: pointer;
	color: var(--sidebar-text);
	border-left: 0.3rem solid rgba(255,255,255,0);
	
}

.nui-sidebar-item .sub .sub-item.active {
	background-color: rgba(var(--color-shadeX),0.08);
	color: rgb(var(--color-shadeX));
	border-left: 0.3rem solid var(--color-highlight);
}

.nui-sidebar-item .sub .sub-item .nui-icon-container {
	display: table-cell;
	vertical-align: middle;
	line-height: 1rem;
	fill: var(--color-text-shade2);
	padding-left: var(--space-frame);
	padding-right: calc(var(--space-frame)*0.6);
	width: 1.7rem;
}

.nui-sidebar-item .sub .sub-item span {
	display: table-cell;
	vertical-align: middle;
	font-size: 0.9rem;
	line-height: 1rem;
}

/* Dont remember what this is */
/*
.nui-sidebar-item.section {
	margin-top: 10px;
}
.nui-sidebar-item.section .item {
	padding-left: 25px;
	cursor: default;
}
.nui-sidebar-item.section .item:hover {
	background-color: inherit;
	color: inherit;
}

.nui-sidebar-item.section .item span{
	opacity: 0.5;
	text-transform: uppercase;
}
.nui-sidebar-item.section .item i{
	display: none;
} */

/* n000b Hero Card */
/* ######################################################################################### */

.nui-hero-card {
	padding: 0;
	height: 15rem;
	overflow: hidden;
	background-color: black;
	border: 0;
}

.nui-hero-card img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(8);
	opacity: 0.5;
}

.nui-hero-shade{
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: var(--color-highlight);
	filter: contrast(0.9) brightness(1);
	opacity: 0.7;
	z-index: 1;
	/*background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);*/
}
.dark .nui-hero-shade {
	background-color: var(--color-highlight);
	filter: contrast(0.7) brightness(0.7);
	opacity: 0.7;
}

.nui-hero-text {
	position: absolute;
	bottom: var(--space-frame);
	left: var(--space-frame);
	color: var(--button-color-text);
	z-index: 2;
	text-shadow: 0 0 0.2rem rgba(var(--shadow-color),0.55);
}

.nui-hero-text div:nth-child(1){
	font-size: 2rem;
	font-weight: 100;
}

.nui-hero-text div:nth-child(2){
	font-size: 1rem;
	font-weight: 100;
	opacity: 0.9;
}

/* n000b Overlay */
/* ######################################################################################### */

.nui-overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: var(--overlay-background);
	/*backdrop-filter: blur(0.5em);*/
	z-index: 1000;
}

.nui-login {
	width: 50%;
	max-width: 25rem;
	min-width: 14rem;
	padding: calc(var(--space-frame)*1.5);
	border-radius: var(--border-radius0);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nui-login .container{
	width: 100%;
	padding-top: 2rem;
	padding-bottom: 1rem;
}
.nui-login .container h2{
	margin-bottom: calc(var(--space-frame)*1.5);
}

.nui-login .nui-button-container {
	margin: 0;
	margin-top: 2rem;
}

.nui-alert {
	position: absolute;
	top: 7em;
	padding: var(--space-frame);
	width: 50%;
	max-width: 36rem;
	min-width: 22rem;
	border-radius: var(--border-radius1)
}

.nui-alert > .nui-copy {
	display: block;
	margin-bottom: var(--space-bottom-frame);
}

.nui-modal-progress .nui-headline {
	margin-bottom: calc(var(--space-bottom-frame)*2);
}

.nui-progress-bar {
	width:  100%;
	margin-bottom: 3rem;
}

.nui-progress-bar .prog_text {
	margin-bottom: 0.5rem;
	color: rgba(var(--color-shadeX),0.5)
}

.nui-progress-bar .prog{
	width: 100%;
	height: 0.5rem;
	background-color: rgb(var(--color-shadeX), 0.07);
	overflow: hidden;
}

.nui-progress-bar .prog .proz{
	width: 0%;
	height:100%;
	background-color: var(--color-text-dim);
	transition: width 0.1s;
}

.dropzone_active > *{
	pointer-events: none;
}

.nui-inline-dropzone {
	position: absolute;
	background-color: rgba(var(--color-shade4),0.9);
	inset: 0;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nui-inline-dropzone .nui-icon-container{
	width: 100%;
}

.nui-inline-dropzone .nui-icon-container svg{
	width: 3rem;
	height: 3rem;
}

.dropzone_active .nui-inline-dropzone {
	opacity: 1;
}


/* n000b Buttons */
/* ######################################################################################### */

.nui-button-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

.nui-button-container > *:last-child {
	margin-right: unset;
}

.nui-button-container.right{
	justify-content: flex-end;
}

.nui-button-container.right > *:last-child {
	margin-right: unset;
}

.nui-button-container label{
	display: flex;
	align-items: center;
	height: var(--button-min-height);
	margin-bottom: var(--button-margin);
}


.nui-button-container .nui-input {
	vertical-align:top;
	padding: 0;
	margin: 0;
	width: auto;
	margin-bottom: var(--button-margin);
	margin-right: calc(var(--button-margin) - 0.3rem);
	display: inline-flex;
}

.nui-button-container .nui-input input,
.nui-button-container .nui-input textarea{
	display: inline-block;
	min-height: var(--button-min-height);
	min-width: var(--button-min-width);
	padding:0;
	margin: 0;
	outline: 0;
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	
}

.nui-button-container .superSelect {
	display: inline-flex;
	position: relative;
	min-height: var(--button-min-height);
	min-width: calc(var(--button-min-width)*4);
	margin-bottom: var(--button-margin);
	margin-right: calc(var(--button-margin) - 0.3rem);
}



button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	position: relative;
	text-transform: uppercase;
	user-select: none;
	white-space: nowrap;
	min-height: var(--button-min-height);
	min-width: var(--button-min-width);
	margin-bottom: var(--button-margin);
	margin-right: calc(var(--button-margin) - 0.3rem);
	font-size: var(--button-font-size);
	line-height: var(--button-font-size);
	padding-left: calc(var(--button-font-size)*2);
	padding-right: calc(var(--button-font-size)*2);
	color: var(--button-color-text);
	background-color: var(--button-color-background);
	border: var(--button-border);
	border-radius: var(--button-border-radius);
	transition: all 0.2s ease-out;
	transition-property: background-color, color;
	display: inline-flex;
	align-items:center;
	justify-content: center;
	cursor: pointer;
	appearance: none;
	font-family: inherit;
	vertical-align:top;
	--icon-base: 18;
	--icon-scale: calc(var(--space-base)/var(--icon-base));
}


button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--button-color-highlight);
	color: var(--button-color-text-hi);
}

button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled {
	opacity: 0.4;
	pointer-events: none;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
	outline: 0;	
}

/* Button Flash */
button:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 0;
	pointer-events: none;
}
button:active:after { opacity: 0.2;}
button:not(:active):after { transition: opacity 0.5s; } 



button.progress {
	background: rgb(var(--color-shade4));
	pointer-events: none;
}

button.progress{
	color: rgba(0,0,0,0);
}

button.progress::before {
	
	position: absolute;
	content: '';
	width: 24px;
	height: 24px;
	z-index: 1;
	transform: scale(var(--icon-scale));
	background-color: var(--button-color-text);
	animation: button_progress_animation 3s linear infinite;
	clip-path: path('M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z');
}

@keyframes button_progress_animation {
	0% {
	  transform: scale(var(--icon-scale)) rotate(0deg);
	}
	100% {
	  transform: scale(var(--icon-scale)) rotate(360deg);
	}
  }
  

button[type="submit"],
button[type="send"],
input[type="submit"] {
	background-color: var(--palette-activate);
}

button[type="submit"]:hover,
button[type="send"]:hover,
input[type="submit"]:hover {
	background-color: var(--palette-activate-hi);
}

button[type="reset"],
input[type="reset"] {
	background-color: var(--palette-gray);
}

button[type="reset"]:hover,
input[type="reset"]:hover {
	background-color: var(--palette-gray-hi);
}

button[type="outline"] {
	background-color: transparent;
	border: solid var(--border-thickness) var(--palette-gray);
	color: rgba(var(--color-shadeX),0.7);
}

button[type="outline"]:hover{
	background-color: var(--palette-gray);
	border: solid var(--border-thickness) transparent;
	color: var(--button-color-text-hi);
}

button[type="delete"] {
	background-color: var(--palette-alert);
}

button[type="delete"]:hover{
	background-color: var(--palette-alert-hi);
}


button .nui-icon {
	margin-right: 0.5rem;
	width: 1.3rem;
	height: 1.3rem;
	fill: var(--button-color-text);
}

/* n000b Input */
/* ######################################################################################### */

.nui-input {
	position: relative;
	width: 100%;
	margin-bottom: 1.5rem;
}

.nui-input input::placeholder{
	color:var(--input-label-text);
}
.nui-input input::selection,
.nui-input textarea::selection {
	color: white;
	background-color: var(--color-highlight-dim);;
}

label {
	color: var(--input-label-text);
	padding-right: 0.5rem;
}

.nui-input label {
	display: block;
	width: 100%;
	color: var(--input-label-text);
	font-size: 0.8rem;
	text-transform: uppercase;
	padding-bottom: 0.5rem;
	padding-right: 0.5rem;
}

input,
textarea,
.nui-input-editable {
	font-family: inherit;
	color: var(--input-text);
	margin:0;
	border:0;
	font-size: 1rem;
	outline:0;
	line-height:1rem;
	transition: all 0.2s;
	transition-property: background-color, color;
	border: var(--input-border);
	border-radius: var(--border-radius0);
	background-color: var(--input-background);
	min-height: var(--input-min-height);
	min-width: var(--input-min-width);
	padding:0;
	margin: 0;
	outline: 0;
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	box-sizing: border-box;
}

textarea,
.nui-input-editable {
	padding: 0.8rem;
	vertical-align: top;
}

input[type="checkbox"],
input[type="radio"] {
	min-height: unset;
	min-width: unset;
	margin-right: 0.5rem;
}


.nui-input input,
.nui-input textarea,
.nui-input .nui-input-editable {
	width: 100%;
}



.nui-input textarea, 
.nui-input .nui-input-editable {
	resize: vertical;
	line-height: 1.5rem;
	-webkit-user-modify:read-write;
	-webkit-user-select: text;
    user-select: text;
	padding-bottom: 0.3rem;
	min-height: 3.5rem;
}

.nui-input input:focus,
.nui-input textarea:focus,
.nui-input .nui-input-editable:focus {
	color: var(--input-text-focus);
	background-color: var(--input-background-focus);
	border: var(--input-border-focus);
}

.nui-input-file {
	padding: 0;
}

.nui-input-file label{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.nui-input.search {
	position: relative;
	margin: 0;
}

.nui-input.search .nui-icon-container{
	position: absolute;
	height: 100%;
	right: 0.5rem;
	pointer-events: none;
}



/*
.nui-input.search::after {
	position: absolute;
	top:0;
	right:0;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	height: 100%;
	display: flex;
	align-items: center;
	content: 'search';
	font-family: 'Material Icons';
	font-size: 1.2rem;
	color: rgb(var(--color-shadeX),0.3)
}*/


input:-webkit-autofill{
	-webkit-box-shadow: 0 0 0 10rem var(--input-background) inset !important;
	box-shadow: 0 0 0 10rem var(--input-background) inset !important;
	-webkit-text-fill-color: var(--color-text-dim) !important;
	color: var(--color-text-dim);
	border-color: rgba(180,180,180);
	outline: 0;
	border-radius: unset;
}

input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
	outline: 0;
	-webkit-box-shadow: 0 0 0 50rem var(--input-background-focus) inset !important;
	-webkit-text-fill-color: var(--color-text) !important;
	box-shadow: 0 0 0 50rem var(--input-background-focus) inset !important;
	border-color: rgba(100,100,100);
}


.dark input:-webkit-autofill{
	border-color: rgba(65,65,65);
}

.dark input:-webkit-autofill:focus, 
.dark input:-webkit-autofill:active  {
	border-color: rgba(70,70,70);
}







/* Field Style
############################################################ */

.nui-input.style_1 label{
	padding-bottom: unset;
}

.nui-input.style_1 input,
.nui-input.style_1 textarea{
	color: var(--color-text-dim);
	padding-top:0.2rem;
	padding-bottom:0.4rem;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	background:none;
	border:0;
	border-bottom: solid 0.1rem var(--border-shade3);
	border-radius: unset;
	transition: all 0.2s;
	outline: 0;
}

.nui-input.style_1 input:focus,
.nui-input.style_1 textarea:focus {
	color: var(--color-text);
	border-bottom: solid 0.1rem var(--color-highlight);
}

input[type="number"] {
    -moz-appearance: textfield;
	appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
	appearance: number-input;
}


.nui-select {
	width: 100%;
	margin-bottom: 1.5rem;
}

.nui-select label {
	display: block;
	color: var(--input-label-text);
	width: 100%;
	font-size: 0.8rem;
	text-transform: uppercase;
	padding-bottom: 0.5rem;
}



/* n000b Radio Buttons */
/* ######################################################################################### */ 

.nui-fieldset .nui-fieldset-label {
	color: var(--input-label-text);
	width: 100%;
	font-size: 0.8rem;
	text-transform: uppercase;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.nui-radio {
	position: relative;
	height: 2rem;
	margin-bottom: 0.1rem;
}

.nui-radio input {
  display: none;
}

.nui-radio label {
	position: absolute;
	display: block;
	cursor: pointer;
	transition: all 0.1s;
	display: flex;
	align-items: center;
	padding-left: 2rem;
	height: 100%;
	color: var(--color-text-dim);
}

.nui-radio label:before {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -0.65rem;
	left: 0;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	display: block;
	transition: all 0.1s;
	border: 0.15rem solid var(--border-shade3);
}

.nui-radio label::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 1rem;
	height: 1rem;
	margin-top: -0.65rem;
	background: var(--color-highlight);
	border-radius: 50%;
	display: block;
	opacity: 0;
	transition: all 0.2s;
	transform: scale(0,0);
	pointer-events: none;
	border: 0.15rem solid transparent
}

.nui-radio input:checked + label:after {
	opacity: 1;
	transform: scale(0.5,0.5);
}

.nui-radio:hover label:before{
	border: 0.15rem solid var(--color-highlight);
}

/* n000b Checkbox */
/* ######################################################################################### */ 


::selection {
  background: rgba(94, 149, 237, 0.3);
  color: white;
}
::-moz-selection {
  background: rgba(99,180,255, 1);
}

.nui-checkbox {
	position: relative;
	height: 2rem;
	margin-left: 0.02rem;
	margin-bottom: 0.1rem;
	display: flex;
	align-items: center;
}

.nui-checkbox input {
	display:none;
}

.nui-checkbox label {
	position: relative;
	display: block;
	cursor: pointer;
	transition: all 0.1s;
	display: flex;
	align-items:center;
	padding-left: 2rem;
	width: 100%;
	height: 100%;
	color: var(--color-text-dim);
}

.nui-checkbox label::after{
	position: absolute;
	content: '';
	height: 1rem;
	width: 1rem;
	left:0;
	border: solid 0.15rem var(--border-shade3);
	border-radius: var(--border-radius0);
	pointer-events: none;
	transition: all 0.15s;
}

.nui-checkbox label::before{
	position: absolute;
	content: '';
	left:0.12rem;
	width: 24px;
	height: 24px;
	background-color: var(--color-highlight);
	transform-origin: center left;
	transform: scale(calc(var(--space-base)/24));
	opacity: 0;
	pointer-events: none;
	transition: all 0.1s ease-out;
	z-index: 1;
	clip-path: path("M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z");
}

.nui-checkbox input:checked + ::before {
	
	opacity: 1;
}

.nui-checkbox:hover label::after{
	border: solid 0.15rem var(--color-highlight);
}

.nui-checkbox label::before,
.nui-checkbox label::after{
	margin-top: 0.07rem;
}



/* n000b Loader Spinner */
/* ######################################################################################### */

.nui-loader-spinner {
	display: flex;
	justify-content: center;
	margin-top: 0rem;
	width: 6rem;
	height: 6rem;
	transform-origin: top left;
	transform: scale(1,1); /* it needs that for some reason */
	border-radius: 50%;
	border: 0.2rem solid rgba(var(--color-shadeX),0.1);
}


.nui-loader-spinner:after {
	display: flex;
	margin: auto;
	content: " ";
	width: 50%;
	height: 50%;
	border-radius: 50%;
	border: 0.4rem solid #fff;
	border-color: rgba(var(--color-shadeX), 0) rgba(var(--color-shadeX), 0) rgba(var(--color-shadeX), 0) var(--color-highlight-dim);
	animation: full_rotation 1.5s linear infinite;
}

.nui-loader-spinner-text {
	display: inline-block;
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top: 10rem;
	margin-left: auto;
	margin-right: auto;
	font-weight: 400;
	font-size: 1rem;
}

.nui-loader-spinner-bar {
	position: absolute;
	margin-top: 20rem;
	width: 50%;
	height: 0.3rem;
	background-color: rgba(var(--color-shadeX),0.1);
}

.nui-loader-spinner-bar-inner {
	width: 50%;
	height: 100%;
	background-color: var(--color-highlight-dim);
}


.nui-superlist{
	position: absolute;
	top: calc(var(--space-frame)*0.5);
	left: calc(var(--space-frame)*0.5);
	right: calc(var(--space-frame)*0.5);
	bottom: calc(var(--space-frame)*0.5);
	margin: 0;
	overflow: hidden;
	background-color: var(--card-background);
	border: var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: var(--card-border-radius);
	box-shadow: var(--card-shadow);
}

.superlist {
	--ss-footer-height: 4rem;
	--ss-header-height: 4rem;
	--ss-frame: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.superlist .list{
	position: absolute;
	top: var(--ss-frame);
	left: var(--ss-frame);
	right: var(--ss-frame);
	bottom: var(--ss-frame);
	padding-right: var(--ss-frame);
	overflow-x: hidden;
	overflow-y: auto;
}

.superlist .fixed_list {
	position: absolute;
	top: var(--ss-frame);
	left: var(--ss-frame);
	right: calc(var(--ss-frame) + 2rem);
	bottom: var(--ss-frame);
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 2;
}

.superlist .list .container{
	position: relative;
}

.superlist .list::-webkit-scrollbar {
    width: 1rem;
}

.superlist.hasFooter .list,
.superlist.hasFooter .fixed_list {
	bottom: calc(var(--ss-footer-height) + var(--ss-frame));
}

.superlist.hasHeader .list,
.superlist.hasHeader .fixed_list {
	top: calc(var(--ss-header-height) + var(--ss-frame));
}

.superlist .header,
.superlist .footer {
	background-color: rgb(240,240,240);
}

.dark .superlist .header,
.dark .superlist .footer {
	background-color: rgb(35,35,35);
	box-shadow: var(--card-shadow);
}

.superlist .header {
	position: absolute;
	top:0;
	left:0;
	right:0;
	height: var(--ss-header-height);
	border-bottom: solid thin rgba(var(--color-shadeX),0.1);
	padding-left: var(--ss-frame);
	padding-right: var(--ss-frame);
	display: grid;
	grid-template-columns: auto 15rem;
	gap: 1rem;
}

.superlist .header > div{
	display: flex;
	align-items: center;
}

.superlist .header .left label{
	white-space: nowrap;
	padding-right: 1rem;
	color: rgba(var(--color-shadeX),0.3);
}
.superlist .header .left .superSelect{
	width: 100%;
	max-width: 17rem;
}


.superlist .footer {
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	height: var(--ss-footer-height);
	padding-left: var(--ss-frame);
	padding-right: var(--ss-frame);
	display: grid;
	/*grid-template-columns: auto 10em auto;*/
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	border-top: solid thin rgba(var(--color-shadeX),0.1);
}

.superlist .footer > div{
	display: flex;
	align-items: center;
}
.superlist .footer .center{
	justify-content: center;
}
.superlist .footer .center .info{
	/*background-color: rgba(var(--color-shadeX),0.05);*/
	display:flex;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
	min-height: 1.8rem;
	border-radius: 0.3rem;
	padding-left: calc(var(--button-font-size)*2);
	padding-right: calc(var(--button-font-size)*2);
	color: rgba(var(--color-shadeX),0.4);
}
.superlist .footer .right{
	justify-content: flex-end;
}
.superlist .footer button{
	margin-bottom: 0;
}

.superlist-log-item{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 3rem;
	margin-bottom: 0.3rem;
	color: var(--color-text-dim);
	background-color: rgba(var(--color-shade3),0.5);
	font-size: 0.8rem;
	text-align: left;
	cursor: pointer;
}


.superlist-log-item:hover{
	background-color: rgba(var(--color-shade3),0.8);
	color: var(--color-text);
}

.superlist-log-item.selected {
	background-color: rgba(190,190,190,0.4); 
}
.dark .superlist-log-item.selected {
	background-color: rgba(80,80,80,0.4); 
}


.superlist-log-item div:nth-child(1){
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 100%;
	text-align: center;
	background-color: rgba(var(--color-shadeX),0.03);
	pointer-events: none;
}


.superlist-log-item div:nth-child(2){
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 1.4rem;
	pointer-events: none;
	height: 100%;
	font-size: 1rem;
}

.superlist-log-item div:nth-child(3){
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	height: 100%;
	font-size: 1rem;
	width: 12em;
	margin-left: auto;
	background-color: rgba(var(--color-shadeX),0.03);
	opacity: 0.7;
}


.superlist-list-item{
	--ss-item-height: 4em;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: var(--ss-item-height);
	margin-bottom: 0.3rem;
	color: var(--color-text-dim);
	background-color: rgba(var(--color-shade3),0.5);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.superlist-list-item:hover{
	background-color: rgba(var(--color-shade3),0.8);
	color: var(--color-text);
}

.superlist-list-item.selected {
	background-color: rgba(190,190,190,0.4); 
}
.dark .superlist-list-item.selected {
	background-color: rgba(80,80,80,0.4); 
}

.superlist-list-item > div:nth-child(1){
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--ss-item-height);
	height: 100%;
	text-align: center;
	background-color: rgba(var(--color-shadeX),0.03);
	pointer-events: none;
	font-size: 0.75rem;
}

.superlist-list-item > div:nth-child(2){
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(var(--ss-item-height)*1.77);
	height: 100%;
	text-align: center;
	background-color: rgba(var(--color-shadeX),0.1);
	pointer-events: none;
}

.superlist-list-item > div:nth-child(2) img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease-out;
}

.superlist-list-item > div:nth-child(3){
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 1.2rem;
	overflow: hidden;
	pointer-events: none;
	height: 100%;
	font-size: 1rem;
}

.superlist-list-item > div:nth-child(4){
	display: flex;
	justify-content: flex-end;
	align-content: center;
	margin-left: auto;
	width: 12rem;
	height: 100%;
	flex-wrap: wrap;
	background-color: rgba(var(--color-shadeX),0.03);
	pointer-events: none;
	font-size: 0.85rem;
}
.superlist-list-item > div:nth-child(4) div{
	width: 100%;
	text-align: center;
	padding-top: 0.2rem;
	line-height: 1.2rem;
}

.superlist-list-item > div:nth-child(4) div:nth-child(2){
	opacity: 0.5;
}

@media only screen and (max-width: 600px) {
	.nui-superlist{
		top:0; left:0; right:0; bottom:0;
	}
	.superlist-list-item{
		--ss-item-height: 3rem;
	}
	.superlist-list-item > div:nth-child(1){
		display: none;
	}
	.superlist-list-item > div:nth-child(4){
		display: none;
	}
	.superlist .header .left label{
		display: none;
	}
	.superlist-log-item{
		height: 4rem;
	}
	.superlist-log-item div:nth-child(2){
		width: 100%;
	}
	.superlist-log-item div:nth-child(3){
		display: none;
	}
}



@keyframes full_rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes full_rotation_reverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}



.nui-hide,
.hide { display: none; }

/* n000b Scrollbar */
/* ######################################################################################### */
::-webkit-scrollbar {
    width: var(--space-scrollbar-width);
}

::-webkit-scrollbar-track {
	background: rgba(var(--color-shadeX),0.1); 
}
 
::-webkit-scrollbar-thumb {
    background: rgba(var(--color-shadeX),0.3); 
	min-height: 5rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-shadeX),0.5);  
}




input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.allowselect {
	-webkit-touch-callout: text;
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}


::-webkit-calendar-picker-indicator {
    filter: invert(1);
	opacity: 0.5;
}

.ql-toolbar.ql-snow {
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	background-color: rgb(30,30,30);
	font-family: inherit;
	padding: 8px;
}

.ql-container.ql-snow {
	border: 0;
}

.nui-notification {
	position: absolute;
	bottom: calc(var(--space-frame)*0.5);
	left: var(--space-frame);
	right: var(--space-frame);
	display: flex;
	z-index: 10000;
	justify-content: center;
}

.nui-notification .inner{
	width: 100%;
	max-width: 40rem;
	display: inline-flex;
	padding: var(--space-frame);
	border-radius: var(--border-radius0);
	background-color: rgba(var(--color-shade4),0.8);
	color: var(--button-color-text);
	z-index: 10000;
	filter: drop-shadow(0 0 2em rgba(0,0,0,0.3));
}


.nui-notification-inline {
	position: absolute;
	top: calc(var(--space-frame)*0.2);
	left: calc(var(--space-frame)*0.2);
	right: calc(var(--space-frame)*0.2);
	display: block;
	padding: calc(var(--space-frame)*0.5);
	border-radius: var(--border-radius0);
	background-color: var(--palette-gray);
	color: var(--button-color-text);
	z-index: 10000;
	filter: drop-shadow(0 0 0.3rem rgba(0,0,0,0.3));
}
.nui-notification-inline .nui-icon-container{
	padding-right: 1rem;
}
.nui-notification-inline.error {
	background-color: var(--palette-alert);
	display: flex;
	align-items: center;
}



.nui-contextmenu {
	position: absolute;
	min-width: 13rem;
	background-color: var(--contextmenu-background);
	border: solid var(--border-thickness) var(--border-shade0);
	border-radius: var(--border-radius1);
	filter: drop-shadow(0 0 var(--shadow-radius1) rgba(var(--shadow-color), var(--shadow-alpha)));
	filter: drop-shadow(0.5rem 0.5rem 1rem rgba(0,0,0,0.5));
	z-index: 10000;
	
}

.nui-contextmenu .item{
	padding-left: var(--contextmenu-space);
	padding-right: var(--contextmenu-space);
	padding-top: calc(var(--contextmenu-space)*0.5);
	padding-bottom: calc(var(--contextmenu-space)*0.5);
	color: var(--contextmenu-text);
	cursor: pointer;
}

.nui-contextmenu .item:hover{
	background-color: var(--contextmenu-background-hi);
	color: var(--contextmenu-text-hi);
}

.nui-contextmenu .sep{
	height: 0.25rem;
	border-bottom: solid thin rgba(255,255,255, 0.1);
	margin-bottom: 0.25rem;
}

.nui-lightbox-overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(var(--color-shade1),0.95);
	z-index: 1010;
}

.nui-lightbox {
	position: absolute;
	top: 2rem;
	left: 2rem;
	right: 2rem;
	bottom: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.nui-lightbox img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-fit: scale-down;
	transition: opacity 0.3s;
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}

.nui-lightbox .vid{
	position: relative;
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}

.nui-lightbox .vid video{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nui-closy{
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3rem;
	height: 3rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	filter: drop-shadow(0px 0px 4px rgba(var(--color-shade0),0.5));
	opacity: 0.5;
	transition: opacity 0.1s;
	z-index: 10;
}

.nui-closy:hover{
	opacity: 1;
}

.nui-closy::after{
	position: absolute;
	content: '';
	width: 60%;
	height: auto;
	border-bottom: solid 0.15rem white;
	transform: rotate(45deg);
}
.nui-closy::before{
	position: absolute;
	content: '';
	width: 60%;
	height: auto;
	border-bottom: solid 0.15rem white;
	transform: rotate(-45deg);
}




/* n000b Animations */
/* ######################################################################################### */


.ani-slide-in {animation: ani-slide-in 0.2s forwards ease-out; }
@keyframes ani-slide-in { 0%   { top:100%; opacity: 0; } 100% { top:0; opacity: 1; } }
.ani-slide-out {animation: ani-slide-out 0.2s forwards ease-in; }
@keyframes ani-slide-out { 0%   { top:0; opacity: 1; } 100% { top:100%; opacity: 0; } }

.ani-fade-in {animation: ani-fade-in 0.2s forwards ease-out; }
@keyframes ani-fade-in { 0%   { opacity: inherit; } 100% { opacity: 1; } }
.ani-fade-out {animation: ani-fade-out 0.2s forwards ease-in; }
@keyframes ani-fade-out { 0%   { opacity: inherit; } 100% { opacity: 0; } }

.ani-scale-in {animation: ani-scale-in 0.2s forwards ease-out; }
@keyframes ani-scale-in { 0%   { transform: scale(0); } 100% { transform: scale(1); } }
.ani-scale-out {animation: ani-scale-out 0.2s forwards ease-out; }
@keyframes ani-scale-out { 0%   { transform: scale(1); } 100% { transform: scale(0); } }

.ani-scale-in-vertical {transform-origin: 0 0; animation: ani-scale-in-vertical 0.2s forwards ease-in-out; }
@keyframes ani-scale-in-vertical { 0%   { opacity:0; transform: scale(1,0); } 100% { opacity:1; transform: scale(1,1); } }
.ani-scale-out-vertical {transform-origin: 0 0; animation: ani-scale-out-vertical 0.2s forwards ease-in-out; }
@keyframes ani-scale-out-vertical { 0%   { opacity:1; transform: scale(1,1); } 100% { opacity:0; transform: scale(1,0); } }

.ani-right-in {animation: ani-right-in 0.2s forwards ease-out; }
@keyframes ani-right-in { 0%   { opacity:0; transform: translateX(10%) } 100% { opacity: 1; transform: translateX(0); } }
.ani-right-out {animation: ani-right-out 0.2s forwards ease-in; }
@keyframes ani-right-out { 0% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(10%); } }

.ani-left-in {animation: ani-left-in 0.2s forwards ease-out; }
@keyframes ani-left-in { 0%   { opacity:0; transform: translateX(-10%) } 100% { opacity:1; transform: translateX(0); } }
.ani-left-out {animation: ani-left-out 0.2s forwards ease-in; }
@keyframes ani-left-out { 0% { opacity:1; transform: translateX(0) } 100% { opacity:0; transform: translateX(-10%); } }


.test_vid {
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
	width: 100%;
	height: auto;
	z-index: 100;
}

body .nui-sidebar{
	left: calc(var(--sidebar-width) * -1.01)
}

body.nui-sidebar-open .nui-sidebar{
	left: 0;
}

body.nui-sidebar-force .nui-sidebar{
	left: 0;
}

body.nui-sidebar-force .nui-content {
	left: var(--sidebar-width);
}



@media only screen and (max-width: 1205px) {
	.nui-topbar-item span{
		display: none;
	}
}

@media only screen and (max-width: 530px) {
	:root {
		--space-base: 13;
		--space-frame: 2rem;
	}
	.nui-button-container label {
		width: 100%;
	}
}

@media only screen and (max-width: 380px) {
	:root {
		--space-base: 11;
		--space-frame: 1.5rem;
		--sidebar-width: 100%;
	}
}

body {
	--richtext-space-width: 2rem;
	--richtext-toolbar-background: rgb(var(--color-shade5));
	--richtext-toolbar-border: rgba(var(--color-shadeX),0.2);
}

/*experimental*/
.nui-bubble {
	--bubble-background: rgb(var(--color-shade6));
	--bubble-arrow-size: 0.6rem;
	--bubble-max-width: 320px;
	position: absolute;
	padding: 0.5rem 1rem 0.5rem 1rem;
	z-index: 10;
	background-color: var(--bubble-background);
	color: white;
	border-radius: 0.2rem;
	filter: drop-shadow(0.1rem 0.1rem 0.4rem rgba(0,0,0,0.3));
	max-width: var(--bubble-max-width);
	transition: opacity 0.3s;
}
.dark .nui-bubble {
	filter: drop-shadow(0rem 0rem 0.2rem rgba(0,0,0,0.7));
}
.nui-bubble::before {
	content: "";
	left: 50%;
  	border: var(--bubble-arrow-size) solid transparent;
 	position: absolute;
  	border-top-color: var(--bubble-background);
  	border-bottom: 0;
  	bottom: calc(var(--bubble-arrow-size)*-0.9);
  	margin-left: calc(var(--bubble-arrow-size)*-1);
}


/* n000b richtext */
/* ######################################################################################### */

.nui-richtext .nui-richtext-text {
	outline: none;
	background-color: var(--input-background);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.nui-richtext .trumbowyg-box {
	min-height: 1rem;
}
.nui-richtext .nui-richtext-text:focus {
	background-color: var(--input-background-focus);
	
}

.nui-richtext .trumbowyg-editor {
	outline: none;
	padding: var(--space-frame);
}
.nui-richtext .trumbowyg-button-pane  {
	opacity: 0.4;
}

.nui-richtext.active .trumbowyg-button-pane  {
	opacity: 1;
}
.nui-richtext.active .trumbowyg-editor {
	background-color: var(--input-background);
}

/* n000b Page Editor */
/* ######################################################################################### */



#page_interaction_cms article {
	max-width: 70rem;
}
.nui-cms-page-editor {
	
}
.nui-cms-page-editor .nui-cms-section {
	max-width: 70rem;
	margin: auto;
}

.nui-cms-page-editor .nui-cms-section .wrap {
	border: solid thin rgba(var(--color-shadeX),0.2);
	box-shadow: var(--card-shadow);
}
.nui-cms-page-editor .nui-cms-section .wrap > .header {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	background-color: rgba(var(--color-shadeX),0.1);
	border-bottom: solid thin rgba(var(--color-shadeX),0.05);
	min-height: 2.3rem;
}

.nui-cms-page-editor .nui-cms-section .wrap > .header label{
	text-transform: uppercase;
	cursor: pointer;
}
.nui-cms-page-editor .nui-cms-section .wrap > .header label:hover{
	color: rgb(var(--color-shadeX));
}
.nui-cms-page-editor .nui-cms-section .wrap > .content{
	position: relative;
	padding: 1rem;
	background-color: rgba(var(--color-shadeX),0.05);
}

.nui-cms-page-editor .nui-cms-section .group .nui-cms-columns > .body{
	border: solid thin rgba(var(--color-shadeX),0.15);
	background-color: rgba(var(--color-shadeX),0.05);
	margin-top: 0.5rem;
	box-shadow: var(--card-shadow);
}


.nui-cms-page-editor .nui-cms-section .group .nui-cms-columns > .body{
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
	gap: 1rem;
	padding: 1rem;
}



@media only screen and (max-width: 700px) {
	.nui-cms-page-editor .nui-cms-section .group .nui-cms-columns .body{
		grid-template-columns: 1fr;
		gap: 0rem;
	}
	.nui-cms-page-editor .nui-cms-section .group .nui-cms-columns .body .nui-cms-block::after{
		content: 'Column Seperator';
		display: block;
		left:0;
		right: 0;
		background-color: rgba(var(--color-shadeX),0.1);
		margin-bottom: 1rem;
		margin-top: 0.5rem;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.7rem;
	}
	.nui-cms-page-editor .nui-cms-section .group .nui-cms-columns .body .nui-cms-block:last-of-type::after {
		display: none;
	}
}

.nui-cms-page-editor .nui-cms-block .nui-input{
	margin-bottom: 0rem;
}
.nui-cms-page-editor .nui-cms-block .nui-input textarea{
	vertical-align: top;
	margin: 0;
	padding: 2rem;
	border: var(--card-border);
	border-radius: var(--card-border-radius);
	background: var(--card-background);
	box-shadow: var(--card-shadow);
}

.nui-cms-page-editor .nui-cms-block .nui-input textarea:focus{
	background: var(--card-background);
}

.nui-cms-page-editor .nui-cms-block .header{
	margin-bottom: 0.5rem;
	height: 2rem;
}

.nui-cms-page-editor .nui-cms-block .nui-richtext {
	position: relative;
	border: var(--card-border);
	border-radius: var(--card-border-radius);
	background: var(--card-background);
	box-shadow: var(--card-shadow);
}

.nui-cms-page-editor .header{
	display: grid;
	grid-template-columns: auto auto;
	
}

.nui-cms-page-editor .header .side{
	display: grid;
	grid-template-columns: auto 3rem;
}


.nui-cms-page-editor .header .side .classes{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	opacity: 0.3;
	cursor: pointer;
}

.nui-cms-page-editor .header .side .classes:hover{
	opacity: 1;
}
.nui-cms-page-editor .header .title{
	height: 100%;
	display: flex;
	align-items: center;
}
.nui-cms-page-editor .header .title .nui-icon{
	fill: rgba(var(--color-shadeX),0.5);
	margin-right: 0.4rem;
}
.nui-cms-page-editor .header .title .name > * {
	display: inline-block;
	color: rgba(var(--color-shadeX),0.4);
}
.nui-cms-page-editor .header .title .name label{
	text-transform: uppercase;
	font-size: 0.9rem;
	cursor: pointer;
}

.nui-cms-page-editor .header .title .name label:hover {
	color: rgba(var(--color-shadeX),1);
}

.nui-cms-page-editor .header .title .name > div{
	text-transform: uppercase;
	padding-right: 0.6rem;
	margin-right: 0.6rem;
	border-right: solid thin rgba(var(--color-shadeX),0.2);
}

.nui-cms-page-editor .header .nui-button-container{
	margin: 0;
}

.nui-cms-page-editor .header button{
	min-width: unset;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	background-color: transparent;
	margin-bottom: 0;
}

.nui-cms-page-editor .header button .nui-icon{
	transition: all 0.3s;
	margin: 0;
	fill: rgba(var(--color-shadeX),0.2);
	color: rgba(var(--color-shadeX),0.2);
}

.nui-cms-page-editor .header button:hover{
	background-color: var(--palette-alert-hi)
}

.nui-cms-page-editor .header button:hover .nui-icon{
	fill: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
}

.nui-cms-page-editor .footer {
	position: relative;
	padding-top: 0.7rem;
	display: flex;
	justify-content: center;
	opacity: 0.2;
	cursor: pointer;
	transition: opacity 0.2s;
}

.nui-cms-page-editor .nui-cms-section > .footer {
	margin-bottom: 2rem;
}

.nui-cms-page-editor .footer::before {
	position: absolute;
	top:0;
	content: '';
	width: 100%;
	height: 0.2rem;
	background-color: var(--color-highlight);
	transition: opacity 0.2s;
	opacity: 0;
}

.nui-cms-page-editor .footer:hover {
	opacity: 1;
}

.nui-cms-page-editor .footer:hover::before {
	opacity: 1;
}


.nui-cms-section .top-add {
	position: relative;
	cursor: pointer;
	transition: opacity 0.2s;
	
	/*background-color: rgba(var(--color-shadeX), 0.07);*/
	border-bottom: solid thin rgba(var(--color-shadeX), 0.1);
	padding-bottom: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.5rem;
	border-radius: 0.2rem;
}

.nui-cms-section .top-add::after {
	content: '';
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	height: 0.2rem;
	background-color: var(--color-highlight);
	opacity: 0;
	transition: opacity 0.2s;
}

.nui-cms-section .top-add .nui-icon-container{
	display: flex;
	justify-content: center;
	align-items: center;
}
.nui-cms-section .top-add .nui-icon{
	opacity: 0.2;
	transition: opacity 0.2s;
}
.nui-cms-section .top-add:hover {
	border-bottom: solid thin rgba(255,255,255,0)
}
.nui-cms-section .top-add:hover .nui-icon {
	opacity: 1;
}

.nui-cms-section .top-add:hover::after{
	opacity: 1;
}
.nui-cms-addblocklist .item {
	cursor: pointer;
	display: grid;
	grid-template-columns: 2rem auto;
	gap: 1rem;
	height: 2rem;
	margin-bottom: 0.5rem;
	background-color: rgba(var(--color-shadeX), 0.05);
	padding: 1rem;
}

.nui-cms-addblocklist .item > * {
	display: flex;
	align-items: center;
}
.nui-cms-addblocklist .item .icon{
	justify-content: center;
}

.nui-cms-addblocklist .item.active {
	background-color: rgba(var(--color-shadeX), 0.2);
}

.trumbowyg-editor-box .trumbowyg-editor{
	padding: 2rem;
}
.nui-cms-page-editor .nui-cms-media {
	position: relative;
}

.cms-page-editor .nui-cms-media .thumbs{
	margin-bottom: 0;
}

.nui-cms-page-editor .nui-cms-media .content .buttons {
	position: absolute;
	inset: 1rem;
	display: flex;
	justify-content: flex-end;
	z-index: 10;
	pointer-events: none;
}
.nui-cms-page-editor .nui-cms-media .content .buttons button{
	background-color: rgba(50,50,50,1);
	border: solid thin rgba(255,255,255, 0.3);

	box-shadow: 0 0 0.5rem 0 rgba(var(--shadow-color),0.5);
	overflow: hidden;
	width: 2rem;
	height: 2rem;
	padding: 0;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s;
	pointer-events: all;
}
.nui-cms-page-editor .nui-cms-media .content .buttons button:hover {
	opacity: 1;
}
.nui-cms-page-editor .nui-cms-media .content .buttons button .nui-icon{
	margin: 0;
	
}
.nui-cms-page-editor .nui-cms-media > .content {
	padding: 0rem;
	margin-bottom: 0;
	width: 100%;
	height: 100%;
}

.nui-cms-page-editor .nui-cms-media > .content .media{
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	background-color: rgba(var(--color-shade2),1);
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item {
	position: relative;
	width: 100%;
	height: 100%;
}

.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media{
	height: 100%;
	width: 100%;
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media video{
	height: 100%;
	width: 100%;
	object-fit: contain;
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media.audio{
	background-color: unset;
	border: 0;
	box-shadow: unset;
}

.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media.audio .wrap{
	background-color: unset;
	border: 0;
	box-shadow: unset;
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media.audio .wrap .cms_audio_info{
	position: absolute;
	inset: 0;
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media.audio .wrap .cms_audio_info .filename{
	display: inline-block;
	margin-top: 1rem;
	margin-left: 1rem;
	max-width: 80%;
	padding: 0.5rem;
	border-radius: 0.2rem;
	color:  rgba(var(--color-shadeX), 0.5);
	background-color: rgba(var(--color-shadeX), 0.05);
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media.audio .wrap .cms_audio_info .icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item .nui-media.audio .wrap .cms_audio_info .icon svg{
	position: absolute;
	width: 7rem;
	height: 7rem;
	opacity: 0.1;
	transform: translateY(-0.5rem);
}
.nui-cms-page-editor .nui-cms-media > .content .media .media_item img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	/*max-height: 30rem;*/
	filter: drop-shadow(0px 0px 1px rgba(var(--color-shadeX),.5)) drop-shadow(0 0 2rem rgba(0,0,0,0.3));
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s;
}

.nui-cms-page-editor .nui-cms-media .background {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nui-cms-page-editor .nui-cms-media .background svg {
	fill: rgba(var(--color-shadeX), 0.06);
	width: 50%;
	height: 50%;
	z-index: -1;
}

.nui-cms-page-editor .nui-cms-media .thumbs {
	overflow: hidden;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin:0;
}

.nui-cms-page-editor .nui-cms-media .thumbs .item {
	display: grid;
	grid-template-columns: 1.4rem auto;
	background-color: rgba(var(--color-shadeX),0.06);
	border: solid thin rgba(var(--color-shadeX),0.1);
	box-shadow: 0 0 0.3rem 0 rgba(var(--shadow-color),0.3);
	cursor: pointer;
}
.nui-cms-page-editor .nui-cms-media .thumbs .item .handle{
	font-size: 0.7rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nui-cms-page-editor .nui-cms-media .thumbs .item .pic{
	width: 4rem;
	height: 3rem;
	background-color: rgba(var(--color-shade3),1);
}
.nui-cms-page-editor .nui-cms-media .thumbs .item .pic .fileicon{
	transform: scale(0.7);
	color: rgba(var(--color-shadeX),1);
}
.nui-cms-page-editor .nui-cms-media .thumbs .item .pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nui-cms-page-editor .nui-cms-media .thumbs .item.selected {
	background-color: rgba(var(--color-shadeX),0.3);
	color: rgba(var(--color-shade0),1);
}
.nui-cms-page-editor .nui-cms-media .thumbs .item.selected .fileicon{
	color: rgba(var(--color-shadeX),1);
}

/* Files Variant */
/* ####################################################################################################### */
.nui-cms-page-editor .nui-cms-media.files > .content .media{
	position: relative;
	width: 100%;
	height: 15rem;
	width: 100%;
	background-color: rgba(var(--color-shade2),1);
}

.nui-cms-page-editor .nui-cms-media.files .thumbs .item {
	display: grid;
	width: 100%;
	grid-template-columns: 1.4rem 5rem auto 7rem;
	background-color: rgba(var(--color-shadeX),0.06);
	border: solid thin rgba(var(--color-shadeX),0.1);
	box-shadow: 0 0 0.3rem 0 rgba(var(--shadow-color),0.3);
	cursor: pointer;
	align-items: center;
}
.nui-cms-page-editor .nui-cms-media.files .thumbs .item .size{
	text-align: right;
	padding-right: 1rem;
	opacity: 0.3;
}
.nui-cms-page-editor .nui-cms-media.files .thumbs .item .handle{
	height: 100%;
	background-color: rgba(var(--color-shadeX),0.05);
}
.nui-cms-page-editor .nui-cms-media.files .thumbs .item.selected  {
	color: rgba(var(--color-shadeX),1);
}
.nui-cms-page-editor .nui-cms-media.files .thumbs .item.selected .handle{
	background-color: rgba(var(--color-shadeX),0.3);
	color: rgba(var(--color-shade0),1);
}
.nui-cms-page-editor .nui-cms-media.files .thumbs .item.selected .fileicon{
	color: rgba(var(--color-shadeX),1);
}




/* Fixed */
.nui-cms-section.fixed .wrap > .header > .side{
	display: none;
}
.nui-cms-section.fixed .header .side{
	grid-template-columns: auto 0rem;
}

.nui-cms-section.fixed .wrap .group .nui-cms-block > .header button{
	display: none;
}

.nui-cms-section.fixed .wrap .group .nui-cms-block > .header .nui-icon-container,
.nui-cms-section.fixed .wrap .group .nui-cms-columns > .header {
	display: none;
}


.nui-cms-section.fixed .wrap .content .top-add{
	display: none;
}


.nui-cms-section.fixed .wrap .content .group {
	margin-bottom: 2rem;
}
.nui-cms-section.fixed .wrap .content .group:last-of-type {
	margin-bottom: 1rem;
}

.nui-cms-section.fixed .wrap .content .group .nui-cms-block > .footer,
.nui-cms-section.fixed .wrap .content .group .nui-cms-columns > .footer {
	display: none;
}

.nui-cms-page-editor .nui-cms-block .nui-cms-input-group {
	display: flex;
	flex-direction: column;
	flex-flow: row wrap;
	gap: 1.5rem;
}
.nui-cms-page-editor .nui-cms-block .nui-cms-input-group > div{
	flex-basis: 25rem;
	flex-grow: 1;
}
.nui-cms-page-editor .nui-cms-block .nui-cms-input-group .nui-input {
	margin-bottom: 0rem;
}

.nui-cms-page-editor .nui-cms-block .nui-cms-input-group .nui-input input{
	min-height: 2.85rem;
}