@charset "utf-8";
/* CSS File */

/* Dialog box types, (controls background and overlay) hidden by default */
.dlg,
.dlg-close,
.dlg-yes,
.dlg-no,
.dlg-yes-no,
.dlg-ok,
.dlg-cancel,
.dlg-ok-cancel,
.dlg-prompt {
    z-index: 60000; /* bring to top */
    margin: 0;
    padding: 0;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* enable scroll if needed, triggers in responsivemode */
    background-color: #000; /* fallback if not support trans. overlay */
    background-color: rgba(0,0,0,0.2); /* translucent overlay */
}

/* Dialog box */
.dlg-box {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 600px;
    width: 100%;
    min-width: 100px; /* minimum resize value */
    min-height: 36px; /* minimum resize value */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    background-color: #fff;
    border: 1px solid #3d6da8; /* ".dlg-heading" has the same background-color as this */
    visibility: hidden;
    overflow: hidden; /* disable scrolling inside box, instead set scroll on inside elements */
    position: absolute; /* this is needed or else "dlg-disable-drag" custom position do not work */
    pointer-events: auto; /* makes dialog clickable when parent (overlay) is disabled */
}

/* Dialog heading */
.dlg-heading {
    z-index: 80000;
    display: block;
    margin: 0;
    padding: 10px;
    background-color: #3d6da8; /* ".dlg-box" has the same border-color as this */
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-width: 0; /* must have a pixel value, used for calcs */
    height: 19px;
    line-height: 19px;
    font-family: inherit;
    font-size: 1.4em;
    box-sizing: content-box; /* fix for Bootstrap */
    /*border:1px solid #ff00ff; /* DEBUG */
}

/* Dialog title */
.dlg-title {
    z-index: 80001;
}

/* Close X */
.dlg-close-x {
    z-index: 80002;
    float: right;
    margin: 0;
    margin-top: -5px;
    margin-right: 0;
    padding: 5px;
    color: inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: normal;
    background-color: inherit;
    /*border:1px solid #00ffff; /* DEBUG */
}

    .dlg-close-x:hover,
    .dlg-close-x:focus {
        color: #aaa;
        text-decoration: none;
        cursor: pointer;
    }

/* Dialog message container */
.dlg-message {
    display: block;
    margin: 0;
    padding: 0 15px; /* fixes height padding calc issue */
    font-family: inherit;
    font-size: 1.4em;
    line-height: 1.4em;
    overflow-x: hidden; /* hide horizontal scrollbar */
    overflow-y: auto; /* add vertical scrollbar if needed */
    border: none;
    border-width: 0; /* must have a pixel value, used for calcs */
    /*border:1px solid #ff0000; /* DEBUG */
}

    /* First DIV and P elements inside message container */
    .dlg-message > div:first-child,
    .dlg-message > p:first-child {
        margin-top: 0;
        padding-top: 15px;
    }

    /* Last DIV and P elements inside message container */
    .dlg-message > div:last-child,
    .dlg-message > p:last-child {
        margin-bottom: 0;
        padding-bottom: 15px;
    }

/* Flex boxes */
.dlg-flex-container {
    margin: 0;
    padding: 0;
    border: none;
    border-width: 0; /* must have a pixel value, used for calcs */
    /*border:1px solid #ff0000; /* DEBUG */
}

.dlg-flexbox-left {
    width: 55px;
    margin: 0;
    padding: 20px;
    display: table-cell;
    border: none;
    box-sizing: border-box; /* fix for Bootstrap */
    /*border:1px solid #00ff00; /* DEBUG */
}

    .dlg-flexbox-left div:first-child,
    .dlg-flexbox-left div:last-child {
        padding: 0;
        margin: 0;
    }

.dlg-flexbox-right {
    width: 100%;
    margin: 0;
    padding: 0 20px 0 0;
    display: table-cell;
    border: none;
    text-align: left;
    vertical-align: top;
    overflow-x: hidden; /* hide horizontal scrollbar */
    overflow-y: auto; /* add vertical scrollbar if needed */
    box-sizing: content-box; /* fix for Bootstrap */
    /*border:1px solid #0000ff; /* DEBUG */
}

    /* First DIV and P elements inside message container right */
    .dlg-flexbox-right > div:first-child,
    .dlg-flexbox-right > p:first-child {
        margin-top: 0;
        padding-top: 15px;
    }

    /* Last DIV and P elements inside message container right */
    .dlg-flexbox-right > div:last-child,
    .dlg-flexbox-right > p:last-child {
        margin-bottom: 0;
        padding-bottom: 15px;
    }

/* Dialog input */
.dlg-input {
    margin: 0;
}

/* Dialog input-field */
.dlg-input-field {
    margin: 0;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
}

