﻿body {
    background: #2E624E;
    min-width: 200px;
}

#UI_header_section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    overflow: hidden;
    background-color: rgb(42, 46, 51);
    color: #e0e0e0;
    padding: 1px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
}

.copyright-section {
    display:none;
}

#UI_floatingMenusContainer {
    width: 0px;
    height: 0px;
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
}
.floatingSurfaceOn {
    width: 100% !important;
    height: 100% !important;
    visibility: visible;
}

/*  FIX za ie in edge */
.ie_vertical_justifier {
    height: 100%;
}

.ie_vertical_justifier_outer {
    display: table;
    height: 100%;
}

.ie_vertical_justifier_inner {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
#main_title {
    /* text-transform: uppercase; */
    color: #e0e0e0;
}



#main_titlebox .ie_vertical_justifier_outer {
    padding-top: 3px;
    box-sizing: border-box;
}

#main_titlebox .ie_vertical_justifier_inner > span {
    vertical-align: middle;
}

.nowrap {
    white-space: nowrap;
}

#flag_icon {
    display: none;
}
#flag_icon div {
    width: 32px;
    height: 16px;
    background-size: 32px 16px;
}


#UI_LngMenuOption img {
    vertical-align: middle;
}

.mainmenu_icon {
    height: 100%;
    min-height: 25px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
.mainmenu_icon:hover { filter:brightness(1.1); }
.mainmenu_icon.floating_menu_initiator.initiator_on { filter:brightness(1.1); }


.outer-flex {
    padding: 10px;
}
.panel-flex {
    min-width: 200px;
    max-width: 450px;
    font-family: Verdana, Arial;
    font-size: 11px;
    color: #e0e0e0;
    padding-top: 10px;
}
.inner-panel-flex {
    position: relative;
    text-align: left;
    font-size: 12px;
}
.centered {
    text-align: center;
}

/* vnosna polja */
input[type="submit"] { box-sizing:border-box; width:100%; height:21px; max-width:500px; cursor:pointer; }
input[type="text"] { box-sizing:border-box; width:100%; max-width:500px;}
input[type="email"] { box-sizing:border-box; width:100%; max-width:500px;}
input[type="password"] { box-sizing:border-box; width:100%; max-width:500px;}
input[type="button"] { box-sizing:border-box; width:100%; height:21px; max-width:500px; cursor:pointer; }
textarea { box-sizing:border-box; width:100%; height:100px; max-width:500px;}
select { box-sizing:border-box; width:100%; max-width:500px;}
.formitem { margin-top:5px; margin-bottom:5px; }
.formsection { margin-top:10px; margin-bottom:10px; }
.formitem .label { margin-bottom:3px; }

.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;
}

input[type=password]::-ms-reveal {
    display: none;
}


/* floating menus */
.has_submenu {
    position: relative;
    padding-right: 20px;
}
.has_submenu .submenu_arrow {
    position: absolute;
    right: 2px;
    top: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.has_submenu .submenu_arrow span {
    transform: scale(0.8,1.4);
}
.floatingSurfaceOn {
    width: 100% !important;
    height: 100% !important;
    visibility: visible;
}

.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: 250px;
    max-height: 98%;
    overflow-y: auto;
    box-shadow: 5px 3px 2px rgba(0,0,0,0.3);
}
.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;
}

.floating_menu_section_separator {
    padding-top: 5px;
}
.floating_menu_section_separator div {
    border-top: dimgray 1px solid;
}

.floating_menu_item:first-child {
    border: 0px;
}
.floating_menu_item:hover {
    background-color: #333333 !important;
    color: white !important;
}
.floating_menu_item.parent_menu_option {
    background-color: black !important;
    color: white !important;
}




.floating_menu .floating_menu_item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 4px;
}
#UI_BackgroundsMenu.floating_menu .floating_menu_item, #UI_OverlaysMenu.floating_menu .floating_menu_item {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-left: 1px;
}
.floating_menu, #UI_BackgroundsMenu.floating_menu, #UI_OverlaysMenu.floating_menu {
    border: rgba(0,0,0,0.5) 1px solid;
    background: gray;
}
.floating_menu .floating_menu_inner {
    border: 0px;
}
.floating_menu.mainmenu .floating_menu_item {
    background: #2A2E33;
    color: white;
    border-top: rgba(255,255,255,0.1) 1px solid;
}
.floating_menu.mainmenu .floating_menu_item:hover {
    background: lightgray !important;
    color: black !important;
}


@media only screen and (min-width: 400px) {
	#main_title { font-size: 12px; }
	#main_subtitle { font-size: 8px; }
	#main_titlebox { line-height:10px; }
}
@media only screen and (min-width: 600px) {
	#main_title { font-size: 14px; }
	#main_subtitle { font-size: 10px; }
	#main_titlebox { line-height:11px; }
}
@media only screen and (min-width: 800px) {
	#main_title { font-size: 15px; }
	#main_subtitle { font-size: 12px; }
	#main_titlebox { line-height:13px; }
}
@media only screen and (min-width: 1000px) {
	#main_title { font-size: 16px; }
	#main_subtitle { font-size: 14px; }
	#main_titlebox { line-height:15px; }
}
@media only screen and (min-width: 1200px) {
	#main_title { font-size: 16px; }
	#main_subtitle { font-size: 16px; }
	#main_titlebox { line-height:17px; }
}
@media only screen and (max-width: 400px) {
	#main_title { font-size: 10px; white-space: normal; }
	#main_subtitle { display:none; font-size: 6px;}
	#main_titlebox { line-height: 10px; }
}
@media only screen and (max-width: 300px) {
	/* #main_titlebox { display:none;} */
}

