#ui-nag, #ui-wrapper {

    --ui-base: 42px;
    --h_nag: 0px;
    --phone_h_nag: 70px; 
    --phone_safe-bottom: env(safe-area-inset-bottom,0px); 
    --tablet_h_nag: 90px;
    --desktop_h_nag: 60px;
    --h_bottomspacer: 0px;

        /* icons */
        --ui-icons_size: calc(var(--ui-base)/2);
        --ui-icons_size_m3: calc(var(--ui-base)/2);
        --ui-icons_border: calc(var(--ui-base)/4);

}
#ui-wrapper, .fullscreenOverlay, .ui-basecontainer {
    /* div sizing */    
    --h_top: var(--ui-base);
    --h_bottom: 0px;
    --w_pane_0: 0px;
    --w_pane_1: 0px;
    --w_pane_2: 0px; --h_pane_2: 100%; 
    --w_menu_2: 0px;
    --h_nwjs: 24px; /* if changing this change at fullscreen func aswell */

    --w_ui-center: calc(100% - var(--w_menu_1) - var(--w_menu_2));
    --h_ui-center: calc(100% - var(--h_top) - var(--h_bottom));
    
    --tablet_w_panes: 390px;
    --tablet_w_pane_0: 0px; --tablet_h_pane_0: 100%;
    --tablet_w_pane_1: 0px; --tablet_h_pane_1: 100%;
    --tablet_w_pane_2: 300px; --tablet_h_pane_2: calc(100% - var(--h_top));
    --tablet_w_menu_1: var(--ui-base); --tablet_h_menu_1: 100%;
    --tablet_w_menu_2: var(--ui-base); --tablet_h_menu_2: calc(100% - var(--h_top)); /*  - var(--h_bottom) */
    --tablet_w_top: calc(100% - var(--tablet_w_menu_1) - var(--tablet_w_menu_2) - var(--w_pane_2));
    --tablet_w_ui-center: calc(100% - var(--tablet_w_menu_1) - var(--tablet_w_menu_2));
    --tablet_h_ui-center: calc(100% - var(--h_top) - var(--h_bottom));
    --tablet_w_bottom: calc(100% - var(--w_menu_1)); 
    --tablet_w_status: var(--tablet_w_panes); 

    --phone_h_pane_0: 100%;
    --phone_w_pane_1: 100%; --phone_h_pane_1: 254px;
    --phone_w_menu_1: 100%; --phone_h_menu_1: var(--ui-base);
    --phone_w_menu_2: 100%; --phone_h_menu_2: var(--ui-base);
    --phone_w_top: 100%;
    --phone_w_ui-center: 100%; 
    --phone_h_ui-center: calc(100% - var(--h_top) - var(--phone_h_menu_1));
    --phone_w_bottom: 100%; 
    --phone_w_status: 100%; 

    --w_syncreturn: 200px; --h_syncreturn: 0px;
    --w_status: var(--tablet_w_panes);
    --h_status: var(--ui-base);/*calc(var(--ui-base)/5*3.5);*/
    --w_top_pane_2: calc(var(--tablet_w_pane_2) + 10px + var(--ui-base)*3);
    
    --overlay_left: 0px;
    --overlay_top: 0px;
    
    --z_ui-menu: 5;
    
    --resizer_h: 24px;

    --lw_multi: 1;
    
    /* -------------> turn off menu -> bottom turned off -> resize to phone ... */
    
            
}

.fullscreenOverlay {
    position:absolute;
    top:0;
    left:0;
    z-index: 999;
    height:100%;
    width:100%;
    display:none;
}

.atlas {
    font-family: "EEMfontMono";
    font-size: 12px;
    color: #ff8962; 
    /*letter-spacing: 27px;
    margin-left: 27px;*/
    width:100%;
    text-align:justify;
    margin-top:5px;
}
.echoes {
    font-family: "EEMfontMono";
    font-size: 12px;
    color: #54c5bc; 
    /*letter-spacing: 27px;
    margin-left: 27px;*/
    width:100%;
    text-align:justify;
    margin-top:5px;
}
.explorer {
    font-family: "EEMfontMono";
    font-size: 12px;
    color: #f5a43e;
    /*letter-spacing: 17.2px;
    margin-left: 17.2px;*/
    width:100%;
    text-align:justify;
    margin-top:5px;
}
.sublogospan {
    background-color:transparent;
    width:100%;
    height:1px;
    display:inline-block;
}

