/*
 * Stylesheet for Draggable and Resizable Dialog Box
 *
 * Designed by ZulNs, @Gorontalo, Indonesia, 7 June 2017
 * Extended by FrankBuchholz, Germany, 2019
 * You can change all colors
 * You can change some of the sizes without expecting issues, see below
*/

.dialog {
    display: none; /* not visible by default */
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background: #153751;
    border-radius: 0px 0px 10px 10px;
    /*border: 1px solid #fff;*/ /* change allowed; Border to separate multipe dialog boxes */
    margin: 0;
    position: absolute;
}

    .dialog.dragging {
        opacity: 0.9;
    }

    .dialog.mini {
        overflow: hidden;
        height: 35px;
         border-radius: 0px 0px 0px 0px;
    }

        .dialog.mini > *:not(.titlebar) {
            display: none;
        }


    .dialog .titlebar {
        /*border-radius: 10px 10px 0px 0px;*/
        height: 40px; /* same as .dialog>button height */
        line-height: 40px; /* same as .dialog>button height */
        vertical-align: middle;
        font-size: 1.2em;
        font-weight: bold;
        padding: 0 8px 0 8px; /* change NOT allowed */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        /*cursor: move;*/
        background: #0b1c29;
        border-bottom: 1px solid black;
    }

        .dialog .titlebar .dialog-toolbar {
            position: absolute;
            right: 5px;
            width: initial;
            height: initial;
        }

            .dialog .titlebar .dialog-toolbar .dialog-minimize-btn, .dialog .titlebar .dialog-toolbar .dialog-close-btn {
                padding: 0px 7px;
                margin-left: 5px;
            }

  .dialog .content {
    position: relative;
    overflow: auto;
    font-size: 1em;
    height: calc(100% - 50px);
}

    .dialog .buttonpane:before {
        width: 100%;
        height: 0;
        border-bottom: 1px solid; /* change allowed */
        content: '';
        position: absolute;
        top: -16px; /* change allowed */
    }

    .dialog .buttonpane {
        width: 100%;
        position: absolute;
        bottom: 16px; /* change allowed */
        right: 16px; /* change NOT allowed */
        white-space: nowrap; /* keep buttons on one line */
    }

    .dialog .buttonset {
        float: right;
    }

    .dialog button:not(.btn) {
        -webkit-transition: 0.25s;
        transition: 0.25s;
        color: #fff;
    }

        .dialog button::-moz-focus-inner {
            border: 0;
        }
        /* .dialog button.hover, */ /* Let's use standard hover */
        .dialog button:hover,
        .dialog button.active {
            cursor: pointer;
        }