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

body, html {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100vh;
    font-family: Verdana, sans-serif;
}

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

.hide {
	display: none;
}

.saved {
	color: green;
}

.dirty {
	color: red;
}

.svguitar-chord {
	width: 75px;
	display: inline-block;
	position: relative;
}

#chart {
	width: 300px;
}

#song {
	width: 100%;
	height: auto;
	padding-bottom: 5em;
}

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

.verse-heading, .chorus-heading {
	margin-bottom: 1em;
}

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

.action-icon {
	margin-right: 6px;
	height: auto;
	cursor: pointer;
}

.song-cover {
	max-height: 200px;
}

#home {
	margin-left: 1em;
}

.copyright, .artist {
	margin-top: .75em !important;
}

h1, h2, h3, h4, h5, h6 {
	display: inline-block;
	margin-bottom: 0px;
	margin-top: 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;
}

.chorus {
	font-style: italic;
}

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

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

.m1 {
	margin-left: 1em;
	margin-right: 1em;
}

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

.component {
	position: relative;
	margin-top: 2em;
	margin-left: 4em;
}

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

.deleteChord {
	font-size: .8em;
	position: absolute;
	left: 2.5em;
	bottom: -1.2em;
}

.deleteChord {
	color: #fff !important;
}

.deleteChord:hover {
	color: #000 !important;
}

.actions {
	font-size: 1em;
	position: absolute;
	left: -4em;
	top: 0;
}

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

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

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

.inputError {
	background-color: #FAD2CF;
}

#signup {
	position: absolute;
	width: 35em;
	height: 20em;
	background-color: #F1F3F4;
	border: 1px solid;
	top: 50%;
    left: 50%;
    margin-top: -20em;
    margin-left: -20em;
    z-index: 9999;
}

#signup input[type='text'], #signup input[type='email'] {
	width: 90%;
	margin-bottom: 1em;
}

#signup-header {
	margin: .5em;
	width: 100%;
	height: 1em;
}

#signup-header a {
	float: right;
	margin-right: 1em;
}

#chord-selector {
	position: absolute;
	width: 40em;
	height: auto;
	background-color: #D4C9BE;
	color: #F1EFEC;
	border: 1px solid;
	top: 50%;
    left: 50%;
    margin-top: -20em;
    margin-left: -20em;
    padding-bottom: 1em;
    z-index: 9999;
}

#chord-selector-header {
	margin: .5em;
	width: 100%;
	height: 1em;
}

#chord-selector-header a {
	float: right;
	margin-right: 1em;
}

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

#toolkit.maximized {
	height: 100vh;
	width: 20em;
	background-color: #eeeeee;
}

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

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

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

.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;
}

.character:hover {
	color: green
}
.hide {
	display: none;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 5px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button i {
	margin-right: 5px;
}

@media print {
    .page, .page-break { break-after: page; }
    .component { padding-left: 1em !important; }
}