@font-face {
	font-family:"fontawesomein";
	src:url("../gfx/fonts/fontawesome-webfont.eot");
	src:url("../gfx/fonts/fontawesome-webfont.woff2");
}

a { color:black;text-decoration:none; }
a:hover { color:white; }
a.visited { color:white;}

/**
@font-face {
	font-family:"fontawesome";
	src:url("../gfx/fonts/fontawesome-webfont.woff2");
}
**/

.view{
	box-shadow:0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
	border-radius:3px;
	background-color:#FFF;
	padding:10px;
	flex-grow:1;
	
}

#menuCaption{
	font-family:arial;
	font-size:1.5em;
}
.menuSeparator{
	background-color:#DDD;
	height:1px;
}
#topBar{
	width:100%;
	height:75px;
	background-color:#7f7f7f;
	color:#FFF;
	font-family:arial;
	font-size:1.3em;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
#topBar > div{
	padding:4px;
}
#contentBox{
	display:flex;
	flex-direction:row;
	align-items:stretch;
	height:100%;
	overflow-y:hide;
}
#smallMenu{
	display:none;
	font-family:fontawesomein;
	cursor:pointer;
}
#smallMenu:hover{
	color:#000;
}
#smallMenu::before{
	content:attr(data-menu-icon);
	font-family:fontawesomein;
	padding-right:15px;
	font-size:1.5em;
}

#menu{
	background-color:#FFF;
	overflow:hidden;
	animation-duration: 0.4s;		
	animation-fill-mode: forwards;	
	padding-top:10px;
}
.menu{
	flex-basis:300px;
	flex-shrink:0;
}
.menu > div{
	white-space:nowrap;
	padding:10px;
	margin:0px;
	font-size:1em;
}
.menuItem::before{
	content:attr(data-menu-icon);
	font-family:fontawesomein;
	padding-right:15px;
	font-size:1.5em;
}

.menuItem{
	line-height:1.5em;
	cursor:pointer;
}
.menuItem:hover{
	background-color:#dff2fd;
}



.toolTitle{
	cursor:pointer;
	padding-left:15px;
	line-height:2em;
}

.toolTitleHover{
	background-color:#dff2fd;
}

.toolTitle::before{
	content:"";
	font-family:fontawesomein;
	padding-right:15px;
	font-size:1.0em;
}

.menuItemCurrent{
	background-color:#03a9f4;
	color:#FFF;
}
.menuItemCurrent:hover{
	background-color:#03a9f4;
	
}

@media (max-width:992px){
	.menu {
		animation-name:hideMenu ;
	}
	#smallMenu{display:block;}
	.visibleFloatingMenu{
		position:absolute;
		animation-name: showMenu;
		height:80%;
		z-index:1;
	}
	.hiddenFloatingMenu{
		position:absolute;
		animation-name: hideMenu;
		height:80%;
	}
	#mainOverlay{
		position:fixed;
		width:100%;
		height:100%;
		background-color:#000;
		animation-duration: 0.4s;		
		animation-fill-mode: forwards;	
	}
	.mainOverlayHidden{
		display:none;
	}
	.mainOverlayVisible{
		display:block;
		animation-name: showOverlay;
	}
	#topBarText{display:none;}
	#topBar{max-width:980px;}
}
@media (min-width:992px){
	.menu{
		animation-name: showMenu;
	}
	#topBarText{
		display:block;
		font-weight:700;
		font-size:1.2em;
		color:#DDDDDD;
	}
	#topBar{max-width:1280px;}
}
@keyframes showOverlay {
	from {opacity:0;}
	to	 {opacity:0.2;}	
}
@keyframes showMenu { 
	from {flex-basis:0px;width:0px;}
	to 	 {flex-basis:300px;width:300px;}
}
@keyframes hideMenu {
	from {flex-basis:300px;width:300px;}
	to 	 {flex-basis:0px;width:0px;}
}

BODY	{
	background-color:#7f7f7f;
	overflow-x:hidden;
	overflow-y:auto;
	margin:0;
	height: 100%;
	padding: 0;
	display:flex;
	flex-direction:column;
	font-family:"Adelle Sans",arial;
}

HTML{
	height: 100%;
	margin: 0;
	padding: 0;
	font-size:12px;
}

/*
#mainFrame{
	background-color:#f1f1f1;
	flex-grow:1;
	padding:10px;
}
*/

