@CHARSET "UTF-8";

@font-face{
    font-family: 'OpenSans';
    src: url('fonts/open-sans/OpenSans-Regular.ttf');
}

body{
	font-family:OpenSans, Arial, Sans-Serif;
	font-size:14px;
	color:black;
}
a{
	color:black;
}
li a{
	display:block;
}
img{
	border:none;
}
img.doku{
	border:1px solid grey;
	box-shadow:10px 20px 30px grey;
}
input, textarea, select{
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:1px inset silver;
	padding:3px;
	margin:1px;
	font-family:Verdana, Arial, Sans-Serif;	
	font-size:14px;
}
input{
	width:200px;
}
input:focus, textarea:focus{
	/*
	background-color:silver;
	color:white;
    */
}
input[type=date]{
	width:140px;	
}
input[type=time]{
	width:80px;	
}
input[type=submit]{
	background-image:url(images/buttonbg.png);
	width:120px;
	height:30px;
	color:white;
	border:1px outset silver;	
	font-size:14px;
}
input[type=button] , button{
	background-image:url(images/buttonbg.png);
	width:170px;
	height:25px;
	color:white;
	border:1px outset silver;	
}
input[type=checkbox]{
	width:20px;	
}
div.formElement{
	border-radius:5px;
	padding:3px;
}
input[type=radio]{
	margin-left:60px;
	height:20px;
}
input[type=file]{
	width:auto;
}
input.filtern_button {
	width:85px;
}

span.radioButtonLabel{	
	margin-left:-80px;
}
span.checkboxButtonLabel{	
	margin-left:0px;
}
div#appframe{
	margin:0px auto;
}
div#headline{
	width:100%;
	height:96px;
	/*background-image:url(images/headlinebg.jpg);*/
	border-bottom:1px solid silver;
	background-color:white;
	z-index:1000;
	
}
img#logo{
    height:70px;
}
div#project_switch{
	position:absolute; 
	margin-left:90px; 
	margin-top:-100px; 
	width:500px;
}

a.ticketTemplateSelectBox{
	display:block;
	width:150px;
	height:50px;
	float:left;
	margin:5px;
	text-align:center;
	text-decoration:none; 
	box-shadow:5px 5px 5px silver;
	border:1px solid silver;
	border-radius:5px;
	
	padding:10px;
	display:flex;
	align-items:center;	
	justify-content: center;	
	
}

div.feedbackTemplateSelectBox{
	display:block;
	width:150px;
	height:40px;
	float:left;
	margin:5px;
	text-align:center;
	text-decoration:none; 
	box-shadow:5px 5px 5px silver;
	border:1px solid silver;
	border-radius:5px;
	background-color:#878787;
	color:white;
	
	padding:0px;
	display:flex;
	align-items:center;	
	justify-content: center;
	
	cursor:pointer;	
	
}

a.ticketListWorkflowStepShowHideLink{
	background-color:#878787;
	color:white;
	padding-left:5px;
	padding-right:5px;
	border-radius:3px;
	text-decoration:none;
}
a.ticketListWorkflowStepShowHideLink.hidden{
	background-color:white;
	color:grey;
}
a.ticketListWorkflowStepShowHideLink.shown{
	background-color:grey;
	color:white;
}

div.attachmentLink{
	margin-left:150px;
}


div#projectHomeAttachmentsHeader{
	font-style:italic;
	margin-top:10px;
	margin-bottom:10px;
}

/* vertical menu */
div#menu{
	width:170px;
	height:100%;
	border:none;
	position:relative;
	margin-top:-12px;

}
ul.menu{
	margin-left:-40px;
	margin-top:0px;
	list-style-type:none;
	visibility: hidden;
	-moz-transition-property: visibility;
	-moz-transition-duration: 150ms;
	-webkit-transition-property: visibility;
	-webkit-transition-duration: 150ms;
	transition-property: visibility;
	transition-duration: 250ms;
}
ul#mainmenu{
	visibility: visible;
}

ul#mainmenu li:hover > ul{
	visibility: visible;
}
ul.menu li img{
	height:18px;
	margin-left:5px;
	margin-right:5px;
}

