/* FLEX UI */
html {margin:0px; border:0px; padding:0px; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:white; }
body {margin:0px; border:0px; padding:0px; width:100%; height:100%; overflow:hidden; position:relative; left:0px; top:0px; overscroll-behavior:none; }

#umerilo { width:10cm; height:1px }
#UI_rootContainer {width:100%; height:100%; }
#UI_floatingWindowsContainer {width:0px; height:0px; position:absolute; left:0px; top:0px; overflow:visible; }
#UI_floatingMenusContainer {width:0px; height:0px; visibility:hidden; position:absolute; left:0px; top:0px; overflow:hidden; }
#UI_floatingMsgContainer {width:0px; height:0px; visibility:hidden; position:absolute; left:0px; top:0px; overflow:hidden; }

#UI_header_section {width:100%; display:flex; align-items:center; min-height:40px; max-height:40px; height:40px; overflow:hidden; }
#UI_middle_section {width:100%; flex:1; overflow:hidden; position:relative; }
	#UI_pannelcollapser_section { position:relative; height:100%; color:white; overflow:hidden; text-align:center; }
	#UI_pannelparent_section { flex:1 0; max-width:280px; min-width:180px; height:100%; box-sizing:border-box; z-index:11; }	
	#UI_pannel_section {flex:1 0; height:100%; overflow-y:auto; overflow-x:hidden; }
		#UI_layer_section { width:100%;}
		#UI_overviewcollapser_section { flex:0 0 auto;}
		#UI_overview_section { width:100%; margin-top:7px;}
		#UI_tabcollapser_section {background:darkgray; height:100%; }
		#UI_tab_section {width:100%; flex:0 0 auto; margin-top:5px; flex-grow:1; }
		#UI_tabbuttons_section {width:100%;}
		#UI_tabbuttons_section>div.rowFlexContainer { flex-wrap:wrap; }
		#UI_tabbody_section { width:100%; min-height:150px; flex:1 0 auto; box-sizing:border-box; display:flex; flex-direction:column; justify-content:stretch;}		
            #UI_tab_search { flex:1; display:none; flex-direction:column; justify-content:stretch;}
				#UI_search_border { position:relative; width:100%; flex:1; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; }
				#UI_search { position:absolute; width:100%; min-height:100%; box-sizing:border-box; padding:5px;}						
			#UI_tab_legend { flex:1; display:none; flex-direction:column; justify-content:stretch;}
				#UI_legend_border { position:relative; width:100%; flex:1; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; }
				#UI_legend { position:absolute; width:100%; min-height:100%; box-sizing:border-box;}		
			#UI_tab_zaznamki { flex:1; display:none; flex-direction:column; justify-content:stretch;}
				#UI_notes_border { position:relative; width:100%; flex:1; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; }
				#UI_notes { position:absolute; width:100%; min-height:100%; box-sizing:border-box;}
			#UI_tab_modules { flex:1; display:none; flex-direction:column; justify-content:stretch;}
				#UI_modules_border { position:relative; width:100%; flex:1; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; }
				#UI_modules { position:absolute; width:100%; min-height:100%; box-sizing:border-box;}					
	#UI_content_section { position:relative; flex:3 0; height:100%; }
        #UI_content_topPadder { display:none; }
		#UI_map_supersection { width:100%; flex:1 1 400px; position:relative; box-sizing:border-box; overflow:hidden; }
			#UI_maptitle_section { display:flex; width:100%; min-height:18px; max-height:18px; height:18px; padding-left:4px; padding-right:1px; box-sizing:border-box;}
			#UI_map_section {  width:100%; flex:1 1; }
				#UI_map_padding { width:100%; height:100%; box-sizing:border-box; }	
				#UI_map_border { width:100%; height:100%; box-sizing:border-box; }	
				#UI_map { position:relative; width:100%; height:100%; overflow:hidden; min-width:1px; min-height:1px; }		
			#UI_metrics_section { width:100%; padding-left:4px; padding-right:4px; box-sizing:border-box; }
				#UI_ruller_section { white-space:nowrap; margin-right:5px; }
				#UI_scale_section { white-space:nowrap; flex:1 0 auto; margin-right:10px; }
				#UI_coordinate_section { word-spacing:8px; }
		#UI_infohandle_section { flex-grow:0; flex-shrink:0; width:100%; overflow:hidden; }
			#UI_infoHandle { height:100%; display:flex; align-items:center; justify-content:center; }
		#UI_info_section { width:100%; height:200px; box-sizing:border-box; overflow:hidden; }
			#UI_info_padding { width:100%; height:100%; box-sizing:border-box; }	
			#UI_info_border { position:relative; width:100%; height:100%; box-sizing:border-box; }	
			#UI_info { position:absolute; width:100%; height:100%; overflow:auto; color:black; min-height:1px; }	
        #UI_content_bottomPadder { display:none; }
	#UI_toolbarcollapser_section { position:relative; height:100%; color:white; overflow:hidden; text-align:center; }
	#UI_toolbarparent_section { flex:0 0 auto; min-width:50px; max-width:50px; height:100%; box-sizing:border-box;  z-index:10; }		
	#UI_toolbar_section {width:50px; height:100%;}