#mainFrame{
	display:flex;
	justify-content:flex-start;
	padding:0px;
	/*background-color:#F1F9FD;*/
	background-color:#CCC;
	height:100%;
	width:100%;
}
	#mainContent{
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		padding:0px;
		margin:0px;
		flex-basis:100%;
		max-width:980px;
		background-color:#DDD;
	}
		#middleFrame{
			display:flex;
			flex-direction:row;
			justify-content:flex-start;
			flex-grow:1;
			flex-shrink:1;
			overflow-y:auto;
		}
			#middleContent{
				flex-direction:column;
				justify-content:flex-start;
				display:flex;
				padding:0px;
				flex-grow:0;
				margin:10px;
			}
		#footerFrame{
			display:flex;
			justify-content:flex-start;
			height:26px; /** height + padding*2 **/
			flex-shrink:0;
			background-color:#D8D8D8;
			border-top-style:solid;
			border-top-width:1px;
			border-top-color:#C8C8C8;
			
		}
			#footerContent{
				display:flex;
				padding:5px 10px 0px 10px;
				margin:0px 10px 0px 10px;
				height:16px;
				width:600px;
				justify-content:center;
			}

input[type=text]{
	font-size:11px;
	background-color:#F8F8FF;
	font-size:1.0em;
	padding-left:4px;
	border-style:solid;
	border-width:1px;
	border-color:#AAA;
	border-radius:4px;
	height:24px;
}

.view select{
	background-color:#F8F8FF;
	font-size:1.0em;
	padding-left:4px;
	height:27px;
	width:100%;
	border-radius:4px;
}

.toolText{
	white-space:nowrap;
}

.toolResultBox{
	display:flex;
	align-items:center;
	height:25px;
	border-style:solid;
	border-width:1px;
	border-color:#AAA;
	border-radius:4px;}

.toolResult{
	font-size:1.3em;
	color:#880000;
	padding-left:4px;
}


.rangeFrame{
	display:flex;
	align-items:center;
	margin:0px 0px 10px 0px;
	border-style:solid;
	border-width:1px;
	border-color:#AAA;
	background-color:#F8F8FF;
	border-radius:4px;
}

.rangeFrame span{
	flex-basis:30px;margin-left:3px;
}

.rangeFrame input{
	flex-grow:1;
}

#cbx_languagePicker{
	font-size:1em;
	margin-left:10px;
}

#mainLogo{
width:100%;
height:auto;
margin: 0;
padding: 0;
}

#views > DIV {
	display:none;
}
	#loginSquare{
		flex-direction:column;
	}
	#personalSpace{
		flex-direction:column;
	}
	#viewCOSTP{
		flex-direction:column;
	}
	#viewCOSTP2{
		flex-direction:column;
	}
	#viewFunction{
		flex-direction:column;
	}
	#viewAccountSettings{
		flex-direction:column;
	}
	#viewFiles{
		flex-direction:column;
	}
	#menuRegister{
		flex-direction:column;
	}

#titleText{
	background-color:#F1F1FF;
	font-size:1.5em;
	font-weight:bold;
	font-family:Arial;
	padding: 10px 0px 10px 0px;
}

#alertText{
	color:#AA0000;
	font-weight:bold; 
	padding:0px 0px 10px 0px;
}

.frmTitle{
	font-size:2em;
	font-weight:700;
	padding:0px 0px 10px 0px;
}

#welcomeText{
	text-align:center;
	margin:0px 0px 10px 0px;
}

#frmLogin{
	display:flex;
	flex-direction:column;
	background-color:#FFFFFF;
	flex-shrink:0;
}

#frmPersonalSpace{
	padding:15px;
	display:flex;
	flex-direction:column;
	background-color:#FFFFFF;
	flex-shrink:0;
}

#frmLogout{
	border-width:2px;
	border-color:#CCCCCC;
	border-style:none;
	padding:15px;
	display:flex;
	flex-direction:column;
	background-color:#FFFFFF;
	margin-top:10px;
	flex-shrink:0;
	display:none;
}

#txtLoginUserName{
	margin:0px 0px 10px 0px;
}
#txtLoginPassWord{
	margin:0px 0px 10px 0px;
}

#btnLoginSubmit{
	font-size:1.0em;
	width:100%;
	background-color:#01426A;
	color:#FFFFFF;
	padding:10px;
	cursor:pointer;
	border-width:0px;
	border-style:none;
	font-weight:bold;
}

#btnLoginSubmit:hover{
	background-color:#000000;
}

#btnRegister{
	font-size:1.0em;
	margin:0px 0px 10px 0px;
	
}

#frmLogin_noPassword{
	text-align:center;
	font-weight:bold;
	padding:10px 0px 10px 0px;
	cursor:pointer;
}
#frmLogin_noPassword:hover{
	color:#00a3e1;
	text-decoration:underline;
}

#frmLogin_noAccount{
	text-align:center;
	padding:10px 0px 10px 0px;
}

.btn{
	cursor:pointer;
	background-color:#00A3E0;
	color:#FFFFFF;
	border-radius:0px;
	padding:10px;
	font-weight:bold;
	text-align:center;
	border-style:none;
	border-width;0px;
}

.btn:hover{
	background-color:#000000;
	color:#FFFFFF;
}