ul.menu.level0 li{
	width:190px;
	height:25px;
	font-size:16px;
	text-align:left;
	padding-left:3px;
	background-color:#f4f4f4;
	border-left:1px solid silver;
	border-top:1px solid #f4f4f4;
	border-right:1px solid silver;
	border-bottom:1px solid silver;
	cursor:pointer;
	color:black;
	float:left;
	margin-left:-2px;
	z-index:1003;
}
ul.menu.level0 li:hover{
	background-color:white;
	border-left:1px solid #e2e1e1;
	border-top:1px solid #e2e1e1;
}
ul.menu.level0 li a{
	color:black;
	text-decoration:none;
}
ul.menu.level1{
	margin-left:150px;
	margin-top: -23px;
}
ul.menu.level1 li{
	width:190px;
	height:25px;
	text-align:left;
	background-color:#f4f4f4;
	background-image:none;
	border-top:1px solid white;
	border-left:1px solid #f4f4f4;
	border-left:1px solid silver;
	border-bottom:1px solid #e2e1e1;
	border-right:1px solid #e2e1e1;
	cursor:pointer;
	box-shadow:3px 3px 3px grey;
	position:relative;
	z-index:1002;
	margin-left:-2px;
}
ul.menu.level1 li:hover{
	background-color:white;
	border-left:1px solid #e2e1e1;
	border-top:1px solid #e2e1e1;
}
ul.menu.level2{
	margin-left: 150px;
	margin-top: -22px;
}
ul.menu.level2 li{
	width:190px;
	height:24px;
	text-align:left;
	background-color:#f4f4f4;
	background-image:none;
	border-top:1px solid white;
	border-bottom:1px solid #e2e1e1;
	border-right:1px solid #e2e1e1;
	position:relative;
	z-index:1001;
	margin-left:-2px;
}
ul.menu.level3{
	margin-left: 150px;
	margin-top: -22px;
}
ul.menu.level3 li{
	width:190px;
	height:24px;
	text-align:left;
	background-color:#f4f4f4;
	background-image:none;
	border-top:1px solid white;
	border-bottom:1px solid #e2e1e1;
	border-right:1px solid #e2e1e1;
	position:relative;
	z-index:1000;
	margin-left:-2px;
}
div#mainarea{
	margin-left:220px;
	margin-top: 10px;
	padding:5px;
	position:relative;
	min-height:500px;
	z-index:	0;
}
div#mainarea:after{
	content: '';
	display: block;
	clear: both;
}
/* end vertical menu */


div#footer{
	width:100%;
	border-top:1px solid silver;
	font-size:smaller;
}
fieldset{	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
	border:1px solid silver;
	position:relative;
}
fieldset.small{
	width:400px;
	float:left;
	position:relative;
}
fieldset.error {
	border:1px solid #CC0000;
}
fieldset legend{
	color:grey;
	font-size:16px;
}
fieldset legend.error{
	color:#CC0000;
	font-size:16px;
}

fieldset#ticket label{
	margin-left:5px;
}
fieldset.formTopper{
	background-color:#f4f4f4; 
	box-shadow:3px 3px 3px silver; 
	margin-bottom:10px;
}
fieldset.formTopper div.strong{	
	font-weight:bold;
	font-size:larger;
}
label{
	margin-left:10px;
	width:140px;
	display:block;
	float:left;
}
.button{
	background-image:url(images/buttonbg.png);
	color:black;
	font-weight:bold;
}
div.message{
	position:absolute;
	z-index:9999;
	width:300px;
	height:200px;
	left:20%;
	top:100px;
	padding:5px;
	background-color:white;
	color:grey;
	font-size:11pt;
	box-shadow:3px 3px 3px grey;
}
div.message.error{
	border:1px solid red;
}
div.message.info{
	border:1px solid silver;
}
div.messageHeader{
	border:1px solid #878787;
	padding:2px;
	cursor:pointer;
	background-color:#878787;
	text-align:right;
	color:white;
}


.label{
    font-family: OpenSans, Arial, Sans-Serif;
    font-size: 14px;
    color: black;
    margin-left: 10px;
    width: 140px;
    display: block;
    position:relative;
    float: left;

}

