dialog {
  position: absolute;
  left: 0; right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}
dialog{height: 80vh}
dialog:not([open]) {
  display: none;
}

dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}

._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}

.mdl-layout--fixed-drawer > .mdl-layout__content{margin-left:0}
.mdl-layout--fixed-drawer > .mdl-layout__drawer:not(.is-visible){    
  -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
}
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__header {
    margin-left: 40px;
    width: calc(100% - 40px);
}
.page{width: 100%;}


.chorus{font-size: 1.1em; font-weight: bold}
.bridge{font-style: italic}
.song > span{white-space: nowrap;}
.song > span span:last-of-type{white-space: normal;}
.song span.chord{display:none}
.song.show-chords span.chord{
    position: relative;
    margin-top: 1em;
    /*margin-left: 3px;
    //text-shadow:#CCC -1px 1px;*/
    color:#c1573c;
    font-weight:400;
    display: inline-block;
    height: 0.9em; font-size: 0.9em;
}
.song.show-chords span.chord span{position: absolute;top: -1.3em;white-space: nowrap;}
.chords-line > span > span:not(.chord){visibility: hidden}
.show-chords:not(.chords-line){position: absolute; top:0; line-height: 2.3em;}
.show-chords:not(.chords-line) > span > span.chord{visibility: hidden}


.mdl-textfield.mdl-js-textfield button{bottom:0} 
.mdl-textfield.mdl-js-textfield button+input{padding-left:64px} 
.mdl-textfield.mdl-js-textfield button+input+label{padding-left:64px} 
button.notif{top:-50px; opacity: 0; transition: all ease 0.3s}
button.notif.displayed{top:70px; opacity: 1; transition: all ease 0.3s}

/*Drag and drop*/
/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
#carnets ul[dnd-list],
#carnets ul[dnd-list] > li {
  position: relative;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
#carnets ul[dnd-list] {
  min-height: 42px;
  padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
#carnets ul[dnd-list] .dndDraggingSource {
  display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
#carnets ul[dnd-list] .dndPlaceholder {
  display: block;
  background-color: #ddd;
  padding: 10px 15px;
  min-height: 42px;
}

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
#carnets ul[dnd-list] li {
  background-color: #fff;
  border: 1px solid #ddd;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  display: block;
  margin-bottom: -1px;

  /* Disable text selection if item is not draggable */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#carnets ul[dnd-list] li dnd-nodrag {
  display: block;
  padding: 10px 15px;
}

/**
 * Gender-specifc background
 */
#carnets ul[dnd-list] li.background-man {
  background-color: #CAE0FC;
}

#carnets ul[dnd-list] li.background-woman {
  background-color: #FFE2F5;
}

#carnets ul[dnd-list] input.background-man {
  background-color: #D8E9FF;
  color: #2F4D99;
}

#carnets ul[dnd-list] input.background-woman {
  background-color: #FFF0FA;
  color: #D84FA7;
}

/**
 * Handle positioning
 */
#carnets .handle {
  cursor: move;
  position: absolute;
  top: 14px;
}

#carnets .name {
  margin-left: 20px;
}

.mdl-dialog__actions{
  position: fixed; bottom: 11vh; right:7%; 
}