.btnSubmit{
	cursor:pointer;
	background-color:#FFAAAA;
	color:#000000;
	border-radius:5px;
	padding:3px 3px 3px 3px;
	line-height:2em;
	font-family:arial;
	font-weight:bold;
	margin: 0px 0px 0px 0px;
}

.btnSubmit:hover{
	background-color:#880000;
	color:#FFFFFF;
}

.alerttextblue{
	color:#03a9f4;
	font-weight:700;
	padding:0px 0px 10px 0px;
	}

#loggedArea{
	font-size:12px;
	padding:5px;
	overflow-x:hidden;
	overflow-y:hidden;
}

#frmRegisterInitial{}
#frmRegisterSecondary{
	font-size:14px;
}
#registerSecondaryFeedback{
	font-weight:700;
	color:#00a3e1;
	margin-left:20px;
}
#frmRegisterSecondary select{
	font-size:14px;
	min-width:300px;
}
.frmRegisterSecondaryblock{
	margin-top:15px;
}

#frmRegisterSecondary input[type="text"]{
	min-width:300px;
}

#frmAccountSettings{
	padding:15px;
	display:flex;
	flex-direction:column;
	background-color:#FFFFFF;}

.regboxContainer{

}

.regbox{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	
}

@media all and (max-width:350px){
	.regbox{
		flex-direction:column;
		padding:0px 0px 10px 0px;
	}
}

.regbox input{
	width:95%;
}

.regboxLeft{
	flex-basis:60%;
	flex-shrink:0;
	flex:grow:0;
}

.regboxRight{
	flex-basis:40%;
	flex-shrink:0;
	flex:grow:0;
}

.inputCaption{
	padding:4px 0px 2px 0px;
	font-weight:500;
	
}

#nameContainer{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
}

#nameContainerTitle{}

#nameContainerName{
	flex-grow:1;
	padding:0px 0px 0px 3px;
}

#cbxTitle{
	height:18px;
}

#txtPersonalInformation{
	width:98%;
	resize:none;
	height:7em;
}

#frmLoginFooter {
	display:flex;
	justify-content:space-between;
}	
#frmRegisterInitialFooter{
	display:flex;
	justify-content:space-between;
	padding:10px 0px 0px 0px;
}
#frmRegisterSecondaryFooter{
	display:flex;
	justify-content:space-between;
	padding:10px 0px 0px 0px;	
}
#frmAccountSettingsFooter{
	display:flex;
	justify-content:space-between;
	padding:10px 0px 0px 0px;
}

#frmAccountSettingsPortraitTitle{
	margin-top:15px;
}
#frmAccountSettingsPortraitBox{
	padding:5px;
	border-style:solid;
	border-width:1px;
	border-color:#AAA;
	width:97%;
}
.frmAccountSettingsPortraitBox{
	
}
.frmAccountSettingsPortraitBoxDragOver{
	background-color:#AAFFAA;
}
#frmAccountSettingsPortraitRow{
	display:flex;
	align-items:center;
	justify-content:center;
}

#frmAccountSettingsPortraitRowLeft{
	flex-basis:80px;
}

#frmAccountSettingsPortraitRowRight{
	display:flex;
	flex-grow:1;
	height:80px;
	flex-direction:column;
	padding-left:15px;
	justify-content:space-between;
}

#frmAccountSettingsPortraitRemoveBox{
	align-self:flex-end;
}

#frmAccountSettingsPortraitRemoveButton{
	font-size:10px;
}
.viewLink{
	cursor:pointer;
}

#backToPersonalPage{
	color:#888888;
}
#backToPersonalPage:hover{
	color:#000000;
}

.toolView input[type="text"]{
	margin:0px 0px 10px 0px;
}

.toolTitleArea{
	display:flex;
}
.toolTitleArea > div{
	flex-basis:50%;
}
.toolSaveName{
	font-size:16px;
	font-weight:700;
	width:95%;
}

.toolRemoveButton{
	cursor:pointer;
	margin-left:6px;
}

.toolFieldsBoxes{
	
}

.toolFieldsBox{
	display:flex;
	flex-direction:column;
	border-width:1px;
	border-style:solid;
	border-color:#CCC;
	margin-top:5px;
	padding:5px;
	transition:all .2s ease-in;
}
.toolFieldsBox > div{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-top:10px;
}

.toolFieldsBox > div:first-child{
	margin-top:0px;
}

.toolFieldsBox>div>div{
	display:flex;
	flex-direction:column;
	flex-basis:30%;
}

.toolFieldsBox>div>div.mapHolderBox{
	flex-basis:100%;
}	

.toolFieldsBoxDragOver{
	background-color:#dff2fd;
}

.toolBoxMinimizer{
	height:12px;
	width:12px;
	border-style:solid;
	border-width:1px;
	border-color:#CCC;
	color:#f00;
	align-self:flex-end;
	cursor:pointer;
}

