/*
 * This file is part of Ukeadoodle.
 * 
 * Ukeadoodle is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Ukeadoodle is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with Ukeadoodle.  If not, see <http://www.gnu.org/licenses/>.
 */
/* common */
body {
  font-family: carlito, calibri, sans-serif;
  font-size: medium;
  padding: 0;
  margin: 0;
  background: #efefef; }

* {
  box-sizing: border-box; }

a {
  color: #4e81bb;
  text-decoration: none; }

a:hover {
  cursor: pointer; }

.body_content {
  padding: 0.7em; }

.container {
  box-shadow: 1px 1px 2px 2px #dadada;
  border-radius: 5px;
  background: white;
  padding: 1em;
  margin: auto;
  width: fit-content; }

.container .song_artist:before {
  content: " - ";
  font-style: normal; }

.container .song_artist {
  color: #020040;
  font-size: 0.9em;
  font-style: italic;
  font-weight: normal; }

.container .song_key:before {
  content: "["; }

.container .song_key:after {
  content: "]"; }

svg.chord_diagram_icon polyline.fretboard {
  fill: none;
  stroke-linejoin: round;
  stroke-width: 4; }

svg.chord_diagram_icon line {
  stroke-width: 4; }

svg.chord_diagram_icon line.nut {
  stroke-width: 12; }

/* forms */
select {
  -webkit-appearance: none;
  border-radius: 0px;
  font-size: 1em;
  color: #4e81bb;
  border: none;
  background: transparent;
  padding: 0.2em;
  border-bottom: 1px #4e81bb solid; }

label {
  display: block;
  font-size: 1em;
  color: #020040;
  font-weight: bold; }

/* tables */
table {
  font-size: 0.8em;
  text-align: left; }

th, td {
  text-align: left;
  border-collapse: collapse;
  margin: 0;
  padding: 0.1em 0.4em; }

td {
  background: white; }

th {
  background: #020040;
  color: white; }

/* dialogs */
.dialog {
  display: none;
  position: fixed;
  z-index: 2;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); }

.dialog .content {
  background-color: #fefefe;
  margin: auto;
  padding: 0 0 1em 0;
  box-shadow: 0 0 1em 0.1em #dadada;
  width: 20em;
  border-radius: 10px; }

.dialog .content h2 {
  display: block;
  margin: auto;
  font-size: 1.2em;
  background-color: #020040;
  color: white;
  padding: 0.5em 2.3em;
  background: linear-gradient(to right, #020040, #4e81bb);
  border-radius: 10px 10px 0 0; }

.dialog .content label {
  width: 16em;
  display: block;
  margin: 1em auto 0 auto;
  font-size: 1em;
  color: #020040;
  font-weight: bold; }

.dialog .content select {
  width: 16em;
  border-bottom: 1px #4e81bb solid;
  display: block;
  margin: 0em auto; }

.dialog .content .buttons {
  text-align: center;
  clear: both; }

.dialog .content .buttons button {
  display: inline-block;
  margin: 1em auto 0;
  width: 16em;
  color: white;
  border: 0;
  font-size: 1em;
  border-radius: 3px;
  padding: 0.4em;
  background-color: #020040;
  background: linear-gradient(to right, #020040, #4e81bb); }

#chord_selector_dialog .content {
  width: 22em; }

#chord_selector_dialog svg.chord_diagram_icon {
  height: 1.2em;
  width: 1.2em;
  display: block;
  float: left;
  margin-right: 0.3em; }

#chord_selector_dialog .chord_select_container {
  float: left;
  width: 4.5em;
  margin: 1em 0 1em 1em; }

#chord_selector_dialog label {
  margin-top: 0; }

#chord_selector_dialog select {
  width: 4.5em;
  margin: 0; }

#chord_selector_dialog .ukedown svg.chord_diagram {
  width: 9em;
  height: 12em;
  vertical-align: center;
  margin: 3.5em 0 0 1.5em; }

#chord_selector_dialog svg.chord_diagram_icon polyline.fretboard {
  stroke: white; }

#chord_selector_dialog svg.chord_diagram_icon line {
  stroke: white; }

#pdf_dialog .content button,
#docx_dialog .content button {
  width: 8em; }

