[contenteditable] {
	outline: 0px solid transparent;
}

body, html {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100vh;
}

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

#song {
	width: 100%;
	height: 100vh;
	margin-left: 1em;
}

.chorus {
	border-left: solid 2px #eee;
	padding-left: 1em;
	position: relative;
}

.line[data-placeholder]:not(:focus):not(:has(span)):before {
    content: attr(data-placeholder);
    font-style: italic;
    margin-left: 2px;
    color: #b3b3b3;
}

#save {
	margin-left: 1em;
}

.copyright h4 {
	margin-top: 0px;
}

h1, h2, h3, h4, h5, h6 {
	display: inline-block;
	margin-bottom: 0px;
}

h1[data-placeholder]:not(:focus):empty:before, 
h2[data-placeholder]:not(:focus):empty:before, 
h3[data-placeholder]:not(:focus):empty:before, 
h4[data-placeholder]:not(:focus):empty:before,
h5[data-placeholder]:not(:focus):empty:before,
h6[data-placeholder]:not(:focus):empty:before {
    content: attr(data-placeholder);
    font-style: italic;
    margin-left: 2px;
    color: #b3b3b3;
}

h1[data-placeholder]:focus:empty:before, 
h2[data-placeholder]:focus:empty:before, 
h3[data-placeholder]:focus:empty:before, 
h4[data-placeholder]:focus:empty:before, 
h5[data-placeholder]:focus:empty:before, 
h6[data-placeholder]:focus:empty:before {
    content: '|';
    font-style: italic;
    margin-left: 2px;
    color: #fff;
}


.line {
	margin-top: .25em;
	line-height: 2.2em;
	font-size: 1em;
	width: 100%;
	caret-color: red;
    caret-color: #ff0000;
    caret-color: rgb(255, 0, 0);
    caret-color: hsl(0, 97%, 50%);
}

.chords {
	height: auto;
	margin-bottom: 3em;
	position: relative;
}

.chords h2 {
    margin-bottom: 0px;
}

.chord {
	position: relative;
}

.verse {
	margin-top: 3em;
	position: relative;
}

.addChord {
	width: 100px;
	height: auto;
	background-color: #eee;
	border: solid 1px black;
}

.character:-moz-drag-over {
	background-color: red;
}

.component {
	position: relative;
}

.chord::before {
	content: attr(data-chord);
	position: absolute;
	top: -1.6em;
	left: -10;
	white-space: nowrap;
	font-size: 1em;
	color: blue;
	font-weight: bold;
}

.actions {
	font-size: 1em;
	position: absolute;
	right: 50px;
	top: 20px;
}

.actions a, .actions.max a {
	color: #fff !important;
}

.actions:hover a, .actions.max:hover a {
	color: #000 !important;
}

.actions.max {
	right: 450px !important;
}

.action {
	margin-left: .5em;
}

#toolkit {
	position: absolute;
	right: 0;
	top: 0;
}

#toolkit.maximized {
	height: 100%;
	width: 400px;
	background-color: #eeeeee;
}

#toolkit.minimized {
	height: 100%;
	width: 2em;
	margin-right: .5em;
	background-color: transparent;
}

#toolkit-toggle {
	margin: 10px;
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	cursor: pointer;
}

.toolkit-widget {
	border: solid 1px #bdbdbd;
	margin: 1em;
	padding: 1em;
	background-color: white;
}

.toolkit-widget h1, .toolkit-widget h2, .toolkit-widget h3, .toolkit-widget h4, .toolkit-widget h5, .toolkit-widget h6 {
	margin: 0px;
}

a:link {
	text-decoration: none;
	color: black;
}

a:visited {
	text-decoration: none;
	color: black;
}

a:hover {
	text-decoration: none;
	color: black;
}

a:active {
	text-decoration: none;
	color: black;
}

.hide {
	display: none;
}