/*  PISO in občina logotip  */

#app_icon { height:25px; width:auto; margin-right:5px;} 
#app_icon_square { height:25px; width:25px; margin-right:5px; display:none;}
#app_icon_small { height:25px; width:auto; margin-right:5px; display:none;}

#entity_icon { height:25px; width:auto; }
.header_icon_link { height:25px; }

@media only screen and (max-width: 500px) {
    #app_icon:not(.nonresponsive) {display:none;}
    #app_icon_square:not(.nonresponsive) {display: block;}
    #app_icon_small:not(.nonresponsive) {display: block;}
}





#floatingCirclesG{
	position:relative;
	width:96px;
	height:96px;
	margin:auto;
	transform:scale(0.6);
		-o-transform:scale(0.6);
		-ms-transform:scale(0.6);
		-webkit-transform:scale(0.6);
		-moz-transform:scale(0.6);
}

.f_circleG{
	position:absolute;
	background-color:rgba(255,255,255,0.50);
	height:17px;
	width:17px;
	border-radius:9px;
		-o-border-radius:9px;
		-ms-border-radius:9px;
		-webkit-border-radius:9px;
		-moz-border-radius:9px;
	animation-name:f_fadeG;
		-o-animation-name:f_fadeG;
		-ms-animation-name:f_fadeG;
		-webkit-animation-name:f_fadeG;
		-moz-animation-name:f_fadeG;
	animation-duration:1.04s;
		-o-animation-duration:1.04s;
		-ms-animation-duration:1.04s;
		-webkit-animation-duration:1.04s;
		-moz-animation-duration:1.04s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#frotateG_01{
	left:0;
	top:39px;
	animation-delay:0.39s;
		-o-animation-delay:0.39s;
		-ms-animation-delay:0.39s;
		-webkit-animation-delay:0.39s;
		-moz-animation-delay:0.39s;
}

#frotateG_02{
	left:11px;
	top:11px;
	animation-delay:0.52s;
		-o-animation-delay:0.52s;
		-ms-animation-delay:0.52s;
		-webkit-animation-delay:0.52s;
		-moz-animation-delay:0.52s;
}

#frotateG_03{
	left:39px;
	top:0;
	animation-delay:0.65s;
		-o-animation-delay:0.65s;
		-ms-animation-delay:0.65s;
		-webkit-animation-delay:0.65s;
		-moz-animation-delay:0.65s;
}

#frotateG_04{
	right:11px;
	top:11px;
	animation-delay:0.78s;
		-o-animation-delay:0.78s;
		-ms-animation-delay:0.78s;
		-webkit-animation-delay:0.78s;
		-moz-animation-delay:0.78s;
}

#frotateG_05{
	right:0;
	top:39px;
	animation-delay:0.91s;
		-o-animation-delay:0.91s;
		-ms-animation-delay:0.91s;
		-webkit-animation-delay:0.91s;
		-moz-animation-delay:0.91s;
}

#frotateG_06{
	right:11px;
	bottom:11px;
	animation-delay:1.04s;
		-o-animation-delay:1.04s;
		-ms-animation-delay:1.04s;
		-webkit-animation-delay:1.04s;
		-moz-animation-delay:1.04s;
}

#frotateG_07{
	left:39px;
	bottom:0;
	animation-delay:1.17s;
		-o-animation-delay:1.17s;
		-ms-animation-delay:1.17s;
		-webkit-animation-delay:1.17s;
		-moz-animation-delay:1.17s;
}

#frotateG_08{
	left:11px;
	bottom:11px;
	animation-delay:1.3s;
		-o-animation-delay:1.3s;
		-ms-animation-delay:1.3s;
		-webkit-animation-delay:1.3s;
		-moz-animation-delay:1.3s;
}



@keyframes f_fadeG{
	0%{
		background-color:rgb(255,255,255);
	}

	100%{
		background-color:rgba(255,255,255,0.27);
	}
}

@-o-keyframes f_fadeG{
	0%{
		background-color:rgb(255,255,255);
	}

	100%{
		background-color:rgba(255,255,255,0.27);
	}
}

@-ms-keyframes f_fadeG{
	0%{
		background-color:rgb(255,255,255);
	}

	100%{
		background-color:rgba(255,255,255,0.27);
	}
}

@-webkit-keyframes f_fadeG{
	0%{
		background-color:rgb(255,255,255);
	}

	100%{
		background-color:rgba(255,255,255,0.27);
	}
}

@-moz-keyframes f_fadeG{
	0%{
		background-color:rgb(255,255,255);
	}

	100%{
		background-color:rgba(255,255,255,0.27);
	}
}