.app .int_only { display:none !important; }

body:not(.fsmode) #ns_icon { display:none !important;}
body.fsmode #fs_icon { display:none !important;}

.scrollable {
    touch-action: pan-y !important;
}

.centercenter_v{
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.centercenter_h {
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.unselectable {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.rootFlexContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.menuFlexContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.mainmenu_icon {
	/*height:100%; 
	min-height:25px;*/
    height:16px;
	display:flex; 
	flex-direction:column; 
	justify-content:center;
	padding-left: 5px;
	padding-right: 5px;
}
.mainmenu_icon:not(.noaction) {
    cursor:pointer;
}
.mainmenu_icon:not(.noaction):hover { filter:brightness(1.2); }
.mainmenu_icon.floating_menu_initiator.initiator_on { filter:brightness(1.2); }

.rowFlexContainer {
	display: flex;
	flex-direction: row;
}
.columnFlexContainer {
	display: flex;
	flex-direction: column;
}

.contentFlexContainer {
	display: flex;
	flex-direction: column;
}

.toolbarFlexContainer {
	position: relative;
	overflow: hidden;
}
.toolbarInnerContainer {
	position: relative;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.searchField {
    width: 100%;
    box-sizing: border-box;
    height: 18px;
    font-size: 11px;
    border: #929292 1px solid;
    /* border-left-width: 0px; */
}
/*.searchField.first {
    border-left-width: 1px;
}*/
.searchButton {
    display: flex;
    width: 20px;
    min-width: 20px;
    border: #888888 1px solid;
    /* border-left-width: 0px; */
    box-sizing: border-box;
    /* margin-left: 1px; */
    overflow: hidden;
}
.searchButton>div {
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	color: #333333;	
	cursor: pointer;
}
.searchButton.wholeline { width:100%; height:20px; }

.search_item .fldDiv {
    margin-right:1px;
}

.toolbar_icon_outer_container {
    position: relative;
    width: 32px;
    height: 32px;
    display: block;
    margin-top: 0px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    box-sizing: border-box;
}
.toolbar_icon_middle_container {
	position: absolute;	
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.toolbar_icon_middle_container .blank {background: black;}
.toolbar_icon_inner_container {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center; 
	justify-content: center;
	font-size: 20px;
	box-sizing: border-box;	
}


.toolbar_bottomspacer {
	margin-bottom: 25px !important;
}
.embeded .toolbar_bottomspacer {
    display: none;
}

.layersection_menu {
    background: #8090AA;
    padding: 1px;
    border: lightgray 0px solid;
    color: black;
    margin-bottom: 3px;
    height: 22px;
    box-sizing: border-box;
    line-height: 15px;
    font-size: 10px;
    vertical-align: middle;
    display: flex;
    align-items: center;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.layersection_menu .floating_menu_initiator {
    white-space: nowrap;
    overflow: hidden;
    padding-right: 20px;
    text-overflow: ellipsis;
}

.check-label {
    padding-left: 2px;
}

.layersection_menu:last-of-type {
    margin-bottom: 0px;
}
#main_titlebox .ie_vertical_justifier_outer {
    padding-top:1px;
}
#main_titlebox .ie_vertical_justifier_inner > span {
    vertical-align: middle;
}

.tablink {
    display: inline-block;
    position: relative;
    text-align: center;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
/*
.tablink i.icon { font-size:14px; color:#e5e5e5; }
.tablink.tablink_active i.icon { color:black; }
*/
.tablink_active {
    /* flex: 1.5; */
    text-overflow: initial;
}
.tablink_decorator_holder {
    position: absolute;
    bottom: 0px;
    height: 1px;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
}

.tabContainer {
    width: 100%;
    height: 100%;
    display: none;
    box-sizing: border-box;
}
.tabContainer_active{
	display: flex !important;
}

.ellipsis_div {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nowrap {
	white-space: nowrap; 
}

.pannelcloser, .pannel_dummy {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    text-align: center;
    font-size: 5px;
    color:white;

}
.pannelcloser.vertical>div, .pannel_dummy.vertical>div {width:100%;}
.pannelcloser.vertical {height:100%; width:15px;}
.pannel_dummy.vertical { width:15px; min-width:15px; max-width:15px; }
.pannelcloser.horizontal { flex-basis:13px; }


.vertical .handle { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1
}

#UI_DISPLAY_SCALEBAR_MEASURE {
    text-decoration: underline;
}

.floating_menu {
    position: absolute;
    visibility: hidden;
    display: none;
    left: 0px;
    top: 0px;
    z-index: 99;
    background: #444444; /* zaradi Edga, ki drugače dela artefakte pri senci ob robu */
    max-width: 300px;
    max-height: 98%;
    overflow-y: auto;
    box-shadow: 5px 3px 2px rgba(0,0,0,0.3); /* #444444 0px 0px 5px 1px; */
}

.theme_submenu.highlighted_menu .floating_menu_inner {
    filter: brightness(1.10);
}

.floating_menu_inner {
	border: #555555 1px solid;
	background: lightgray;
	font-family: Verdana, Arial;
	font-size: 10px;
	overflow: hidden;	
}

.floating_menu_item {
    border-top: rgba(0,0,0,0.1) 1px solid;
    padding: 2px;
    padding-left: 3px;
    padding-right: 20px;
    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    min-height: 22px;
    box-sizing: border-box;
}

.floating_menu_section_separator { padding-top:5px; }
.floating_menu_section_separator div { border-top: dimgray 1px solid; }

.has_submenu {
	position: relative;
	padding-right: 20px;	
}
.has_submenu .submenu_arrow {
	position: absolute;
	right: 0px;
	top: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*.has_submenu .submenu_arrow span {
	transform: scale(0.8,1.4);
}*/
.floating_menu_item:first-child {
	border: 0px !important;
}
.floating_menu_item:not(#ViewOption_VIEWS):hover {
    background-color: #333333 !important;
    color: white !important;
}
#ViewOption_VIEWS { padding:0px !important; }
.floating_menu_item.parent_menu_option {
    background-color: black !important;
    color: white !important;
}

.floatingSurfaceOn {
	width:100% !important;
	height:100% !important;
	visibility: visible;
}



#UI_BackgroundsMenu.floating_menu, #UI_OverlaysMenu.floating_menu { max-width: 300px;}
#UI_BackgroundsMenu .floating_menu_item, #UI_OverlaysMenu .floating_menu_item { padding-left:3px; padding-top:1px; padding-bottom:1px; padding-right:3px; }
.overflow_allow.floating_menu { overflow:visible !important; } /* samo zaradi datepicker kontrolnika v DKN arhivu!!! */
.overflow_allow .floating_menu_inner { overflow:visible !important; } /* samo zaradi datepicker kontrolnika v DKN arhivu!!! */

#flag_icon { display: none; }
#flag_icon div { width:32px; height:16px; background-size:32px 16px;}

#UI_LngMenuOption img { vertical-align: middle;}

.fullscreen_only { display:none !important; }

.invisible { visibility:hidden !important; }
.hidden { display:none !important; }

.prepared_break { display:none; }

.visible_sidepanel #UI_pannelcollapser_section { visibility:hidden; } 
.visible_sidepanel #UI_pannelparent_section { display:flex !important; } 

.collapsed_sidepanel #UI_pannelcollapser_section { display:flex !important; } 
.collapsed_sidepanel #UI_pannelparent_section { display:none !important; } 

.visible_toolbar #UI_toolbarcollapser_section { display:flex; visibility:hidden; } 
.visible_toolbar #UI_toolbarparent_section { display:flex; } 

.collapsed_toolbar #UI_toolbarcollapser_section { display:flex; } 
.collapsed_toolbar #UI_toolbarparent_section { display:none; } 

.scrollable { -webkit-overflow-scrolling:touch; }

/* GENERIC NON-LAYOUT UI */
#UI_maptitle_section, #UI_metrics_section { font-weight: bold; }
.theme_button_item { font-weight:bold; cursor:pointer; user-select:none; }
.theme_button:hover { background-color:black; color:white; }
/*.snapped_bottom #UI_infoHandle IMG { transform:scaleY(-1); }*/

#UI_DISPLAY_SCALEBAR_CS { text-decoration:underline; }

.floatingDivCSS input[type=text] {box-sizing:border-box; }
.floatingDivCSS textarea { box-sizing:border-box; }

input.nospin[type=number]::-webkit-inner-spin-button,
input.nospin[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
input.nospin[type='number'] {
    -moz-appearance: textfield;
}
#UI_overview_section.off { margin-top:0px; }
#UI_overview_section.off #UI_OVERVIEWFRAME_container {display: none !important;}
#UI_overview_section.off #UI_OVERVIEW_AUTODETAIL_chkItem {display: none;}
#UI_OVERVIEWFRAME { max-width:300px; }

#UI_panelCloserHandle { cursor:ew-resize; }
#UI_panelHandle { cursor:ew-resize; }
#UI_infoHandle { cursor:ns-resize; }
#UI_toolbarHandle { cursor:pointer; }
#UI_toolbarCloserHandle { cursor:pointer; }
#main_title { vertical-align:middle; text-transform: uppercase; }

/* tudi pri navadnem pogledu metrics sekcija v vogal karte! */
#UI_maptitle_section { z-index:10; }
#UI_metrics_section { position:absolute; bottom:0px; background:none; z-index:9; display:block; display:block; width:auto; text-shadow:2px 0px 2px #ffffff, 0px 2px 2px #ffffff, -2px 0px 2px #ffffff, 0px -2px 2px #ffffff; }
#UI_DISPLAY_SCALEBAR_BAR_line { box-shadow:0px 1px 2px #ffffff, 0px -1px 2px #ffffff, 1px 0px 2px #ffffff, -1px 0px 2px #ffffff; }
#UI_DISPLAY_SCALEBAR_SLIDER { box-shadow:1px 0px 2px #ffffff, -1px 0px 2px #ffffff; }
#UI_scale_section { margin-right:0px; }


/* closerji in hendi kot jezički */
.pannel_dummy.vertical {
    width: 7px;
    max-width:7px;
    min-width:7px;
    overflow: visible !important;
}
.pannelcloser.vertical {
    width: 7px;
    max-width: 7px;
    min-width: 7px;
    overflow: visible !important;
}
.pannelcloser.vertical.toright {
    width: 0px;
    max-width: 0px;
    min-width: 0px;
}
.pannelcloser.horizontal {
    height: 7px;
    max-height: 7px;
    min-height: 7px;
    overflow: visible !important;
    z-index: 10;
}
.handle_ext
{
    background-color: #326496;
    border: lightgray 1px solid;
    align-items: center;
    justify-content: center;
    color: lightgray;
    /*font-size: 20px;*/
    display: flex;
    cursor: pointer;
}
#UI_panelHandle .handle_ext, #UI_panelCloserHandle .handle_ext, #UI_toolbarHandle .handle_ext, #UI_toolbarCloserHandle .handle_ext {
    width: 13px;
    height: 26px;
    background-size: 14px 14px;
    background-position: center;
    position: relative;
}
#UI_panelHandle .handle_ext, #UI_panelCloserHandle .handle_ext {
    border-left: 0px;
}
#UI_toolbarHandle .handle_ext, #UI_toolbarCloserHandle .handle_ext {
    border-right: 0px;
}

#UI_infoHandle .handle_ext {
    width: 26px;
    height: 13px;
    background-size: 14px 14px;
    background-position: center;
    border-bottom: 0px;
}

#UI_infoHandle, #UI_panelHandle, #UI_panelCloserHandle, #UI_toolbarHandle, #UI_toolbarCloserHandle { position:relative; }
.handle_highlight {
    width: 100%;
    height: 100%;
    position: absolute;
}

.handle_highlight:hover, .handle.in_action .handle_highlight { background-color:#5480AB; }
/*.handle_ext:hover { background-color:#5480AB; }*/

#UI_panelCloserHandle .handle_ext i, #UI_panelHandle .handle_ext i { padding-right:2px; }
#UI_toolbarCloserHandle .handle_ext i, #UI_toolbarHandle .handle_ext i { padding-left:2px; }
#UI_infoHandle .handle_ext i { padding-top:3px; }

#UI_panelCloserHandle .handle_base, #UI_panelHandle .handle_base, #UI_toolbarCloserHandle .handle_base, #UI_toolbarHandle .handle_base {
    position: relative;
    width: 100%;
    height: 28px;
    top:78px;
}
#UI_panelCloserHandle .handle_ext {
    position: absolute;
    left: 6px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
#UI_panelHandle .handle_ext {
    position: absolute;
    left: 6px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
#UI_toolbarCloserHandle .handle_ext {
    position: absolute;
    left: -13px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
#UI_toolbarHandle .handle_ext {
    position: absolute;
    left: -13px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.handle_line {
    height: 100%;
    position: relative;
    background: #326496;
}
#UI_toolbarHandle .handle_line {
    width:1px;
}




#UI_infoHandle .handle_base {
    position: relative;
    width: 28px;
    height: 100%;
}
#UI_infoHandle .handle_ext {
    position: absolute;
    top: -13px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.snapped_top #UI_infoHandle .handle_ext {
    top:6px;
    border-top: 0px;
    border-bottom: lightgray 1px solid;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.snapped_top #UI_infoHandle .handle_ext i {
    padding-top: 0px; padding-bottom:1px;
}

