* {
	box-sizing: border-box;
}
body {
	font-family: Tahoma, "Trebuchet MS", Helvetica, sans-serif;
	font-size: 11px;
	padding: 15px;
	background: #111112;
	color: #f8f8f8;
	font-weight: bold;
    user-select: none;
}

a {
	color: #eee;
}

h2 {
	font-size: 33px;
	margin: 0 0 20px 0;
}

h3 {
	font-size: 22px;
	margin: 30px 0 5px;
	border-bottom: 1px dashed #fff;
	padding: 0 0 3px;
}

textarea {
	color: #fff;
	background: #111;
	border: 2px solid #484848;
	margin: 0 0 8px;
}

input[type="text"] {
	color: #fff;
	background: #111;
	border: 1px solid #484848;
}

select {
	color: #fff;
	background: #111;
	border: 1px solid #484848;
	width: 100%;
}

select.inline {
	width: auto;
}
	
.cursor {
	cursor: pointer;
}

.sticky {
	position: fixed;
	top: 15px;
}

.sticky_container {
	
}

.sticky_container .container {
	width: 100%;
}

.editor_area, .footer {
	border: 2px solid #484848;
	border-radius: 15px;
	padding: 0 15px;
	margin: 0 0 15px 0;
	background: #181819;
	box-shadow: 0 0 5px #000;
}

.editor_area {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
	.editor_area > div {
		padding: 15px;
		border-left: 2px solid #484848;
	}

	.editor_area > div:first-child {
		border-left: none;
	}
	
	.editor_area > div:nth-child(2) {
		background: #111;
		box-shadow: inset 0 0 5px #000;
	}
	
.footer {
	text-align: center;
	padding: 5px;
}
	
#right_col .container > div {
	border-top: 2px solid #484848;
	padding: 10px 0;
	width: 100%;
}

#right_col .container > div:first-child {
	border: 0;
	padding: 0 0 10px;
}
.hotkeys td:first-child {
	text-align: right;
	padding: 3px;
}
#field {
	margin: 0 auto;
	z-index: 0;
}

#field img {
	width:32px;
	height:32px;
	position:absolute;
}
#field .bar {
	width:136px;
	height:2px;
	position:absolute;
	left:2px;
}
#field .measure {
	text-align:left;
	left: 146px;
	width: 60px;
	position:absolute;
}
#field .bpm {
	text-align: right;
	width: 60px;
	left: -66px;
	position:absolute;
}

#heldColorModel {
	height: 76px;
	width: 76px;
	border: 2px solid #484848;
	border-radius: 100%;
	padding: 4px;
	background: #181819;
	box-shadow: 0 0 5px #000;
	position: fixed;
	bottom: 10px;
	left: calc(50% - 33px);
	z-index: 100000;
}

#helpModel {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100001;
	background: rgba(0,0,0, 0.45);
}
	#helpModel .container {
		padding: 12px;
		background: #181819;
		margin: 0 auto;
		width: 40%;
		height: 100%;
		overflow-y:scroll;
		border-left: 2px solid #484848;
		border-right: 2px solid #484848;
		box-shadow: 0 0 5px #000;
	}
	#helpModel .close {
		float: right;
		display: inline-block;
		background: #ff0000;
		border-radius: 4px;
		padding: 6px 9px;
		font-weight: bold;
	}