#totalReportBox{
	padding:0px;
	flex-basis:100%;
}

.reportProjectBox{
	background-color:#FBFBFB;
	margin-bottom:5px;
	border-style:solid;
	border-width:1px;
	border-color:#DDD;
}
.reportInstanceBox{
	display:flex;
	margin-bottom:10px;
}
.reportInstanceBoxTitle{
	font-size:1.2em;
	font-weight:700;
}
.reportInstanceBoxColumnHeader{
	font-weight:700;
}
.reportInstanceBoxColumnValue{
	font-weight:500;
	color:#666;
}
.reportInstanceBoxColumnSum{
	font-weight:700;
	font-size:1.4em;
}
.reportInstanceBoxColumnTotal{
	font-weight:700;
	font-size:1.2em;
}
/* Google maps */

.mapHolder{
	width:calc(100% - 4px);
	height:300px;	
	margin: 0px 0px 0px 0px;
	border-style:solid;
	border-width:2px;
	border-color:#888888;
}

.instances{
	display:none;
	padding:0px 0px 10px 0px;
}

.instanceBox{
	display:flex;
	flex-wrap:wrap;
}
.instanceButtons{
	display:flex;
	flex-wrap:nowrap;
	justify-content:flex-end;
}
.instance{
	cursor:pointer;
	padding:2px;
	margin:2px;
	border-radius:3px;
	background-color:#EE0;
}
.instance:hover{
	background-color:#DD0;
}
.instanceExample{
	cursor:pointer;
	padding:2px;
	margin:2px;
	border-radius:3px;
	background-color:#04a9f4;
	color:#FFF;
}
.instanceExample:hover{
	background-color:#0099e4;
}
.instanceSelected{
	border-width:1px;
	border-color:#000;
	border-style:solid;
}

.instanceSelected:hover{
	
}

.instanceAdd{
	font-size:11px;
	cursor:pointer;
	height:18px;
	margin-left:6px;
}

.tool_projects{
	margin-bottom:10px;
}
.tool_projects_box{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.tool_project{
	cursor:pointer;
	padding:2px;
	margin:2px;
	border-radius:3px;
	background-color:#000;
	color:#FFF;
	font-size:13px;
}
.tool_project:hover{
	color:#DDF;
}

.tool_project_unaffiliated{
	background-color:#000;
	margin-left:10px;
}
.tool_project_examples{
	background-color:#04a9f4;
	margin-left:10px;
}

.tool_project_filteredOut{
	background-color:#AAA;
}

/* E-post och lösenord, validering */
#txtRegisterUserTooShort{
	color:#880000;
}
#txtRegisterUserMissingAt{
	color:#880000;
}
#txtRegisterUserMissingDot{
	color:#880000;
}
#txtRegisterUserDomainInvalid{
	color:#880000;
}
#txtRegisterUserTopDomainInvalid{
	color:#880000;
}
#txtRegisterUserOccupied{
	color:#880000;
	}
#txtRegisterUserVacant{
	color:#008800;
	}
.txtRegisterUserValidation{
	display:none;
	font-size:0.9em;
	font-weight:700;
}
.txtAccountSettingsUserValidation{
	display:none;
	font-size:0.9em;
	font-weight:700;
}
.txtMessageUserValidation{
	display:none;
	font-size:0.9em;
	font-weight:700;	
}
#cbxAccountSettingsTitle{
	height:21px;
}
#txtRegisterPassTooShort{
	color:#880000;
}
#txtRegisterPassMissingLowerCase{
	color:#880000;
}
#txtRegisterPassMissinUpperCase{
	color:#880000;
}
#txtRegisterPassMissingNumber{
	color:#880000;
}
#txtRegisterPassCheck{
	color:#008800;
}
.txtRegisterPassValidation{
	display:none;
	font-size:0.9em;
	font-weight:700;
}

#txtRegisterConfMatch{
	color:#008800;
}
#txtRegisterConfNoMatch{
	color:#880000;
}
.txtRegisterConfValidation{
	display:none;
	font-size:0.9em;
	font-weight:700;
}

/* Animering dialogrutor */
#dialogs{
	display:none;
}

.modalContent > div{
	padding:10px;
	border-style:double;
	border-width:3px;
	border-color:#04a9f4;
	
}
.modalBack{
	display:none;
	position:fixed;
	z-index:1;
	padding-top:100px;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	overflow:auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modalContent{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 5px;
    border: 1px solid #888;
    width: 300px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s	
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.dialogFooter{
	display:flex;
	justify-content: space-around;
	padding:10px 0px 0px 0px;	
}

#dropDialogDropArea{
	display:flex;
	justify-content:space-around;
}
.dialogDropBoxItem{
	background-color:#AAAAFF;
	border-radius:4px;
	font-weight:700;
	padding:10px;
	margin:10px;
	font-size:1.5em;
}

.dialogDropBoxItemDragOver{
	background-color:#6666FF;
}

.dialogInputField{
	font-family:courier new, arial;
}

/* View Files */
#filesAbsolicon{
	background-color:#FFFFFF;
	border-style:solid;
	border-width:1px;
	padding:3px;
	margin:3px;
	display:flex;
	flex-wrap:wrap;
}
#filesPublic{
	background-color:#FFFFFF;
	border-style:solid;
	border-width:1px;
	padding:3px;
	margin:3px;
	display:flex;
	flex-wrap:wrap;
}

