html, body {
	    width:      100%;
	    height:     100%;
	    overflow:   hidden;
	}

	body.no-drop {
		cursor: no-drop;
	}

	.svg-dropdown-item:hover rect {
		fill: #eee; 
	}

	.svg-dropdown-item-blank text {
		fill: #888; 
	}
	
	.svg-dropdown-item-blank:hover rect {
		fill: #aaa; 
	}

	#svg-container {
		width: 100%;
		height: 100%;
	}

	#svg-container {
		background-image: url(../surface2.png);
	}

	svg text {
		user-select: none;
	}
	#mixer {
		position: absolute;
		left:4px;
		bottom:4px;
	}
	#mixer #playpause-button .glyphicon-pause {
		display:none;
	}
	#mixer.playing #playpause-button .glyphicon-play {
		display:none;
	}
	#mixer.playing #playpause-button .glyphicon-pause {
		display:inline;
	}

	svg input {
		pointer-events: auto;
	}

	.drag-layer * {
		pointer-events: none !important;
	}
	body.dragging *:not(.drop-target) {
		pointer-events: none;
	}

	body.dragging .drop-target {
		pointer-events: visible;
	}

	body.dragging rect.drop-ok, body.dragging circle.drop-ok {
		stroke: #60BD68;
		stroke-width: 2;
	}

	body.dragging .glyphicon.drop-ok {
		color: #60BD68 !important;
	}

	body.dragging .surface > rect.drop-ok {
		stroke: none;
	}

	body.dragging input, svg .dragging, svg .dragging * {
		pointer-events: none !important;
	}

	.clock input, .euclidean-sequencer input {
		display: inline;
		width: 29px;
		text-align:center;
		border:none;
	}