#dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0);
    z-index: 999;
}
/*
  obscure everything but the dialog
  unless the backdrop needs a special animation,
  this element could be ignored and the backdrop
  simply applied to the #dialog element via
  background: rgba(0, 0, 0, 0.25);
*/
#dialog:before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

/* show the dialog in the center of the screen */
#dialog .dialog-content {
    text-align:center;
    box-sizing: border-box;
    /* maintain on screen even during scroll (problematic on mobile) */
    position: fixed;
    /* when centering, try using FlexBox instead of this junk */
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    padding: 20px 20px 10px 20px;
    border-radius: 8px;
    /* dialogs are usually box things that are on top of everything */
    border: 1px solid #CCC;
    background: white;
    z-index: 1000;
    -webkit-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

/* hide the dialog in a way that allows animations */
#dialog[hidden],
#dialog[hidden]:before,
#dialog[hidden] .dialog-content {
    display: block;
    visibility: hidden;
    -webkit-transform: translate3d(0px, -1px, 0px) scale(0);
    transform: translate3d(0px, -1px, 0px) scale(0);

    -webkit-transition:
            visibility 0s linear 0.2s,
            transform 0s linear 0.2s;
    transition:
            visibility 0s linear 0.2s,
            transform 0s linear 0.2s;
}
#dialog[hidden]:before {
    opacity: 0;
    /*
      overwrite the backdrops's showing transition so that dimensions
      are maintained until the box finished its opacity transformation
    */
    -webkit-transition:
            opacity 0.2s ease-in-out,
            visibility 0s linear 0.2s,
            transform 0s linear 0.2s;
    transition:
            opacity 0.2s ease-in-out,
            visibility 0s linear 0.2s,
            transform 0s linear 0.2s;
}
#dialog[hidden] .dialog-content {
    -webkit-transform: translate3d(0px, -1px, 0px) scale(0);
    transform: translate3d(0px, -1px, 0px) scale(0);
    /*
      overwrite the dialog's showing transition so that visibility
      is maintained until the box finished its transformation
    */
    -webkit-transition:
            transform 0.2s ease-in-out,
            visibility 0s linear 0.2s;
    transition:
            transform 0.2s ease-in-out,
            visibility 0s linear 0.2s;
}

.button:focus, .button:hover, button:focus, button:hover {
    background-color: #41A440;
    color: #fff;
}

#close-dialog{
    margin-right:20px;
}

#dialog-title {
    padding:5px;
    margin:0;
}

#dialog-description {
    padding: 20px 0;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    font-size:1.2em;
}