
.dialog {
    background: rgba($color-neutral, 0.5);
    display: none;
    overflow-y: scroll;
    padding: $padding-big;
    padding-top: $height-big;
    text-align: center;

    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    
    &.visible {
        display: block;
    }

    h1 {
        background: $color-primary;
        border-bottom: 1px solid $color-neutral;
        color: text-color-for($color-primary);
        font: $font-header-2;
        line-height: 1.5em;
        margin: 0 0 $padding-big 0;
        text-align: center;
    }
    p {
        margin: $padding-big;
    }

    .buttonStrip {
        background: tint($color-neutral, #fff);
        border-top: 1px solid $color-neutral;
        min-height: $font-input-line + 3 + $padding-small*2 + $padding-medium*2;
        margin-top: $padding-big;
        padding: $padding-medium $padding-big;
        width: 100%;
    }

    .content {
        background: #fff;
        border: 1px solid $color-text-dark;
        border-radius: 5px;
        box-shadow: 2px 2px 2px $color-text-dark;
        display: inline-block;
        margin: auto;
        max-width: $width-big;
        max-height: $height-big;
        overflow-y: auto;
        text-align: left;

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

}

// cool animation effects
.dialog .content {
    animation: 0.2s ease-in-out dialog_movement normal both;
}
@keyframes dialog_movement {
    from {
        opacity: 0;
        top: -1 * $height-big;
    }
    to {
        opacity: 1;
        top: 0;
    }
}

/* Fixing overrides */
.formFields .dialog {
    display: none;
    div {
        display: block;
    }
    .fakePad {
        display: none;   
    }
}
.dialog.visible {
    display: block;
}
