.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: 25px;
	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;

		& .field, & .control {
			height: 100%
		}
	}

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

		&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;*/
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

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

	& .filesActions {
		grid-area: filesActions
	}

	& .editorActions {
		grid-area: editorActions
	}
}

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


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

.stripe {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 300%;
	background: radial-gradient(90% 90%, $background-light, $background-dark)
}