/* ######################################################## */
/* Classes to set color to specific value */
.COLOR_MAIN
{
	color: var(--COLOR_MAIN);
}
.COLOR_BACKGROUND
{
	color: white;
}
.COLOR_ACTIVE
{
	color: var(--COLOR_ACTIVE);
}
.COLOR_POSITIV
{
	color: var(--COLOR_POSITIV);
}
.COLOR_WARN
{
	color: var(--COLOR_WARN);
}

/* ######################################################## */
/* body general stuff */
body
{
	margin: 0px;
	font-family: 'Roboto', sans-serif;
	height: 100%;
	font-family: Verdana, sans-serif;
	color: var(--COLOR_MAIN);
}

/* ######################################################## */
/* header stuff */
#headerWindow
{
	background: var(--COLOR_MAIN);
	color: white;
    min-height: 40px;
}

#helpPageButton
{
    margin: auto;
}

#openUserDialog 
{
    margin: auto;
    margin-right: 10px;
    color: var(--COLOR_BACKGROUND);
}

#headerWindow .far:hover
{
	color: var(--COLOR_ACTIVE);
}

#headerWindow .fas:hover
{
	color: var(--COLOR_ACTIVE);
}

#headerExtraSpace
{
    margin: 10px;
    flex: 1;
}
/* account menue class */
.usermenuElement
{
	margin: 10px;
}

/* logo in header */
.logo, .logoTitel
{
	width: auto;
	height: 30px;
	margin: 5px;
	margin-left: 15px;
}

/* ######################################################## */
/* footer */
#footWindow
{
	background: var(--COLOR_MAIN);
	min-height: 20px;
	max-height: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: white;
	font-size: 100%;
	bottom: 0;
	width: 100%;
	flex: 0 1 4vh;  
    font-size: 65%;
}

.impressum
{
	text-align: right;
	margin-right: 1.5em;
	color: white;
}

.impressum_text
{

	margin-right: 1.5em;
	color: white;
}

/* ######################################################## */
/* hoverable and active styles styles */
/* button/ div which is should be recognized as selectable */
.hoverableDiv
{
	border-radius: 8px;
	box-shadow: inset -1px -1px 3px var(--COLOR_MAIN80);
	margin: 1px;
	padding: 4px;
}
.hoverableDiv:hover
{
	cursor: pointer;
    transform: scale(0.95, 0.95);
}
.hoverableDiv:active
{
	transform: scale(0.9, 0.9);
}
/* fontAwesome which is should be recognized as selectable */
.fontAwesomeHoverable
{
	border-radius: 8px;
	box-shadow: inset -1px -1px 3px var(--COLOR_MAIN80);
	margin: 1px;
	padding: 4px;
    cursor: pointer;
}
.fontAwesomeHoverable:hover
{
	color: var(--COLOR_ACTIVE);
    transform: scale(0.95, 0.95);
}

.fontAwesomeHoverable:active
{
	transform: scale(0.9, 0.9);
}

/* ######################################################## */
/* fas styles */
.smallFas
{
	font-size: 100%;
	margin: 10px;
}

@media screen and (max-width: 780px)
{
	.menuElementLeft.fas,
	.menuElement.fas,
	.menuElement.fontawesome200
	{
		font-size: 100%;
	}
	.menuElement
	{
		margin: 5px;
	}
	.logo
	{
		height: 25px;
	}
	.menuElementUser
	{
		margin-left: 20px;
		margin-right: 20px;
	}
    
    .fontawesome100Percent
    {
        font-size: 400px;
    }
}

@media screen and (min-width: 780px)
{		
    .fontawesome150
	{
		font-size: 150%;
	}
    .fontawesome200
	{
		font-size: 200%;
	}
    .fontawesome300
	{
		font-size: 300%;
	}
    .fontawesome400
	{
		font-size: 300%;
	}
   .menuElementUser
	{
		margin-left: 50px;
		margin-right: 20px;
	}
    .fontawesome100Percent
    {
        font-size: 500px;
    }
}

/* ######################################################## */
/* drawing classes and elements */
#edgeDrawer
{
	width: 100%;
	height: 100%;
}

/* ######################################################## */
/* boarder styles */
.noBorder
{
	border-style: none;
}

/* boarder of all field accept input/select etc */
.defaultBorder
{
    border-style: solid;
    border-width: 1px;
    border-color: var(--COLOR_MAIN);  
    border-radius: 5px;
}
.defaultBorderInput
{
    border-style: solid;
    border-width: 1px;
    border-color: var(--COLOR_BUTTON);
    border-radius: 5px;
}