.filesDropArea{
	border-style:dashed;
	border-width:2px;
	border-color:#DDDDDD;
	padding:3px;
	margin:3px;
	height:40px;
	display:flex;
	justify-content:center;
	width:100%;
	background-color:transparent;
}

.fileDropText{
	font-size:1.5em;
	font-weight:700;
	color:#CCCCCC;
	align-self:center;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;}
.fileDropText:hover{
	color:#666666;
	border-color:#FF8888;
	font-size:1.7em;
}
#filesAbsoliconSettings{
	display:none;
}

#filesPublicSettings{
	display:none;
}

#filesAbsoliconDropArea{
}

#filesPublicDropArea{
}

.filesFolder{
	background-color:#FFFFAA;
	border-style:solid;
	border-width:1px;
	padding:3px;
	margin:3px;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
	cursor:pointer;
}
.filesFile{
	background-color:#AAFFFF;
	border-style:solid;
	border-width:1px;
	padding:3px;
	margin:3px;
	cursor:pointer;
}
.filesFileIsMarked{
	background-color:#FFAAAA;
}

#filesProgressBar{
	background-color:#008800;
	border-radius:4px;
	height:10px;
	width:0%;
}
#filesMainHeader{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.filesHeader{
	display:flex;
	margin-top:10px;
	align-items:center;
}

.filesHeader button{
	font-size:0.8em;
	display:none;
	cursor:pointer;
}
.filesHeader > div{
	margin:0px 5px 0px 0px;
	font-weight:700;
}
#filesHeaderAbsoliconText{
	
}
#filesHeaderPublicText{
	
}
#filesHeaderAbsoliconText:hover{
	text-decoration:underline;
	cursor:pointer;
}
#filesHeaderPublicText:hover{
	text-decoration:underline;
	cursor:pointer;
}

#filesHeaderAbsoliconPath{
	display:flex;
}

#filesHeaderPublicPath{
	display:flex;
}

.filesPathPart{
	font-weight:500;
	padding:1px;
	margin:1px;
	cursor:pointer;
}

.filesPathPartNonHover{
	font-weight:500;
	padding:1px;
	margin:1px;
}

.filesPathSlash{
	padding:1px;
	margin:1px;
}

.filesPathPart:hover{
	text-decoration:underline;
}


#filesTitle{
	font-weight:700;
	font-size:2em;
}
#filesEditMode{
	color:transparent;
	font-size:1.5em;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

/* Canvas */
.settingsIcon{
	cursor:pointer;
}

/* viewFunction */
#functionCanvas{
	/*background-color:#232323;*/
	background-color:#333333;
}
#viewFunctionBox{
	display:flex;
	flex-wrap:wrap;
	border-width:3px;
	border-style:solid;
	border-radius:10px;
	border-color:#EEEEEE;
	padding:10px;
	margin:10px 0px 10px 0px;
	height:auto;
	position:absolute;
	background-color:#04a9f4;
}

#viewFunctionBox > div{
	border-style:none;
	border-width:3px;
	flex-basis:auto;
	padding:10px;
}

.viewFunctionSettingTitle{
	font-weight:700;
	font-size:1.25em;
	margin:10px 0px 10px 0px;
}

.viewFunctionSettings{
	display:none;
	flex-direction:column;
}

.viewDiagramSettings{
	display:none;
	flex-direction:column;
}

.sliderParent{
	display:flex;
	align-items:center;
	margin:0px 0px 10px 0px;
	border-style:solid;
	border-width:1px;
	background-color:#FFFFFF;
	border-radius:5px;
}

.sliderTitle{
	font-weight:700;
	font-size:1.5em;
	margin:10px 0px 10px 0px;
}
.sliderParent span{
	flex-basis:30px;margin-left:3px;text-align:center;
}
.sliderParent input{
	flex-grow:1;
}

#viewFunctionGeneralBox{
	display:flex;
	flex-direction:row;
}

/* floatingStoredFunctions */
#floatingStoredFunctions{
	display:none;
	position:absolute;
	height:auto;
	min-height:200px;
	width:auto;
	background:linear-gradient(#EEEEEE, #FFFFFF, #EEEEEE);
	border-style:solid;
	border-width:3px;
	border-color:#DDDDDD;
	border-radius:4px;
	top:0px;
	left0px;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	padding:5px;
}