.snapped_bottom #UI_infoHandle .handle_ext > * {
    transform: scaleY(-1);
    padding-top:1px;
}

.vertical .handle, .horizontal .handle {
    justify-content: flex-start;
    z-index: 10;
}

#UI_toolbarparent_section { max-width:50px; min-width:50px; width:50px; }

.UI_tab_title {
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-bottom: #686870 1px solid;
}

.blinking-text {
    animation: blink 500ms;
    animation-iteration-count: 3;
}

@keyframes blink { 
25% {opacity:0.6;}
50% {opacity:0;}
75% {opacity:0.6;}
}

.inputHolder {
    position: relative;
}
.inputHolder .inputIcon {
    width:14px; height:14px; position:absolute; right:5px; top:50%; margin-top:-7px; display:none; cursor:pointer;
}
.inputHolder.eye-on .inputIcon.eye-on { display:block; }
.inputHolder.eye-off .inputIcon.eye-off { display:block; }

.inputHolder input {
    padding-right:25px;
}
.inputHolder input.password {
	text-security: disc;
	-webkit-text-security: disc;
	-moz-text-security: disc;
	font-family: text-security-disc;
}

@font-face{
  font-family: text-security-disc;
  src: url("../fonts/text-security-disc.woff");
  xxxsrc: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
}

input[type=password]::-ms-reveal {
    display: none;
}

.infobaloon {
    position: absolute;
    max-width: 30em;
    padding: 1.125em 1.5em;
    border-radius: 1rem;
    font-size: 11px;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
    background: #FCEEBE;
}

.infobaloon::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    right: 25px;
    border-top: none;
    filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
    border: 0.75rem solid transparent;
    border-bottom-color: #FCEEBE;
    text-align: justify;
}