body{
	height:100vh;overflow:hidden;padding:0px;margin:0px;box-sizing:border-box;
	min-width:0px;
	--flow-folder-input-trbr:0px;
	--flow-folder-input-brbr:0px;
	--flow-folder-input-tlbr:0px;
	--flow-folder-input-blbr:0px;
	--flow-folder-input-vmr:-2px;
    --flow-caption-logo-bg-color:transparent;
    --flow-font-weight:bold;
    --flow-primary-color: #0382a8;
    --flow-primary-invert-color: #FFF;
    --flow-border-color: #0382a8;
    --flow-border-hover-color:rgb(1, 62, 119);
    --flow-tab-font-size:1.5rem;
    --flow-font-family:sans-serif;
    --flow-background-color: #fff;
    --flow-background-inverse: #000;
    --flow-background-inverse-soft: #333;
    --flow-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),
            0 3px 1px -2px rgba(0,0,0,.2),
            0 1px 5px 0 rgba(0,0,0,.12);

    --flow-btn-success-bg-color:#007E33;
    --flow-btn-success-color:#FFF;
    --flow-btn-hover-success-bg-color:#00C851;
    --flow-btn-hover-success-color:#FFF;
    --flow-btn-danger-bg-color:#CC0000;
    --flow-btn-danger-color:#FFF;
    --flow-btn-hover-danger-bg-color:#ff4444;
    --flow-btn-hover-danger-color:#FFF;
    --flow-btn-warning-bg-color:#FF8800;
    --flow-btn-warning-color:#FFF;
    --flow-btn-hover-warning-bg-color:#ffbb33;
    --flow-btn-hover-warning-color:#FFF;
    --flow-btn-info-bg-color:#0099CC;
    --flow-btn-info-color:#FFF;
    --flow-btn-hover-info-bg-color:#33b5e5;
    --flow-btn-hover-info-color:#FFF;
    --flow-list-item-border:1px solid #ddd;
    --flow-list-item-active-border:1px solid var(--flow-primary-color);
    --flow-list-item-hover-bg:#ddd;
    --flow-list-item-active-bg:var(--flow-primary-color);
    --flow-list-item-active-color:#FFF;

    --flow-link-color:#0382a8;
    --flow-link-hover-color:#015b77;

    --flow-data-field-caption: #000;
    --flow-data-field-caption-shawod: #0382a8;

    --flow-input-color: black;
    --flow-input-bg: white;
    --flow-input-placeholder: #888;

    --flow-scrollbar-track-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    --flow-scrollbar-track-bg:#F5F5F5;
    --flow-scrollbar-width:10px;
    --flow-scrollbar-bg:#F5F5F5;
    --flow-scrollbar-thumb-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    --flow-scrollbar-thumb-bg:#888;

    --flow-app-header-bg:var(--flow-background-color);
    --flow-app-header-color:var(--flow-color);

    --flow-terminal-cursor:var(--flow-color);
    --flow-terminal-selection:rgba(0, 0, 0, 0.2);
    /* --flow-input-box-shadow:20px 20px 60px #489dcf, -20px -20px 60px #62d5ff; */
    --flow-markdown-icon: url(./resources/icons/svg/link.svg);

    --flow-tooltip-text-bg:#DDD;
    --flow-tooltip-text-color:var(--flow-color);
    --flow-range-slider-thumb-background:var(--flow-primary-color);
    --fa-icon-color:var(--flow-color, #000);

    --flow-code-pre-bg:#f3f3f3;
    --flow-code-pln: #4d4d4c;
    --flow-code-str: #718c00;
    --flow-code-kwd: #8959a8;
    --flow-code-com: #8e908c;
    --flow-code-typ: #4271ae;
    --flow-code-lit: #f5871f;
    --flow-code-pun: #4d4d4c;
    --flow-code-opn: #4d4d4c;
    --flow-code-clo: #4d4d4c;
    --flow-code-tag: #c82829;
    --flow-code-atn: #f5871f;
    --flow-code-atv: #3e999f;
    --flow-code-dec: #f5871f;
    --flow-code-var: #c82829;
    --flow-code-fun: #4271ae;
    --flow-backdrop-bg: rgba(255, 255, 255, 0.5);
}

