html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input
	{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		box-sizing: border-box;
	}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section
	{
		display: block;
	}

body
	{
		line-height: 1;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

ol, ul
	{
		list-style: none;
	}

blockquote, q
	{
		quotes: none;
	}

blockquote:before, blockquote:after,
q:before, q:after
	{
		content: '';
		content: none;
	}

table
	{
		border-collapse: collapse;
		border-spacing: 0;
	}

* { -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */ }
*::-webkit-scrollbar { width: 0; }

body .CodeMirror {
	width: 100%;
	height: 100%;
}

.nav-bar { width: 100%; height: 100px; }
.page { width: 100%; flex-grow: 1; }
.footer { width: 100%; height: 50px; }

.selectform { display: none; }
.selectlist { border: 1px solid #000; border-radius: 5px; background-color: white; position: relative; width: 100%; height: 100%; }
.selectedItem {width: 100%; height: 100%; display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;}
.selectOptionsArrow { width: 20px; border-radius: 0 5px 5px 0; background-color: #ccc; padding: 0 5px; }
.item { width: 100%; height: 100%; padding: 5px; }
.selectOptions { position: absolute; z-index: 100; left: 0; width: 100%; height: 500%; border-radius: 5px; background-color: #fff; display: none; overflow: scroll; border: 1px solid #000; box-shadow: 0px 0px 5px #ccc;
	-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */ }
.selectOptions::-webkit-scrollbar {
	display: none;
}
.selectOptions.top { top: 100%; }
.selectOptions.bottom { bottom: 100%; }
.selectOptions.left { right: 100%; top: 0px; }
.selectOptions.right { left: 100%; top: 0px }
.selectOptions li { padding: 10px 5px; height: 20%; }
.selectOptions li:hover { background-color: #aaa; }

.multiselectform { display: none; }
.multiSelectList { border: 1px solid #000; background-color: white; }
.multiSelectList li { padding: 5px 10px; cursor: pointer; }
.multiSelectList li:before { content: ' '; display: inline-block; vertical-align: middle; width: 7px; height: 7px; margin-bottom: 3px; margin-right: 10px; border-radius: 5px; border: 2px solid #888; }
.multiSelectList li:hover { background-color: #aaa; color: #000; }
.multiSelectList li.selected  { background-color: #888; color: #000; }
.multiSelectList li:hover:before, .multiSelectList li.selected:before { border: 2px solid #fff; background-color: #fff; }
.multiSelectList li .listItemIcon { pointer-events: none; }
.multiSelectList li .listItemText { pointer-events: none; }

/* HIERARCHY LIST */
.hierarchyListWrapper {
	width: 100%;
	height: 100%;
	background-color: var(--hierarchylist-accent-background-color);
	color: var(--hierarchylist-text-color);

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	--hierarchylist-text-color: #000;
	--hierarchylist-icon-fill-color: #1D1D1D;
	--hierarchylist-background-color: #fff;
	--hierarchylist-hover-background-color: #aaa;
	--hierarchylist-accent-background-color: #ccc;
	--hierarchylist-border-color: #000;
	--hierarchylist-drop-shadow-color: #000;
}

.hierarchyListWrapper .hierarchyListStates {
	width: 100%;
	height: 35px;
	background-color: var(--hierarchylist-background-color);

	flex-grow: 0;
}

.hierarchyListWrapper .hierarchyListStates ul {
	height: 100%;
	width: 100%;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.hierarchyListWrapper .hierarchyListStates ul li {
	height: 100%;
	width: auto;
	padding-left: 10px;

	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.hierarchyListWrapper .hierarchyListStates ul li .listState {
	height: 100%;
	width: 100%;

	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.hierarchyListWrapper .hierarchyListStates ul li .listState .listStateIcon {
	height: 100%;
	width: 100%;
	pointer-events: none;

	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.hierarchyListWrapper .hierarchyListStates ul li.selected .listState {
	background-color: var(--hierarchylist-accent-background-color);
}

.hierarchyListWrapper .hierarchyListStates ul li.selected .listState svg .iconPath {
	fill: var(--hierarchylist-icon-fill-color);
}

.hierarchyListWrapper .hierarchyListItems {
	width: 100%;
	overflow: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */

	flex-grow: 1;
}

.hierarchyListWrapper::-webkit-scrollbar .hierarchyListItems {
	display: none;
}

.hierarchyListWrapper .hierarchyListItems ul {
	display: none;
}

.hierarchyListWrapper .hierarchyListItems ul.visible {
	display: block;
}

.hierarchyListWrapper .hierarchyListItems ul li {
	width: 100%;
	cursor: pointer;
	padding-left: 25px;
}

.hierarchyListWrapper .hierarchyListItems > ul > li {
	padding-left: 5px;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem {
	width: 100%;
	background-color: var(--hierarchylist-accent-background-color);
	padding: 5px 5px 5px 0;
	position: relative;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem:before {
	content: ' ';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 100%;
	background-color: var(--hierarchylist-accent-background-color);
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem:hover,
.hierarchyListWrapper .hierarchyListItems ul li .listItem:hover:before {
	background-color: var(--hierarchylist-hover-background-color);
}

.hierarchyListWrapper .hierarchyListItems ul li.selected > .listItem,
.hierarchyListWrapper .hierarchyListItems ul li.selected > .listItem.selected:before {
	background-color: var(--hierarchylist-background-color);
}

.hierarchyListWrapper .hierarchyListItems ul li.draggingOver > .listItem,
.hierarchyListWrapper .hierarchyListItems ul li.draggingOver > .listItem:hover,
.hierarchyListWrapper .hierarchyListItems ul li.selected.draggingOver > .listItem {
	box-shadow: inset 0px -1px 7px #000;
}

.hierarchyListWrapper .hierarchyListItems .listItemIcon svg {
	pointer-events: none;
}

.hierarchyListWrapper .hierarchyListItems .iconPath,
.hierarchyListWrapper .hierarchyListItems .hierarchyListPath {
	fill: var(--hierarchylist-icon-fill-color);
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse  {
	width: 20px;
	height: 20px;
	margin: 0 5px 0 0;
	pointer-events: auto;

	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse .leaf {
	pointer-events: none;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse  .listItemExpand {
	width: 70%;
	height: 70%;
	pointer-events: none;
	display: inline-block;
	background-color: #aaa;
	border-radius: 50%;
	padding: 3px;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse .visible .listItemExpand {
	display: none;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse  .listItemExpand svg {
	display: block;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse  .listItemCollapse {
	width: 70%;
	height: 70%;
	pointer-events: none;
	display: none;
	background-color: #aaa;
	border-radius: 50%;
	padding: 3px;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse .visible .listItemCollapse {
	display: inline-block;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse  .listItemCollapse svg {
	display: block;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup {
	pointer-events: none;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .listItemIcon {
	width: 20px;
	height: 20px;
	margin: 0 5px 0 0;
	display: inline-block;
	pointer-events: none;

	flex-grow: 0;
}

.hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .listItemText {
	margin: 0 10px 0 0;
	display: inline-block;
	pointer-events: none;
	
	flex-grow: 1;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

/* FILE UPLOAD */
.fileUploadWrapper {
	width: 100%;
	height: 100%;
	background-color: var(--fileupload-background-color);
	color: var(--fileupload-text-color);

	--fileupload-text-color: #000;
	--fileupload-background-color: #fff;
	--fileupload-button-background-color: #888;
	--fileupload-icon-fill-color: #000;
	--fileupload-upload-icon-fill-color: rgba(100, 100, 100, 0.5);
	--fileupload-upload-success-background-color: #7a9687;
	--fileupload-upload-error-background-color: #92797d;
	--fileupload-upload-text-color: #000;
}

.fileUploadWrapper .fileUploadInput { display: none; }

.fileUploadWrapper .fileUpload {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
	overflow: scroll;

	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: common;
	align-items: center;
	align-content: center;
}

.fileUploadWrapper .fileUpload::-webkit-scrollbar {
	display: none;
}

.fileUploadWrapper .fileUpload .fileUploadIcon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	pointer-events: none;

	
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.fileUploadWrapper .fileUpload .fileUploadIcon.showUploadIcon {
	display: flex;
}

.fileUploadWrapper .fileUpload .fileUploadIcon .fileUploadPath {
	fill: var(--fileupload-upload-icon-fill-color);
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper {
	width: 100%;
	min-height: 0;
	pointer-events: auto;

	flex-grow: 1;

	overflow: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper::-webkit-scrollbar {
	display: none;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList {
	width: 100%;
	pointer-events: none;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li {
	width: 100%;
	height: 70px;
	padding: 10px;
	border-bottom: 1px solid #000;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li.uploadSuccess {
	background-color: var(--fileupload-upload-success-background-color);
	color: var(--fileupload-upload-text-color);
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li.uploadError {
	background-color: var(--fileupload-upload-error-background-color);
	color: var(--fileupload-upload-text-color);
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li .thumbnail {
	height: 100%;
	width: 60px;
	padding-right: 10px;

	flex-grow: 0;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li .thumbnail img {
	height: 100%;
	width: 100%;
	box-shadow: 0px 0px 5px #000;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li .filename {
	flex-grow: 1;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li .fileDelete {
	width: 30px;
	height: 100%;
	pointer-events: auto;

	flex-grow: 0;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li.uploadSuccess .fileDelete,
.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li.uploadError .fileDelete {
	pointer-events: none;
}

.fileUploadWrapper .fileUpload .fileUploadListWrapper .fileUploadList li .fileDelete svg {
	pointer-events: none;
	fill: var(--fileupload-icon-fill-color);
}

.fileUploadWrapper .fileUpload .fileUploadButton {
	width: 100%;
	height: 70px;
	min-height: 70px;
	max-height: 70px;
	box-shadow: -5px 0px 5px 0px #000;
	background-color: var(--fileupload-button-background-color);

	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.fileUploadWrapper .fileUpload .fileUploadButton .fileUploadButtonIcon {
	height: 100%;
	width: 30px;
	pointer-events: none;
}

.fileUploadWrapper .fileUpload .fileUploadButton .fileUploadButtonText {
	pointer-events: none;
}

/* FILE New */
.fileNewWrapper {
	width: 100%;
	height: 100%;
	padding: 10px;
	background-color: var(--filenew-background-color);
	color: var(--filenew-text-color);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	--filenew-text-color: #000;
	--filenew-background-color: #ccc;
	--filenew-border-color: #aaa;
}

.fileNewWrapper input {
	width: 100%;
	height: 40px;
	padding: 5px;
	text-align: center;
	border: 1px solid var(--filenew-background-color);
	border-radius: 5px;
}

.fileNewWrapper .createFileType {
	width: 80%;
	height: 30px;
}

.fileNewWrapper .createFileType .selectIconPath {
	fill: #000;
}

.fileNewWrapper .createFileButton {
	width: 20%;
	height: 40px;
	cursor: pointer;
}

.fileNewWrapper .createFileButton .createFileButtonIcon {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* FILE */
.fileWrapper {
	width: 100%;
	height: 100%;
	background-color: var(--file-accent-background-color);
	color: var(--file-text-color);

	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;

	--file-text-color: #000;
	--file-background-color: #fff;
	--file-accent-background-color: #ccc;
	--file-hover-background-color: #aaa;
	--file-border-color: #000;
	--file-drop-shadow-color: #000;
}

.fileWrapper img,
.fileWrapper video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* FILES */
.filesWrapper {
	width: 100%;
	height: 100%;
	background-color: var(--files-background-color);
	color: var(--files-text-color);

	--files-text-color: #000;
	--files-background-color: #fff;
	--files-accent-background-color: #ccc;
	--files-hover-background-color: #aaa;
	--files-border-color: #000;
	--files-drop-shadow-color: #000;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper .filesColumn {
	height: 100%;
	min-width: 0;
	max-width: 100%;

	flex-grow: 1;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper .filesColumn:first-child {
	width: 20%;
	min-width: 20%;

	flex-grow: 0;
}

.filesWrapper .filesColumn:nth-child(3) {
	width: 0;

	flex-grow: 0;
}

.filesWrapper .files-fileUpload {
	width: 100%;
	height: 100px;
	background-color: var(--files-accent-background-color);
	border: 1px solid var(--files-border-color);
	border-top: none;
    border-left: none;

    flex-grow: 0;
}

.filesWrapper .files-fileUpload .fileUploadWrapper .fileUpload .fileUploadButton {
	height: 40px;
    min-height: 40px;
    max-height: 40px;
}

.filesWrapper .files-fileNew {
	width: 100%;
	height: 100px;
	padding: 10px;
	background-color: var(--files-accent-background-color);
	border: 1px solid var(--files-border-color);
	border-top: none;
    border-left: none;

    flex-grow: 0;
}

.filesWrapper .files-categoriesList {
	width: 100%;
	background-color: var(--files-accent-background-color);

    flex-grow: 1;
}

.filesWrapper .files-filesList {
	width: 100%;
	height: 100%;
	background-color: var(--files-background-color);

    flex-grow: 1;
}

.filesWrapper .files-filesList .hierarchyListWrapper {
	background-color: var(--files-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListStates {
	background-color: var(--files-accent-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListStates ul li.selected .listState {
	background-color: var(--files-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems > ul > li {
	padding-left: 0;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem {
	height: 50px;
	background-color: var(--files-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem::before {
	display: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem:hover,
.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem:hover:before {
	background-color: var(--files-hover-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li.selected > .listItem,
.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li.selected > .listItem.selected:before {
	background-color: var(--files-accent-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse {
	display: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li {
	width: auto;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup {
	width: 100%;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper {
	width: 100%;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul.hierarchyList {
	width: 100%;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li {
	padding: 10px;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem {
	height: 200px;
	border: 1px solid #000;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #000;

	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup {
	width: auto;
	height: 100%;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail,
.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName,
.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileExtension,
.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize,

.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileExtension,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize {
	height: 100%;
	padding: 0 5px;
	
	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileExtension p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize p,

.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileExtension p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize p {
	height: 100%;
	
	flex-grow: 1;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileExtension,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize {
	width: 100%;
	padding: 5px 0px;
	
	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileExtension p,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize p {
	width: 100%;
	
	flex-grow: 1;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail {
	min-height: 0;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail img,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail img,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail img {
	height: 100%;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listDetails .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileName,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileThumbnail {
	flex-grow: 1;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-list .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize,
.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSize {
	display: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu {
	margin: 0 10px;
	cursor: pointer;
	pointer-events: auto;
	position: relative;

	flex-grow: 0;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu svg {
	width: 40px;
	pointer-events: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu .fileMenuList {
	position: absolute;
	top: 45%;
	right: 100%;
	width: 500%;
	padding: 5px 10px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #000;
	display: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu .fileMenuList.visible {
	display: block;
	z-index: 1;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu .fileMenuList {
	top: auto;
	bottom: 100%;
	left: 0;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu .fileMenuList li {
	width: 100%;
	height: 25%;
	padding: 5px 0;
	cursor: pointer;

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

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu .fileMenuList li:hover {
	background: #aaa;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileMenu .fileMenuList li svg {
	height: 20px;
	pointer-events: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #000;
	box-shadow: 0px 0px 5px 0px #000;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-content: center;

	display: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit.visible {
	display: flex;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit {
	flex-direction: column;
	padding: 10px;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileName {
	height: 40px;
	margin: 0 5px;
	flex-grow: 1;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileName {
	width: 100%;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileName input {
	height: 40px;
	width: 100%;
	padding: 10px;
	pointer-events: auto;
	border: 1px solid var(--files-border-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories {
	height: 40px;
	margin: 0 5px;
	flex-grow: 1;
	z-index: 1;
	pointer-events: auto;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories {
	width: 100%;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesTitle {
	height: 40px;
	width: 100%;
	padding: 10px;
	pointer-events: auto;
	border: 1px solid var(--files-border-color);

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

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesTitle:hover {
	background-color: var(--files-hover-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories.visible .fileCategoriesTitle,
.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories.visible .fileCategoriesTitle:hover {
	background-color: var(--files-hover-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesTitle p {
	pointer-events: none;
	height: 100%;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesTitle .fileCategoriesTitleIcon {
	width: 15px;
	margin-left: 10px;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesTitle svg {
	pointer-events: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesWrapper {
	width: 100%;
	height: 500%;
	padding: 10px 10px 0;
	background-color: var(--files-background-color);
	border: 1px solid var(--files-border-color);
	box-shadow: 0px 1px 3px 0px #000;
	display: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories.visible .fileCategoriesWrapper {
	display: block;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesWrapper .hierarchyListWrapper .hierarchyListItems ul li {
	background-color: var(--files-background-color);
	height: auto;
	width: 100%;
	padding: 0 0 0 10px;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesWrapper .hierarchyListWrapper .hierarchyListItems ul li .listItem {
	height: auto;
}

.filesWrapper .files-filesList .hierarchyListWrapper.state-listGrid .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesWrapper .hierarchyListWrapper .hierarchyListItems ul li .listItem {
	justify-content: flex-start;
	box-shadow: none;
    border: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesWrapper .hierarchyListWrapper .hierarchyListItems ul li .listItem::before {
	display: inline-block;
	background-color: var(--files-background-color);
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCategories .fileCategoriesWrapper .hierarchyListWrapper .hierarchyListItems .listItemExpandCollapse {
	display: flex;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileSave {
	margin: 0 10px;
	cursor: pointer;
	position: relative;
	pointer-events: auto;

	flex-grow: 0;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileSave svg {
	width: 40px;
	pointer-events: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCancel {
	margin: 0 10px;
	cursor: pointer;
	position: relative;
	pointer-events: auto;

	flex-grow: 0;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileEdit .editFileCancel svg {
	width: 40px;
	pointer-events: none;
}

.filesWrapper .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSelectOverride {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.filesWrapper .files-fileViewer {
	width: 0;
	position: relative;
}



.filesWrapper.viewFile .filesColumn {
	height: 100%;
	min-width: 0;
	max-width: 100%;

	flex-grow: 1;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesWrapper.viewFile .filesColumn:first-child {
	width: 0%;

	flex-grow: 0;
}

.filesWrapper.viewFile .filesColumn:nth-child(2) {
	width: 25%;
	min-width: 25%;

	flex-grow: 0;
}

.filesWrapper.viewFile .filesColumn:nth-child(3) {
	width: auto;

	flex-grow: 1;
}

.filesWrapper.viewFile .files-fileNew {
	display: none;
}

.filesWrapper.viewFile .files-categoriesList {
	width: 0;
}

.filesWrapper.viewFile .files-filesList {
	width: 100%;
	width: 30%;
	padding-top: 30px;

	flex-grow: 1;
}

.filesWrapper.viewFile .files-filesList .hierarchyListStates,
.filesWrapper.viewFile .files-filesList .fileSize,
.filesWrapper.viewFile .files-filesList .fileMenu,
.filesWrapper.viewFile .files-filesList .fileEdit {
	display: none;
}

.filesWrapper.viewFile .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .filesFileWrapper .fileSelectOverride {
	pointer-events: auto;
}

.filesWrapper.viewFile .files-filesList .hierarchyListWrapper .hierarchyListItems ul li .listItem.viewingFile {
	background-color: var(--files-accent-background-color);
	height: 50px;
}

.filesWrapper.viewFile .files-fileViewer {
	width: 100%;
	height: 100%;
	background-color: var(--files-accent-background-color);

	flex-grow: 1;
}

.filesWrapper.viewFile .files-fileViewer .saveFileViewer {
	position: absolute;
	top: 0;
	right: 35px;
	z-index: 1;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.filesWrapper.viewFile .files-fileViewer .saveFileViewer p {
	pointer-events: none;
}

.filesWrapper.viewFile .files-fileViewer .closeFileViewer {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.filesWrapper.viewFile .files-fileViewer .closeFileViewer p {
	pointer-events: none;
}

.filesWrapper.viewFile .files-fileViewer .fileViewer {
	width: 100%;
	height: 100%;
	padding-top: 30px;
}





.noteNewWrapper {
	width: 100%;
	height: 100%;
	background-color: var(--noteNew-background-color);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	--noteNew-text-color: #000;
	--noteNew-background-color: #fff;
	--noteNew-accent-background-color: #ccc;
	--noteNew-hover-background-color: #aaa;
	--noteNew-border-color: #000;
	--noteNew-drop-shadow-color: #000;
}

.noteNewWrapper .createNoteIcon {
	width: 80px;
	height: 100%;
	padding: 10px;
}

.noteNewWrapper .createNoteIcon .selectOptions {
	width: 460%;
}

.noteNewWrapper .createNoteIcon .selectOptions li {
	display: inline-block
}

.noteNewWrapper .createNoteIcon .selectIconPath {
	fill: #000;
}

.noteNewWrapper input {
	height: 40px;
	padding: 5px;
	margin-right: 10px;

	flex-grow: 1;
}

.noteNewWrapper textarea {
	height: 30px;
	padding: 5px;

	flex-grow: 1;
}

.noteNewWrapper .createNoteButton {
	height: 100%;
	width: 55px;
	padding: 10px 5px;
	cursor: pointer;
}

.noteNewWrapper .createNoteButton .createNoteButtonIcon {
	height: 100%;
	width: 100%;
	pointer-events: none;
}







.notesWrapper {
	width: 100%;
	height: 100%;
	background-color: var(--notes-background-color);

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	--notes-text-color: #000;
	--notes-background-color: #fff;
	--notes-accent-background-color: #ccc;
	--notes-hover-background-color: #aaa;
	--notes-border-color: #000;
	--notes-drop-shadow-color: #000;
}

.notesWrapper .notesNotesList {
	width: 100%;
	height: 20%;

	flex-grow: 1;
}

.notesWrapper .notesNotesList .hierarchyListWrapper {
	background-color: var(--notes-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListStates {
	background-color: var(--notes-accent-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListStates ul li.selected .listState {
	background-color: var(--notes-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems > ul > li {
	padding-left: 0;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem {
	height: 50px;
	background-color: var(--notes-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem::before {
	display: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem:hover,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem:hover:before {
	background-color: var(--notes-hover-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li.selected > .listItem,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li.selected > .listItem.selected:before {
	background-color: var(--notes-accent-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemExpandCollapse {
	display: none;
}


.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup {
	width: 100%;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem {
	width: 100%;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteThumbnail,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteName,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteDescription {
	height: 100%;
	padding: 0 5px;
	
	flex-grow: 0;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteThumbnail p,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteName p,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteDescription {
	height: 100%;
	
	flex-grow: 1;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteThumbnail img,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteThumbnail svg {
	height: 100%;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteName {
	flex-grow: 1;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteMenu {
	margin: 0 10px;
	cursor: pointer;
	pointer-events: auto;
	position: relative;

	flex-grow: 0;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteMenu svg {
	width: 40px;
	pointer-events: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteMenu .noteMenuList {
	position: absolute;
	top: 45%;
	right: 100%;
	width: 500%;
	padding: 5px 10px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #000;
	display: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteMenu .noteMenuList.visible {
	display: block;
	z-index: 1;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteMenu .noteMenuList li {
	width: 100%;
	height: 25%;
	padding: 5px 0;
	cursor: pointer;

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

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteMenu .noteMenuList li:hover {
	background: #aaa;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteMenu .noteMenuList li svg {
	height: 20px;
	pointer-events: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #000;
	box-shadow: 0px 0px 5px 0px #000;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-content: center;

	display: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit.visible {
	display: flex;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteIcon {
	width: 60px;
	height: 40px;
	margin: 0 10px;
	pointer-events: auto;

	flex-grow: 0;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteIcon ul.selectOptions {
	width: 500%;
    height: 50px;
    top: -6px;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteIcon ul.selectOptions li {
	width: 30px;
    height: 30px;
    padding: 5px;
	float: left;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteName {
	height: 40px;
	margin: 0 5px;

	flex-grow: 1;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteName input {
	height: 40px;
	width: 100%;
	padding: 10px;
	pointer-events: auto;
	border: 1px solid var(--notes-border-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteDescription {
	height: 40px;
	margin: 0 5px;

	flex-grow: 1;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteDescription textarea {
	width: 100%;
	height: 34px;
	pointer-events: auto;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories {
	height: 40px;
	margin: 0 5px;
	z-index: 1;
	pointer-events: auto;

	flex-grow: 1;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesTitle {
	height: 40px;
	width: 100%;
	padding: 10px;
	pointer-events: auto;
	border: 1px solid var(--notes-border-color);

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

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesTitle:hover {
	background-color: var(--notes-hover-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories.visible .noteCategoriesTitle,
.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories.visible .noteCategoriesTitle:hover {
	background-color: var(--notes-hover-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesTitle p {
	pointer-events: none;
	height: 100%;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesTitle .noteCategoriesTitleIcon {
	width: 15px;
	margin-left: 10px;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesTitle svg {
	pointer-events: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesWrapper {
	width: 100%;
	height: 500%;
	padding: 10px 10px 0;
	background-color: var(--notes-background-color);
	border: 1px solid var(--notes-border-color);
	box-shadow: 0px 1px 3px 0px #000;
	display: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories.visible .noteCategoriesWrapper {
	display: block;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesWrapper .hierarchyListWrapper .hierarchyListItems ul li {
	background-color: var(--notes-background-color);
	height: auto;
	width: 100%;
	padding: 0 0 0 10px;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesWrapper .hierarchyListWrapper .hierarchyListItems ul li .listItem {
	height: auto;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesWrapper .hierarchyListWrapper .hierarchyListItems ul li .listItem::before {
	display: inline-block;
	background-color: var(--notes-background-color);
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCategories .noteCategoriesWrapper .hierarchyListWrapper .hierarchyListItems .listItemExpandCollapse {
	display: flex;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteSave {
	margin: 0 10px;
	cursor: pointer;
	position: relative;
	pointer-events: auto;

	flex-grow: 0;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteSave svg {
	width: 40px;
	pointer-events: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCancel {
	margin: 0 10px;
	cursor: pointer;
	position: relative;
	pointer-events: auto;

	flex-grow: 0;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteEdit .editNoteCancel svg {
	width: 40px;
	pointer-events: none;
}

.notesWrapper .notesNotesList .hierarchyListWrapper .hierarchyListItems ul li .listItem .listItemMarkup .notesNoteListItem .noteSelectOverride {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.notesWrapper .notesNote {
	width: 100%;
	height: 80%;

	flex-grow: 1;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNote .notesNoteHeader {
	width: 100%;
	height: 50px;
	color: black;

	flex-grow: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNote .notesNoteHeader .noteThumbnail {
	height: 100%;
	width: 50px;
	padding: 5px 0;

	flex-grow: 0;
}

.notesWrapper .notesNote .notesNoteHeader .noteThumbnail p  {
	height: 100%;
	width: 100%;
	pointer-events: none;

	flex-grow: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNote .notesNoteHeader .noteThumbnail p svg  {
	height: 100%;
	width: 100%;
}

.notesWrapper .notesNote .notesNoteHeader .noteName {
	flex-grow: 1;
}

.notesWrapper .notesNote .notesNoteHeader .noteBack {
	height: 100%;
	width: 50px;
	padding: 5px 0;
	cursor: pointer;

	flex-grow: 0;
}

.notesWrapper .notesNote .notesNoteHeader .noteBack p  {
	height: 100%;
	width: 100%;
	pointer-events: none;

	flex-grow: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNote .notesNoteHeader .noteBack p svg  {
	height: 100%;
	width: 100%;
}

.notesWrapper .notesNote .notesNoteMenu {
	width: 100%;
	height: 30px;

	flex-grow: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNote .notesNoteMenu .notesNoteMenuItem  {
	height: 100%;
	width: 30px;
	cursor: pointer;

	flex-grow: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNote .notesNoteMenu .notesNoteMenuItem.notesNoteMenuItemSeparator {
	flex-grow: 1;
}

.notesWrapper .notesNote .notesNoteMenu .notesNoteMenuItem p  {
	height: 100%;
	width: 100%;
	pointer-events: none;

	flex-grow: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.notesWrapper .notesNote .notesNoteMenu .notesNoteMenuItem p svg  {
	height: 100%;
	width: 100%;
}

.notesWrapper .notesNote .notesNoteMarkup {
	width: 100%;
	color: #000;
	position: relative;

	flex-grow: 1;
}

.notesWrapper .notesNote .notesNoteMarkupView {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 10px;
	z-index: 1;
	overflow-y: scroll;
	background: #fff;
}

.notesWrapper .notesNote .notesNoteMarkupEditWYSIWYG {
	position: absolute;
	height: 100%;
	width: 100%;
	padding-bottom: 42px;
	z-index: 0;
	background: #fff;

	flex-grow: 1;
}

.notesWrapper .notesNote .notesNoteMarkupEditWYSIWYG .notesNoteMarkupEditWrapper {
	height: 100%;
	width: 100%;
	
	overflow-y: scroll;
}

.notesWrapper .notesNote .notesNoteMarkupEditCode {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 0;

	flex-grow: 1;
}

.notesWrapper .notesNote .notesNoteScript {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 0;

	flex-grow: 1;
}

.notesWrapper .notesNote.preview .notesNoteMarkup .notesNoteMarkupView {
	z-index: 1;
}

.notesWrapper .notesNote.preview .notesNoteMarkup .notesNoteMarkupEditWYSIWYG,
.notesWrapper .notesNote.preview .notesNoteMarkup .notesNoteMarkupEditCode,
.notesWrapper .notesNote.preview .notesNoteMarkup .notesNoteScript {
	z-index: 0;
}

.notesWrapper .notesNote.editWYSIWYG .notesNoteMarkup .notesNoteMarkupEditWYSIWYG {
	z-index: 1;
}

.notesWrapper .notesNote.editWYSIWYG .notesNoteMarkup .notesNoteMarkupView,
.notesWrapper .notesNote.editWYSIWYG .notesNoteMarkup .notesNoteMarkupEditCode,
.notesWrapper .notesNote.editWYSIWYG .notesNoteMarkup .notesNoteScript {
	z-index: 0;
}

.notesWrapper .notesNote.editCode .notesNoteMarkup .notesNoteMarkupEditCode {
	z-index: 1;
}

.notesWrapper .notesNote.editCode .notesNoteMarkup .notesNoteMarkupView,
.notesWrapper .notesNote.editCode .notesNoteMarkup .notesNoteMarkupEditWYSIWYG,
.notesWrapper .notesNote.editCode .notesNoteMarkup .notesNoteScript {
	z-index: 0;
}

.notesWrapper .notesNote.editScript .notesNoteMarkup .notesNoteScript  {
	z-index: 1;
}

.notesWrapper .notesNote.editScript .notesNoteMarkup .notesNoteMarkupView,
.notesWrapper .notesNote.editScript .notesNoteMarkup .notesNoteMarkupEditWYSIWYG,
.notesWrapper .notesNote.editScript .notesNoteMarkup .notesNoteMarkupEditCode {
	z-index: 0;
}

.notesListWrapper {
	width: 100%;
	height: 100%;
}

.notesListWrapper .notesListNotesList {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.notesListWrapper .notesListNotesList .hierarchyListItem {
	height: 50px;
}

.notesListWrapper .notesListNotesList .hierarchyListItem .listItem {
	width: 100%;
	height: 100%;
}

.notesListWrapper .notesListNotesList .hierarchyListItem .listItem .listItemExpandCollapse {
	display: none;
}

.notesListWrapper .notesListNotesList .hierarchyListItem .listItem .notesListNoteListItem {
	width: 100%;
	height: 100%;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.notesListWrapper .notesListNotesList .hierarchyListItem .listItem .notesListNoteListItem .noteThumbnail,
.notesListWrapper .notesListNotesList .hierarchyListItem .listItem .notesListNoteListItem .noteThumbnail p {
	height: 100%;

	flex-grow: 0;
}

.notesListWrapper .notesListNotesList .hierarchyListItem .listItem .notesListNoteListItem .noteThumbnail svg {
	height: 100%;
}

.notesListWrapper .notesListNotesList .hierarchyListItem .listItem .notesListNoteListItem .noteName {
	height: 100%;
	min-width: 0;

	flex-grow: 1;
}

.notesListWrapper .notesListNotesList .hierarchyListItem .listItem .notesListNoteListItem .noteName p {
	width: 100%;
	height: 100%;

	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.noteWrapper {
	width: 100%;
	height: 100%;

	color: black;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.noteWrapper .noteHeader {
	width: 100%;
	height: 50px;

	flex-grow: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.noteWrapper .noteHeader .noteThumbnail {
	height: 100%;
	width: 50px;

	flex-grow: 0;
}

.noteWrapper .noteHeader .noteName {
	height: 100%;

	flex-grow: 1;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.noteWrapper .noteHeader .noteBack {
	height: 100%;
	width: 50px;
	cursor: pointer;

	flex-grow: 0;
}

.noteWrapper .noteHeader .noteBack p {
	pointer-events: none;
}

.noteWrapper .noteMarkupWrapper {
	width: 100%;
	min-height: 0px;
	padding: 10px;

	flex-grow: 1;
}

.noteWrapper .noteMarkupWrapper .noteMarkup {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}












.filesExplorer_wrapper {
	width: 100%;
	height: 100%;
	padding: 10px;
}

.filesExplorerWrapper {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.filesExplorerWrapper .filesExplorerFileUpload {
	width: 20%;
	height: 20%;
}

.filesExplorerWrapper .filesExplorerFileNew {
	width: 20%;
	height: 10%;
}

.filesExplorerWrapper .filesExplorerCategoriesList {
	width: 20%;
	height: 70%;
}

.filesExplorerWrapper .filesExplorerFiles {
	width: 80%;
	height: 100%;
}










.notebook_wrapper {
	width: 100%;
	height: 100%;
	padding: 10px;
}

.notebookWrapper {
	width: 100%;
	height: 100%;
	position: relative;

	/*
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	*/
}

.notebookWrapper .notebookCategories {
	position: absolute;
	top: 0;
	left: 0;

	width: 20%;
	height: 40%;
}

.notebookWrapper .notebookFileUpload {
	position: absolute;
	top: 40%;
	left: 0;

	width: 20%;
	height: 10%;
}

.notebookWrapper .notebookFileNew {
	position: absolute;
	top: 50%;
	left: 0;
	
	width: 20%;
	height: 10%;
}

.notebookWrapper .notebookFiles {
	position: absolute;
	top: 60%;
	left: 0;
	
	width: 20%;
	height: 40%;
}

.notebookWrapper .notebookNoteNew {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 20%;
	
	width: 80%;
	height: 65px;
}

.notebookWrapper .notebookNotes {
	position: absolute;
	top: 0;
	left: 20%;
	
	width: 80%;
	height: 100%;
	padding-top: 65px;
}


.noteReader_wrapper {
	width: 100%;
	height: 100%;

	background-color: #fff;
}

.noteReaderWrapper {
	width: 100%;
	height: 100%;

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.noteReaderWrapper .noteReaderCategories {
	height: 50%;
	width: 20%;

	flex-grow: 0;
}

.noteReaderWrapper .noteReaderNotesList {
	height: 50%;
	width: 20%;

	flex-grow: 0;
}

.noteReaderWrapper .noteReaderNote {
	height: 100%;
	width: 80%;

	flex-grow: 1;
}