#viewFunctionBox select{
	font-size:1.5em;
	margin:0px 0px 10px 0px;
	border-radius:4px;
}

.closeFloatingDialog{
	background-color:#880000;
	color:#FFFFFF;
	font-family:courier new;
	align-self:flex-end;
	padding:3px 3px 0px 3px;
	border-style:outset;
	border-width:2px;
	cursor:pointer;
}
.closeFloatingDialog:hover{
	background-color:#FF0000;
	}
	
#floatingStoredFunctions_box{
	display:flex;
	flex-direction:column;
}	

.floatingStoredFunctions_boxItem{
	padding:3px;
	margin:3px;
	border-style:solid;
	border-width:3px;
	display:flex;
	align-items:center;
	border-radius:3px;
}

.floatingStoredFunctions_boxItem button{
	margin:2px;
	font-family:arial;
	font-size:0.8em;
	width:42px;
	
}

.btnSwitch{
	border-style:outset;
}

.btnSwitchPressed{
	border-style:inset;
	font-weight:700;
}

/* Colorpicker */

#floatingColorPicker{
	display:none;
	position:absolute;
	height:auto;
	width:auto;
	background:linear-gradient(#EEEEEE, #FFFFFF, #EEEEEE);
	border-style:solid;
	border-width:3px;
	border-color:#DDDDDD;
	border-radius:4px;
	top:0px;
	left0px;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	padding:5px;	
}

/* conversion tools */


.flexRowWrappable{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	border-top-right-radius:20px;
}

.conversionIcon{
	align-self:center;
}

.flexRowWrappable > div{
	padding:3px;
}

.conversionCuriosities{
	padding:5px;
	border-bottom-right-radius:20px;
}

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

.flexColumnCellCentered{
	display:flex;
	flex-direction:row;
	flex-grow:1;
	justify-content:center;
}

.flexRowCell{
	display:flex;
	flex-direction:row;
}

.conversionMainBox{
	display:flex;
	flex-direction:row;
	padding:10px 0px 10px 0px;
}

.conversionList{
	display:flex;
	flex-direction:row;
	justify-content:center;
}

.conversionList > div{
	display:flex;
	flex-direction:column;
	/** justify-content:center; **/
}

.conversionUnitDataBox{
	display:none;
}

.conversionMainDisplay{
	font-weight:700;
	font-size:1.3em;
	padding-bottom:4px;
	padding-top:4px;
}
.conversionMainValue{
	text-align:center;
	font-size:1.5em;
	color:#000;
	width:100px;
}

.conversionMainShort{
	font-size:1.3em;
	align-self:center;
	padding-left:4px;
}

#viewConversionEnergyUnits button{
	border-radius:5px;
	color:#FFF;
	border-style:solid;
	border-width:1px;
	border-color:#000;
	padding:3px;
	margin:3px;
	cursor:pointer;
}
.conversionConvertButton{
	background-color:#92d050;
}
.conversionConvertButton:hover{
	background-color:#72b030;
}
.conversionResetButton{
	background-color:#ed7d31;
}
.conversionResetButton:hover{
	background-color:#cd5d11;
}

.viewConversionEnergyUnitsListCell{
	border-style:solid;
	border-color:#AAA;
	border-width:1px;
	padding:4px;
	margin:4px;
	white-space:nowrap;
	font-size:1.2em;
}
.ruleOfThumbBox{
	border-style:solid;
	border-color:#000088;
	border-width:2px;
	padding:4px;
	margin-top:20px;
	text-align:center;
}
	.ruleOfThumbHeader{
		
	}
	.ruleOfThumbText{
		font-weight:700;
	}
	
#dialogViewRequestNewPassword{
		
}

#dialogViewRequestNewPassword > div{
	text-align:center;
	padding:8px;
}
/** userBox **/

