* {
  box-sizing: border-box;
  transition: all ease 0.25s;
}

body {
  background-color: #efefef;
  font-family: Century Gothic, sans-serif;
  font-size: 16px;
}

body > div {
    width: 100%;
}

input[type=text],
textarea,
div[contenteditable] {
  font-size: 1em;
  border: none;
  resize: none;
  outline: none;
  white-space: pre-wrap;
  text-align: left;
  padding: 0.5em;
}

input[type=text] {
  background: none;
  border-radius: 0;
}

.no-touch .song_info input[type=text]:hover,
input[type=text]:focus {
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
}

.line input[type=text]:focus {
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0);
}

input[type=radio] {
  display: none;
}

.input_row select {
  position: absolute;
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
}

.input_row select:active,
.input_row select:focus {
  position: absolute;
  opacity: 1;
  z-index: 5
}

h1 {
  margin: 0.5rem auto;
  width: 95vw;
  text-align: center;
}

h3 {
  margin: 0;
}

.pull_right {
  float: right;
}

.export_section,
.input_section,
.analysis_section,
header {
  overflow: hidden;
  opacity: 1;
  max-height: 3000em;
  transition: all ease 0.5s;
}

button {
  font-size: 1.5em;
  padding: 0.25em;
}

.action {
  font-size: 1em;
  padding: 0.5em;
  border: 1px solid #7f8c8d;
  cursor: pointer;
  box-shadow: 0 0 0em rgba(0,0,0,0);
  background: #7f8c8d;
  color: #fff;
  border-radius: 0.25em;
  display: inline-block;
  margin: 0.25em;
  transition: all ease 0.15s;
}

.action span {
  position: relative;
  top: -0.25em;
}

.no-touch .action .icon,
.no-touch .action span {
  transition: all ease 0.15s;
}

.no-touch .action:hover {
  box-shadow: 0 0.15em 0.25em rgba(0,0,0,0.25);
  opacity: 1 !important;
  background: #7f8c8d !important;
  border-color: #7f8c8d !important;
  color: #fff !important;
  transition: all ease 0.15s;
}

.no-touch .action:hover .icon,
.no-touch .action:hover span {
  transition: all ease 0.15s;
  color: #fff !important;
  fill: #fff !important;
}

.no-touch .action .icon {
  font-size: 1.25em;
}

.action:active {
  box-shadow: 0 0em 0.25em rgba(0,0,0,0.15);
  background: #95a5a6 !important;
}

.export_song.action {
    margin: 0.25em auto;
    display: block;
    width: 35%;
    text-align: center;
}

.hidden {
  opacity: 0 !important;
  max-height: 0;
  overflow: hidden;
}

.clear {
  float: none;
  clear: both;
}

#section_source {
  display: none;
}

.input_section,
.analysis_section,
.export_section {
  transition: all ease-out 0.3s 0.2s;
}

.header {
  width: 95vw;
  margin: auto;
  padding: 0.5em 0;
  position: relative;
}

.song_section,
.song_input_section,
.song_export_section,
.song_info {
/*   width: 95vw; */
  width: 94vw;
  background: #fafafa;
  padding: 2em;
  margin: 1em auto 2em;
  border: 0px solid rgba(0, 0, 0, 0.085);
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.085), inset 0 0 0 1px rgba(0,0,0,0.085);
  position: relative;
  border-radius: 0.25em;
}

.song_section {
  padding-top: 0;
}


.song_section.collapsed, 
.song_input_section.collapsed, .song_export_section.collapsed, 
.song_info.collapsed {
/*     background: transparent; */
/*     box-shadow: none; */
}

.no-touch .song_section.collapsed .actions a {
    opacity: 0;
    background: rgba(127, 140, 141, 0);
    border-color: rgba(127, 140, 141, 0);
    color: #777;
}

.no-touch .song_section.collapsed:hover .actions a {
    opacity: 0.5;
}

.song_section:before {
  content: attr(data-lines) ' lines ';
  position: absolute;
/*   top: 0.7em; */
  top: 0.65em;
/*   left: 3.5em; */
  right: 2.5em;
/*   opacity: 0.5; */
}