h1{
	font-size:14pt;
	color:#878787;
}
h1 img{

}
h2{
	font-size:13pt;
	color:#014596;
}
table.layout{
	border:none;
}
table.layout td{
	border:none;
	font-family: Verdana,Arial,sans-serif;
    font-size: 14px;	
}
table{
	margin-left:20px;
	border-left:1px solid #878787;
}
form{
	width:100%;
	margin:auto;
}
form#currencyDetailForm label{
	width:150px;
}
form#exportTabDefForm label{
	width:200px;
}
th{
	padding:5px;
	border:1px solid #878787;
	background-color:#878787;
	color:white;
	font-size:14px;
}
th a{
	color:white;
}
th.weekend{
	background-color:#96b532;
}
th.today{
	background-color:#216de5;
}
td{
	padding:5px;
	border-right:1px solid #878787;
	border-bottom:1px solid #878787;
	font-size:14px;	
	vertical-align:top;
}
td.subth{
	background-color:#878787;
	
}
td.weekend{
	background-color:silver;
}
table.layout tr td{
	border:none;
}
table#treeview tr td{
	border:none;
}
.popup_calendar{
	position:absolute;
	font-size:10px;
	background-color:white;	
}
.popup_calendar a{
	text-decoration:none;
}
table.cpBorder td{
	padding:0px;
	background-color:white;
}
.cpMonthNavigation{
	background-color:grey;
	color:white;
}
.cpCurrentDate{
	background-color:grey;
	color:white;
}

textarea{
	width:250px;
	height:50px;
	font-family:Verdana, Sans-Serif;
	font-size:14px;
}
.filter{
	width:120px;
}
span.infoPopup{
	position:absolute;
	width:300px;
	height:300px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
	border:2px solid #a2c825;
	background-color:white;
	color:black;
	padding:2px;
	margin-top:20px;
	overflow:auto;
}

span.infoPopup div.headline{
	color:#a2c825;;
}
.checkbox{
	font-weight:bold;
}
.guiTableFilterField{
	
	width:90%;
	max-width:90%;
	min-width:1%;
	
}

tr.newEntry{

}

div#hmenu{
	display:none;
}

div.formtabtrigger{
	float:left;
	padding:5px;
	background-color:white;
	color:black;
	cursor:pointer; 
}
div.formtabtrigger.active{
	float:left;
	padding:5px;
	background-color:silver;
	color:white;
}
div.formtab{
	border-top:3px solid red;
	border:1px solid silver;
}

div#ticketpopup{
	position:absolute;
/* 	right:200px; */
	left:6px;
	top:760px;
	border:1px solid red;
	box-shadow:0px 0px 3px red;	
	background-color:white;
}
div#ticketpopup div.headline{
	padding: 3px;
	background-color:red;
	color:white;
}
div#ticketpopup div.content{
	padding: 5px;
	min-height:100px;
	/* overflow:auto; */
}
div#ticketpopup div.content a{
	text-decoration:none;
}



option:disabled{
	color:#b9b9b9;
	background-color:#eee;
}


option:checked{
	background-color:#cecece;
	
}

.optionInactiveFB{
	color:#b9b9b9;
	background-color:#fff;
}
.optionInactiveFB:checked{
	color:#fff;
/* 	background-color:#dedede; */
}



div.QRCodeReader{
	width:250px;
	margin-left:150px;
}

#homeButton{
	 
	 width:35px; 
	 height:30px;
	 position:relative;
	 display:inline-block;
	 top:10px;
	 background-image:url('./images/icon_home.png');
	
}

.measurement textarea {width:120px;height:2em;}

.tableexport-caption{
	caption-side: top;
	text-align: left;
	
}

.xlsx{
	background-image: url("./images/icon_xls.png");
	background-repeat:no-repeat;
	border:none;
	width:23px;
	height:27px;
	color:transparent;
	cursor:pointer;
	margin-right:10px;
}
.csv{
	background-image: url("./images/icon_csv.png");
	background-repeat:no-repeat;
	border:none;
	width:23px;
	height:27px;
	color:transparent;
	cursor:pointer;
	margin-right:10px;
}
.txt{
	background-image: url("./images/icon_txt.png");
	background-repeat:no-repeat;
	border:none;
	width:23px;
	height:27px;
	color:transparent;
	cursor:pointer;
}

#globalhelpOuter, #TableManupulatorOuter{
	padding-left:5px;
	font-size:0.8em;
	text-align:right;

	
}

#globalhelpTrigger:hover, #TableManupulatorInnerTrigger:hover{
	cursor:pointer
	
}

