/**
 * web4job
 *
 * @version    2018-12-15 13:00 CS
 * @copyright  2018, Jürgen Hund
 * @license    http://web4job.ch/lizenz/
 * @link       http://web4job.ch
 * @author     Jürgen Hund http://www.web4job.ch
 * @author     Christian Schöller http://www.c-sys.de
 *
 * #status: ok
 * #changelog: 2018-03-07 12:30 CS,2018-11-08 11:15 CS,2018-12-06 14:00 CS
 */

.center {
	text-align:center;
}

/*div{box-sizing:border-box;}*/
.td16 td,.td16 th {padding-right:16px !important;}
.tnowrap td, .tnowrap th {white-space:nowrap;}


ol {
	padding:10px;
	margin:0;
}

caption {
	padding:4px;
}

/* Common */

table.plan_user th,table.plan_user td{
  padding:1px 1px !important;
	overflow:hidden !important;
}

table.plan th,table.plan td{
 /* padding:0px 0px;*/
}
.tbl1, .tbl2, .tbl3
        {
            border-collapse: collapse;
            border: solid 1px gray;
        }

table.tlist td, table.tlist th{padding:0.25em 0.5em;}

#content {
	margin-right:auto;
	margin-left:auto;
	width:1100px;
	width:1300px;
	position:relative;
	zoom:1;}

.noaccess {
	margin-left:10px;
	margin-top:60px;
	color:red;
}
.login {
	margin-left:auto;
	margin-right:auto;
}

.ficon {float:left; margin-right:0.5em;}

.login > div {
	width:360px !important;
}


.date td a {
	display:inline-block;
	padding:3px 8px;
}

.date th, .date td {
	text-align:center;
	padding:3px;
}

/* Box */

.box {
	font-size:13px;
	margin:0 0 10px 0;
	position:relative;
	border:1px solid;
}

.box h2, .box p, .box table {
	margin:0;
}

.nowrap{white-space:nowrap;}
.bw{
	word-wrap:break-word;
	word-break:break-all;
}

ox h2 {
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	padding:2px 10px;
	cursor:move;
}

.utils a {
	position:absolute;
	top:5px;
	right:10px;
	border:1px solid;
	padding:4px 8px;
}

.box p {
	padding:10px;
}

.div-window-main{
	z-index:1000;
	border:1px solid gray;
	background:#fff;
	position:absolute;
	min-width:740px;
	top:0px;
	left:0px;
}

	.div-window-main-label{
		font-weight:bold;
		width:auto;	
		min-width:120px;
		display:inline-block;
	}

/* Typography */

label, #navigation, .error, .success, input[type="submit"], input[type="reset"]  {
	font-weight:bold;
}

h1, h2, h3, h4, h5, h6 {
	border-bottom:1px solid;
}

a:hover {
	text-decoration:none;
}

a.edit, a.delete, a.undelete, a.erase, a.unerase, a.copy, a.archiv, a.show, a.save, a.ainfo, a.ok, a.notok, a.write, a.action, a.flame, a.email, a.locked, a.key, a.timer, a.plus, a.login, a.search, a.searchc, a.print, a.plan, a.pdf, a.ligthning, a.forward, a.fastforward, a.display, a.speak, a.no_speak, a.form, a.qrcode, a.hide {
	padding-left:25px;
	background-repeat:no-repeat;
	background-position:left center;
}
.notice {
	padding-left:20px;
	background-repeat:no-repeat;
	background-position:left top;
}
a {
	padding:4px;
}

/* Table styling */

table {
	width:100%;
}

th, td {
	padding:0.25em;
	text-align:left;
}
.import td{
  padding:0px 0px;
  padding:0px;
}

/* Header */

#head {

	position: fixed;
  	top: -10px;
  	left: 0;
  	right: 0;
    z-index: 100;

	border:0;
	margin:10px auto 0 auto;
	padding:3px 30px;
	width:auto;
	height:24px;
	box-shadow:20px 20px 20px rgba(64,32,0,0.28);
	/*
	border-bottom-left-radius:30px;
	border-bottom-right-radius:30px;
	*/

}

#head_area{
 position:absolute;
 padding-left:8px;
 right:30px;
 top:2px;
 font-size:0.9em;
 border-left:1px solid #636363;
}

/* Nagivation neu*/

#nav {position: relative;
	z-index:1004;
	top: 30px;
	height:32px;
	background:#313230;
	width:1340px; 
	border: 0 none;
    margin: 0px auto 0;
    padding: 2px 20px;
    width: 1600px;
	border-top:0.5px solid  #636363;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	 box-shadow:20px 20px 20px rgba(64,32,0,0.28);
	}
#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;}
#nav li a {  display:block; text-align:center; color:#d1d1d1;background:#313230;border-right:1px solid #636363;height:20px;  text-decoration:none;}
#nav li a:hover { color:#FFFFFF;}
#nav ul ul { display:none; position:absolute; z-index:999; background-color:#313230; padding-bottom:20px;border-bottom-left-radius:20px;
	border-bottom-right-radius:20px; box-shadow:20px 20px 20px rgba(64,32,0,0.28);}
#nav li li { float:none;}
#nav li li a { background:#313230; text-align:left; height:auto; line-height:1; width:auto; padding:16px 20px 0px 22px;  border-top:none; margin-right:0;}
* html li li { display:inline; } /* IE6 Bugfix... */

@media screen and (max-width:740px) {
	#copyright{display:none !important;}
	#w4j_logo{display:none !important;}
}			
@media screen and (max-width:440px) {
	#foot{display:none !important;}
}