.song_section .actions {
  margin-top: 1em;
}

.song_section .action {
  font-size: 0.75em;
}

.song_section:first-child .action.move_up {
    display: none;
}

.song_section:last-child .action.move_down {
    display: none;
}

.song_info {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-between;
}

.song_info.collapsed {
  background-color: transparent;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0), inset 0 0 0 1px rgba(0,0,0,0);
}

.song_info .view_switch {
    right: 0.95em;
}

.song_info_section.title {
  flex: 1 100%;
  padding-bottom: 0.5em;
  margin: -1em -1em 0;
}

.song_info_section.title input,
.song_info_section.title .song_title {
  font-size: 2em;
  margin: 0 0em 0 0;
  text-align: center;
}

.song_info_section.version::before {content: 'Version: ';}
.song_info_section.author::before {content: 'Author: ';}

div[contenteditable]:before {  
    color: rgba(0,0,0,0.25);
}

.song_title:empty::before {
    content: 'Song Title';
}

.line_input:empty::before {
  content: 'song line';
}

.line_input:focus::before,
.song_title:focus::before {
    content: '';
}

.song_info_section.title .song_title:focus {
  box-shadow: 0 0 0.25em rgba(0,0,0,0.25);
}

.song_info_section #tempo_output {
    min-width: 2em;
    display: inline-block;
}

.song_info .song_info_section input {
   width: 80%; 
  /*width: 100%;*/ 
}

.song_info .song_info_section.title input {
  width: 100%;
}

.song_info_section input#song_date {
    font-size: 1em;
    background: none;
    border: none;
    outline: none;
}

.song_info_section {
    flex-grow: 2;
    max-height: 10em;
}

.collapsed .song_info_section:not(.title) {
    max-height: 0px;
    overflow: hidden;
}

.collapsed .song_info_section.title {
    margin: -1em 0.5em;
    padding-bottom: 0;
}

.collapsed .song_info_section.title .song_title {
  font-size: 1.5em;
  padding: 0;
  margin: 0;
}

.song_info_section.tempo {
    flex-grow: 4;
}

.tempo_tap_activate {
    width: 2em;
    height: 2em;
    float: right;
    background: radial-gradient(circle, #eee,#ccc);
    border-radius: 0.25em;
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.185), inset 0 0 0 1px rgba(0,0,0,0.185);
}

.song_section {
  border-right-width: 4px;
  border-radius: 0.25em 0 0 0.25em;
  padding-bottom: 0.25em;
}

.song_section_info {
/*   margin-top: -1.5em; */
  padding-top: 0.5em;
  position: relative;
  z-index: 2;
}

.song_section_info h2 {
  margin: 0.25em 0 1em;
  float: left;
}

.song_section_info h2:before {
  content: attr(data-section-title);
}

.song_section_info > select {
  margin: 1.15em;
  float: left;
}

.song_section_info h2 + select {
  opacity: 0;
}

.expanded .song_section_info h2 + select,
.no-touch .song_section_info:hover h2 + select {
  opacity: 1;
}

.song_section.collapsed .input_row.active,
.song_section.expanded .input_row {
  border-bottom: 1px solid #dfdfdf;
  padding-bottom: 0.2em;
}

