@font-face {
	font-family: 'Material Icons';
	src: url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
	font-family: 'Roboto';
	src: url(../font/Roboto-Regular.ttf) format('truetype');
}

/*
---------- Global settings ----------
*/

html,
body {
	padding: 0;
	margin: 0;
	overflow: hidden;

	/* Set background to arkest UI color.
	This gets overwritten later with themeManager */
	background-color: #262626;
}

button,
input {
	margin: 0;
	padding: 0;

	border: none;
	outline: none;
}


i,
input,
span {
	color: white;
	font-size: 12px;
}


input:disabled {
	color: rgba(255, 255, 255, 0.6);
}



/*
---------- Panel settings ----------
*/

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

body span,
.dark-tooltip.small {
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.5px;
	user-select: none;
}



/*
---------- Canvas Settings ----------
*/

.canvasContainer {
	display: flex;
	flex: 1 1 auto;
	min-height: 50px;

	/* Set background to arkest UI color.
	This gets overwritten later with themeManager */
	background-color: #262626;
}

#canvas, 
.points {
	position: absolute;
}

.vertex {
	border-radius: 100px;
	transition: transform 0.05s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.vertex:hover {
	transform: scale(1.25);
}



/*
---------- Controll buttons ----------
*/

#clickButtons {
	display: flex;
	flex-direction: column;
}

#btnGetShapeData {
	flex-basis: 33.333%;
}

.button {
	/* Set background to arkest UI color.
	This gets overwritten later with themeManager */
	background-color: #262626;
	cursor: default;
	
	flex: 1;
	justify-content: center;

	display: flex;
	flex-direction: row;
}

.selected,
.button:enabled:hover span,
.button:enabled:hover i, {
	/* This gets overwritten later with themeManager */
	color: #3cb0fd;
}

.button:disabled i {
	color: rgba(255, 255, 255, 0.3);
}

.sh {
	height: 24px;
	align-items: center;
}

.separator {
	height: 12px;
	align-items: center;
}

.separator i {
	position: relative;
	top: -3px;
}

.material {
	font-family: 'Material Icons';
	font-style: normal;
	font-size: 18px;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
}



/*
---------- Info group ----------
*/

#parentBlock {
	display: none;
	/*background-color: gray;*/
}

	#navbar {
		/*background-color: darkgray;*/
	}

	#body {
		/*background-color: maroon;*/
	}

		#arrows-column {
			/*background-color: DarkSlateGray;*/
			padding-left: 6px;
			padding-right: 6px;
		}

		#links-column {
			/*background-color: DarkSlateBlue;*/
			flex: 1 0 auto;
			/*display: flex;*/
			/*flex-direction: column;*/
			padding-right: 10px;
		}

		#coordinates-row {
			/*background-color: DarkCyan;*/
			min-width: 0px;
			display: flex;
			flex-direction: row;
		}

		#localCoordinates,
		#globalCoordinates {
			min-width: 0px;
		}

		#localCoordinates {
			margin-right: 5px;
		}

#navbar span,
#body span,
#body input,
.dark-tooltip.small {
	font-size: 10px;
}

input {
	/*background: gray;*/
    background: transparent;

	min-width: 0px;
	margin-right: 3px;
}



/*
---------- Flexbox descriptions ----------
*/

.flex-cont-row {
	display: flex;
	flex-direction: row;
}

.flex-cont-col {
	display: flex;
	flex-direction: column;
}

.flex-item {
	flex: 1;
}

.flex-item-hor-center {
	flex: 1;
	justify-content: center;
}



/*
---------- Media handler ----------
*/

@media (min-width: 300px) {
	#clickButtons {
		flex-direction: row;
	}

	#coordinates-row {
		max-width: 220px
	}

	#navbar {
		display: none;
	}

	#clickButtons .material {
		font-size: 24px;
	}

	#clickButtons .sh {
		height: 30px;
	}
}



/* BETA FLAG */

#non-official-flag {
	position: absolute;
	color: red;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	letter-spacing: 0.5px;
}