.ui-basecontainer {
    z-index: 0;
    position:absolute;
    width:100%;
    height:100vh;
}  
#ui-nag {
    z-index: 1;
    position: relative;
    background-color: var(--col-yellow); 
    height: calc(var(--h_nag) + var(--h_bottomspacer));
    width: 100%;
    pointer-events: all;
}    
#ui-wrapper {
    z-index: 1;
    position:relative;
    overflow: hidden;
    width:100%;
    height: calc(100% - var(--h_nag) - var(--h_nwjs)); 
    pointer-events: none;
}
#outer {
    position:relative;
    top:0px;
    height: 100vh; 
    overflow: hidden;
    z-index:0;
}  
#ui-top {
    z-index: var(--z_ui-menu);
    background-color: var(--col-ui); /* blue; <------------- dev */
    position: absolute;
    width: var(--w_top); 
    height: var(--h_top);
    left: var(--w_menu_1);
    pointer-events: all;
}
#ui-top_pane_2 {
    z-index: var(--z_ui-menu);
    background-color: var(--col-ui); /* orange; <------------- dev */
    position: absolute;
    right: 0;
    width: var(--w_top_pane_2);
    height: var(--h_top);   
    text-align: right;
    vertical-align: middle;
    pointer-events: all;
}  
#ui-bottom {
    z-index: calc(var(--z_ui-menu)-2);
    background-color: var(--col-ui); /* indianred; <------------- dev */
    position: absolute;
    bottom: 0;
    width: var(--w_bottom);
    height: var(--h_bottom);
    left: var(--w_menu_1);
    pointer-events: all;
}
#ui-status {
    z-index: calc(var(--z_ui-menu) + 15);
    background-color: var(--col-main); /* darkgrey; /* <------------- dev */
    position: absolute;
    bottom: 0;
    width: var(--w_status);
    height: var(--h_status);
    left: var(--w_menu_1);
    pointer-events: all;
}
#ui-syncreturn {
    z-index: calc(var(--z_ui-menu) - 1);
    background-color: var(--col-blue); 
    position: absolute;
    border-bottom: 1px solid var(--col-ui);
    /*top: 0;var(--h_top);*/
    /*left: 0;var(--w_menu_1);*/
    width: var(--w_syncreturn);
    display: none;
    pointer-events: all;
}
#ui-menu_1 {
    z-index: var(--z_ui-menu);
    background-color: var(--col-ui); /* dodgerblue; /* <------------- dev */
    position: absolute;
    width: var(--w_menu_1);
    height: var(--h_menu_1);
    pointer-events: all;
}   
#ui-menu_1_bottom, #ui-menu_2_bottom {
    position: absolute;
    bottom: 0;
    pointer-events: all;
}
#ui-bottom_left {
    position: absolute;
}
#ui-bottom_right {
    position: absolute;
    right: 0;
}
#ui-menu_2 {
    z-index: var(--z_ui-menu);
    background-color: var(--col-ui); /* coral; /* <------------- dev */
    position: absolute;
    right: 0;
    top: var(--h_top);
    width: var(--w_menu_2);
    min-height: var(--h_menu_2);
    pointer-events: all;
}
#ui-menu_3 {
    z-index: calc(var(--z_ui-menu) - 1);
    /* background-color: /* red; /* <------------- dev */
    position: absolute;
    /*height: calc(var(--h_top)/5*3);*/
    bottom: 0px;
    right: calc(var(--w_pane_2) + var(--w_menu_2));
    width: calc(100% - var(--w_menu_1) - var(--w_pane_1) - var(--w_pane_2) - var(--w_menu_2));
    height: 29px;
    /*padding-right: calc(var(--ui-icons_border));
    padding-bottom: calc(var(--ui-icons_border) - 5px);
    pointer-events: all;*/
    
}
#ui-menu_4 {
    z-index: calc(var(--z_ui-menu) + 6);
    /* background-color: var(--col-main); /* orestgreen; /* <------------- dev */
    position: absolute;
    bottom: var(--h_bottom);
    left: var(--w_menu_1);
    width: var(--w_pane_1);
}    
.ui-mnu {
    background-color:  var(--col-main); 
    display: none;
    pointer-events: all;
}
#ui-center {
    position: absolute;
    top: 0px; /*var(--h_top)*/
    left: var(--w_menu_1);
    width: var(--w_ui-center); 
    height: var(--h_ui-center); 
    overflow: hidden;
}
#ui-pane_0 {
    z-index: var(--z_ui-menu);
    background-color: var(--col-main); /* fuchsia; /* <------------- dev */
    position: absolute;
    width: var(--w_pane_0);
    height: var(--h_pane_0);    
    pointer-events: all;
} 
#ui-pane_1 {
    z-index: calc(var(--z_ui-menu) - 1);
    /*background-color: var(--col-main);  cornflowerblue; /* <------------- dev */
    top: calc(var(--h_syncreturn)); /* - 1px */
    width: var(--w_pane_1);
    height: var(--h_pane_1);    
    float: var(--overlay_float);
    text-align: left;
} 
#ui-pane_2 {
    z-index: var(--z_ui-menu);
    background-color: var(--col-main); /* darksalmon; /* <------------- dev */
    position: absolute;
    top: var(--h_top);
    right: var(--w_menu_2);
    width: 0px;
    height: var(--h_pane_2);
    pointer-events: all;
    box-sizing: border-box;
    text-align: right;
}
#ui-overlay_1 {
    z-index: calc(var(--z_ui-menu) - 1);
    /*background-color: darkkhaki; /* <------------- dev */
    position: absolute;
    left: var(--overlay_left);
    top: calc(var(--overlay_top) + var(--h_syncreturn));
    height: 100%;
    width: 100vw;
}