.input_row,
.line_options {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-content: stretch;
  position: relative;
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.input_row > .icon {
  position: absolute;
  top: 0.25em;
  right: 0.25em;
  z-index: 2;
  opacity: 0;
  font-size: 1.5em;
}

.icon-play_circle_filled {
  fill: #2ecc71;
  transform: rotate(90deg);
}

.icon-report {
  fill: #f39c12;
}

.icon-check_circle {
  fill: #3498db;
}

.icon-remove_circle {
  fill: #c0392b;
  position: relative;
  top: 0.15em;
}

.input_field {
  text-align: center;
  padding: 0.15em 0.5em 0;
  position: relative;
}

.song_section.expanded .input_row.wide {
  padding-bottom: 0;
}

.song_info input,
.input_field.line input,
.input_field.line select {
  width: 100%
}

.input_field input {
  padding: 0.5em;
}

.line_options {
  padding: 0 0.5em;
  padding-right: 2em;
}

.song_section.collapsed .line_options {
  padding: 0 0.5em;
  padding-right: 2em;
  position: absolute;
  bottom: 0.25em;
  right: 0;
  z-index: 2;
}

.song_section.expanded .wide .line_options {
  margin-top: -2em;
}

.song_section.collapsed .line_options {
overflow: hidden;
max-height: 0.25em;
}

.song_section.collapsed .line_options select,
.song_section.collapsed .line_options input {
opacity: 0;
}

.song_section.collapsed .active .line_options,
.no-touch .input_row:hover .line_options {
max-height: 10em;
transition: all ease-out 0.3s 0.1s;
overflow: visible;
}

.song_section.collapsed .active .line_options {
  position: static;
}


.no-touch .input_row:hover .line_options .input_field:hover select,
.no-touch .input_row:hover .line_options .input_field:hover input {
    opacity: 1;
    transition: all ease-out 0.3s 0.1s;
    z-index: 2;
}

.input_field label {
  display: block;
  /*width: 10em; */
  text-align: center;
  padding: 0.25em;
  border-radius: 0.15em;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
  font-size: 0.65em;
  cursor: pointer;
}

.input_field.line .line_input,
.input_field.line input {
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}

.input_field.line .line_input {
    display: none;
}

.input_field.syllable label {
  width: 95px;
}

.input_field.stresses label {
  width: 120px;
}

.input_field.scheme label {
  width: 105px;
}

.input_field.type label {
  width: 140px;
}

.input_field:not(.line) {
  border-top: 0.25em solid transparent;
}

/* ////////////////////////////////////////// */
/* Styles to indicate stability / instability */
/* ////////////////////////////////////////// */


.song_section[data-stability=odd],
.song_section[data-stability=unstable] { border-color: #e74c3c;}
.song_section[data-stability=even],
.song_section[data-stability=stable] { border-color: #2ecc71;}

.song_section[data-stability=odd]:before,
.song_section[data-stability=unstable]:before { color: #e74c3c;}
.song_section[data-stability=even]:before,
.song_section[data-stability=stable]:before { color: #2ecc71;}

.song_section_mini[data-stability=unstable] span { background-color: #e74c3c;}
.song_section_mini[data-stability=stable] span { background-color: #2ecc71;}

.song_section:not(.expanded) .input_field[data-style=go] { border-color: #2ecc71;}
.song_section:not(.expanded) .input_field[data-style=stop] { border-color: #e74c3c;}

.song_section:not(.expanded) .input_field[data-style=light] { border-color: #bdc3c7;}
.song_section:not(.expanded) .input_field[data-style=dark] {  border-color: #7f8c8d;}

.song_section:not(.expanded) .input_field[data-style=A] { border-color: #ecf0f1;}
.song_section:not(.expanded) .input_field[data-style=B] { border-color: #D6E0E2;}
.song_section:not(.expanded) .input_field[data-style=C] { border-color: #BDC3C7;}
.song_section:not(.expanded) .input_field[data-style=D] { border-color: #95a5a6;}
.song_section:not(.expanded) .input_field[data-style=E] { border-color: #7f8c8d;}
.song_section:not(.expanded) .input_field[data-style=F] { border-color: #5F6973;}
.song_section:not(.expanded) .input_field[data-style=G] { border-color: #435261;}
.song_section:not(.expanded) .input_field[data-style=H] { border-color: #354554;}
.song_section:not(.expanded) .input_field[data-style=X] { border-color: #2c3e50;}

.song_section:not(.expanded) .input_field[data-style=Perfect] {    border-color: #2980b9;}
.song_section:not(.expanded) .input_field[data-style=Family] {     border-color: #1abc9c;}
.song_section:not(.expanded) .input_field[data-style=Additive] {   border-color: #2ecc71;}
.song_section:not(.expanded) .input_field[data-style=Subtractive] { border-color: #f39c12;}
.song_section:not(.expanded) .input_field[data-style=Assonance] { border-color: #e67e22;}
.song_section:not(.expanded) .input_field[data-style=Consonance] { border-color: #e74c3c;}
.song_section:not(.expanded) .input_field[data-style=Repetition] { border-color: #2980b9;}
/*.song_section:not(.expanded) .input_field[data-style=Non-Rhyme] { border-color: #c0392b;}*/

.input_field[data-style=go]:not(.weight) label { background: #2ecc71; color: #fff;}
.input_field[data-style=stop]:not(.weight) label { background: #e74c3c; color: #fff;}

.input_field[data-style=light]:not(.weight) label { background: #bdc3c7; color: #2E363C;}
.input_field[data-style=dark]:not(.weight) label {  background: #7f8c8d; color: #fff;}

.input_field.weight[data-style=go] label[for*=FH] { background: #2ecc71; color: #fff;}
.input_field.weight[data-style=stop] label[for*=BH] { background: #e74c3c; color: #fff;}

.input_field[data-style=A] label { background: #1abc9c; background: #ecf0f1; color: #2E363C}
.input_field[data-style=B] label { background: #2ecc71; background: #D6E0E2; color: #2E363C}
.input_field[data-style=C] label { background: #3498db; background: #BDC3C7; color: #fff}
.input_field[data-style=D] label { background: #9b59b6; background: #95a5a6; color: #fff}
.input_field[data-style=E] label { background: #34495e; background: #7f8c8d; color: #fff}
.input_field[data-style=F] label { background: #f1c40f; background: #5F6973; color: #fff}
.input_field[data-style=G] label { background: #e67e22; background: #435261; color: #fff}
.input_field[data-style=H] label { background: #e74c3c; background: #354554; color: #fff}
.input_field[data-style=X] label { background: #95a5a6; background: #2c3e50; color: #fff}

.input_field[data-style=Perfect] label { background: #2980b9; color: #fff}
.input_field[data-style=Family] label { background: #1abc9c; color: #fff}
.input_field[data-style=Additive] label { background: #2ecc71; color: #fff}
.input_field[data-style=Subtractive] label { background: #f39c12; color: #fff}
.input_field[data-style=Assonance] label { background: #e67e22; color: #fff}
.input_field[data-style=Consonance] label { background: #e74c3c; color: #fff}
.input_field[data-style=Repetition] label { background: #2980b9; color: #fff}
/*.input_field[data-style=Non-Rhyme] label { background: #c0392b; color: #fff}*/

.input_row[data-length=shorter]:not(:first-child) .icon-play_circle_filled { opacity: 1; }
.input_row[data-length=longer]:not(:first-child) .icon-report { opacity: 1; }
.input_row[data-length=matched]:not(:first-child) .icon-check_circle { opacity: 1; }
.input_row[data-length=longer]:not(:first-child) .input_field.line input { border-color: #f39c12; }
.input_row[data-length=longer]:not(:first-child) .input_field.line .line_input { border-color: #f39c12; }


/* ////////////////////////////////////////////// */
/* End Styles to indicate stability / instability */
/* ////////////////////////////////////////////// */



.input_field:not(.weight) label:after {
  content: ': ' attr(data-value) ' ';
}

.input_field.weight {
  /*     margin-top: -0.17em; */
}

.input_field.weight label {
  display: inline-block;
  position: relative;
  min-width: 3em;
  top: -3px;
}

.input_field.line {
  flex: 1 100%;
}

.song_export_section,
.song_input_section {
    display: flex;
    justify-content: space-between;
  text-align: center;
}

.song_export_section > div,
.song_input_section > div {
  flex: 1;
}

.song_input_section .song_input_outer {
    flex: 1 30%;
}

#song_export,
#song_input {
  width: 100%;
  min-height: 10em;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.5em;
  box-shadow: inset 0 0 0.25em rgba(0, 0, 0, 0.085);
  background: #fff;
  flex: 1 50%;
  font-family: 'Source Code Pro', monospace;
  font-weight: 200;
  font-size: 0.75em;
}

#song_export {
  font-size: 16px;
  white-space: pre;
  word-wrap: normal;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.song_input_report {
  /*   width: 25%; */
}

.song_export_report h5 .song_input_report h5 {
  margin: 0 0 0.5em;
}

#song_analysis {
  opacity: 1;
}

.view_switch {
  box-sizing: content-box;
  position: absolute;
  top: 0.75em;
  right: 0.5em;
  z-index: 10;
  width: 0.5em;
  height: 0.35em;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid rgba(150,150,150,1);
  color: #fafafa;
  background: rgb(170, 170, 170);
}

.view_switch .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    opacity: 0;
    transition: all ease 0.25s;
    fill: currentColor;
}

.view_switch:hover {
  box-shadow: 0 0 0.25em rgba(0,0,0,0.25);
  transform: scale(1.15);
}

.no-touch .expanded .view_switch:hover .icon-unfold_less,
.expanded .view_switch .icon-unfold_more {
    opacity: 1;
}

.no-touch .expanded .view_switch:hover .icon-unfold_more {
    opacity: 0;  
}

.no-touch .collapsed .view_switch:hover .icon-unfold_more,
.collapsed .view_switch .icon-unfold_less {
    opacity: 1;
}

.no-touch .collapsed .view_switch:hover .icon-unfold_less {
    opacity: 0;  
}

.expanded > .view_switch:before,
.no-touch .view_switch:hover:before {
  height: 0.35em;
}

.expanded > .view_switch:after,
.no-touch .view_switch:hover:after {
  height: 0.15em;
}

.no-touch > .expanded .view_switch:hover:before {
  height: 0.15em;
}

.no-touch > .expanded .view_switch:hover:after {
  height: 0em;
}

.em {
  height: 0px;
  overflow: hidden;
  float: left;
}

.marker {
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 0.15em;
  height: 0.15em;
  background: gray;
  z-index: 10;
  opacity: 0.5;
  display: none;
}

.input_row .collapse {
    position: absolute;
    width: 1em;
    height: 1em;
    display: none;
    padding: 0.25em;
    left: -1.75em;
    bottom: 0.5em;
    box-sizing: content-box;
    font-size: 0.75em;
    border-radius: 0.25em;
    border: 1px solid #2980b9;
}

.collapse .icon-vertical {
    width: 1em;
    height: 1em;
    fill: #2980b9;
}

.collapsed .remove_line {
  opacity: 0;
}

.collapsed .input_row.active .collapse {
    display: block;
    z-index: 10;
}

.handle {
    padding: 0.25em;
    cursor: move;
    color: #999;float: left;
    margin: 0.5em 0 0 -1.5em;
}

.handle .icon {
  transform: rotate(45deg);
}

.no-touch .song_section > .handle {
    left: 0.5em;
    top: 1em;
}

.remove_line {
  position: absolute;
  top: 50%;
  right: -1.25em;
  background: rgba(255,255,255,0);
  border-radius: 0.3em;
  padding: 0.25em;
  cursor: pointer;
  z-index: 2;
  font-size: 1.5em;
  transform: translate3d(0,-50%,0);
}

.remove_line svg {
  z-index: 2;
  top: 0;
}

.remove_line span {
  position: absolute;
/*   transform: translate3d(-100%,0,0); */
  transform: translate3d(0%,0,0);
  opacity: 0;
  min-width: 10em;
  top: 0em;
  left: 1.5em;
/*   background: linear-gradient(to right, #fafafa 50%, rgba(250,250,250,0)); */
  background: linear-gradient(to left, #fafafa 60%, rgba(250,250,250,0));
  line-height: 1.5em;
  text-align: right;
  padding-right: 2em;
}

/* .no-touch .remove_line:hover span {
  transform: translate3d(0%,0,0);
  opacity: 1;
}
 */

.no-touch .handle,
.no-touch .remove {
  opacity: 0;
}

.touch .handle,
.touch .remove {
  opacity: 0.25;
  overflow: hidden;
}

.no-touch .remove:hover {
  opacity: 1 !important;
  overflow: visible;
}

.no-touch .song_section:hover > .handle,
.collapsed .input_row.active .handle,
.no-touch .input_row:hover .handle,
.collapsed .input_row.active .remove_line,
.no-touch .input_row:hover .remove_line {
  opacity: 1;
}

.no-touch .remove_line:hover span {
  transform: translate3d(-100%,0,0);
  opacity: 1;
}

.remove_section {
  padding: 0.5em;
  cursor: pointer;
  display: inline-block;
  margin: 0.25em;
}

.no-touch .remove_section {
  opacity: 0.25;
}

.song_history {
  padding: 0em 1em 1em 2em;
}

.song_history_list {
  text-align: left;
  padding: 0 1em;
}

.historic_song a {
  cursor: pointer;
  margin: 0.5em 0 0;
  padding: 0.25em 0;
  display: block;
}

.historic_song a span {
  display: block;
  font-size: 0.75em;
  opacity: 0.5;
  white-space: pre;
  padding-left: 0.55em;
}

.song_history_list > div {
  counter-increment: song-list;
  position: relative;
}

.song_history_list > div:before {
  content: counter(song-list) '.';
  position: absolute;
  left: -1.5em;
  opacity: 0.5;
  top: 0.5em;
  font-size: 0.75em;
}

.historic_song .icon-remove_circle {
  position: absolute;
  right: -1.5em;
  padding: 0.25em;
  box-sizing: content-box;
  opacity: 0.25;
}

.no-touch .historic_song:hover {
  transform: scale(1.025);
  transition: all ease 0.25s;
}

.no-touch .historic_song:hover .icon-remove_circle {
  opacity: 1;
}

.chosen {
 color: #c00;
 background: #efefef; 
}

.chosen .line_options {
  display: none;
}

.lines .input_row.ghost .handle {
  opacity: 0 !important;
}

#song_form {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 0.25em;
  overflow: hidden;
  padding: 0em;
  background: #fafafa;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.085)
            , 0 0 0 1px rgba(0,0,0,0.085);
  z-index: 25;
  display: flex;
  flex-flow: column wrap;
}

#song_form:hover,
#song_form.active {
  width: 1.5em;
  padding: 0 0.25em;
}

.song_section_mini {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0em;
  background: transparent;
  position: relative;
  flex-grow: 1;
}

#song_form:hover .song_section_mini,
#song_form.active .song_section_mini {
/*   padding: 0 0.15em; */
}

#song_form:hover .song_section_mini span,
#song_form:hover .song_section_mini icon {
  color: #fff;
  fill: #fff;
}

.song_section_mini:not(:first-child) span {
/*   margin-top: 0.25em; */
  border-left: 1px solid #888;
}

.song_section_mini span {
  transform-origin: top left;
  transform: rotate(90deg) translate3d(0%,-100%,0);
  display: block;
  text-indent: 0.5em;
  min-width: 20em;
  background: #999;
  color: rgba(255,255,255,0);
}


/* ////////////////////////////////////////////// */
/* Help Styles      
/* ////////////////////////////////////////////// */

.get_help {
    position: fixed;
    z-index: 101; 
    /*transform: translate3d(-100%,0%,0);*/
    top: 1em;
    right: 1em;
    width: 2em;
    height: 2em;
    font-size: 0.75em;
    padding: 0;
    box-sizing: content-box;
    border-radius: 50%;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.185), 0 0 0 1px rgba(0,0,0,0.185);
    background: #fafafa;
}

.no-touch .get_help:hover {
    tranform: scale(1.15);
}

.get_help.active {
    /*transform: translate3d(50%,0,0);*/
}

.get_help .icon {
  font-size: 2em; 
  position: absolute;
}

.get_help .icon-cancel,
.get_help.active .icon-help {
  opacity: 0
}

.get_help.active .icon-cancel,
.get_help .icon-help {
  opacity: 1;
/*     transform: translate3d(200%,0%,0); */
}

.help_section {
    position: fixed;
    z-index: 100;
    transform: translate3d(110%,0,0);
    width: 70vw;
    height: 98vh;
    background: #fafafa;
    top: 1vh;
    right: 0%;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.185), 0 0 0 1px rgba(0,0,0,0.085);
    border-radius: 0.25em;
    padding: 1em 2em 1em 1em;
}

.help_section.active {
    transform: translate3d(-1%,0,0);
}

.help_section_content {
    width: 100%;
    height: 100%;
    /*white-space: pre;*/
    overflow-y: auto;
    padding: 2em;
    -webkit-overflow-scrolling: touch;
}

.help_overlay {
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  z-index: 99;   
  display: block;
  background-color: rgba(0,0,0,0.45);
  transform: scale(0);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.help_overlay.active {
  transition: opacity 0.2s ease;
  transform: scale(1);
  opacity: 1;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ////////////////////////////////////////////// */
/* End: Help Styles      
/* ////////////////////////////////////////////// */


.song_file.action {
    position: relative;
    padding: 0.45em;
    display: inline-block;
    /*margin-top: -0.25em;*/
    margin: 1em;
}

input#song_file {
    position: relative;
}

#song_file::focus {
  outline: none;
}
#song_file::-webkit-file-upload-button {
  visibility: hidden;
}

#song_file::before {
  content: 'Load a song file (text only)';
  display: inline-block;
  zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
  display: inline;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background: #7f8c8d;
  position: absolute;
  top: -2px;
  left: 0px;
  width: 100%;
  height: 100%;
  font-size: 1.45em;
  margin: 0;
  padding: 0;
  font-family: Century Gothic, sans-serif;
}


/* ////////////////////////////////////////////// */
/* Tap Tempo Styles      
/* ////////////////////////////////////////////// */


.get_tap_tempo {
    cursor: pointer;
    font-size: 0.85em;
    border: 1px solid #ccc;
    border-radius: 0.25em;
    padding: 0.15em;
    float: left;
    color: #fff;
    background: #ccc;
    margin-right: 1.25em;
}

.no-touch .get_tap_tempo:hover {
    transform: scale(1.015);
}

.song_info_section.tempo input {
    margin-top: 1.25em;
}


.tap_tempo {
    width: 50vw;
    height: 50vh;
    position: fixed;
    top: 25vh;
    left: 25vw;
    background: #ccc;
    border-radius: 0.5em;
    background: radial-gradient(circle, #eee,#ccc);
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.085), inset 0 0 0 1px rgba(0,0,0,0.095), 0 0 4em 0.25em rgba(0,0,0,0.15);
    cursor: pointer;
    transform: translate3d(0,-300%,0);
    z-index: 100;
    overflow: hidden;
}

.tap_tempo.active {
    transform: translate3d(0,0,0);
}

.tap_area {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  position: absolute;
}

.tap_info {
    font-size: 4.5em;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    opacity: 0.55;
    text-align: center;
    z-index: 1;
    color: #fff;
}

.tap_info:before {
    content: 'TAP HERE';
}

.tap_info:after {
    content: 'or use your spacebar';
    font-size: 0.5em;
    display: block;
}

.bpm_count, .bpm_average {
    font-size: 1.25em;
    position: absolute;
    top: 0.5em;
    right: 1em;
    text-align: center;
    /*     color: #fff; */
    text-shadow: 0 0.05em 0.05em rgba(0,0,0,0.285);
}

.bpm_count:empty, .bpm_average:empty {
    opacity: 0;
}

.bpm_count:empty:after, .bpm_average:empty:after {
    color: #fff;
    content: '0';
    opacity: 0.5;
}

.bpm_count:before {
    content: 'Count';
    display: block;
    opacity: 0.5;
}

.bpm_average {
    left: 1em;
    right: inherit;
}

.bpm_average:before {
    content: 'Average BPM';
    display: block;
    opacity: 0.5;
 }

.bpm_whole {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    font-size: 10em;
    text-shadow: 0 0.025em 0.025em rgba(0,0,0,0.085);
    z-index: 2;
}

.bpm_whole:empty::before {
    content: '0';
}

.bpm_whole:empty {
    opacity: 0.55;
    color: #fff;
    text-shadow: 0 0.025em 0.025em rgba(0,0,0,0.0);
}

.tap_tempo span:empty + div {
    opacity: 1 !important;
    color: #000;
    z-index:4
}

.bpm_actions {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    z-index: 15;
}

.bpm_actions a {
    display: block;
    padding: 1em;
    margin: 0.5em;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 0.25em;
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.085), inset 0 0 0 1px rgba(0,0,0,0.185);
    min-width: 10em;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
}


.bpm_actions a:hover {
    transform: scale(1.015);
    background: rgba(0,0,0,0.25);
    color: #fff;
}

/* ////////////////////////////////////////////// */
/* END: Tap Tempo Styles       */
/* ////////////////////////////////////////////// */



@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 700px) {
select, textarea, input {
        font-size: 16px;
    }
}

@media (max-width: 700px) {

    .song_section, .song_input_section,
    .song_export_section, .song_info {
      flex-flow: wrap;
      padding: 1.5em;
    }
    
    .song_input_section {
      flex-flow: wrap-reverse;
    }

    .analysis_section {
      padding-top: 1em;
    }
  
    .song_export_section > div,
    .song_input_section > div {
        flex: 100%;
    }
    
    .song_history {
        padding: 1em 1em;
    }

    .pull_right {
      margin: 0em;
    }
    
    .remove_section span {
      display: none;
    }
      
    .song_info_section label {
        font-size: 0.85em;
    }
      
    .song_info_section.time_signature {
        width: 30%;
    }
    
    .song_info_section.tempo {
        flex-grow: 4;
        margin-top: 0.25em;
    }
    
    .song_info_section.tempo input {
        width: 100%;
    }
    
    .song_section_info {
        position: relative;
    }
    
    .song_section_info > select[id*=section_type] {
      position: absolute;
      opacity: 0 !important;
      margin: 0.25em;
      top: 0;
      left: 0;
      width: 100%;
    }
  
    
    .song_section:before {
/*         top: 0.7em; */
/*         left: 3.5em; */
    }
    
    .song_section .actions {
        margin: 1em -1em;
    }
  
    .move_up span, .move_down span {
        display: none;
    }
  
    .input_field.line input {
        display: none;
    }

    .input_field.line .line_input {
        display: block;
    }
    
    .input_field.line .line_input:empty,
    .active .input_field.line .line_input
    {
        box-shadow: 0 0 0.25em rgba(0,0,0,0.25);    
    }
    
    .input_row .line_options {
        transition: min-height ease 0.3s;
    }
    
    .input_row .line_options .input_field {
        transition: none;
    }
    
    .input_row select {        
        transform: translate3d(0, 0, 0);
        top: -0.25em;
        width: 100%;
        left: 0;
        opacity: 0 !important;
    }
    
    .input_field.col.bars {
      display: none;
    }
    
    .song_section .remove_section {
        opacity: 1;
    }  
  
    .song_section .input_row .remove_line {
        top: initial;
        bottom: 0;
        opacity: 0;
    }
    
    .song_section .input_row > .icon {
        top: 0.75em;
        right: -0.75em;
    }
        
    .line_options {
        padding: 0 0.5em !important;
        margin: 0 -1em;
        justify-content: center;
    }

    .line_options .input_field {
        padding: 0.15em;
    }


    .action {
        font-size: 0.75em;
    }
  
     
    .collapsed .input_row .line_options {
        flex-wrap: nowrap;
    }
    
    .collapsed .input_row .line_options {
        position: relative;
        bottom: 0.55em;
    }

    .collapsed .input_row .line_options .input_field {
        overflow: hidden;
        width: 16% !important;
    }

    .collapsed .input_row .line_options .input_field.bars {
        width: 0 !important;
        display: none;
    }


    
    .collapsed .input_row.active .line_options {
        max-height: 10em;
        position: relative;
        bottom: -0.5em;
        flex-wrap: wrap;
        border-bottom: 1px solid #efefef;
        padding-bottom: 0.5em !important;
        margin-bottom: 0.35em;
    }
    
    .collapsed .input_row.active .line_options .input_field {
        border-top-color: transparent;
        width: auto !important;
        display: block;
    }

    .get_help {
      top: 1em;
    }
  
    .help_section {
      width: 98vw;
    }

    input#song_file {
      font-size: 0.8em;
    }

    .tap_tempo {
      width: 95vw;
      height: 75vh;
      top: 2.5vh;
      left: 2.5vw;
      font-size: 0.75em;
    }
}