#pdf_dialog .content #pdf_create,
#docx_dialog .content #docx_create {
  background-color: #020040;
  background: linear-gradient(to right, #020040, #4e81bb); }

#pdf_dialog .content #pdf_close_dialog,
#docx_dialog .content #docx_close_dialog {
  background: #777777;
  background: linear-gradient(to right, #777777, #bbbbbb); }

/* nav bar */
.nav {
  background: linear-gradient(to right, #020040, #4e81bb);
  height: 2.5em;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 0.2em 0.1em rgba(2, 0, 64, 0.7);
  z-index: 1;
  min-width: 53em; }

.nav a {
  color: #d1d6da;
  text-decoration: none; }

.nav .left {
  float: left; }

.nav .left a {
  color: white; }

.nav .right {
  float: right; }

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.nav .left ul li {
  display: inline;
  float: left; }

.nav .right ul li {
  display: inline;
  float: right; }

.nav li a,
.nav .dropdown_button {
  display: inline-block;
  text-align: center;
  padding: 0.7em;
  height: 2.5em; }

.nav .down_arrow {
  padding-left: 0.4em;
  font-size: 0.9em;
  vertical-align: top; }

.nav .dropdown_button {
  background: none;
  border: none;
  cursor: pointer;
  color: #d1d6da;
  font-size: medium; }

.nav .dropdown {
  position: relative;
  display: inline-block; }

.nav .dropdown_content {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  right: 0;
  text-align: right;
  float: right;
  min-width: 6em; }

.nav .dropdown_content a {
  color: #020040;
  text-decoration: none;
  display: block;
  float: right;
  width: 100%;
  text-align: right; }

.nav .dropdown_content a:hover {
  background-color: #020040;
  color: white; }

.nav .dropdown:hover .dropdown_content {
  display: block; }

.nav .dropdown:hover .dropdown_button,
.nav li > a:hover {
  background-color: #020040;
  color: white; }

.nav .preferences {
  width: 3em; }

.nav_spacer {
  padding: 0.1em 1em;
  margin-top: 2.4em; }

.nav svg.chord_diagram_icon polyline.fretboard {
  stroke: #d1d6da; }

.nav svg.chord_diagram_icon line {
  stroke: #d1d6da; }

.nav svg.chord_diagram_icon {
  height: 1.2em;
  width: 1.2em;
  display: block;
  float: right;
  margin-left: 0.3em;
  stroke: #d1d6da; }

/* flashes */
.flash {
  font-family: Verdana, sans-serif;
  font-size: 1em;
  margin: 0.5em 1em 0.2em;
  padding: 0.8em 1em;
  height: 3em; }

.flash.success {
  color: #14a214;
  border: 2px #14a214 solid;
  background: #edfff7;
  border-radius: 0.5em; }

.flash.error {
  color: #901010;
  border: 2px #901010 solid;
  background: #ff8888;
  border-radius: 0.5em; }

/* edit song */
#edit_song {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

#edit_song .preview {
  margin: 0;
  padding: 0 0.5em 0 0.5em;
  -webkit-flex: 3;
  flex: 3; }

#edit_song .editor {
  margin: 0;
  padding: 0 0.5em 1em;
  -webkit-flex: 2.5;
  flex: 2.5; }

#edit_song .editor textarea {
  resize: none;
  padding: 0.4em;
  font-size: 0.85em;
  font-family: monospace;
  white-space: pre;
  border: 1px #4e81bb solid;
  box-shadow: 0 0 0.5cm rgba(98, 149, 207, 0.5);
  width: 100%;
  min-width: 32em;
  min-height: 92%;
  height: 28.8cm; }

/* edit book */
/* edit books for song */
#edit_book label, #edit_books_for_song label {
  margin: 0.2em 0; }

#edit_book input[type=text],
#edit_books_for_song input[type=text] {
  -webkit-appearance: none;
  appearance: none;
  width: 30em;
  font-size: 1em;
  color: #4e81bb;
  padding: 0.2em;
  margin: 0 0 1em;
  border: none;
  border-bottom: 1px #4e81bb solid; }

#edit_book input.song_order_text_input,
#edit_books_for_song input.song_order_text_input {
  width: 3em;
  padding: 0;
  margin: 0; }

#edit_book input[type=checkbox], #edit_books_for_song input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  font-size: 1em;
  font-family: FontAwesome;
  color: #4e81bb; }

#edit_book input[type=checkbox]:after,
#edit_books_for_song input[type=checkbox]:after {
  content: "\f096"; }

#edit_book input[type=checkbox]:checked:after,
#edit_books_for_song input[type=checkbox]:checked:after {
  content: "\f046"; }

#edit_book td, #edit_books_for_song td {
  padding: 0 0.4em; }

#edit_books_for_song .song_title {
  appearance: none;
  font-size: 1em;
  padding: 0.2em;
  margin: 0 0 1em;
  text-align: center; }

#edit_books_for_song .ukedown_preview {
  height: 5cm;
  overflow-y: scroll;
  overflow-x: scroll;
  margin-bottom: 1em;
  padding: 0.6em;
  border: 1px #4e81bb dashed; }

#edit_books_for_song .books {
  width: 100%; }

/* list songs - none */
/* list books - none */
/* info */
#info_body li {
  overflow: visible;
  margin-bottom: 0.35em;
  margin-top: 0.35em; }

#info_body .h3, #info_body h2, #info_body h1 {
  color: #020040; }

#info_body li.h3 {
  font-weight: bolder; }

#info_body ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0; }

#info_body ol > ol {
  list-style-type: none;
  counter-reset: item2;
  margin: 0;
  padding: 0; }

#info_body ol > li {
  display: table;
  font-size: 1.3em;
  counter-increment: item; }
  #info_body ol > li:before {
    content: counters(item, ".");
    display: table-cell;
    width: 1.2em;
    padding-right: 0.6em; }

#info_body ol > ol > li {
  font-weight: normal;
  font-size: 1em;
  display: table;
  counter-increment: item2; }
  #info_body ol > ol > li:before {
    content: counters(item, ".") "." counters(item2, ".");
    display: table-cell;
    width: 2.5em;
    padding-right: 0.6em; }

@media print {
  .dialog,
  .nav,
  .nav_spacer {
    display: none; } }

/*# sourceMappingURL=doodle.scss.css.map */