#globalhelpInner, #TableManupulatorInner{
	margin-top:10px;
	border:1px solid silver;
	box-shadow:3px 3px 3px silver; 
	font-size:14px;
	position:relative;
	width:90%;
	height:auto;
	background-color:#fff;
	padding:10px;
	text-align:left;
	
}

#projecthelp{
	border-top:1px dotted silver;
}

.globalhelpInnerLabel, .TableManupulatorInnerLabel{
	display:none;
	position:relative;
	
}
#inputHelp{
	margin-top:10px;
	
	
}
.gHeditBtn{
	display:block;
	position:relative;
	margin-right: 0;
	margin-left:auto;
	height:2em;
	width:2em;
/* 	border:1px solid red; */
	background-image:url('images/icon_edit.png');
	background-repeat:no-repeat;
	background-position: right;
	opacity:0.7;
	font-size:1em;
	font-weight:bold;
	line-height:3em;
	letter-spacing:.2rem;
	
}
.gHeditBtn:hover{
	cursor:pointer;
}


.absencecalendar.datediv {
	width:100%;
	text-align:center;
}
.absencecalendar.date-display {
	text-align:center;
	margin:0 auto;
	font-size:20px;
	border:1px solid red;
	width:auto;
}

@media only screen
	and (max-width: 1024px)
	and (orientation: portrait){
	
	div#ticketpopup{
		display:none;
	}
	div#headlineUserClient{
        display:none;
	}        
	div.QRCodeReader{
		width:250px;
		margin-left:0px;
	}	
	
	table#globalTicketList th, table#projectTicketList th{
		display:none;
	}
	table#globalTicketList td, table#projectTicketList td{
		width:98%;
		float:left;
	}
	table#globalTicketList td a img, table#projectTicketList td a img{
		height:50px;
	}
	table#globalTicketList tr, table#projectTicketList tr{
		margin-top:10px;
	}
	table#globalTicketList tr:nth-child(odd), table#projectTicketList tr:nth-child(odd){
		background-color:silver;	
	}
            
        
    iframe#webtimetracker{
        display:none;
    }
	
	div#headline{
		height:130px;
	}
	
	form{
		width:98%;
	}	
	img#logo{
		height:50px;
	}

	div#project_switch{
		position:absolute; 
		margin-left:-150px; 
		margin-top:-42px; 
		margin-top:-20px;
		width:500px;
	}	
	
	div#hmenu{
		display:block;
	}
	
	div#menu{
		display:none;
		position:absolute;
		margin-top:0px;
		z-index: 1;
	}	
	
	div#mainarea{
		margin-left:0px;
		margin-top: 0px;
		padding:5px;
		position:relative;
		z-index: 0;
	}	
	
	/* vertical menu */
	div#menu{
		width:94%;
	}
	
	ul.menu.level0 li{
		width:100%;
		height:100%;
		font-size:20px;
		padding:10px;
	}
	ul.menu.level1{
		margin-left:-51px;
		margin-top: 10px;
		display:block;
	}
	ul.menu.level1 li{
		width:97%;
		height:100%;
		margin-left:30px;
		padding:5px;
		box-shadow: 2px 2px 2px #cecece;
	}

	ul.menu.level2{
		margin-left:-51px;	
		margin-top: 0px;
		display:block;
	}
	ul.menu.level2 li{
		width:98%;
		height:100%;
		margin-left:40px;
	}
	/* end vertical menu */	
	#homeButton{
		top:5px;
		
		
	}
}

@media print{
	div#headline{
		display:none;		
	}
	div#menu{
		display:none;
	}
	div#footer{
		display:none;
	}
	div#mainarea{
		width:100%;
	}
}



#mobilemap {
	width: 100%;
	padding-bottom: 50px;
}

#mobilemap label {
	margin-left: 0px !important;
	width: 100% !important;
	float: none !important;
}

#mobilemap input {
	margin-left: 0px !important;
	width: 80% !important;
	min-height: 20px;
	float: none !important;
}


#mobilemap input.button-lang {
	margin-top: 15px;
	width: 100% !important;
	min-height: 20px;
}

#mobilemap #settings input,#mobilemap #settings select{
	width: 100% !important;
	min-height: 20px;
	margin-bottom: 10px;
}



#mobilemap .resetFormField,#mobilemap .resetAddress {
	padding: 5px 10px;
	border: 1px solid black;
	border-radius: 50%;
	margin-left: 10px;
}

