html {
	height: 100%;
}

body {
	height: 100%;
	background-color: WhiteSmoke;
}

#sandbox {
	border-style: dashed;
}

/* SHORTCUTS */

/* Protocols */
.shortcut .protocol {
	background-color: grey;
}

/* COMPONENTS */

.component {
	padding: 0px;
	border-top: solid 2px lightgrey;
}

.component .row {
	margin: 0px;
	text-align: center;
	border-left: solid 2px lightgrey;
	border-right: solid 2px lightgrey;
}

.component .col {
	margin: 0px;
	border-bottom: solid 2px lightgrey;
}

.component .componentName {
	height: 40px;
	font-weight: bold;
}

.component .interfaces {
	border: 0;
}

.component .interface {
	border: 0;
}

/* DATA VISUALIZATION AND SIMULATION CONTROLS */

#dataVisualizer {
	min-height: 5%;
}

/* DATA SENDER */

#dataSender .row {
	width: auto;
	margin: auto;
	
	justify-content: center;
	align-items: center;

	background-color: #c9c9c9;
}

#dataSender .form-control {
	width: auto;
    margin: 10px;
}