/* element styles */
.ui-icon {
    /* opacity: 0.8; */
    width: var(--ui-icons_size); 
    height: var(--ui-icons_size);
    border: solid;
    border-color: transparent;
    border-width: var(--ui-icons_border);
    /* border-color: rgba(255,255,255,0.1); /* <------------- dev */
    /* filter: invert(); /* <------------- dev */
    -webkit-app-region: no-drag; /* E3IO */
    cursor: pointer !important;
}       
.ui-ico-varia {
    pointer-events: all;
    cursor: pointer !important;
}  
.ui-icon_lr {
    /* opacity: 0.8; */
    width: var(--ui-icons_size); 
    height: var(--ui-icons_size);
    border: solid;
    border-color: transparent;
    border-left-width: var(--ui-icons_border);
    border-right-width: var(--ui-icons_border);
    border-top-width: 2px;
    border-bottom-width: 2px;
    /* border-color: rgba(255,255,255,0.1); /* <------------- dev */
    /* filter: invert(); /* <------------- dev */
    -webkit-app-region: no-drag; /* E3IO */
    cursor: pointer !important;
}
.ui-icon_m3 {
    /* opacity: 0.8; */
    width: var(--ui-icons_size_m3); 
    height: var(--ui-icons_size_m3);
    /*border: solid;
    padding-top:7px;
    opacity:0.8;
    border-width: var(--ui-icons_border);
    border-color: rgba(255,255,255,0.1); /* <------------- dev */
    /* filter: invert(); /* <------------- dev */
    cursor: pointer !important;
}
.ui-flex_menu {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}
.ui-flex_container {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.ui-flex_section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;/* FF quirk */
}
.ui-flex_content {
    flex-grow: 1;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

.ui-overlay {
    pointer-events:none;
}

.zKBpane {
    width:124px;
    background-color:transparent;
    margin-top:5px;
    overflow:hidden;
    margin-left:5px;
    display:none;
}
.infopane {
    background-color: var(--col-main);
    display: none;
    height: 100%;
    pointer-events:all;
}
    
.hiddenatstart {
    display: none;
}

.paneopac_main {
    background-color: rgba(0,0,0,0) !important; /* 0.1 */
    /*border-left: 1px dashed var(--col-lines);*/
    pointer-events: none !important;
}
.paneopac {
    background-color: rgba(0,0,0,0) !important; /* 0.1 */
    pointer-events: none !important;
}

#ui-desktopapp {
    z-index: 2;
    position: relative;
    background-color: var(--col-ui);
    width: 100%;
    text-align: right;
    height: var(--h_nwjs);
    -webkit-app-region: drag;
}