/* ######################################################## */
/* scrollable and overflow parts */
.scrollable
{
	overflow-y: auto;
	scrollbar-color: rgba(6, 44, 80, 1) white;
	scrollbar-width: thin;
}

.scrollableDiv
{
	height: 87%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-color: rgba(6, 44, 80, 1) white;
	scrollbar-width: thin;
}
/* ######################################################## */
/* structural elements to organize page */
/* centerize block, need to defined before felx container classes */
.allCenterBlock
{
	margin: 0 auto;
	flex: 0 1 auto;
}
/* flex container */
.flexCenter
{
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	justify-content: center;
}
.flexColumnContainerMaxHeight
{
	min-height: 100vh;
	max-height: 100vh;
}

.flexColumnContainer
{
	display: flex;
	flex-direction: column;
}
.flexRowContainer
{
	display: flex;
	flex-direction: row;
}

.flexDisplay
{
	display: flex
}
.flexColumnDirection
{
	flex-direction: column;
}
.flexColumnZero
{
	flex: 0 0;
}
.flexColumnOne
{
	flex: 1;
}
.flexColumnTwo
{
	flex: 2;
}

.flexRowWrap
{
	flex-wrap: wrap;
}
.flexRowZero
{
	flex: 0 0;
}
.flexRowOne
{
	flex: 1;
}
.flexRowTwo
{
	flex: 2;
}

/* ######################################################## */
/* structual style elements need to structal page but have styling as well*/
/* flex row with border bottom line*/
.topline
{
	align-items: center;
	display: flex;
	margin-left: 15px;
	margin-right: 15px;
	border-bottom: var(--COLOR_MAIN);
	border-bottom-style: solid;
	padding-bottom: 5px;
	padding-top: 5px;
	margin-bottom: 5px;
}

/* vertical line */
.vl 
{
    border-left: 1px solid gray;
    height: 41px;
}

.space
{
	width: 50px;
}
.floatRight
{
	float: right;
}
/* to hide elements over allways not user relevant stuff */
.displayNone
{
	display: none;
}

.objectCenter
{
    margin: auto;
}

.fullWitdh {
  width: 100%;
}

.visibilityHidden
{
	visibility: hidden;
}

/* ######################################################## */
/* upload window */	
#uploadFileHintsFromServer, #uploadFileMessageFromServer {
  max-width: 270px;
  width: 270px;  
  margin: 5px;
  overflow: auto;
  transform: translateX(-5px);
}

.uploadImageDialogForm
{
    margin: auto;
}

