.dashboard-upload {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}

.dashboard-module {
	width: 5%;
	min-width: 225px;
	display: inline-block;

	.primary-image {
		max-width: 32px; vertical-align: middle;
	}
}

.dashboard-explorer {
	transition: .3s;
	background: #222222;

	&.upload-ready {
		background: rgb(46, 46, 46);
	}

	&.upload-over {
		opacity: 1;
		border: 3px dodgerblue solid;
		height: calc(100% - 6px) !important;
		background: transparent !important;
	}
}

.dashboard-file.card {
	cursor: default;
	transition: .3s;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;

	&.active {
		background-color: dodgerblue;
		color: white;
		
		.dashboard-icon-file, .dashboard-icon-folder {
			
		}
	}

	.dashboard-icon-folder, .dashboard-icon-file {
		display: inline-block;
		margin-right: .3em;
		background: white;
		border-radius: 100%;
		width: 28px;
		height: 28px;
		text-align: center;
		vertical-align: middle;

		> * {
			position: relative;
			top: 6px;
		}
	}

	.dashboard-icon-folder {
		color: #13489a;
	}

	.dashboard-icon-file {
		color: dodgerblue;
	}
}

.dashboard-config {
	label {
		font-size: .8em;
		color: #BDBDBD;
	}

	.config-main input {
		color: white;
	}
}

.dashboard-main {
	@tabsSize: 216px;
	@headSize: 50px;
	height: 100%;
	display: flex;
	flex-direction: column;

	::-webkit-scrollbar {
		width: 6px;
	}
	
	::-webkit-scrollbar-track {
		background: #00000000; 
	}
	
	::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.397);
		transition: .3s;
	}
	
	::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, 0.747);
		width: 10px;
	}

	.dashboard-column {
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.dashboard-tabs {
		overflow: auto;
		top: @headSize;
		width: @tabsSize;
		flex: 1;
		//height: calc(100% - @headSizse);
		//position: absolute;
		max-width: @tabsSize;
		display: inline-block;

		.dashboard-tab {
			color: white;
			padding: .4em 1em;
			text-align: left;
			cursor: pointer;
			position: relative;
			max-width: @tabsSize;
			transition: .3s;

			img {
				vertical-align: middle;
				margin-right: .5em;
			}

			&:hover, &.active {
				background-color: rgba(0, 0, 0, .2);
			}

			&:hover {
				> .tab-sub-container {
					opacity: 1;
					z-index: 100;
					background: inherit;

					display: block;
  					max-height: 200px;
				}
			}
		}

		.tab-sub-container {
			opacity: 0;
			overflow: hidden;
			max-height: 0;
			transition: .3s ease-in-out;
			margin: 0 -16px;

			.tab-sub {
				.dashboard-tab;
			}
		}
	}

	.dashboard-body {
		top: @headSize;
		left: @tabsSize;
		flex: 1;
		//max-width: @tabsSize;
		//height: calc(100% - @headSize);
		//position: absolute;
		display: flex;
		overflow: auto;
	}

	.dashboard-head {
		flex: 1;
		max-height: @headSize;

		.logo {
			cursor: pointer;
			border-radius: 100%;
			transition: background-color .3s;

			&:hover {
				background-color: rgba(0, 0, 0, .2);
			}
		}
	}
}

.websom-console {
	padding: 0 .2em;
	background: black;
	color: white;
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
	height: 100%;
	font-size: 13.33333px;

	.websom-console-log {
		padding-left: 13px;

		white-space: pre;
		tab-size: 2;
	}

	.websom-console-line {
		min-height: 1em;

		position: relative;

		input {
			font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
			background: black;
			border: none;
			width: calc(100% - 1.3em);
			color: white;
			outline: none;
			padding-left: 1.3em;
			position: absolute;
			top: 0;
		}

		span {
			top: 2.8px;
			position: absolute;
			z-index: 10;
		}
	}
}