/* Dialog footer */
.dlg-footer {
    z-index: 80000;
    display: block;
    margin: 0;
    padding: 10px;
    height: 30px;
    background-color: #f0f0f0;
    border: none;
    border-width: 0; /* must have a pixel value, used for calcs */
    border-top: 1px solid #e5e5e5;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    text-align: right;
    font-family: inherit;
    font-size: 1.3em;
    overflow: hidden; /* hide content, scrollbar */
    box-sizing: content-box; /* fix for Bootstrap */
    /*border:1px solid #00ff00; /* DEBUG */
}

/* Extra padding that appear when dialogbox has a resize-handle, to give it some extra space */
.dlg-footer-extra-padding {
    padding-right: 15px;
    padding-bottom: 15px;
}

/* The buttons */
.dlg-footer button {
    margin: 0;
    margin-left: 10px;
    padding: 0 15px;
    height: 30px;
}

/* Dialog icons, pure css, no images used, but could be changed to use images instead by using the same classes etc. */
.dlg-symbol {
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 35px;
    width: 35px;
    font-size: 24px;
    font-family: "Courier new", Courier, monospace;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 34px;
    border-radius: 50%;
}

.dlg-icon-info {
    background-color: #0077d7;
    line-height: 37px;
    box-shadow: 0 0 0 1px #004d8b;
}

    .dlg-icon-info::before,
    .dlg-icon-info:before {
        content: 'i';
    }

.dlg-icon-question {
    background-color: #0077d7;
    line-height: 37px;
    box-shadow: 0 0 0 1px #004d8b;
}

    .dlg-icon-question::before,
    .dlg-icon-question:before {
        content: '?';
    }

.dlg-icon-error {
    background: #e64943;
    font-family: Consolas, monospace;
    line-height: 37px;
    box-shadow: 0 0 0 1px #852622;
}

    .dlg-icon-error::before,
    .dlg-icon-error:before {
        /* light x */
        content: '\002715';
        /* heavy x */
        /*content:'\002716';*/
    }

.dlg-icon-success {
    background: #67b66e;
    font-size: 17px;
    line-height: 37px;
    box-shadow: 0 0 0 1px #407145;
}

    .dlg-icon-success::before,
    .dlg-icon-success:before {
        content: '\002713';
    }

.dlg-icon-excl {
    color: #000;
    border-radius: 0;
    width: 0;
    height: 0;
    line-height: 37px;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 32px solid #b29534;
}

    .dlg-icon-excl::before,
    .dlg-icon-excl:before {
        content: '';
        border-radius: 0;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-bottom: 30px solid #ffd54b;
        position: relative;
        top: -31px;
        left: -16px;
    }

    .dlg-icon-excl::after,
    .dlg-icon-excl:after {
        content: '!';
        width: 0;
        height: 0;
        margin-left: -39px;
        position: relative;
        top: 2px;
        line-height: 37px;
    }

/* Stop scrolling of background page content (body) when dialogbox is in view */
.dlg-stop-scrolling {
    height: 100%;
    overflow: hidden;
}

/* Disable translucent background, background overlay (no modal) */
.dlg-disable-overlay,
.dlg-nomodal,
.dlg-multi {
    background-color: transparent;
    pointer-events: none; /* force layer to pass-through click events */
    overflow: hidden; /* disable scrolling */
}

/* Rounded corners */
.dlg-rounded {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* Shadow */
.dlg-shadow {
    -webkit-box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.5);
}

/* Resize handle */
.dlg-rh {
    z-index: 80001;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: nw-resize;
    /*border:1px solid #ff0000; /* DEBUG */
}

/* Resize handle dots */
.dlg-rd1,
.dlg-rd2,
.dlg-rd3,
.dlg-rd4,
.dlg-rd5,
.dlg-rd6 {
    background-color: #999;
    margin: 0;
    padding: 0;
    width: 2px;
    height: 2px;
    position: absolute;
    border: none;
    /*border-right:1px solid #fafafa;  /* "shadow" */
    /*border-bottom:1px solid #fafafa; /* "shadow" */
    box-sizing: content-box; /* fix for Bootstrap */
}

/* Standard positions, dots closer together */
.dlg-rd1 {
    right: 2px;
    bottom: 8px;
}

.dlg-rd2 {
    right: 5px;
    bottom: 5px;
}

.dlg-rd3 {
    right: 2px;
    bottom: 5px;
}

.dlg-rd4 {
    right: 8px;
    bottom: 2px;
}

.dlg-rd5 {
    right: 5px;
    bottom: 2px;
}

.dlg-rd6 {
    right: 2px;
    bottom: 2px;
}

/* Alternative positions, dots farther apart, more space for "shadow" */
/*
.dlg-rd1 { right:2px; bottom:10px; }
.dlg-rd2 { right:6px; bottom:6px; }
.dlg-rd3 { right:2px; bottom:6px; }
.dlg-rd4 { right:10px; bottom:2px; }
.dlg-rd5 { right:6px; bottom:2px; }
.dlg-rd6 { right:2px; bottom:2px; }
*/