/* ######################################################## */
/* jquery fixes, needed to overwrite jquery styles */
.noTitleStuff .ui-dialog-titlebar 
{
    display: none;    
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.noTitleStuff.ui-draggable
{
    border-radius: 10px;
    border: 5px;
    border-style: solid;
    margin: 0;
    padding: 0;
    border-color: var(--COLOR_MAIN);
}

.noTitleStuff .ui-dialog-content.ui-widget-content
{
    padding: 0px;
    border-radius: 4px;
}

/* ######################################################## */
/* table styles */
/* each table must have this class */
.portalTableStyle
{
    border-spacing: 0;
}

.portalTableStyle td, .portalTableStyle th 
{
    border: 1px solid #dadada;
    text-align: left;
    padding: 5px;
    word-wrap: break-word;
}

.portalTableStyle tr:nth-child(even):not(.hoverRow:hover)
{
    background-color: #ececec;
}

.portalTableStyle tr.hoverRow:hover
{
    background-color: var(--COLOR_ACTIVE);
    cursor: pointer;
}
/* sort icons in table header shoud have this class */
.sort
{
	float: right;
	padding: 2px;
	padding-top: 0px;
    height: 24px;
	font: 16px Calibri,sans-serif;
	background-color: #FFFFFF;
	color: #7E96AD; 
    width: 16px;
}

/* ######################################################## */
/* stuff for a bar direct under header to be a menue with elements */
#toolBar
{
	background: LightGray;
	color: white;
	padding: 5px 20px 5px 5px;
}
#toolBar .far:hover
{
	color: var(--COLOR_ACTIVE);
}
#toolBar .fas:hover
{
	color: var(--COLOR_ACTIVE);
}
.toolMenuElement
{
	float: left;
	color: var(--COLOR_MAIN);
	margin-left: 4px;
	margin-right: 4px;
}
.toolMenuElementRight
{
	float: right;
	color: var(--COLOR_MAIN);
	margin-left: 10px;
}

/* ######################################################## */
/* selected and hoverable elements */
/* menue buttons which should be highlighted with default*/
.selectedMenuElement
{
	background-color: var(--COLOR_BUTTON);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	box-shadow: inset -1px -1px 3px 0px;
	border-style: groove;
	color: var(--COLOR_WARN);
	font-size: 13px;
}

/* menue buttons which should be highlighted and displayed as positiv/activ element */
.activMenuElement
{
	background-color: var(--COLOR_BUTTON);
	text-align: center;
	color: var(--COLOR_POSITIVDark);
	font-size: 13px;
}

/* ######################################################## */
/* Tooltip text */
/* add it to div container of span */
.tooltip
{
	position: relative;
}
.tooltip.inline-block
{
	display: inline-block;
}

/* Span with tooltip*/
.tooltiptext, .tooltiptextLong
{
	visibility: hidden;
    background-color: var(--COLOR_BACKGROUND_CONTRAST_LIGHT);
    color: #000;
    text-align: center;
    padding: 5px;
    transform: translateY(5vh);
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    border-color: var(--COLOR_MAIN);
    border-style: solid;
    border-width: 1px;
    min-width: 40px;
}

/*default size tooltip */
.tooltiptext
{
	max-width: 140px;
}
/* long Tooltips */
.tooltiptextLong
{
	max-width: 400px;
}

/* Tooltip on top of adressed element */
.tooltiptextTopShort
{
	transform: translate(10%, -3vh);
}
.tooltiptextRightLong
{
	transform: translate(20%, -2vh);
}
.tooltiptextTopRight
{
	transform: translate(10%, -4vh);
}
.tooltiptextTop
{
	transform: translate(10%, -6vh);
}
.tooltiptextTopLeft
{
	transform: translate(-100%, -6vh);
}

/* Tooltips under adressed element */
.tooltiptextRightShort
{
	transform: translate(10%, 3vh);
}
.tooltiptextRightUnder
{
	transform: translate(10%, 0vh);
}

.tooltiptextRightEqualLine
{
	transform: translate(100%, 0vh);
}

/* special Tooltips */
.tooltiptextMiddle
{
	transform: translate(-50%, 5vh);
}
.tooltiptextMiddleShort
{
	transform: translate(-50%, 3vh);
}
.tooltiptextLeft
{
	transform: translate(-100%, 5vh);
}
.tooltiptextLeftEqualLine
{
	transform: translate(-100%, 0vh);
}

.tooltiptextLeftShort
{
	transform: translate(-100%, 1vh);
}

/* all tooltips should be visible by hover adressed element */
.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptextFixt,
.tooltip:hover .tooltiptextLong
{
	visibility: visible;
}

/* all tooltips with this class should be vanish after 2s, this hsould be the default case! */
.tooltip:hover .tooltiptext.vanishToolTip,
.tooltip:hover .tooltiptextFixt.vanishToolTip,
.tooltip:hover .tooltiptextLong.vanishToolTip
{
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}

/* ######################################################## */
/* link styles */
a.anchorstyle
{
	width: 100%;
}
a.anchorstyle:link
{
	text-decoration: none;
}
a.anchorstyle:visited
{
	text-decoration: none;
}
a.anchorstyle:active
{
	text-decoration: none;
}
a.anchorstyle:hover
{
	
	text-decoration: none;
}
a
{
    color: inherit;
	text-decoration: none;
}
a.ohne 
{
	text-decoration: none;
	color: #7E96AD;
	border-bottom: no;
	cursor: pointer;
}


/* ######################################################## */
/* disabled styles */
input[disabled]
{
    cursor: not-allowed;
}

/* ######################################################## */
/* error handling */
.errorfield
{
	color: red;
}

.errorfieldBorder
{
    border: solid;
    border-color: var(--COLOR_WARN);
}

.borderColorRed
{
	border-color: red;
}

/* ######################################################## */
/* animation */
@keyframes fadein{
    0% { opacity:1; }
    50% { opacity:1; }
    100% { opacity:0; }
}

@-webkit-keyframes fadein{
    0% { opacity:1; }
    50% { opacity:1; }
    100% { opacity:0; }
}

/* ######################################################## */
/* special stuff */
/*Busy overlay*/
#BusyOverlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: progress;
	z-index: 10000;
	display: none;
}