.ss_selections {
    border: 0; 
    width: 100%;
    display: none;
    border-spacing: 0px;
    padding: 0px;
};

.ui-wrapper-overlay {
    z-index:999;
    position: relative;
    background-color: rgba(0,0,0,0.8);
    top:0;
    left:0;
    height:100%;
    width:100%;
    pointer-events: all !important;
    user-select: all !important;
}

/* ----------------------------------------------- OLD CSS ------------------------------------------------ */

/*
.purple { color: #9a41ff; }
.kitty { color: #ffb3e7; }
.blue { color: #3e8df5; }
.yellow { color: #e3ff00; }
.orange { color: #f5a43e; }
.red { color: #cc3f00; }
.green { color: #3ef598; }
.white { color: #ffffff; }
.lightgrey { color: #999999; }
.darkgrey { color: #444444; }
.black { color: #000000; }
.spaceblue { color: #090C0E; }
*/
body { 
    /*height: 100vh;*/
    padding: 0px;
    /*padding-top: env(safe-area-inset-top,0px); 
    padding-bottom: env(safe-area-inset-bottom,0px);*/
    overflow:hidden; 
    font-family: "EEMfont";
    margin:0;
    user-select: none;
    /*cursor: default;*/
    -webkit-touch-callout: none;     /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;  /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;       /* prevent copy paste, to allow, change 'none' to 'text' */
    -webkit-tap-highlight-color: transparent;

    /* touch-action: manipulation; /* removes click delay on mobile ... didnt work */
} 

html { 
   font-size: 12px; 
}

[onClick] {
    cursor: pointer;
}

select,td{ font-family: "EEMfont"; }
button,input { font-family: 'EEMfontLight' !important;}
textarea:focus, input:focus{ outline: 0;}
.notouch{ pointer-events:none;}
.unselectable {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari */  
    -khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	user-select: none;
	cursor: default;
}
.selectable_txt {
	user-select: text !important;
	cursor: text !important;
    -webkit-touch-callout: text !important; /* iOS Safari */
}
.interactive {
    pointer-events:all;
}

/* turn on gpu acceleration */
#viewport, .screen, .animated, .spinner { 
	/*-webkit-transform: translate3d(0px,0px,0px);*/
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000; 
    transform: translateZ(0);
    backface-visibility: hidden;
	perspective: 1000;     
} 

.devONLY {
   display:none;
}

.colorPick_mk {
    width:21px;
    height:21px;
    display:inline-block;
    margin-top:6px;  
    margin-left:2px;
    margin-right:2px;
    border-radius:10.5px;
    opacity: 0.35;
}

.colorPick_mk_small {
    width:9px;
    height:9px;
    /*padding: 0 1px 0 1px;*/
    display:inline-block;
    border-radius:4.5px;
    opacity: 1;
}

.colorPick_mk_mnu {
    width:14px;
    height:14px;
    display:inline-block;
    margin-top:2px;  
    margin-left:0px;
    margin-right:0px;
    border-radius:7px;
    opacity: 0.35;
}

.cP_selected {
    opacity: 1;
}
.srchrow {
    line-height:1.45rem;
    padding-top:0.1rem;
}
.rou-sortable-placeholder { 
    /*height: 1.5em; */
    height:4px;
    background-color: var(--col-drag-outline);
    /*border-color: var(--col-drag-outline);*/
    margin-bottom:12px;
}
.routeLi {
    vertical-align: top;
    display: inline-block;
    width: 100%;
}

.hoverbg {
    background-color:rgba(0,0,0,0.6);
}

.hoverbg:hover {
    background-color:rgba(0,0,0,0.8);
}