.main {
	display: flex;
	flex-wrap: nowrap;
	align-items: start;
	width: 100%;
	height: 100vh;
	padding: 2.5%;

	&Nav {
		overflow-y: auto;
		padding: $border-radius;
		width: 17%;
		margin-right: 40px;
	}

	&Page {
		overflow-y: auto;
		padding: $border-radius-b;
		width: calc(83% - 40px);
		align-self: stretch;
	}
}

.filesWithEditor {
	display: grid;
	grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
	grid-gap: 20px;
	height: 100%;
	max-height: 100%;
	min-height: 10%;
	grid-template-rows: 30px auto 30px;
	grid-template-columns: 30% auto;
	width: 100%;

	& .filterFiles {
		grid-area: filterFiles
	}

	& .fileTitle {
		grid-area: fileTitle
	}

	& .files {
		grid-area: files;
		display: block;
		min-height: 10%;
		padding: 4% 0;

		& .confFile {
			padding: 4% 6%;
			margin-bottom: 3%;
		}

		&List {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			height: 100%;
			min-height: 10%;
			width: 100%;
			padding: 4% 8%;
			overflow-y: auto;
		}
	}

	& .codeEditor {
		grid-area: codeEditor;
		min-height: 0;
		height: 100%;
		overflow-x: auto;

		& .editor {
			height: 100%;
			margin: 0;
			width: 100%
		}

		& .CodeMirror {
			height: 100%;
			max-height: 100%;
			width: 100%;

			&-sizer {
				min-width: 1% !important
			}
		}
	}

	& .filesActions {
		grid-area: filesActions
	}

	& .editorActions {
		grid-area: editorActions
	}
}

.menu-list > li > .neoFile {
	margin-bottom: 4%
}