body.flow-theme-dark{
    --flow-markdown-icon: url(./resources/icons/svg/link.svg);
    --flow-box-shadow:0 2px 2px 0 rgba(10,10,10,.14),
            0 3px 1px -2px rgba(10,10,10,.2),
            0 1px 5px 0 rgba(10,10,10,.12);
    background-color: #232323;
    --flow-background-inverse: #FFF;
    --flow-background-inverse-soft: #CCC;
    --flow-background-color: #232323;
    color: #b1b1b1;
    --flow-color: #b1b1b1;
    --fa-icon-color:var(--flow-color);
    /*--flow-primary-color: #b1b1b1;*/
    --flow-primary-color:  #0382a8;
    --flow-primary-invert-color: #FFF;
    --flow-border-color: #0382a8;
    --flow-tab-bg-top: #363537;
    --flow-tab-bg-bottom: #363537;
    --flow-tab-active-bg-top: #232323; /* can not have this different color as tab can be as high as multiple rows... */
    --flow-tab-active-bg-bottom: #232323;
    --flow-checkbox-checked-bg:#b1b1b1;
    --flow-list-item-border:1px solid #585858;
    --flow-list-item-active-border:1px solid var(--flow-primary-color);
    --flow-list-item-hover-bg:#585858;
    --flow-list-item-active-bg:var(--flow-primary-color);
    --flow-list-item-active-color:#FFF;

    --flow-data-field-value: #fff;
    --flow-data-field-caption: #ccc;
    --flow-data-field-caption-shadow: #0382a8;

    --flow-input-bg: #2f2f2f;
    --flow-input-color: var(--flow-color, #b1b1b1);
    --flow-input-placeholder: #555;

    --flow-app-header-bg:#191818;

    --flow-input-box-shadow: 0px 1px 4px #50aee4, 0px -1px 4px #5ac4ff;

    --flow-tooltip-text-bg:#423f3f;
    --flow-tooltip-text-color:var(--flow-color);
    --flow-range-slider-thumb-container-bg:var(--flow-input-bg);

    --flow-code-pre-bg: #1d1f21;
    --flow-code-pln: #c5c8c6;
    --flow-code-str: #b5bd68;
    --flow-code-kwd: #b294bb;
    --flow-code-com: #969896;
    --flow-code-typ: #81a2be;
    --flow-code-lit: #de935f;
    --flow-code-pun: #de935f;
    --flow-code-opn: #c5c8c6;
    --flow-code-clo: #c5c8c6;
    --flow-code-tag: #cc6666;
    --flow-code-atn: #de935f;
    --flow-code-atv: #8abeb7;
    --flow-code-dec: #de935f;
    --flow-code-var: #cc6666;
    --flow-code-fun: #81a2be;
    --flow-backdrop-bg: rgba(10, 10, 10, 0.5);
}

body.small-screen{
    --flow-form-control-info-box-min-width:100%;
    --flow-form-control-info-box-font-size:0.7rem;
    --flow-form-control-info-box-padding:0px 10px 0px 30px;
}

.hide{display:none;}

flow-checkbox.block{margin:5px 0px;}
flow-dialog{display:block;}
flow-dialog [hide]{display:none}
flow-dialog dialog{
    /*margin:10% auto;*/min-width:200px;border-radius:3px;
    background-color:var(--flow-dialog-background-color, var(--flow-background-color));
    color:var(--flow-dialog-color, var(--flow-color));
    box-shadow:var(--flow-box-shadow);
    border:2px solid var(--flow-border-color, var(--flow-primary-color, rgba(0,151,115,1)));
}
flow-dialog dialog .heading{padding:10px 10px 20px 10px;font-size:1.25rem;}
flow-dialog dialog .body{padding:15px;max-height:calc(100vh - 100px);overflow:auto}
flow-dialog dialog .buttons{
    margin:10px;flex-wrap:wrap;justify-content:flex-end;
}
flow-dialog dialog>.close-btn{
    color:var(--flow-dialog-close-btn-color, var(--flow-color));
    position:absolute;
    right:var(--flow-dialog-close-btn-right, 15px);
    top:var(--flow-dialog-close-btn-top, 15px);
    font-size:var(--flow-dialog-close-btn-font-size, 1.5rem);
    cursor:pointer;
}
flow-dialog dialog>.close-btn[hide],
flow-dialog[hide-close-btn] dialog>.close-btn,
flow-dialog.hide-close-btn dialog>.close-btn{display:none;}
flow-dialog dialog .buttons:not([hide]){display:flex;}
flow-dialog dialog .buttons flow-btn{margin:0px 5px;align-items:center;display:flex;padding:var(--flow-dialog-btn-padding)}
flow-dialog dialog textarea,
flow-dialog dialog input[type="text"],
flow-dialog dialog input:not([type]),
flow-dialog dialog input[type="text"],
flow-dialog dialog input[type="url"]{
    width:100%;margin:10px 0px;padding:5px;
    box-sizing:border-box;
    background-color:var(--flow-input-bg, #FFF);
    color:var(--flow-input-color, var(--flow-color, #000));
    border:2px solid var(--flow-border-color, var(--flow-primary-color, rgba(0,151,115,1)));
}
flow-dialog dialog flow-checkbox{margin:10px 0px;}
flow-dialog dialog textarea{min-height:50px;}
flow-dialog.flow-menu{position:fixed;z-index:10000;width:200px;box-sizing:border-box;}
flow-dialog.flow-menu dialog{margin:0px;position:fixed;z-index:10000;max-width:200px;box-sizing:border-box;}
flow-dialog.flow-menu dialog .body{padding:0px;}
flow-dialog.flow-menu ul.menu{margin:0px;padding:0px;list-style:none}
flow-dialog.flow-menu ul.menu>li{
    padding:10px;border-bottom:var(--flow-list-item-border)
}
flow-dialog.flow-menu ul.menu>li:not([disabled]){cursor:pointer;}
flow-dialog.flow-menu ul.menu>li:not([disabled]):not(.active):hover{
    background-color:var(--flow-list-item-hover-bg);
}
flow-dialog.flow-menu ul.menu>li.active{
    background-color:var(--flow-list-item-active-bg);
    color:var(--flow-list-item-active-color);
    border-bottom:var(--flow-list-item-active-border);
    cursor:default;
}
flow-dialog.flow-menu ul.menu>li:last-child{border-bottom:0px;}

flow-dialog dialog[compact] .body{padding:0px;}
flow-dialog dialog[compact] .buttons{margin:10px 0px 0px}
flow-dialog dialog[compact] .buttons flow-btn:last-child{margin-right:0px;}
flow-dialog dialog[compact] .buttons flow-btn:first-child{margin-left:0px;}

flow-dialog dialog *::-webkit-scrollbar-track{
    box-shadow:var(--flow-scrollbar-track-box-shadow, initial);
    background:var(--flow-scrollbar-track-bg, initial);
}
flow-dialog dialog *::-webkit-scrollbar{
    width:var(--flow-scrollbar-width, initial);
    height:var(--flow-scrollbar-width, initial);
    background:var(--flow-scrollbar-bg, initial);
}
flow-dialog dialog *::-webkit-scrollbar-thumb{
    box-shadow:var(--flow-scrollbar-thumb-box-shadow, initial);
    background:var(--flow-scrollbar-thumb-bg, initial);
}


flow-doc{
    display:inline-block;margin:5px 0px;padding:10px 0px 10px;
    width:fit-content;border-radius:5px;
    border:2px solid var(--flow-primary-color);
    overflow:hidden;
}
flow-doc>h4:first-child{
    margin:0px 0px 5px;padding:8px;background-color:var(--flow-border-color);
    color:#FFF;border-bottom:1px solid var(--flow-border-color);
    text-transform:uppercase;
}
flow-doc>*{margin-left:10px;margin-right:10px;}
flow-doc flow-code{
    --flow-code-padding:10px;
    border:0px;
    border-top:1px solid var(--flow-border-color);
    border-bottom:1px solid var(--flow-border-color);
    margin:10px 0px 15px;
}
flow-doc flow-code:last-child{margin-bottom:0px;}
flow-code[block]{display:block;width:100%;box-sizing:border-box;}
flow-doc-boxes{display:flex;flex-wrap:wrap;}
flow-doc-boxes>flow-doc{margin:10px;min-width:20%;flex:1;width:300px}
flow-markdown textarea{display:none}

.flow-tooltip-text{
    display:none;
    flex-direction:column;
    width:var(--flow-tooltip-text-width, 200px);
    font-size:var(--flow-tooltip-text-font-size, 0.9rem);
    font-weight:normal;
    background-color:var(--flow-tooltip-text-bg);
    color: var(--flow-tooltip-text-color);
    text-align: left;
    padding: 10px ;
    border-radius: 5px;
    position:fixed;
    z-index:100000;
}
.flow-tooltip-text.active{display:inline-block;}

.flow-tooltip-text .link,
.flow-tooltip-text .link-tooltip{
    color:var(--flow-link-color, #07b9b9);
    font-weight:var(--flow-link-font-weight, bold);
    text-decoration:none;
}

flow-gridstack[dragmode="panel"] .grid-stack-item{
    cursor:move;
}
flow-gridstack div.grid-stack-item-content{background:#DDD}
flow-gridstack .gridstack-json{width:90%;height:200px;}

.flow-btn-group, flow-btn-group{
    display:inline-flex;
    flex-direction:row;
    margin:var(--flow-btn-group-margin, 5px 0px);
    width:var(--flow-btn-group-width, fit-content);
}
.flow-btn-group[vertical], flow-btn-group[vertical]{
    flex-direction:column;
}
.flow-btn-group:not([vertical]) :not(:last-child),
flow-btn-group:not([vertical]) :not(:last-child){
    border-right-width:0px;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
}
flow-btn-group:not([vertical]) flow-toggle-btn[active]+flow-toggle-btn{
    border-left-color:var(--flow-btn-active-border-color, var(--flow-primary-color, rgba(0,151,115,1)));
}
flow-btn-group:not([vertical]) flow-toggle-btn[active]:not([disabled])+flow-toggle-btn:hover{
    border-left-color:var(--flow-btn-hover-active-border-color, var(--flow-btn-hover-border-color, var(--flow-primary-color, rgba(0,151,115,1))));
}
.flow-btn-group:not([vertical]) :not(:first-child),
flow-btn-group:not([vertical]) :not(:first-child){
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
}

.flow-btn-group[vertical] :not(:last-child),
flow-btn-group[vertical] :not(:last-child){
    border-bottom-width:0px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
}
.flow-btn-group[vertical] :not(:first-child),
flow-btn-group[vertical] :not(:first-child){
    border-top-left-radius:0px;
    border-top-right-radius:0px;
}

flow-btn-group, .flow-btn-group{
    --flow-btn-hover-active-color:var(--flow-btn-active-invert-color, var(--flow-primary-invert-color, #FFF));;
    --flow-btn-border-color:var(--flow-btn-group-btn-border-color, var(--flow-primary-color, #DDD));
    --flow-btn-hover-border-color:var(--flow-btn-group-btn-hover-border-color, var(--flow-primary-color, #DDD));
    --flow-btn-font-weight:var(--flow-btn-group-btn-font-weight, inherit);
}


/*** flow-app-layout **
flow-app-layout{
    display:flex;
    flex-direction:column;
    width:var(--flow-app-width, 100vw);
    height:var(--flow-app-height, 100vh);
}
flow-app-layout .flow-app-layout-header{
    display:flex;flex-direction:row;
    align-items:var(--flow-app-header-align-items, center);
    height:var(--flow-app-header-height, 60px);
    background-color:var(--flow-app-header-bg, #161926);
    color:var(--flow-app-header-color, #91aec1);
    padding:var(--flow-app-header-padding, 0px 100px);
    --flow-dropdown-trigger-bg:var(--flow-app-header-bg, #161926);
    --flow-dropdown-trigger-color:var(--flow-app-header-color, #91aec1);
    --flow-dropdown-trigger-hover-bg:transparent;
    --flow-dropdown-trigger-hover-color:var(--flow-app-header-color, #91aec1);
    --flow-dropdown-trigger-width:20px;
    --flow-dropdown-trigger-padding:0px;
}
flow-app-layout[no-header] .flow-app-layout-header{display:none}
flow-app-layout .flow-app-layout-header-sm{display:none}
flow-app-layout .flow-app-layout-header .logo{
    height:100%;
    max-height:80%;
}
flow-app-layout>.logo>.logo{
    max-height:80%;
}
flow-app-layout .flow-app-layout-header ::slotted(a.link){
    padding:var(--flow-app-header-link-padding, 0px 0px 0px 16px);
    color:var(--flow-app-header-color, #91aec1);
    text-decoration:none;
}
flow-app-layout .flow-app-layout-footer {
    height: var(--flow-app-footer-height, initial);
    color:var(--flow-app-footer-color, #000);
    background:var(--flow-app-footer-bg, #91aec1);              
}

flow-app-layout .flow-app-layout-body{
    flex:1;display:flex;flex-direction:row;
    overflow:var(--flow-app-body-overflow, hidden);
}
flow-app-layout .flow-app-layout-drawer{
    background-color:var(--flow-app-drawer-bg, var(--flow-background-color, inherit));
    color:var(--flow-app-drawer-color, var(--flow-color, inherit));
    width:var(--flow-app-drawer-width, 300px);
    overflow:var(--flow-app-drawer-overflow, initial);
    position:relative;
}
flow-app-layout[no-drawer] .flow-app-layout-drawer{display:none}
flow-app-layout[floating-drawer] .flow-app-layout-drawer{
    position:absolute;
    left:0px;top:0px;bottom:0px;
    transition:var(--flow-app-drawer-transition, left 0.5s ease);
    z-index:var(--flow-app-drawer-z-index, 10001);
}
flow-app-layout[floating-drawer]:not([open-drawer]) .flow-app-layout-drawer{
    left:var(--flow-app-drawer-hidden-left, -500px);
}
flow-app-layout[floating-drawer][right-drawer] .flow-app-layout-drawer{
    left:initial;right:0px;
    transition:var(--flow-app-drawer-transition, right 0.5s ease);
}
flow-app-layout[floating-drawer][right-drawer]:not([open-drawer]) .flow-app-layout-drawer{
    right:var(--flow-app-drawer-hidden-right, -500px);
}
flow-app-layout .flow-app-layout-main{
    flex:1;
    overflow:var(--flow-app-main-overflow, hidden);
    position:var(--flow-app-main-position, initial);
    display:var(--flow-app-main-display, flex);
    flex-direction:var(--flow-app-main-flex-direction, column);
}

flow-app-layout .flow-app-layout-wrapper {
    height:var(--flow-app-wrapper-height, 100px);
    overflow:var(--flow-app-wrapper-overflow, auto);
    position:var(--flow-app-wrapper-position, initial);
    display:var(--flow-app-wrapper-display, initial);
    flex:var(--flow-app-wrapper-flex, 1);
}
flow-app-layout[main-v-box] .flow-app-layout-main{
    display:flex;flex-direction:column;
    align-items:var(--flow-app-main-align-items, stretch);
    justify-content:var(--flow-app-main-align-justify-content, space-between);
}
flow-app-layout fa-icon{
    --fa-icon-color:var(--flow-color);
}

flow-app-layout .flow-app-layout-menu-icon{
    cursor:pointer;
    --fa-icon-color:var(--flow-app-menu-icon-color, var(--flow-color));
}
flow-app-layout .flow-app-layout-drawer-top{
    height:var(--flow-app-header-height, 60px);
    display:flex;align-items:center;
    padding:var(--flow-app-header-padding, 0px 100px);
}
flow-app-layout .flow-app-layout-main-mask{
    position:absolute;z-index:var(--flow-app-body-mask-z-index, 10000);
    left:0px;top:0px;right:0px;bottom:0px;width:100%;height:100%;
    background-color:var(--flow-app-body-mask-bg, initial);
}
flow-app-layout[floating-drawer][open-drawer] .flow-app-layout-main{position:relative}
flow-app-layout:not([floating-drawer]) .flow-app-layout-drawer-top,
flow-app-layout:not([floating-drawer]) .flow-app-layout-main-mask,
flow-app-layout:not([open-drawer]) .flow-app-layout-main-mask{display:none}
flow-app-layout .flow-app-layout-drawer-close-icon{
    cursor:pointer;
    --fa-icon-color:var(--flow-app-drawer-close-icon-color, var(--flow-color));
}

@media(max-width:760px){
    flow-app-layout[floating-drawer] .flow-app-layout-header-sm{display:flex}
    flow-app-layout[floating-drawer] .flow-app-layout-header:not(.flow-app-layout-header-sm){display:none}
    flow-app-layout .flow-app-layout-drawer-top,
    flow-app-layout .flow-app-layout-header{
        padding:var(--flow-app-header-sm-padding, 0px 15px);
    }
}



flow-app-layout ::slotted(.flex){flex:1}
*** *** *** *** *** *** ***/



/* a {color:var(--flow-link-color, red);}
a:hover {
    border-bottom: 1px solid var(--flow-link-hover-color);
} */