@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; }
*/