#userBox{
	display:flex;
	flex-direction:column;
	padding:5px;
}
#userBox div{
	border-style:none;
	border-width:0px;
}
	#userBoxOne{
		display:flex;
		flex-direction:row;
		height:80px;
		flex-grow:1;
	}
	#userBoxTwo{
		display:flex;
		flex-direction:row;
		flex-shrink:1;
		flex-basis:1em;
		padding-left:5px;
		padding-top:15px;
	}
		#userBoxOneLeft{
			display:flex;
			height:80px;
			width:80px;
		}
			#userBoxOneLeftImageContainer{
				display:flex;
				flex-direction:row;
				flex-grow:1;
				justify-content:center;
				align-items:center;
			}
				#userImage{
					border-radius:10px;
				}
		#userBoxOneRight{
			display:none;
			flex-direction:column;
			flex-grow:1;
			margin-left:5px;
			justify-content:space-between;
		}
			.userBoxOneRightRow{
				display:flex;
				flex-direction:row;
				font-family:fontawesomein;
				height:20px;
				
				align-items:center;
			}
			.userBoxOneRightRowCell{
				font-family:fontawesomein;
				font-size:20px;
				padding-right:10px;
			}
			.userBoxOneRightRowCell > a{
				font-size:20px;
				padding-right:10px;
				color:black;
			} 
			.userBoxOneRightRowCell > a:hover{
				color:#03a9f4;
			} 

			.userBoxOneRightRowCellAlert > a{
				font-size:20px;
				padding-right:10px;
				color:#F00;
			} 
			.userBoxOneRightRowCellAlert > a:hover{
				color:#00F;
			} 
			
			#userBoxCellMeter{flex-basis:70%;}
			#userBoxCellMeterText{flex-basis:30%;font-size:1em;}
			#meterContainer{
				border-radius:6px;
				width:100%;
				height:20px;
				border-style:solid !important;
				border-width:1px !important;
				border-color:#008;
				background-color:#F8F8FF;
			}
			#meter{
				border-radius:6px;
				width:40%;
				height:20px;
				background-color:#03a9f4;
			}

/** Personal space **/

#spaceBox{
	display:flex;
	flex-wrap:wrap;
}

#spaceBox > div {
	display:flex;
	flex-direction:row;
	border-style:solid;
	border-width:1px;
	border-color:#BBB;
	padding:5px;
	margin:5px;
	min-width:250px;
}

/** viewHome **/
#homeMain{display:flex;flex-direction:column;}
#homeMain .view{margin:10px;padding:0px;}
	#homeMainMy{display:flex;flex-direction:row;flex-wrap:wrap;}
		.homeListWrapper{display:flex;flex-direction:column;flex-basis:50%;min-width:250px;}
		#homeProjectListBox{display:flex;flex-direction:column;}
			#homeProjectList{display:flex;flex-direction:row;justify-content:space-between;}
		#homeDocumentListBox{display:flex;flex-direction:column;}
			#homeDocumentList{display:flex;flex-direction:row;justify-content:space-between;}
	#homeMainTools{display:flex;flex-direction:column;}
		#homeToolsBox{display:flex;flex-direction:row;flex-wrap:wrap;}
		#homeToolsBox > div {border-color:#CCC;border-style:solid;border-width:1px; padding:15px; margin:5px;cursor:pointer;}
		#homeToolsBox > div:hover{background-color:#dff2fd;}
	#homeMainAdvantages{display:flex;flex-direction:column;}
		#homeAdvantagesBox{display:flex;flex-direction:row;flex-wrap:wrap;}
		#homeAdvantagesBox > div {border-color:#CCC;border-style:solid;border-width:1px; padding:15px; margin:5px;cursor:pointer;}
		#homeAdvantagesBox > div:hover{background-color:#dff2fd;}
.homeDescription{padding: 10px 10px;}
.homeTitle{background-color:#CCC;text-align:center;padding:4px;font-size:1.2em;}
.homeBlueButtonBox{display:flex;justify-content:flex-end;padding-right:10px;}
.homeBlueButton{background-color:#dff2fd;align-self:flex-end;padding:4px;flex-shrink:1;}
.homeBlueButton > A {text-decoration:none;}
.homeBlueButton:hover{background-color:#03a9f4;color:#fff;}
.homeShowAllButton{text-align:center;margin-top:5px;margin-bottom:5px;font-size:0.8em;}
.homeList{font-size:0.85em;padding:4px;line-height:1.2em; }
.homeListTitle{font-weight:700;margin-top:6px;}
#homeProjectNameList>DIV>A{
	
}
#homeProjectNameList>DIV>A:hover{
	color:#000;
	background-color:#dff2fd;
}

/** map elements **/
#pacInput{
	margin-left:0px;
	margin-top:10px;
	text-overflow: ellipsis;
	width:300px;
}
#picInput:focus{
	border-color: #4d90fe;
}
/**  instances factory **/
.labeledTextBox{}
	.labeledTextLabel{
		font-size:10px;
		color:#888;
	}
	.labeledTextContent{}
	.labeledTextContentHover{
		background-color:#dff2fd;
	}

/** projectsettings **/
#projectSettingsBox{
	max-width:400px;
	border-style:none;
	border-width:1px;
	border-color:#CCC;
	padding:0px;
}
#projectSettingsBox > div{
	margin-top:10px;
}
#projectSettingsName{
	width:100%;
	margin:0px;
	padding:0px;
}
#projectSettingsDescription{
	width:100%;
	margin:0px;
	padding:0px;
	height:4em;
}
#projectSettingsFooter{
	display:flex;
	justify-content:space-between;
	padding:10px 0px 0px 0px;
}

#projectPanel{
	display:flex;
	justify-content:space-between;
}