/* Nagivation */

#navigation {
	-moz-border-radius-bottomleft:10px;
	margin:0 auto 10px auto;
	padding:10px 30px;
	width:160px;
}

#navigation > li {
	display:inline;
	margin:0
}

#navigation > li > a, #navigation > li > span {
	display:inline-block;
	padding:5px 10px;
	text-decoration:none;
}

/* Content */

#content {
	
	top:46px;
	padding:30px 20px 50px 20px;
	border-radius: 20px;
}

#foot {
   	position: fixed;
   	bottom: 0;
  	left: 0;
  	right: 0;

	border: 0 none;
    margin: auto;
    padding: 4px 30px;
    width: auto;
box-shadow:0px 0px 5px 5px rgba(255,255,255,0.8);
/*
box-shadow:0px 0px 5px 5px rgba(255,165,0,0.5);
		border-top-left-radius:30px;
	border-top-right-radius:30px;
*/
}

.curved, #navigation a, #navigation span, .error, .success, .box, .utils a {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-top-right-radius:5px;
}

.curved-alt, input, textarea, select, .box, .date td a, .utils a  {
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-top-left-radius:5px;  
} 

.pagination a{
	text-decoration:none;
}
/* Forms */

label {
	display:block;
	
	margin:0 0 5px;
	position:relative;
}

small {
	font-size:12px;
	font-weight:normal;
	padding-left:10px;
}

input, textarea, select{
	border:1px solid;
	font-family:inherit;
	font-size:inherit;
	padding:4px;
	margin-bottom:1em;
} 

.connected{
	white-space:nowrap;
	display:inline;
}



select {
	padding-top:3px;
	padding-bottom:3px;
}

input[type="submit"], input[type="reset"], input[type="button"] {
	cursor:pointer;
	width:auto !important;
}

/* Error and Success messages */
.error, .success {
	padding:4px 8px;
}

/* Pagination */
.pagination {
	text-align:right;

}
.pagination a, .pagination span {
	display:inline-block;
	margin:0 2px;
	padding:2px 6px;
  
}

table.calendar td,table.calendar th{

    padding:1px;
    font-size:12px;
    border-bottom:1px solid gray;
    border-right:1px solid gray;
    border-left:1px solid gray;
    width:20px;
}

.shadow{

  filter:alpha(opacity=50); /* IE */
  -moz-opacity:0.5; /* Gecko-Browser */
  opacity:0.5; /* Opera 9+ */
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  z-index:999;
  background:#000000;
 
}
.shadow2{

  filter:alpha(opacity=50); /* IE */
  -moz-opacity:0.5; /* Gecko-Browser */
  opacity:0.5; /* Opera 9+ */
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  z-index:1000;
  background:#000000;
 
}

	.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 250px;
		}
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }
		* html a:hover { background: transparent; }
		.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
		.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
		.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
	
.shadow{

  filter:alpha(opacity=50); /* IE */
  -moz-opacity:0.5; /* Gecko-Browser */
  opacity:0.5; /* Opera 9+ */
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  z-index:999;
  background:#000000;
 
}
.plan{

  padding-left:1px;
}

.divClass{ 
	          position:absolute;
	          z-index:999;
            /* padding: 7px;
	          background-color: #990000;
	          border: 1px solid #000000;
	        	 color: #ffffff;
						 */
        }

/* css for timepicker */
			.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
			.ui-timepicker-div dl { text-align: left; }
			.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
			.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
			.ui-timepicker-div td { font-size: 90%; }
			.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.plan3_div, .plan4_div {
 
 border-right:1px solid gray;
 border-bottom:1px solid gray;
 font-size:9px;
 padding:0px;
 vertical-align:top;
 height:25px;

}

.plan2_div{
 
 border-right:1px solid gray;
 border-bottom:1px solid gray;
 font-size:9px;
 padding:0px;
 vertical-align:top;
 height:25px;

}

.plan1_div{
  border-right:1px solid gray;
  border-bottom:1px solid gray;
  font-size:9px;                
  padding:0px;
  vertical-align:top;
  height:25px
} 
input:focus, textarea:focus{
border: 1px solid red;
}

     h1 {  margin: 0; }
        #products {  width: 500px; }
        #cart { width: 200px; float: left; }
        /* style the list to maximize the droppable hitarea */
        #cart ol { margin: 0; padding: 1em 0 1em 3em; }
        h3{  font-size:15px;  }
        </style>
    <style>
.ui-tooltip, .arrow:after {
background: #FFFFFF;
color:#000000;

border: 2px solid #CCCCCC;
}
.ui-tooltip {
padding: 10px 20px;
color: #000000;
border-radius: 20px;

box-shadow: 0 0 7px black;
width:250px;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
checkbox{
   width:20px;
} 
.longtext {
  position: relative;
}

.longtext:after {
  position: absolute;
  bottom: 0;  
  height: 100%;
  width: 100%;
  content: "";
	background: linear-gradient(to left,
     rgba(250,250,250, 1) 0%, 
     rgba(0,0,0, 0) 15%
  );
  pointer-events: none; /* so the text is still selectable */
}

.exit_button{
		color:#fff;
		text-decoration:none;
		background-color:#a20;
		padding:3px 12px;
		border-left:1px solid #999;
	}
	
.ajax_window{
	z-index:1000;border:1px solid gray;background:#fff;position:absolute;min-width:25em; box-sizing:border-box;
}
.ajax_window_header{
	width:99.5%;height:20px;background:#434A48;color:#fff;font-weight:bold;padding:2px;white-space:nowrap;
}