:root {
    --light_gray: #EEEEEE;
    --normal_gray: #AAAAAA;
    --dark_gray: #666666;
    --the_blue: #377ba8;
    --notify_yellow: cornsilk;

    --btn-border-weight: 1px;
    --btn-border-color: var(--dark_gray);
    --btn-background: rgb(240, 240, 240);
    --btn-padding: 1 6 1 6;
}





body {
    color: var(--dark_gray);
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
}

#outer-wrapper { 
    width: 80%;
    margin-left: 1.5em;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

input, select, option, button, .btn {
   font-family: "Lato", sans-serif;
   color: var(--dark_gray);
   font-size: 1rem;
}


.btn {
    border: var(--btn-border-weight) solid var(--btn-border-color);
    background: buttonface;
    padding: .5em;
    color:  var(--dark_gray);
    text-decoration: none;
    display: inline-block;
    border-radius: .3em;
}

li {
    display: block;
    padding: .5em;
    border: 1px solid var(--normal_gray);
    background: var(--light_gray);
    margin: .5em;
    font-size: 1rem;
}


#outer_set_div {
    position: sticky;
    top: 0;
    right: 0;
    background: white;
    padding: 1em ;
    border: 1px solid var(--normal_gray);

}

#outer_set_div h2 {
    margin-top: 0;
}



#outer_songs_div {

}

#outer_songs_div h2 {
    margin-bottom: 0;
}

#set-selection {
    display: inline;
}

#the_set {
  min-height: 5em;
  background-color:#d8e0e6;
  border: 1px solid var(--the_blue);
  margin: 1em 0;
}


#all_songs { 
    display: block;
    border: 1px dotted var(--light_gray);
    background: #d8e0e6;
    padding-left: 1em;

}


.ui-modal {
  background-color: #CCCCCCb4;
  border: 1px solid var(--dark_gray);
  border-radius: .35em;
  position: fixed;
  z-index: 1;
  display: none;
  padding: 1em;
  margin: .25em;
}

.ui_modal input {
    font-family: "Lato", sans-serif;

}


#new_song_btn { 
    padding-top:    .05em;
    padding-bottom: .25em;
}


.edit_song_button {
    display: inline-block;
    float: right;
    height: 1em;
}

.edit_song {
    height: 100%;
}

#outer_set_div .edit_song {
    display: none;
}


#status  { 
  display: none;
}

#published {
    display: none;
}

#message {
}

.status-indicator {
  position: absolute;
  top: .5em;
  left: 45%;
  background: var(--notify_yellow);
  border: 1px solid var(--normal_gray);
  border-radius: .3em;
  padding: .5em 1em;
}

.hiddent { 
    display: none !important;
}

.visible { 
  display: block !important;
}



/* --  Song Editor  -------------------- */

.song-editor { 
    font-family: "Lato", sans-serif;
    font-weight: 400;
}

.song-editor  * { 
    padding: .4em;
    border-radius: .3em;
}

.song-editor #song_name { 
    font-family: "Lilita One", sans-serif;
    font-size: 1.5em;
    font-weight: bold;
}

.song-editor #song_key { 
    font-family: "Lilita One", sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    padding: .1em .25em;
}

.song-editor #song_lyrics { 
    font-style: normal;
    font-size: 16px;
    margin: 1em 0 1em 0;
    width: 80%;
    color: var(--dark-gray);
}