/** Organisations **/
#organisationSettingsBox{
	max-width:600px;
	border-style:none;
	border-width:1px;
	border-color:#CCC;
	padding:0px;
}
#organisationSettingsBox > div{
	margin-top:10px;
}
#organisationColumnBox{
	display:flex;
	flex-direction:row;
	flex-basis:100%;
	flex-wrap:wrap;
}
#organisationColumnBox > div{
	display:flex;
	flex-direction:column;
	flex-basis:47%;
	

}
#organisationColumnBox > div > div{
	margin-top:5px;
}

.organisationColumnItem{
	width:100%;
	margin:0px;
	padding:0px;
	min-width:250px;
}
#organisationSettingsPresentation{
	height:4em;
}
#organisationSettingsFooter{
	display:flex;
	justify-content:space-between;
	padding:10px 0px 0px 0px;
}

#organisationPanel{
	display:flex;
	justify-content:space-between;
}

#btnEditOrganisation{
	display:none;
}
#btnRemoveOrganisation{
	display:none;
}
#btnEditProject{
	display:none;
}
#btnRemoveProject{
	display:none;
}

.organisationMemberBox{
	border-style:solid;
	border-width:1px;
	border-color:#DDD;
	background-color:#FAFAFF;
	padding:3px;
	margin-top:2px;
}

.organisationMemberRow{
	
}

/** project och organisation **/
.btnEdit{
	border-radius:8px;
	border-width:1px;
	padding:3px;
	margin-right:3px;
	cursor:move;
	border-style:outset;
	background-color:#EEE;
}
.btnEditOnDrag{
	border-style:inset;
	background-color:#DDD;
}

/** Övrigt **/
.trashcan{
	font-family:fontawesomein;
	font-size:18px;
	color:#DDD;
}

.trashcanHighlight{
	color:#000;
	font-size:36px;
}
.trashcanReadyForDrop{
	color:#F00;
}

/**messages **/

#messageFeedback{
	color:#03a9f4;
	margin-bottom:5px;
}

#messagePanel{
	display:flex;
	flex-direction:row;
}
#messageBox{
	
}
	#messageList{
		
	}
#messageTabBox{
	display:flex;
	justify-content:space-around;
	font-weight:700;
	font-size:1.3em;
	margin-top:10px;
	
	
}
.messageTab{
	display:none;
}	

.messageTabText{
	border-width:1px;
	border-left-style:none;
	border-right-style:none;
	border-top-style:none;
	border-bottom-style:none;
	padding:5px;
	background-color:#FFF;
	z-index:0;
	color:#CCC;
	cursor:pointer;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
.tabChosen{
	border-left-style:solid;
	border-right-style:solid;
	border-top-style:solid;
	border-bottom-style:none;
	z-index:1;
	color:#000;
}

#messageAllTabs{
	border-style:solid;
	border-width:1px;
	z-index:0;
	position:relative;
	top:-1px;
	padding:3px;
}


.messageInputBox{
	display:flex;
	flex-direction:column;
	margin-bottom:5px;
}
.messageInputBox input{
	width:95%;
}
.messageInputBox textarea{
	width:95%;
}
	.messageInputBoxLabel{}
	.messageInputBoxText{}
	.messageInputBoxTextarea{
		
	}
	#messageInputMessage{height:4em;}
	
.messageToolBox{
	display:flex;
	justify-content:flex-end;
}

.messageToolBox .toolBoxMinimizer{
	margin-left:3px;
}

.messageToolIcon{
	font-family:fontawesomein;
	margin-right:8px;
	font-size:16px;
	cursor:pointer;
	color:#AAA;
}

.messageToolIcon:hover{
	color:#000;
	
}

#messagePopup{
	background-color:#04a9f4;
	color:#FFF;
	font-weight:700;
	padding:5px;
	position:absolute;
	font-size:14px;
	border-radius:2px;
}

/** DNIMap **/

#DNIMapContent{
	padding:0px;
	flex-basis:100%;
}
#divDNIMap {
	padding: 0px;
	margin: 0px;
	height: 300px;
	width: 100%;
	border-width:1px;
	border-style:solid;
}

#divDNIPad{
	border-style:outset;
	border-width:2px;
	background-color:#FFF;
	position:absolute;
	color:#000;
	padding:4px;
	opacity:0.9;
}

.DNIPadRow{
	display:flex;
	overflow-x:hidden;
}
.DNIPadRowCaption{
	flex-basis:35px;
	flex-shrink:0;
}
.DNIPadRowValue{}

.DNIPadInfoText{
	color:#00A;
	width:120px;
}
.DNIPadInstanceBox{
	display:flex;
	flex-wrap:wrap;
}

.DNIPadinstanceButton{
	cursor:pointer;
	padding:2px;
	margin:2px;
	border-radius:3px;
	background-color:#EE0;
}
.DNIPadinstanceButton:hover{
	background-color:#DD0;
}