#mobilemap #map {
	width: 100% !important;
	min-height: 450px !important;
}

#mobilemap .mapticketsentry {
	margin-bottom: 5px;
	padding: 10px 10px;
}

#mobilemap #addWayPointDiv {
	margin: 10px 0px;
}

#mobilemap #addWayPointDiv #addwaypoint {
	border: 1px solid black;
	padding: 5px;
	background-color: #eeeeee;
}

#mobilemap .adp-fullwidth, #mobilemap .adp-directions {
	margin-left: 0px !important;
}



#mobilemap .buttons {
	display: flex;
	margin-top: 15px;
}

#mobilemap .buttons div {
	flex-direction: column;
	width: 50%;
}

#mobilemap .buttons div .button {
	min-height: 35px;
}

/* Style die Tab-Buttons als Flex-Container */





/* Verstecke den Inhalt aller Tabs, außer dem ersten */
.tabcontent {
  display: none;
}

/* Style die Tab-Buttons */
.tab button {
  flex: 1;
  background-color: #f2f2f2;
  border: none;
  outline: none;
  cursor: pointer;
	padding: 10px 0px;
  transition: 0.3s;
}

.tab button:last-child {
	padding: 3px 0px;
}

/* Ändere den Hintergrund des aktiven Tabs */
.tab button.active {
  background-color: #ccc;
}

/* Style den Container für die Tabs */
.tab {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  overflow: hidden;
}


/* Optional: Style die Überschriften der Tabs */
.tab h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Optional: Style den Textinhalt der Tabs */
.tab p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 20px;
}


#wartung{
background-color:white;
font-size:12px;
/* color:#fff; */
color:tomato;
border:2px solid tomato ;
padding:10px;
width:550px;


}

.tablink {text-align:center; font-weight:bold; cursor: pointer; font-size:150%;}
.cal-third{float: left;width:30%;padding:0 8px;}
.cal-container{position:relative; z-index: 1; top:0; }
.cal-bottombar{border-bottom:6px solid #ccc !important}
.cal-border-red,.cal-hover-border-red:hover{border-color:#f44336!important; background-color:#f1f1f1!important;}
.cal-hover-light-grey:hover {color:#000!important;background-color:#f1f1f1!important}
.cal-padding-small{padding:4px 8px!important}.cal-padding{padding:8px 16px!important}.cal-padding-large{padding:12px 24px!important}
.cal-padding-16{padding-top:16px!important;padding-bottom:16px!important}.cal-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.cal-padding-32{padding-top:32px!important;padding-bottom:32px!important}.cal-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.cal-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.cal-padding-top-64{padding-top:64px!important}.cal-padding-top-48{padding-top:48px!important}
.cal-padding-top-32{padding-top:32px!important}.cal-padding-top-24{padding-top:24px!important}


.btn-open-popup {
	padding: 12px 24px;
	font-size: 18px;
	background-color: green;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.btn-open-popup:hover {
	background-color: #4caf50;
}

.overlay-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index:9999;
}

.popup-box {
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
	width: 320px;
	opacity: 0;
	transform: scale(0.8);
	animation: fadeInUp 0.5s ease-out forwards;
}

.form-container {
	display: flex;
	flex-direction: column;
}

.form-label {
	margin-bottom: 10px;
	font-size: 16px;
	color: #444;
	text-align: left;
}

.form-input {
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
}

.btn-submit,
.btn-close-popup {
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-submit {
	background-color: green;
	color: #fff;
}

.btn-close-popup {
	margin-top: 12px;
	background-color: #e74c3c;
	color: #fff;
}

.btn-submit:hover,
.btn-close-popup:hover {
	background-color: #4caf50;
}

/* Keyframes for fadeInUp animation */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Animation for popup */
.overlay-container.show {
	display: flex;
	opacity: 1;
}

.calendar_entry {
	padding:2px;
	margin:2px;
	border-bottom:1px solid black;
}
.calendar_entry a {
	text-decoration:none;
}

.button_2 {
	font-size:24px;
	line-height:50px;
	text-decoration: none;
	background-color: #EEEEEE;
	color: #333333;
	padding: 10px 20px;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #CCCCCC;
}
.button_2:hover {
	background-color: #CCCCCC;
}
.button_2.active {
	background-color: #CCCCCC;
}