html { box-sizing: border-box;}

*:after {box-sizing: inherit;}

body{margin: 0;font-family: Arial;background-color:white;}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	  margin-top: 0px;
}
.ran{
	width: 100%;
	background : 006ec0\11;
	color: white;
	text-align:center;
	margin-top: -21px;
	margin-top:0px\9;
	bottom:0;;
	background: #02376a; /* Old browsers */
	background: -moz-linear-gradient(top,  #02376a 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#02376a), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #02376a 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02376a', endColorstr='#dae3f2',GradientType=1 ); /* IE6-9 */
}
.e7oo{margin-left:0px;font-style: normal;vertical-align: sub;}
.ran1{margin-bottom:-10px;padding-top:20px;}
.First{font-size:30px;margin-top:10px;padding-bottom:10px;padding-bottom:10px;color:#f9f9f9;}
.hFirst{font-family:arial;font-size:25px;margin-top:0px;}
.info{padding-top:40px;font-style:italic;margin-bottom:0px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:14px;}
.info1{padding-top:20px;font-style:italic;margin-bottom:-17px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:14px;}
.info2{padding-top:20px;font-style:italic;margin-bottom:-17px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:14px;}
.container{
		height:16em;
		width:30em;
		width:20em\13;
		margin:0 auto;
		margin-top:100px;
		color:#f9f9f9;
		/*border:1px #3f4346 solid;*/
		padding:2em;
		padding-top:4em;
		text-align:center;
		background: #2a5783; /* Old browsers */
		background: -moz-linear-gradient(top,  #2a5783 0%, #dae3f2 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2a5783), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #2a5783 0%,#dae3f2 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5783', endColorstr='#dae3f2',GradientType=1 );/* IE6-9 */
		text-align : center;
		padding-top:50px;
		margin-bottom:150px;
		top:0;
		border-radius:6px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;		
}
/*making the language toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 20px;
  left:0;
}

/*.NotificationPosistion{
	
}*/
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  padding-left:4px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 25px;
  bottom: 4px;
  left:0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;

}

#lang:after{margin-left: 45%;content: "De";margin-right: 20px;}
input:checked + .slider {
  background-color: blue;
  color:white;
}

input:focus + .slider {
  box-shadow: 0 0 1px blue;
}

input:checked + .slider:before {
  -webkit-transform: translateX(60px);
  -ms-transform: translateX(60px);
  transform: translateX(60px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/*end of the language toggle"*/
.footer{
	border:1px solid gray;
	background: #2a5783; /* Old browsers */
	background: -moz-linear-gradient(top,  #2a5783 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2a5783), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #2a5783 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5783', endColorstr='#dae3f2',GradientType=1 );/* IE6-9 */
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	color:white;
    z-index: 1;
}
#neno{
	color:white;
	animation: myneno 0.2s;
	box-shadow: 5px 5px 5px gray;
	font-size: 15px;
	font-weight: bold;
}
#nenoT{
	border-collapse: collapse;
}
#nenoT td{
	text-align: center;
}
@keyframes myneno{
	from{opacity: 0}
	to{opacity: 1}
}
.companName{font-weight:normal;display:none;}
.userName{font-weight:normal;display:none;}
.logintab{margin:0 auto; width:50%;}
.logintab tr:nth-child(3){
	padding-top: 10px;
}
.phoneNamae{display:block;}
.phoneNamae2{display:none;}
.mobilecompoboxstyle{display:none;}
.Module{visibility:hidden;}
/**************to top button*********/
.TOTop{
	display: none;
	position: fixed;
	bottom: 50px;
	right: 30px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: white;
	color: white;
	cursor: pointer;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #EFF0F1;
	padding-top: 14px;
}
/**************************************/
/*the vacation buttons*/
/**************************************/
.modify{
	background-color: #4d79ff;
	color: white;
	margin-right: 3px;
	border:none;
	height: 30px;
	border-radius: 3px;
}
.vacationtable{
	border: 0px solid gray !important;border-collapse:collapse ;width:100%;
}
.vacationtable td{
	border: 1px solid gray ;
	background: #e6e6ff;
}
#vrtr{
	background-color: #809fff;
	color: #e6e6e6;

}
#vrtr td{
	padding:5px 10px 5px 10px;
	border: 0px solid #ffffff !important;
	background-color: #809fff;
}
.table-div{
	width:90%;
	margin-bottom:10px;margin-top:10px;
	margin:0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	overflow: hidden;
}
.newRequest{
	width: 20%;
	height: 60px;
	border: none;
	border-radius: 5px;
	color: #f2f2f2;
	background-color: #4d79ff;
	font-size: 18px;
	margin-left: 10px;
}
.newRequest:hover{
	color: #4d79ff;
	background-color: #f2f2f2;
	font-size: 18px;
	cursor: pointer;
}
#form, #formmain{
	width: 50%;
	margin: 0 auto;
	border: 1px solid black;
	height: 80%;
	margin-top: 1%;
	background-color:blue ;
	color:white;
}
.updateFrom{
		width: 50%;
	margin: 0 auto;
	border: 1px solid black;
	height: 80%;
	margin-top: 1%;
	background-color:blue ;
	color:white;
}
.DateFrom, .DateTo, #Comment{
	width: 90%;
	height: 50px;
	text-align: center;
	font-size: 15px;
}
#Comment{
	margin-bottom: 10%;
}
#para{
	font-family: Arial, Helvetica, sans-serif;

}

.managervacation
{
	border: 0px solid gray !important;border-collapse:collapse ;width:100%;
}
.managervacation td{	border: 1px solid gray ;background: #e6e6ff;}


.managerBtn{
	background:#4d79ff;
	border:none;
	border-radius: 3px;
	height: 30px;
	color: white;
	width: 80px;
}
.managerBtn:hover{
	background: white;
	border: none;
	border-radius: 3px;
	color: #4d79ff;
	cursor: pointer;
}

/*
::-moz-placeholder { /* Mozilla Firefox 4 to 18 
   color:    blue;
   opacity:  0.2;
}
::-ms-input-placeholder{ /* Edge 
   color:    blue;
   opacity:  0.2;
}*/
/************************************/

/*.menu{
			width: 200px;
			color: #fff;
			position:absolute;
            height:300px;
			display: none;
            border:1px solid grey;
		}
        .red a{width:100px;background-color: lightgray;}
		.menu a{
			width: 100px;
			padding: 1%;
			background-color: red;
			color: #fff;
		}
		.menu a:hover{
			background-color: grey;
	    		color: #444343;
		}*/
/* the new loin view*****************/
/***************the loading effect ************/
.modalLoading{
	display:none;
	position:fixed;
	z-index:1;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	background: rgb(0,0,0);
	background:rgb(0,0,0,0.4);
	overflow: auto;
}
.modal-contento{
	border:1px solid black;
	margin:20% auto;
	width:50%;
	background-color:#FFFFFF;
	text-align:center;
	padding-top:2%;
}
/**********************************************/
/* Full-width input fields */
.ANTO{
    background:lightgray;
    border:none;
    width:200px;
    height:50px;
}
.ANTO:hover{
    background:deepskyblue;
    width:300px;
    height:100px;
    cursor:pointer;
    font-size:18px;
    border-radius:200px;
    border:10px solid lightskyblue;
}
.sidenav{display:none;}
.phoneMenuButton{display:none;}
.phoneMenuButton2{display:none; }
.main {
	border:1px solid #a9a9a9;
	background: #eff0f1; /* Old browsers */
	background: -moz-linear-gradient(top,  #eff0f1 0%, #f9f9f9 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eff0f1), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #eff0f1 0%,#f9f9f9 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff0f1', endColorstr='#f9f9f9',GradientType=1 );/* IE6-9 */
	left:0;
	color:white;
	margin:0 auto;
	height:40px;
	padding-top:1px;
	text-align:center;
    width:100%;
    padding-top: 0.4%;
	position:fixed;
	top:110px;
	/*margin-left:5%;*/
	}
.div1{margin-bottom:10px;}
.div3 {float:middle;margin-top:20px;}
.main .div1,
.main .div2, .main .div3  {display:inline-table; margin:2px 2px 2px 2px;padding-right:5px;height:50px;margin-right:5px;}
.MessageStyle{
				background: #eff0f1; /* Old browsers */
				background: -moz-linear-gradient(top,  #eff0f1 0%, #f9f9f9 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eff0f1), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* IE10+ */
				background: linear-gradient(to bottom,  #eff0f1 0%,#f9f9f9 100%); /* W3C */
				width:100%;height:40px;margin:0 auto;
				border:1px solid #a9a9a9;
				overflow: scroll;
				overflow-x:hidden;
				padding-top:1%;
				position:fixed;
				margin-top:-30px;
			}
.MessageStyle1{
				background: #eff0f1; /* Old browsers */
				background: -moz-linear-gradient(top,  #eff0f1 0%, #f9f9f9 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eff0f1), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  #eff0f1 0%,#f9f9f9 100%); /* IE10+ */
				background: linear-gradient(to bottom,  #eff0f1 0%,#f9f9f9 100%); /* W3C */
				width:90%;height:auto;margin:0 auto;
				border:1px solid #a9a9a9;
				padding-top:1%;
				padding-bottom:10px;
			}
.DP{display:none;}
.dashboard{
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.7em;
	/*font-size:0.6vw;*/
	background: #02376a; /* Old browsers */
	background: -moz-linear-gradient(top,  #02376a 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#02376a), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #02376a 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02376a', endColorstr='#dae3f2',GradientType=1 );/* IE6-9 */
	width:65%;
	margin:0px auto;
	margin-top:10px;
	color:#4b4b4b;
    margin-bottom:50px;
    table-layout: auto;
}
@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
.dashboard td{border:1px solid blue;}
/*******************the checkbox******/
span.bigcheck-target {
    font-family: FontAwesome; /* use an icon font for the checkbox */    
}
input[type='checkbox'].bigcheck {     
    position: relative;
    left: -999em; /* hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
    content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
    content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}
/*.handen1{display:none;}*/
/* ==== optional - colors and padding to make it look nice === */

span.bigcheck { 
    display: block;
    padding: 0.5em;;
}


#srTable{
	padding:0px;
	margin:0 auto; 
	width:100%;
	border:1px solid gray;
	color:#4b4b4b;
	font-size:13px;
}
#srTable td{
	height:10px;
	padding:0px;
	top:0;
	bottom:0;
	border:1px solid gray;
}
#srTable tr{
	height:10px;
	padding:0px;
	top:0;
	bottom:0;
	border:1px solid gray;
}
#srTable td p{
	margin:0px;
	margin-left:3px;
}
#srTable tr:nth-of-type(2){color: #4b4b4b;text-shadow: none;}
#srTable td:nth-child(4){text-align:left;}
#srTable #gr{color: #4b4b4b;font-weight:bold;}

.srTable{display:table;margin:0 auto; width:90%;margin-top:10%;}
.srTable1{
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
}
#srTable td b{color:#4b4b4b;}
.oxfort{position:fixed;right:0;top:10%;}
.export{width:100%;position:relative;;float:right;margin-top:-6%;cursor:pointer;}
/* Set a style for all buttons */
/************************************/
.lable{float:left;}
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
      padding: 0.5em 0 0.5em 3em;
    }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 24px;
      width: 24px;
      top: 0.1em;
    }
    .ui-icon.video {
      background: url('../images/Sun_64.png') 0 0 no-repeat;
      	/*background-image:url('../images/Sun_64.png');*/
    }
    .ui-icon.podcast {
      background: url("images/24-podcast-square.png") 0 0 no-repeat;
    }
    .ui-icon.rss {
      background: url("images/24-rss-square.png") 0 0 no-repeat;
    }
 
    /* select with CSS avatar icons */
    option.avatar {
      background-repeat: no-repeat !important;
      padding-left: 20px;
    }
    .avatar .ui-icon {
      background-position: left top;
    }
.js-example-templating{font-size:20px}
/*********************************/
.mody{outline-color:red;}
/******************************************************************/
/***************** the outer css context***************************/
.tasks {
  list-style: none;
margin-left:-5px;
margin-left:-5px;
  padding: 0;
}

.task {
  display: flex;
  justify-content: space-between;
  margin:0 auto;
  padding-left:5px;
  cursor:pointer;
  font-size:10px;
}

.task:last-child {
  border-bottom: none;
}
.containro{
    width:auto;
}
.context-menu {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 12px 0;
  background-color: #fff;
  border: solid 1px #dfdfdf;
  box-shadow: 1px 1px 2px #cfcfcf;
}

.context-menu--active {
  display: block;
  height:100px;
}

.context-menu__items {
  list-style: none;
  padding-top: -100px;
  height:150px;
}

.context-menu__item {
  display: block;
  margin-bottom: 5px;
}

.context-menu__item:last-child {
  margin-bottom: 0;
}

.context-menu__link {
  display: block;
  padding: 4px 12px;
  color: #0066aa;
  text-decoration: none;
}

.context-menu__link:hover {
  color: #fff;
  background-color: #0066aa;
}
.drop{
    display:none;
    position:fixed;
}
.drop  a:hover {
    text-decoration:none;
    background-color:lightskyblue;
}
/***********************the end of the context ****************************/
/**************************************************************************/
.serviceType{ border:none;background:none;}
.text{ width:300px;height:30px;float:left;margin-bottom:-23px;margin-bottom:-21\9;margin-bottom:180px\9; border:none;color:gray;}
.text { margin-bottom/**/: -21px }
 .field{
	height:19em;
	width:18em;
	margin:auto;
	margin-top:0px;
	text-align : center;
 }
 /*********the links style*********/
ul{ list-style-image:src('images/ausknopf.jpg'); }
li{ display:inline; }

a:link{ color:#9d9d9d; text-decoration:none; }
a:hover{ color: #57899e; text-decoration:underline; }
a:visited{ color:#575d61; text-decoration:none; }
a:active{ color:#70a7f0; text-decoration:none }




img.resize{ width:64px; height: auto; }

.btn-default{
	width:302px;
	height:35px;
	border: none;
	color: white;
	padding: 7px 7px;
	margin-top: -0.09px;
    /*margin-top:50px/9;*/
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	background: #6485A7; /* Old browsers */
	background: -moz-linear-gradient(top,  #6485A7 0%, #C1CFE2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6485A7), color-stop(100%,#C1CFE2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6485A7 0%,#C1CFE2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6485A7 0%,#C1CFE2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6485A7 0%,#C1CFE2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #6485A7 0%,#C1CFE2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6485A7', endColorstr='#C1CFE2',GradientType=1 ); /* IE6-9 */  
}
/*.btn-default { margin-top/**//*: 5px }*/
.colorr{width:100%;}
.btn-default:hover{
	color: white;
	background: #2D5985; /* Old browsers */
	background: -moz-linear-gradient(top,  #2D5985 0%, #b6c6db 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2D5985), color-stop(100%,#b6c6db)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2D5985 0%,#b6c6db 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2D5985 0%,#b6c6db 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2D5985 0%,#b6c6db 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #2D5985 0%,#b6c6db 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2D5985', endColorstr='#b6c6db',GradientType=1 ); /* IE6-9 */
}

.lao{ text-align:center; }
.dropbtn { background: transparent; padding: 0px 0px 0px 0px; font-size: 10px; border: none; cursor: pointer; }
.middle{vertical-align: top;font-weight:normal;font-size: 15px;line-height: 2;}
.middle1{vertical-align: top;font-weight:normal;color:lightgray;line-height: 2;}
/*===================for normal screen==========================*/
.HeaderBar{
	text-align:center;
	width:100%;
	height:3.6em;
	height:6em\9;
	padding-bottom:20px;
	width: 100%; 
	position:fixed;
	position:fixed\9;
	left: 0;
	top: 0;
	bottom:0\9;
	display:inline-block\9;
	float:left\9; 
	background: #02376a; /* Old browsers */
	background: -moz-linear-gradient(top,  #02376a 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#02376a), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #02376a 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02376a', endColorstr='#dae3f2',GradientType=1 );/* IE6-9 */
	z-index: 1;
}
.HeaderBar a { color:#9d9d9d; text-decoration:none; }
.MenuIcon {
	display:table-cell;
	vertical-align: top;
	padding-top: 5px;
	padding-left: 5px;
	left:0\9;
	float:left\9;
	margin-left:1px\9;
	margin-bottom:10px\9;
}
.ModuleName {
	display:table-cell;
	display:inline\9;
	width:100%;
	vertical-align: top;
	text-align:center;
	background: transparent;
	color:#f9f9f9;
	font-family:arial;
	font-size:25px;
	width:25%\9;
	margin-left:-150px\9;
	float:left\9;
	position:fixed\9;
	padding-left:50px;
	/*background-image:url('../images/Sun_64.png');*/
	background-repeat: no-repeat;
	background-position: 52% 420%;
	-khtml-opacity:.50; 
	-moz-opacity:.80; 
	-ms-filter:"alpha(opacity=50)";
	filter:alpha(opacity=50);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
	opacity:1;
	background-size: 100px 60px;
	perspective: 150px;
	top: 0;
	left: 0;
}
.LOGO1{
	height:50px;
	width:210px;
	margin-bottom:-20px;
}
.MenuIconout {
	display:table-cell;
	display:inline\9;
	vertical-align: top;
	padding-top:6px;
	padding-right:5px;
	padding-left: 5px;
	float:left\9;
	margin-left:-800px\9;
	padding-left:150px\9;
	position:fixed\9;
	text-align:center;
}
.InfoBar{
	text-align:left;
	padding-left: 5px;
	padding-top: 10px;
	padding-top:0px/10;
	padding-bottom: 5px;
	color:white;
	vertical-align: bottom;
	margin-top: 4.8em;
	margin-bottom:20px;
	margin-top:6em\9;
	margin-bottom:0em\9;
	top: 0;
	width: 100%;
	height:20px;
	font-family:arial; 
	position:fixed;
	position:relative\9;
	left:0\9;
	top:0\9;
	bottom:0\9;
	background: #d4deee; /* Old browsers  ralf's choice #97aec8 */
	background: -moz-linear-gradient(top,  #d4deee 0%, #2a5783 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d4deee), color-stop(100%,#2a5783)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d4deee 0%,#2a5783 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d4deee 0%,#2a5783 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d4deee 0%,#2a5783 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d4deee 0%,#2a5783 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4deee', endColorstr='#2a5783',GradientType=1 );
	z-index: 1;
}

.InfoBar p { margin-top: 0px; margin-left: 5px; }
.MainContent1 {
	margin-top: 8em ; 
	margin-top:-100em\9 ;
	width:100% ; 
	height:80%\9 ;
    margin-bottom:50px ;
}
.MainContent {
	margin-top: 8em ;
	margin-top:-100em\9 ;
	width:100% ; 
	height:80%\9 ;
    margin-bottom:50px ;
}
.menul {
margin-top:2px;
color:#f9f9f9;
font-size:16px;
margin-left:12px;
margin-right:5px;
padding-right:5px;
}

/*=============================the popup menue =========================================================*/
.dropdown {
	display: table-cell;
	width:0;
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	background-color: #f9f9f9;
	overflow-x: hidden;
	transition: 0.5s;
}

.dropdown-content {
	position:relative;
	right:-10%;
	width: 90%;
	margin-top: -30px;
	font-size:15px;
	vertical-align: top;
}
.dropdown-content img{
	height:22px;
			width:22px;
			padding-left:5px;
			align-content: left;
			vertical-align: middle;
			margin-left:10px;
}

.dropdown-content a {
	padding: 8px;
	margin-left:-10px;
	text-decoration: none;
	font-size: 15px;
	color: #818181;
	display: block;
	transition: 0.3s;
	text-align:left;

}
.PopUpMenuItem{ line-height:1px; }
.dropdown-content a:hover, .dropdown-content a:focus {
	text-align:left;
	color: gray;
	background: #DFE6F4;
}

.closebtn  {
	top:0;
	font-size: 50px;
	margin-bottom:0px;
	margin-left:-210px;
	
}
 .closebtn:hover {
	top: 5px;
	right: 5px;
	font-size: 50px;
}
.dropdown-pop{
font-size:16px;
cursor:pointer;
text-align:center;
margin:0 auto;
background-color:lightgray;
padding-left:-10px;
width:0%;
margin-top:0px;
margin-left:10px;
color:#f9f9f9;
}

.timeR{
	/*padding:2em;*/
	width:20%;
	text-align:center;
	/*border:1px solid black;*/
	padding: 20px;
	border-radius: 20px;
	margin: 0 auto;
	font-family:arial;
}
.Time{
	width:200px;
	height:60px;
	font-size:30px;
	color:#3f4346;
	border-radius:5px;
	border:1px solid lightgray ;
	background: #6485A7; /* Old browsers */
	background: -moz-linear-gradient(top,  #6485A7 0%, #C1CFE2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6485A7), color-stop(100%,#C1CFE2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6485A7 0%,#C1CFE2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6485A7 0%,#C1CFE2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6485A7 0%,#C1CFE2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #6485A7 0%,#C1CFE2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6485A7', endColorstr='#C1CFE2',GradientType=1 ); /* IE6-9 */  
}
.Time:hover{
	width:200px;
	height:60px;
	font-size:30px;
	border-radius:5px;
	border:1px solid lightgray ;
	background: #2D5985; /* Old browsers */
	background: -moz-linear-gradient(top,  #2D5985 0%, #b6c6db 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2D5985), color-stop(100%,#b6c6db)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2D5985 0%,#b6c6db 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2D5985 0%,#b6c6db 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2D5985 0%,#b6c6db 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #2D5985 0%,#b6c6db 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2D5985', endColorstr='#b6c6db',GradientType=1 ); /* IE6-9 */
}
.time{
	width:200px;
	height:50px;
	background-color: white;
	border-radius:1px;
	border: 1px solid gray ;
	text-align:center;
	padding : 0em 0em 0em 0em;
	font-size:35px;
	border-radius:5px;
	color:#3f4346;
}
.tab { border:1px ; /*width:600px;*/ height:300px; margin-left:auto; margin-right:auto;text-align:center;}
.pln{ border:1px solid #99ccff; width:600px;}

.shift{ background-color: white; border-radius:20px; border: 1px solid #70a7f0 ; text-align:center; padding : 1em 1em 1em 1em; }

.menu-element { float:left; width: 180px; font-size: 15px; margin-bottom: 20px; text-align: center; }

.menu-icon { width:100%; height:80%; }

.clear{ clear:both; }

/*----------------------------WorkingHoursAccount ----------------------------*/
.WorkingHoursAccount {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.9em;
	background-color: #f9f9f9;
	margin: 0 auto;
	margin-top:-8px;
	color:#4b4b4b;
}

.WorkingHoursAccount tr{ border:1px black solid; width:500px ;	}

.WorkingHoursAccount td{
	border:1px solid darkgray;
	width:200px;
	font-family:arial;
	padding-left: 10px;
	overflow: hidden;
}
.WorkingHoursAccount tr:nth-child(1){font-weight:bold; }

#right{ text-align:right; padding-right:10px; }
#left{ text-align:left; padding-left:10px; }

/* **********************PlanWeek**************************** */

.PlanWeek{
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	
	background-color: #f9f9f9;
	margin: 5px auto;
	padding-right:-10px;
	text-align: unset;
	width: 90%;
	margin-bottom:50px;
	margin-top:-8px;
	color:#4b4b4b;
}
.PlanWeek tr{
	border:1px darkgray solid;
	width:300px ;
	background-color: #f9f9f9;
}
.PlanWeek td{
	border:1px darkgray solid;
	width:150px;
	background-color: #f9f9f9;
	font-family:arial;
	font-size:14px;
	padding-right:10px;
	overflow: hidden;
	text-align:center;
}
.PlanWeek  td:nth-child(10n-9){
   text-align:left;
   padding-left:5px;
   width:10px;
}
.PlanWeek th{
	border:1px solid darkgray;
	background-color: #EFF0F1;
	font-size: 0.9em;
}
.PlanWeek  th:nth-child(7n-3){
   text-align:center;
   padding-left:5px;
}
/* **********************plamonth**************************** */

.plamonth{
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	
	background-color: #f9f9f9;
	margin: 5px auto;
	padding-right:-10px;
	text-align: unset;
	width: 80%;
	margin-bottom:50px;
	margin-top:-8px;
	color:#4b4b4b;
}
.plamonth tr{
	border:1px darkgray solid;
	background-color: #f9f9f9;
}
.plamonth td{
	border:1px darkgray solid;
	background-color: #f9f9f9;
	font-family:arial;
	font-size:14px;
	padding-right:10px;
	overflow: hidden;
	text-align:center;
}
.plamonth  td:nth-child(10n-9){
   text-align:left;
   padding-left:5px;
   width: 10px;
}
.plamonth  td:nth-child(10n-8){
	text-align:center;
	padding-left:5px;
	width: 150px;
 }
.plamonth  td:nth-child(10n-7){
	width: 200px;
 }
.plamonth th{
	border:1px solid darkgray;
	background-color: #EFF0F1;
	font-size: 0.9em;
}
.plamonth  th:nth-child(7n-3){
   text-align:center;
   padding-left:5px;
}
/***********************************************************************/
.WorkingHoursRecord { border:1px solid black; }

.WorkingHoursRecord tr{ border:1px solid black; }

.WorkingHoursRecord td{ border:1px solid black;}

.moh{ margin-top:-40px; margin-bottom:20px;	}

.WorkingHoursRecordSum { border:1px solid black; font-family:arial; background-color:grey;}

.WorkingHoursRecordSum tr{ border:1px solid black; }

.WorkingHoursRecordSum td{ border:1px solid black; }
.SMB{ width:120%;height:50px;background:none;margin-left:-5px;}

/* ***************************************************************** */
/* B.B.W.Y. Big brother's watching you                               */
/* ***************************************************************** */

.BBWY {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.9em;
	background-color: #f9f9f9;
	margin: 5px auto;
	width:98%;
	margin-top:106px;
	width:90%;
	color:#4b4b4b;
    margin-bottom:50px;
}

.BBWY td { border:1px solid darkgray; padding: 1px 5px; overflow: hidden; }

.BBWY tr { border:1px solid darkgray; padding: 1px; }

.BBWY th {
	border:1px solid darkgray;
	background-color: #EFF0F1;
	font-size: 1.0em;
	text-align:left;
	padding: 1px 5px;
}

.BBWY th:nth-child(16n-13){ text-align:center; }

/* ***************************************************************** */
/* WorkTimeRequest                                                   */
/* ***************************************************************** */
.TOP{margin-top:5em;}
.WTR {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.7em;
	background-color: #eff0f1;
	margin: 5px auto;
	width:50%;
	margin-top:-8px;
	margin-bottom:20px;
	font-size:14px;
	color:#3f4346;
}

.WTR td input[type='text']{
	width:100%;
    height:100%;
	box-sizing: unset;
	border:none;
	padding-top:2% 2% 2% 2%;
	font-family:arial;
	font-size:14px;
   display:inline-block;
   border-radius:0;
   color:#3f4346;
   padding-left:5px;
   
}
.WTR td input[type='text']:disabled{
	background: #EFF0F1;
}
.WTR td input[type='checkbox']{
	width:100%;
	box-sizing: unset;
	border:none;
	padding-top:2% 2% 2% 2%;
	font-family:arial;
	font-size:14px;
   display:inline-block;
   border-radius:0;
   color:#3f4346;
   padding-left:5px;
   
}
.WTR td input.daydisabled {background-color: #ffffff;color:lightgray;font-style:italic;}
.WTR td {
	border:1px solid darkgray;
	padding: 0;
	overflow: hidden;
    height:90%;
}
.WTR tr {
	border:1px solid darkgray;
	padding: 1px;
}

.WTR th {
	border:1px solid darkgray;
	background-color: #EFF0F1;
	font-size: 1.0em;
	color:#4b4b4b;
}
.WTR td:nth-child(5){background:#ffffff;}
.WTR td:nth-child(4){background:#ffffff;}
.WTR td:nth-child(1){padding-left:5px;}
.WTR td:nth-child(2){padding-left:5px;}


.week1 {background-color: #9ec2d3;}
.week2 {background-color: #EFF0F1;}
.weekend {background-color: #9FB4CD;} 
.publicholiday {background-color: #7E9ABC;}



.wtrTD {
	font-family:Arial,Helvetica;
	font-size:12px;
	/*height:19px;*/
	width:98%;
	background-color: #FFFFFF;
	border-right: #c8c7c7 1px solid;
	border-top: #eaeaea 1px solid;
	border-left: #eaeaea 1px solid;
	border-bottom: #c8c7c7 1px solid;
}

.wtrTD_error {
	font-family:Arial,Helvetica;
	font-size:12px;
	width:98%;
	color:yellow;
	background-color: red;
	border-right: #c8c7c7 1px solid;
	border-top: #eaeaea 1px solid;
	border-left: #eaeaea 1px solid;
	border-bottom: #c8c7c7 1px solid;
}

.wtrInfo { text-align: center; margin-left:15px; margin-bottom: 0px;}

.wtrError { text-align: center;padding-bottom:-10px; }

/* ***************************************************************** */
/* PlanMonthGroup                                                    */
/* ***************************************************************** */
.bton {
	/*display: inline-block;*/
	cursor: pointer;
	text-decoration: none;
	/*outline: none;*/
	color: #fff;
	background: #dae3f2; /* Old browsers */
	background: -moz-linear-gradient(top,  #dae3f2 0%, #52769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dae3f2), color-stop(100%,#52769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #dae3f2 0%,#52769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dae3f2  0%,#52769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #dae3f2  0%,#52769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #dae3f2 0%,#52769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dae3f2', endColorstr='#52769c',GradientType=1 );/* IE6-9 */
	border: 1px solid #a9a9a9;
	/*box-shadow: 0 9px #999;*/
	width:150px;
	height:18px;
	font-size: 12px;
	padding-bottom: 10px;
	margin: 0 auto;
	text-align: left;
	line-height:2.3;
}
.bton img{
    vertical-align: middle;
}

.bton:hover {
	cursor:pointer;
}
.tero{margin-top:10px;}
.bton1{
	 background: #52769c; /* Old browsers */
	background: -moz-linear-gradient(top,  #52769c 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#52769c), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #52769c 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #52769c 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-slinear-gradient(top,  #52769c 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #52769c 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52769c', endColorstr='#dae3f2',GradientType=1 );/* IE6-9 */
  	/*box-shadow: 0 5px #666;*/
  	/*transform: translateY(4px);*/
	cursor: pointer;
    color: #fff;
	text-decoration: none;
  	border: 1px solid #a9a9a9;
	width:150px;
	height:20px;
	font-size: 12px;
	padding-bottom: 10px;
	margin: 0 auto;
	text-align: left;
	line-height:2.3;
}
.bton1 img{
    vertical-align: middle;
}

.bton1:hover {
	cursor:pointer;
}
.hideT{background: #52769c; /* Old browsers */
	background: -moz-linear-gradient(top,  #52769c 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#52769c), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #52769c 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #52769c 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-slinear-gradient(top,  #52769c 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #52769c 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52769c', endColorstr='#dae3f2',GradientType=1 );/* IE6-9 */
  	/*box-shadow: 0 5px #666;*/
  	/*transform: translateY(4px);*/
	cursor: pointer;
    color: #fff;
	text-decoration: none;
  	border: 1px solid #a9a9a9;
	width:150px;
	height:27px;
    float:left;
    clear:both;
    font-size: 12px;
    margin-left:10px;
    }
.showT{ background: #dae3f2; /* Old browsers */
	background: -moz-linear-gradient(top,  #dae3f2 0%, #52769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dae3f2), color-stop(100%,#52769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #dae3f2 0%,#52769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dae3f2  0%,#52769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #dae3f2  0%,#52769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #dae3f2 0%,#52769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dae3f2', endColorstr='#52769c',GradientType=1 );/* IE6-9 */
  	/*box-shadow: 0 5px #666;*/
  	/*transform: translateY(4px);*/
	cursor: pointer;
    color: #fff;
	text-decoration: none;
  	border: 1px solid #a9a9a9;
	width:150px;
	height:27px;
    float:left;
    clear:both;
    font-size: 12px;
    margin-left:10px;
    }
.list{ background-color: gray;width:90%;height:50px;border-radius:5px;margin:0 auto;}
.list1{float:left;margin:10px;width:20%;text-align: center;}
/****************************************************/
/***************the checkbox css***********/

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    float:left;
}

#ck-button label {
    float:left;
    width:10px;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    border-radius:4px;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:hover + span {
    background-color:#efE0E0;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

#ck-button input:checked:hover + span {
    background-color:#c11;
    color:#fff;
}
/*
.checkbox {
   width: 80px;
   height: 26px;
   margin: auto;
   position: relative;
   background: #fff;
   border: 1px solid #2e2e2e;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
}

.checkbox:after {
   content: 'No';
   font: 12px/26px Arial, sans-serif;
   color: #b50000;
   position: absolute;
   right: 10px;
   z-index: 0;
   font-weight: bold;
}

.checkbox:before {
   content: 'Yes';
   font: 12px/26px Arial, sans-serif;
   color: #00bf00;
   position: absolute;
   left: 10px;
   z-index: 0;
   font-weight: bold;
}

.checkbox label {
   display: block;
   width: 34px;
   height: 20px;
   position: absolute;
   top: 3px;
   left: 3px;
   z-index: 1;
   background: #2e2e2e;
   -o-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -khtml-transition: all 0.5s linear;
   -webkit-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   cursor: pointer;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
}

.checkbox input[type=checkbox]:checked + label {
   left: 43px;
}




/***********************************************/
.pmg {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	
	/*font-size:0.6vw;*/
	background-color: #f9f9f9;
	width:90%;
	margin:0px auto;
	margin-top:10px;
	color:#4b4b4b;
    margin-bottom:50px;
    table-layout: auto;
}

.pmg td {
    font-size: 0.7em;
	border:1px solid darkgray;
	padding: 0px;
	overflow: hidden;
	/*padding-left:5px;*/
	vertical-align:top;
}

.pmg td#bcalender {
	font-weight: bold;
	vertical-align:top;
	background-color:#eff0f1;
}
.pmg td#bcalend { font-weight: bold; vertical-align:top; }
.pmg td#b{background-color:#eff0f1;font-weight:bold;}


.pmg tr { border:1px solid darkgray; padding: 1px; }

.pmg th {
	border:1px solid darkgray;
	background-color: lightgray;
	font-size: 1.0em;
	font-weight: bold;
}
.pmg td.selected{vertical-align:middle;font-size:12px;text-align:center;}
.Stable{
	/*display: table;*/
    width: 100%;
    height: 100%;
    /*margin-top: -10px;*/
    /*padding-top: 5px;*/
    /*margin-left: -9px;*/
	/*margin-bottom: -9px;*/
	font-size: 1.2em;
	border-collapse:collapse;
}
.Stable td{
	border:1px solid darkgray;
	padding: 0% 5% 5% 5%;
	width:10px;
}

/*********************************************************************/
/*planning                                                           */
/*********************************************************************/
.pmgPlanning {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.7em;
	/*font-size:0.6vw;*/
	background-color: #f9f9f9;
	width:99.9%;
	margin:0px auto;
	/*margin-top:10px;*/
	color:#4b4b4b;
    margin-bottom:50px;
    table-layout: auto;
	font-family: arial;
}

.pmgPlanning td {
	border:1px solid darkgray;
	padding: 0px;
	overflow: hidden;
	/*padding-left:5px;*/
	vertical-align:middle;
	width:1%;
	font-family: arial;
}


.pmgPlanning td#bcalender {
	font-weight: bold;
	vertical-align:middle;
	background-color:#eff0f1;
    width:100px;
}
/*.pmgPlanning td['title']:hover{background:red;content: attr(title);}*/
.pmgPlanning td#bcalend { font-weight: bold; vertical-align:middle; }
.pmgPlanning td#b{background-color:#eff0f1;font-weight:bold;}


.pmgPlanning tr { border:1px solid darkgray; padding: 1px; }

.pmgPlanning th {
	border:1px solid darkgray;
	background-color: lightgray;
	font-size: 1.0em;
	font-weight: bold;
}
.rowvalue{background:#EFF0F1; font-style:italic;}
.planName{width:150px;margin-right:10px;}
.pmgPlanning td.selected{vertical-align:middle;font-size:12px;text-align:center;}
/*.Stable{
	width:110%;height:100%;border-collapse: collapse;margin-left:-5px;margin-top:-1px;margin-bottom:-5px;margin-right:-1px; height:30; border:0;table-layout:absolute;  
}
.Stable tr{
	border-collapse: collapse;
}
.Stable td{
	margin-right:10px;
	border-right: 0px solid #d3d3d3;
	padding-right:5px;
	/*height:20px;
}*/

.Stableplanning{
	display: table;
    width: 100%;
    height: 100%;
    /*margin-top: -10px;*/
    /*padding-top: 5px;*/
    /*margin-left: -9px;*/
    /*margin-bottom: -9px;*/
	border-collapse:collapse;
}
.Stableplanning td{
	border:1px solid darkgray;
	padding: 3% 2% 2% 2% ;
}
.pmgPlannin{
	border:1px solid black;
}

.pmgPlannin td {border:1px solid black;}
/* ***************************************************************** */
/* shift exchange                                                    */
/* ***************************************************************** */
.pmgMarket {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.7em;
	/*font-size:0.6vw;*/
	background-color: #f9f9f9;
	width:100%;
	margin:0px auto;
	margin-top:10px;
	color:#4b4b4b;
    margin-bottom:50px;
    table-layout: auto;
}
/*.pmgMarket tr input:hover{
	font-size:20px;
}
.pmgMarket tr:hover{
	font-size:20px;
}
.pmgMarket tr td:hover{
	font-size:20px;
}*/
.pmgMarket td {
	border:1px solid darkgray;
	padding: 1px;
	overflow: hidden;
	/*padding-left:5px;*/
	padding : 0px;
	vertical-align:top;
}

.pmgMarket td#bcalender {
	font-weight: bold;
	vertical-align:top;
	background-color:#eff0f1;
}
.pmgMarket td#bcalend { font-weight: bold; vertical-align:top; }
.pmgMarket td#b{background-color:#eff0f1;font-weight:bold;}

.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px;
}
.pmgMarket tr { border:1px solid darkgray; padding: 1px; }

.pmgMarket th {
	border:1px solid darkgray;
	background-color: lightgray;
	font-size: 1.0em;
	font-weight: bold;
}
.pmgMarket td.selected{vertical-align:middle;font-size:12px;text-align:left;}
.pmgMarket td .SHMIMG input[type="image"]{
    position:absolute;
    vertical-align: bottom;
    text-align:left;
    }
.StableMarket{
	width:100%;
	/*height:100%;*/
	height: 50px;
    /*margin-left: -5px;
    margin-right: -10px;
    margin-top: -3px;
    margin-bottom: -10px;*/
	border-collapse: collapse;
}
.StableMarket tr{
	border-collapse: collapse;
}
.StableMarket td{
    font-size: 6px;
	text-align:left;
	width:20px;
}
.scrollshiftmarket{width:90%;margin-left:5%;}
.scrollplan{margin-top:2.5%;}
/* ***************************************************************** */
/* Plan Month                                                        */
/* ***************************************************************** */
.pmd {
	width:98%;
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.8em;
	background-color: #f9f9f9;
	font-size:11px;
	header: fixed;
	margin:0 auto;
	margin-top:10px;  
    margin-bottom:50px;
}

.pmd td {
	border:1px solid darkgray;
	border-collapse: collapse;
	padding-left:2px;
	padding-right:-5px;
}
.pmd td#bcalender{
	font-weight: bold;
	vertical-align:top;
	background-color:#eff0f1;
}
.pmd td#b {
	font-weight: bold;
	background-color:#eff0f1;
}
.pmd td#b:nth-child(n){
   color:#4b4b4b;
   padding-left:5px;
   font-size:11px;
}

.pmd tr {
	padding: 1px;
	border-collapse: collapse;
}

.pmd th {
	border:1px solid darkgray;
	background-color: lightgray;
	font-size: 1.0em;
	display :inline-block;
	height: 50px;
	width: 100px;
	position:absolute;
	*position: relative; /*ie7*/
}

.DataFilter2{ width:100%;margin:0 auto;margin-top:-82px;margin-top:100px\9;padding-top:100px\9;color:#575d61;position:fixed;text-align:right;z-index: 1;}
.DataFilter{ width:100%;margin:0 auto;margin-top:32px;margin-top:100px\9;padding-top:100px\9;color:#575d61;position:fixed;text-align:right;z-index: 1;}
.DataFilter { right/**/: 10px; }
.Rmessage{text-align:center;color:#cc0000;font-style: italic;margin-bottom: 10px;margin-top:-15px;}
.normal{ text-align:left;}

/* ***************************************************************** */
/* SchoolHolidays                                                    */
/* ***************************************************************** */

.SchoolHolidays {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.9em;
	background-color: #ffffff;
	margin: 0 auto;
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
	color:#4b4b4b;
	margin-left:30px; 
    
}



.SchoolHolidays th{
	border:1px solid darkgray;
	font-family:arial;
	padding-left: 5px;
	overflow: hidden;
     padding: 3px;
    overflow: hidden;
      table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}
.SchoolHolidays tbody tr td {
    font-size: 15px;
}

.SchoolHolidays td{
	border:1px solid darkgray;
	font-family:arial;
	padding-left: 5px;
	overflow: hidden;
      table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
   
}
.SchoolHolidays thead {
 width: 80%;
}
.SchoolHolidays tbody{overflow-x: scroll;}
.SchoolHolidays th#bcalender { font-weight: bold; background-color:#eff0f1;font-size:0.9em;font-family:arial; }
.SchoolHolidays td#bcalend { font-weight: bold; background-color:#eff0f1;font-family:arial; }
.SchoolHolidays td#b { font-weight: bold; background-color:#eff0f1;font-size:0.9em; width:100px; }
#myDemoTable td{width:100px;}
/*                      plan year                                    */
/* ***************************************************************** */
.PlanYear {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	background-color: #eff0f1;
	margin: 0 auto;
	width:90%;
	margin-top:-8px;
	color:#4b4b4b;
    margin-bottom:50px;
}

.PlanYear tr{ border:1px black solid; }

.PlanYear td{
    font-size: 0.7em;
	border:1px solid darkgray;
	width:200px;
	font-family:arial;
	padding-left: 5px;
	overflow: hidden;
}

.PlanYear td#b { font-weight: bold; }

.planyearSTable{
	display: table;
	margin-top: -10px;
	padding-top: 5px;
	margin-left: -8px;
	margin-bottom: -9px;
	border-collapse: collapse;
    margin-right: -2px;
}
.planyearSTable td{height:30px;width:30px;}
.clock{ margin:0 auto; color:#575d61; }

/* ***************************************************************** */
/*Working hours record                                               */
/* ***************************************************************** */
.concla a{
    font-size:10px;
    margin-bottom:20px;
    margin-top:20px;
}
.hoffer img{
       margin-bottom:20px;
       margin-top:20px;
       vertical-align:middle;
       margin-left:20px;
}
.WHR{
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.9em;
	background-color: #f9f9f9;
	margin: 5px auto;
	padding-right:-10px;
	text-align: unset;
	width: 90%;
	margin-bottom:50px;
	margin-top:-8px;
	color:#4b4b4b;
}
.WHR tr{
	border:1px darkgray solid;
	width:300px ;
}
.WHR td{
	border:1px darkgray solid;
	width:150px;
	background-color: #f9f9f9;
	font-family:arial;
	font-size:14px;
	padding-right:10px;
	overflow: hidden;
	text-align:center;
}
.WHR  td:nth-child(8n-7){
   text-align:left;
   padding-left:5px;
}
.WHR th{
	border:1px solid darkgray;
	background-color: #EFF0F1;
	font-size: 1em;
}
/****************/
.WHRGT8{
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.9em;
	background-color: #f9f9f9;
	margin: 5px auto;
	padding-right:-10px;
	text-align: unset;
	width: 90%;
	margin-bottom:50px;
	margin-top:-8px;
	color:#4b4b4b;
}
.WHRGT8 tr{
	border:1px darkgray solid;
	width:300px ;
}
.WHRGT8 td{
	border:1px darkgray solid;
	width:150px;
	background-color: #f9f9f9;
	font-family:arial;
	font-size:14px;
	padding-right:10px;
	overflow: hidden;
	text-align:center;
}
.WHRGT8  td:nth-child(8n-7){
   text-align:left;
   padding-left:5px;
}
.WHRGT8 th{
	border:1px solid darkgray;
	background-color: #EFF0F1;
	font-size: 1em;
}
/*******************/
.WHRR{
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.9em;
	background-color: #f9f9f9;
	margin: 5px auto;
	padding-right:-10px;
	text-align: unset;
	width: 90%;
	margin-bottom:50px;
	margin-top:40px;
	color:#4b4b4b;
}
.WHRR tr{
	border:1px darkgray solid;
	width:300px ;
	background-color: #f9f9f9;
}
.WHRR td{
	border:1px darkgray solid;
	width:150px;
	background-color: #f9f9f9;
	font-family:arial;
	font-size:14px;
	padding-right:10px;
	overflow: hidden;
	text-align:center;
}
.WHRR  td:nth-child(8n-7){
   text-align:left;
   padding-left:5px;
}
.WHRR td:nth-child(8n-5){
   text-align:left;
   padding-left:5px;
}
.WHRR td:nth-child(8n-3){
   text-align:left;
   padding-left:5px;
}
.WHRR td:nth-child(8n-6){text-align:right;padding-right:50px;}
.WHRR td:nth-child(8n-4){text-align:right;padding-right:50px;}
.WHRR td:nth-child(8n-2){text-align:right;padding-right:50px;}
.WHRR th{
	border:1px solid darkgray;
	background-color: lightgray;
	font-size: 1.0em;
}

.Ahllan{ margin-right:10px; }

.Amllan{ margin-right:10px; }

info{ margin-top:1000px; color:red; }

.NOTE{ color:#575d61; font-weight:normal;font-size: 0.8vw; }

.FilterImage{ margin-bottom:-0.25vw;/*margin-bottom:-5px;*/width:22px;height:22px;}

.normal{ font-weight:normal; }
.LinkButton{
	background:none;
	border:0;
	color:#f9f9f9;
	cursor:pointer;
	font-size:16px;
	margin-top:-10px;
}
/************************************************************************************************/
/*********************** the shtable *********************************************************/
/*********************************************************************************************/
.shtable{
	border:1px solid grey ;
	border-collapse: collapse;
	margin:0 auto;
	width:90%;
	
}
.shtable td {
	border:1px solid grey;
}
.shtable th {
	border:1px solid grey;
}
.shtable td:nth-child(1) {
	text-align:left;
}
.shtable tr:nth-child(even){
	background: darkgray;
	color:white;
}


.shtable1{
	border:1px solid grey ;
	border-collapse: collapse;
	margin:0 auto;
	width:90%;
	margin-bottom:10px;
	text-align:left;
}
.shtable1 td {
	border:1px solid grey;
}
.shtable1 th {
	border:1px solid grey;
}
.shtable1 tr:nth-child(even){
	background: darkgray;
	color:white;
}

/**********************************************************************************************/
/************************* THE SHIFT MARKET****************************************************/
/**********************************************************************************************/
.Market{
	text-align:center;
	font-size:15px;
	margin-top:10em;
    border:1px solid grey;
    border-collapse: collapse;
    width:430px;
    height:100px;
}
.Market td {
    border:1px solid grey;
}
.Market input[type=submit]{
    width:50%;
}
.Market2{
	text-align:center;
	font-size:15px;
	margin-top:10em;
    border:1px solid grey;
    border-collapse: collapse;
    width:50%;
    height:200px;
    background:#f9f9f9;
    color:black;
}
.Market2 td {
    border:1px solid grey;
    padding:5px auto 5px auto ;
    height:40px;
}
.Market2 tr:nth-child(1){
    font-weight:bold;
    color:grey;
    background:lightgray;
}
/*.Market2 tr:nth-child(even){

    background:lightblue;
}*/

.Market2 input[type=submit]{
    width:50%;
}
.Market2 button{
    background:lightcyan;
    border-radius:5px;
    border:1px solid gray;
}
.Market2 button:hover{
    color:white;
    background:darkgray;
    cursor:pointer;
}
.MarModel {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}
.MarModel-content {
    background: #2a5783; /* Old browsers */
	background: -moz-linear-gradient(top,  #2a5783 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2a5783), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2a5783 0%,#dae3f2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #2a5783 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a5783', endColorstr='#dae3f2',GradientType=1 );/* IE6-9 */
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    height:400%;
    position: relative;
    color:white;
    text-align:center;
}
#close{
    position: absolute;
    right: 10px;
    top: 5px;
}

.TM{
	width:50%;
	height:auto;
	margin:0 auto;
   border:.5px solid;
   border-collapse:collapse;
   background-color:#f9f9f9;
}
.TM tr{
	border:.5px solid;
}
.TM td{
	 border:.5px solid;
}
.TM th{
	text-decoration:bold;
   border:.5px solid;
}

.overlay {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;

	background-color: lightgray;
	overflow-x: hidden;
	transition: 0.5s;
}

.overlay-con {
	position: relative;
	top: 5%;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.overlay a {
	padding: 8px;
	text-decoration: none;
	font-size: 36px;
	color: #818181;
	display: block;
	transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
	color: gray;
}

.overlay .closebtn {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 20px;
}
.overlay .closebtn:hover {
	top: 5px;
	right: 5px;
	font-size: 25px;
	background-color:skyblue;
	color:black;
}
.Medo{
font-size:20px;
cursor:pointer;
text-align:center;
margin:0 auto;
background-color:lightgray;
padding-left:-10px;
width:20%;
left:0;
right:0;
margin-top:100px;
}
.Medo:hover{
	background-color:skyblue;
	color:white;
	width:25%;
	font-size:25px;
}
.timerecord{
	border-collapse: collapse;
	border:1px solid darkgray;
	width:50%;
	margin:0 auto;
	opacity: 1;
}
.timerecord th{
	background: lightgoldenrodyellow;
	border:1px solid gray;
	color: #4b4b4b;
}

.timerecord td{
	border:1px solid darkgray;
	color: #3f4346;
	font-size: 14px;
	padding: 1px;
	padding-left: 0px;
}
.timerecord input[type="text"]{
		height: 100%;
		box-sizing: unset;
		border: none;
		padding-top: 2% 2% 2% 2%;
		font-family: arial;
		font-size: 14px;
		display: inline-block;
		border-radius: 0;
		color: #3f4346;
		padding-left: 2px;
		width:95%;
}
.week3 {background-color: #EFF0F1;}

.highlight td:nth-child(1),.highlight td:nth-child(2),.highlight td:nth-child(3){background:Orange;}
#headhead {
	background-color: #EFF0F1;
	border: 1px solid darkgray;
	font-weight: bold;
	text-align: center;
	color: #4b4b4b;
	font-size: 1.0em;
}
.headservice{
	font-weight: normal;
	padding-left: 5px;
	/*vertical-align: -moz-middle-with-baseline;*/
	/*vertical-align: -5px;*/
}
/*.timerecord td:nth-child(1), .timerecord td:nth-child(2){padding-left: 5px;width:5%;}*/
.timerecord td:nth-child(2){width:6%;}
.timerecord td:nth-child(2){width:6%;}
.timerecord td:nth-child(1), .timerecord td:nth-child(2){padding-left: 5px;padding-right: 30px;}

.timerecord td:nth-child(4), .timerecord td:nth-child(5){width: 14%;}
.timerecord td:nth-child(6), .timerecord td:nth-child(7),.timerecord td:nth-child(8), .timerecord td:nth-child(9){width: 10%;}
.serviceless{padding-left: 10px;}
/*.timerecord td:nth-child(3),
.timerecord td:nth-child(4){
	width: 3%;
}*/
/*.timerecord td:nth-child(5), .timerecord td:nth-child(6),/*.timerecord td:nth-child(7),
.timerecord td:nth-child(8){
	width: 5%;
}*/
.timerecord td:nth-child(10){
	width: 10%;
}
/*******************************************/
/******** the new market*******************/
/********************context menu*********/
.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: solid 1px #dfdfdf;
}

.task:last-child {
  border-bottom: none;
}

/* context menu */

.context-menu {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 12px 0;
  width: 240px;
  background-color: #fff;
  border: solid 1px #dfdfdf;
  box-shadow: 1px 1px 2px #cfcfcf;
}

.context-menu--active {
  display: block;
}

.context-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu__item {
  display: block;
  margin-bottom: 4px;
}

.context-menu__item:last-child {
  margin-bottom: 0;
}

.context-menu__link {
  display: block;
  padding: 4px 12px;
  color: #0066aa;
  text-decoration: none;
}

.context-menu__link:hover {
  color: #fff;
  background-color: #0066aa;
}
/******************************************/
/*******************************************/
.AKINFO {
	border:1px solid darkgray;
	border-collapse: collapse;
	font-family:arial;
	font-size: 0.9em;
	background-color: #f9f9f9;
	margin: 0 auto;
	margin-top:12.7em;
	color:#4b4b4b;
}

.AKINFO tr{ border:1px black solid; width:500px ;	}

.AKINFO td{
	border:1px solid darkgray;
	width:200px;
	font-family:arial;
	padding-left: 10px;
	overflow: hidden;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (min-device-width : 360px) and (max-device-height : 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* smartphones, iPhone, portrait 480x320 phones */ 
#myNewPage{width:30%;}
body{margin: 0;font-family: Arial;background-color:white;width:100%;}
.ran{
	border:1px solid white;width: 100%;text-align:center;font-size:8px;bottom:0;padding-top:10px;
	background: #02376a; /* Old browsers */
	background: -moz-linear-gradient(top,  #02376a 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#02376a), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #02376a 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02376a', endColorstr='#dae3f2',GradientType=1 ); /* IE6-9 */
}
.SHMIMG{margin-left:-20px;margin-top:20px;width:20px;height:15px;}

.First{font-size:17px;padding-bottom:20px;color:#f9f9f9;}
.hFirst{display:none !important;visibility:hidden;}
.logintab{margin:0 auto; width:50%; margin-top:30px;}
.info{padding-top:40px;font-style:italic;margin-bottom:0px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:14px;}
.info1{padding-top:20px;font-style:italic;margin-bottom:-17px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:14px;}
.info2{padding-top:20px;font-style:italic;margin-bottom:-17px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:30px;}
.HeaderBar{
		height:4.5em;
		padding-bottom:0px;
		font-size:10px;
	}
.compoboxstyle{margin-bottom:3px;}

.MenuIcon {
		display:table-cell;
		vertical-align: top;
		padding-top: 5px;
		padding-left: 1px;
	}
.MenuIcon input{ font-size:10px; }

.Image{ margin-left:10px; }
.InfoBar{
	        display:none !important;
		visibility:hidden;
		text-align:left;
		padding-left: 5px;
		padding-top: 45px;
		padding-bottom: 0px;
		color:white;
		top:0;
		bottom:0;
		margin: 0.1em;
		margin-left:-1px;
		margin-bottom:100px;
		width: 110%;
		height:20px;
		background:#175898;
		font-size:12px;
		z-index: 1;

	}
.LOGO1{
	height:30px;
	width:100px;
	margin-bottom:-10px;
}
.LOGO{
	height:35px;
	width:120px;
	padding-right:10px;
	padding-bottom:8px;
}
.menul { margin-top:3px; color:#f9f9f9; font-size:10px; }
.MainContent { margin-top: 1em;margin-bottom:100px; }	
.TMM{ text-align:center;}

.container{
	height:20em;
	width:20em;
	margin:auto;
	border:1px;
	padding:1em;
	padding-top:2em;
	text-align:center;
	top:0;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:50px;
	border:1px;
	padding-bottom:0em;
	padding-top:0.1em;
	font-size:12px;	
}
.MainContent1 {
	margin-top: 6em;
    margin-bottom:100px;
}
.text{ width:200px;height:40px;float:left; border:none;color:gray; border-radius:0;
     margin: 0 0  -15px 0;
     padding: 0;
     width: 210px;}
input[type="text"]
{
	-moz-box-sizing:border-box;
   	-webkit-box-sizing:border-box;
    box-sizing:border-box;
	border-radius:0;
	padding-left:5px;
}
input[type="password"]{
	-moz-box-sizing:border-box;
   	-webkit-box-sizing:border-box;
    box-sizing:border-box;
	border-radius:0;
	padding-left:5px;
}
.field{
	height:16em;
	width:6em;
	margin:auto;
	margin-top:0px;
	text-align : center;
		}
#srTable{
	border:1px solid gray;
	color:lightgray;
	width:120%;
}
#srTable td{
	height:auto;
	padding:0px;
	top:0;
	bottom:0;
	border:1px solid gray;
}
#srTable tr{
	height:10px;
	padding:0px;
	top:0;
	bottom:0;
	border:1px solid gray;
}
#srTable td p{
	margin:0px;
}
#srTable td:nth-child(4), td:nth-child(2){text-align:left;width:600em;font-size:8px;}

.srTable{display:table;margin:0 auto; width:90%;margin-top:20%;}
.srTable1{
	text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
}
.oxfort{top:15%;width:100%;height:auto;text-align:right;}
.export{width:100%;position:relative;background:#175898;margin-top:-2%;cursor:pointer;}
.btn-default{
		height:40px;
		margin: 0;
		padding: 0;
		width: 210px;
		border-radius:0;
		border: none;
		text-align: center;
		text-decoration: none;
		font-size: 12px;
		text-align:center;
    	box-sizing: border-box;
		background: #02376a; /* Old browsers */
		background: -moz-linear-gradient(top,  #02376a 0%, #dae3f2 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#02376a), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #02376a 0%,#dae3f2 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02376a', endColorstr='#dae3f2',GradientType=1 ); /* IE6-9 */
		}
.btn-default input[type="submit"]
{
	-moz-box-sizing:    border-box;
   	-webkit-box-sizing: border-box;
    box-sizing:        border-box;
}
ul { display: inline; text-align: center; }
li { display:inline-block; list-style-type: none; padding:1px 1px 1px 1px; }
img.resize{ width:45px;height: auto;}

.ModuleName{
			display:table-cell;
			vertical-align: middle;
			text-align:center;
			background: transparent;
			color:white;
			font-family:arial;
			font-size:12px;
			left:0px;
		}
.mobile{font-size:10px;margin-left:25px;font-weight:normal;text-align:center;margin-top:20px;}

.Time {
			width:150px;
			height:50px;
			font-size:20px;
		 }
.time {
			width:150px;
			height:25px;
			border-radius:1px;
			border: 1px solid #575D61;
			font-size:20px;
		}
.tab {width:260px;height:200px;}
.pln {border:1px solid #99ccff; width:300px;}

.WorkingHoursAccount {
		border:1px solid darkgray;
		border-collapse: collapse;
		font-family:arial;
		font-size: 2em;
		background-color: #f9f9f9;
		margin:0px auto ;
		margin-top:24px;
		}
.WorkingHoursAccount tr{
		border:1px black solid;
		width:300px ;
		background-color: #f9f9f9;
		}
.WorkingHoursAccount td{
		border:1px black solid;
		width:150px;
		background-color: #f9f9f9;
		font-family:arial;
		font-size:14px;
		overflow: hidden;

		}
#right{ text-align:right;}
#left{ text-align:left; }
.PlanWeek{
			width:110%;
			font-size: 0.7em;
			margin-top:0px;
			text-align: center;
            padding-top:20px;
			}

.PlanWeek tr{
			border:1px black solid;
			width:300px ;
			background-color: #dcdfe1;
		
			}
.PlanWeek td{
			
			width:150px;
			background-color: #f9f9f9;
			font-family:arial;
			font-size: 0.6em;
			padding-right:10px;
			overflow: hidden;
			}
.PlanWeek th{
			border:1px solid darkgray;
			background-color: lightgray;
			font-size: 0.6em;
			}
.PlanWeek th:nth-child(7n-4){
			text-align:center;
			font-size:8px;
			width:20%;
			}
.PlanWeek th:nth-child(7n-3){
			text-align:center;
			font-size:7px;
			width:15%;
			}
.PlanWeek th:nth-child(7n-6){
			text-align:center;
			font-size:7px;
			width:15%;
			}
.PlanWeek th:nth-child(7n-5){
			text-align:center;
			font-size:7px;
			width:15%;
			}
.PlanWeek  th:nth-child(7n-3){
		text-align:left;
		padding-left:2px;
		font-size:7px;
		width:10%;
		}
.WTR {	font-size: 0.7em;
		width:100%;
		margin-top:-100px;
		}
.WTR td input{
		width:100%;
		box-sizing: none;
		display:block;
		border:none;
		padding:5px 5px 5px 5px;
		font-family:arial;
		font-size:11px;
		display:block;
		}
.WTR td {
		border:1px solid darkgray;
		padding: 1px 10px;
		overflow: hidden;
		}

.WTR tr {
		border:1px solid darkgray;
		padding: 1px;
		}

.WTR th {
		border:1px solid darkgray;
		background-color: lightgray;
		font-size: 1.0em;
		}

.WTR  td:nth-child(6n-3){
		width:5px;
		}

.WTR  td:nth-child(6n-4){
		width:0.5%;
		}
.WTR  td:nth-child(6n-5){
		width:0.5%;
		}
.pmg {
		border:1px solid darkgray;
		border-collapse: collapse;
		font-family:arial;
		background-color: #eff0f1;
		width:90%;
		margin-top:30px;
		margin:90 auto;
		margin-left:0px;
		margin-right:10px;
		}
.pmg td { border:1px solid darkgray; padding: 1px; overflow: auto;font-size: 0.7em;} 

.pmg td#bcalender { font-weight: bold;font-size: 0.7em; }

.pmg td#bcalend { font-weight: bold; vertical-align:top; }

.pmg tr { border:1px solid darkgray; padding: 1px; }
.pmg td.selected{vertical-align:middle;font-size:12px;text-align:center;width:50px;}
.pmg td.selected2{width:10%;position:relative;}

.pmg th {border:1px solid darkgray;background-color: lightgray;font-size: 1.0em;}
.scrollshiftmarket{width:90%;margin:0 auto;overflow-x:scroll;padding-top:20px;}
.scrolleinsatz{ width:100%;overflow-x:scroll;overflow-y:scroll;overflow-y:visible;padding-bottom:1px;margin-top:20px;}

.pmd {
		width:90%;
		border:1px solid darkgray;
		border-collapse:collapse;
		font-family:arial;
		font-size:10px;
		background-color: #eff0f1;
		margin-top:0px;
		table-layout: auto;
		margin-left:0px;
		margin-right:10px;
		bottom:0;
		header:fixed;
		float:left;
		}     
.pmd td {
		border:1px solid darkgray;
		border-collapse: collapse;
		padding-left:2px;
		padding-right:-5px;
		}
.pmd td#bcalender{
		font-weight: bold;
		background-color:#eff0f1; 
		table-layout: fixed;
		}
.pmd td#b { font-weight: bold;background-color:#eff0f1; }
.pmd td#b:nth-child(n){ color:#4b4b4b;padding-left:5px;font-size:11px;}
.pmd tr { padding: 1px; border-collapse: collapse;}
.scroll{ width:100%;overflow-x:scroll;overflow-y:scroll;overflow-y:visible;padding-bottom:1px;margin-top:10px;}

.moh{ margin-bottom:20px; }
.WHR{
		width:400px;
		border:1px solid darkgray;
		border-collapse: collapse;
		font-family:arial;
		background-color: #f9f9f9;
		margin-bottom:50px;
		margin-top:24px;
		text-align: center;
		box-sizing:border-box; /* causes item size to include border and padding */
		-moz-box-sizing:border-box; /*for browser compatibility*/
		}
.WHR tr{ border:1px black solid;background-color: #dcdfe1;}
.WHR td{               
		background-color: #f9f9f9;
		font-family:arial;
		font-size: 0.4em;
		padding-right:0px;
		overflow: hidden;
		}
.WHR th{font-size:7px; border:1px solid darkgray;background-color: lightgray;}
.WHR th:nth-child(7n-4){text-align:center;font-size:8px; width:10%; }
.WHR th:nth-child(7n-3){text-align:center;font-size:7px;width:10%;}
.WHR th:nth-child(7n-6){text-align:center;font-size:7px;width:15%;}
.WHR th:nth-child(7n-5){text-align:center;font-size:7px;width:15%;}
.WHRR{
		border:1px solid black;
		border-collapse: collapse;
		font-family:arial;
		font-size: 0.3em;
		background-color: #f9f9f9;
		margin: 5px auto;
		padding-right:-10px;
		text-align: unset;
		width: 90%;
		margin-bottom:50px;
		margin-top:40px;
		color:#4b4b4b;
		}
.WHRR tr{border:1px darkgray solid; width:300px ; background-color: #f9f9f9; }
.WHRR td{
		border:1px darkgray solid;
		width:150px;
		background-color: #f9f9f9;
		font-family:arial;
		font-size:8px;
		padding-right:5px;
		overflow: hidden;
		text-align:center;
		}
.WHRR td:nth-child(1){width:100px;}
.mobfont{font-size:5px;}
.WHRR  td:nth-child(8n-7){text-align:left; padding-left:5px;}
.WHRR th{border:1px solid darkgray; background-color: lightgray; font-size: 1.0em; }

.FilterImage{ margin-bottom:-5px;width:18px; height:18px;}
.Filter{font-size:17px;width:50px;height:15px;height:19px; }
.Filter1{ width:40px;}
.Filter1p{ width:50px;}

.overlay a {font-size: 20px}
.overlay .closebtn {font-size: 40px;top: 15px;right: 30px;}
.Market{text-align:center;font-size:10px; margin-top:10em;}
.TM{
		 width:80%;
		 height:auto;
		 margin:0 auto;
		 border:1px solid;
		 border-collapse:collapse;
		 background-color:#f9f9f9;
		 font-size:10px;
		 }
.TM tr{border:1px solid;}
.TM td{border:1px solid;}
.TM th{ text-decoration:bold; border:1px solid; }
.overlay {
		 height: 100%;
		 width: 0;
		 position: fixed;
		 z-index: 1;
		 top: 0;
		 right: 0;
		 background-color: #f9f9f9;
		 overflow-x: hidden;
		 transition: 0.5s;
		 }
.overlay-content {
		 position: relative;
		 top: 2%;
		 width: 100%;
		 text-align: center;
		 font-size:10px;
		 }

.overlay a {
		 padding: 8px;
		 text-decoration: none;
		 font-size: 16px;
		 color: #818181;
		 display: block;
		 transition: 0.3s;
		 }
.overlay a:hover, .overlay a:focus {color: gray;}
.overlay .closebtn {position: absolute;top: 5px;right: 5px;font-size: 15px; }
.overlay .closebtn:hover {top: 5px;right: 5px;font-size: 25px;background-color:skyblue;color:black;}
.Medo{
		font-size:16px;
		cursor:pointer;
		text-align:center;
		margin:0 auto;
		background-color:lightgray;
		padding-left:-10px;
		width:60%;
		left:0;
		right:0;
		margin-top:100px;
		}
.Medo:hover{ background-color:skyblue; color:white;width:65%;font-size:16px;}
.container{
	height:20em;
	width:20em;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:50px;
	border:1px;
	padding-bottom:0em;
	padding-top:0.1em;
	text-align:center;
	font-size:12px;	
	top:0;
}

.hFirst{ margin-bottom:-5px;}
.info2{font-size:10px;margin-top:-55px;}
.DataFilter{ width:100%;margin-top:-82px;background:#175898;margin-top:100px\9;padding-top:100px\9;color:#575d61;position:fixed;text-align:right;right:0;}
.MobileDataFilter{ font-size:10px;margin-top:-50px;}
.dropdown {
	    display:none;
		visibility:hidden;
}

.dropdown-content {
	    display:none;
		visibility:hidden;
}
.dropdown-content img{
	    display:none;
		visibility:hidden;
}

.dropdown-content a {
	    display:none;
		visibility:hidden;

}
.PopUpMenuItem{ display:none !important;visibility:hidden;}
.PopUpMenuItem1{display:none !important;visibility:hidden;}
.PopUpMenuItem2{ margin-left:10px;}
PopUpMenuItem5{margin-left:-10px;}
.PopUpMenuItem3{ display:none !important;visibility:hidden;}


.dropdown-content a:hover, .dropdown-content a:focus {
	    display:none;
		visibility:hidden;
}

.closebtn  {
	    display:none;
		visibility:hidden;
}
 .closebtn:hover {
	    display:none;
		visibility:hidden;
}
.dropdown-pop{
	    display:none;
		visibility:hidden;
}
.TOP{margin-top:3.6em;}
.WTR{ width:100%;margin-top:-45px;}

.mobile{margin-top:-70px;}
.scroll{margin-top:10px;}
.btn-default{ margin:0 auto;}
.PlanYear{ margin-top:0px;}
.SchoolHolidays{margin-top:10px;margin-left:0px;}
.wtrError {margin-top:40px;padding-bottom:50px; }
.wtrInfo {margin-top:-40px;padding-bottom:50px;padding-top:15px;font-weight:bold; }
.BBWY {margin-top:100px;width:100%;}
.Bb{ margin-top:100px;font-size:20px;}
.mobilecompoboxstyle{display:none;}
.mobilecompoboxstyle1{display:block;}
.bton .bton1{font-size:10px;}

.scrollplan{margin-top:20%;overflow:scroll;height:400px;}
.scrolleinsatz{ width:100%;overflow-x:scroll;overflow-y:scroll;overflow-y:visible;padding-bottom:1px;margin-top:20px;}



.MessageStyle{font-size:10px;width:auto;margin-top:-100px;}
.shtable, .shtable1{font-size:10px;}
.MessageStyle1{width:auto;overflow-x:scroll;}
#srTable td{color:black;}
.srTable{overflow:scroll;margin-top:-30px;height:300px;}
.footer{position:fixed;font-size:10px;bottom:0;}
}
/* Smartphones (landscape) ----------- */
@media  (min-device-width : 321px) {
.pmg td img.SHMIMG{
    position:absolute;
    margin-top:-30px; }

}

@media only screen and (-webkit-device-pixel-ratio: 3) {
.MessageStyle{font-size:10px;width:auto;margin-top:-100px;}
} 

@media (max-device-width: 1024px) and (min-device-width : 400px){
	/*.main{top:15.9%;}
	.MessageStyle{top:22%;}*/
	  .dropdown{-webkit-overflow-scrolling: auto;}
	.btn-default{width:100%;border-radius: 0px;border:none;margin-top: 1px;}
	.text{border-radius: 0px;}
	.scrollplan{-webkit-overflow-scrolling: touch;}
	.scrolleinsatz{ width:100%;overflow-x:scroll;overflow-y:scroll;overflow-y:visible;padding-bottom:1px;margin-top:20px;}
	
}
@media (max-device-width: 320px) {

}

@media  (max-width: 768px) and (min-width: 480px) {
/*.main{top:20%;}*/
.MessageStyle{width:100%;/*top:6.30%;*/-webkit-overflow-scrolling: touch ;}
/*.phoneMenuButton:after{content:"\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 click to see the menu";white-space: pre;color:grey;}   */
.dropdown{-webkit-overflow-scrolling: touch ; }
.footer{position:fixed;font-size:10px;}
.scrollplan{-webkit-overflow-scrolling: touch ;}
.scrolleinsatz{ width:100%;overflow-x:scroll;overflow-y:scroll;overflow-y:visible;padding-bottom:1px;margin-top:20px;}
.oxfort{top:10%;}
.WHRR td:nth-child(1){width:100px;}
.PlanWeek{width:100%;}

}

@media only screen and (max-width: 640px){
    .WHR{
		width:90%;
		border:1px solid darkgray;
		border-collapse: collapse;
		font-family:arial;
		background-color: #f9f9f9;
		margin-bottom:50px;
		margin-top:24px;
		text-align: center;
		box-sizing:border-box; /* causes item size to include border and padding */
		-moz-box-sizing:border-box; /*for browser compatibility*/
		}
.WHR tr{ border:1px black solid;background-color: #dcdfe1;}
.WHR td{               
		background-color: #f9f9f9;
		font-family:arial;
		font-size: 12px;
		padding-right:0px;
		overflow: hidden;
		}
.WHR td.mobfont{font-size:15px;}
.WHR th{ border:1px solid darkgray;background-color: lightgray;}
.WHRR{
		border:1px solid black;
		border-collapse: collapse;
		font-family:arial;
		background-color: #f9f9f9;
		margin: 5px auto;
		padding-right:-10px;
		text-align: unset;
		width: 90%;
		margin-bottom:50px;
		margin-top:40px;
		color:#4b4b4b;
		}
.WHRR td:nth-child(1){width:100px;}
.WHRR tr{border:1px darkgray solid; width:300px ; background-color: #f9f9f9; }
.WHRR td{
		border:1px darkgray solid;
		background-color: #f9f9f9;
		font-family:arial;
		font-size:10px;
		padding-right:5px;
		overflow: hidden;
		text-align:center;
		}
.oxfort{top:10%;}
.SchoolHolidays{margin-top:100px;margin-left:0px;}

}

 @media only screen and (width:1280px) {
	   .pmgPlanning{margin-top:60px;width:1280px;}
	   .dropdown{height:530px;}
 }
  @media only screen and (width:620px) {
	   .pmgPlanning{margin-top:60px;width:1280px;}
	   .dropdown{height:530px;}
	  
 }

 @media only screen and (width: 960px) and (width: 770px){
	.dropdown{-webkit-overflow-scrolling: auto;}
	.btn-default{width:100%;border-radius: 0px;border:none;margin-top:10px;}
	.text{border-radius: 0px;}
	.scrollplan{overflow-x: scroll;}
	#srTable{margin-top:100px;}
	.MessageStyle{margin-top:-20px;}
}


@media only screen and (max-width:901px) and (min-width:303px){
	#srTable{margin-top:100px;}

}
@keyframes spin {

to { transform: rotateY(180deg);
}
}
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.MessageStyle{width:100%;/*top:6.30%;*/-webkit-overflow-scrolling: touch ;margin-top:-5px;}
	.main {display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    /*left: 0;*/
    top: 30;
   width:200px; /* Full width */
	/*margin-left:5%;*/
    height: 332px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: green; /* Fallback color */
    background-color: green; /* Black w/ opacity */
   text-align:center;border-radius:2px;
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
    padding-top:10px;
    margin-top:42px;
   }
   .bton {width:200px;}.bton1{width:200px;}
   /*.phoneMenuButton:after{content:"\00a0  click to see the menu";white-space: pre;color:green;}*/
  	 .phoneMenuButton{margin-top:45px;position:fixed;display:block;border:1px solid grey;cursor:pointer;right:0;left:0;margin-left:2px;text-align:center;width:30px;height:30px;background-color:#52769c;}
	 .phoneMenuButton2{margin-top:45px;position:fixed;display:none;border:1px solid grey;cursor:pointer;right:0;left:0;margin-left:2px;text-align:center;margin-bottom:10px;width:30px;height:30px;background-color:#52769c;}
	 
   
 }

 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {
	 .MessageStyle{width:100%;/*top:6.30%;*/-webkit-overflow-scrolling: touch ;margin-top:-72px;}
  	 .phoneMenuButton{margin-top:-10px;position:fixed;display:block;border:1px solid grey;cursor:pointer;right:0;left:0;margin-left:2px;text-align:center;width:30px;height:30px;background-color:#52769c;}
	 .phoneMenuButton2{margin-top:-10px;position:fixed;display:none;border:1px solid grey;cursor:pointer;right:0;left:0;margin-left:2px;text-align:center;margin-bottom:10px;width:30px;height:30px;background-color:#52769c;}
/*.phoneMenuButton:after{content:"\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 click to see the menu";white-space: pre;color:grey;}*/   
.dropdown{-webkit-overflow-scrolling: touch ; }
.bton {width:200px;}.bton1{width:200px;}
	.main {display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    top: 30;
    height: 300px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
	background:#80b3ff;
   text-align:center;border-radius:2px;
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
    padding-top:10px;
    margin-top:105px;
   }
   .FilterImage{ margin-bottom:-5px;width:18px; height:18px;}
   .WHR{width: 96%;}
    .WHR td{font-size: 10px;}
	#srTable{font-size: 10px;}

  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {
	  .FilterImage{ margin-bottom:-5px;width:18px; height:18px;}
  }

@media only screen and (max-width: 480px){
#myNewPage{width:30%;}
body{margin: 0;font-family: Arial;background-color:white;width:100%;}
.ran{
	border:1px solid white;width: 100%;text-align:center;font-size:8px;bottom:0;padding-top:10px;
	background: #02376a; /* Old browsers */
	background: -moz-linear-gradient(top,  #02376a 0%, #dae3f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#02376a), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #02376a 0%,#dae3f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02376a', endColorstr='#dae3f2',GradientType=1 ); /* IE6-9 */
}
.SHMIMG{margin-left:-20px;margin-top:20px;width:20px;height:15px;}

.First{font-size:17px;padding-bottom:20px;color:#f9f9f9;}
.hFirst{display:none !important;visibility:hidden;}
.logintab{margin:0 auto; width:50%; margin-top:30px;}
.info{padding-top:40px;font-style:italic;margin-bottom:0px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:14px;}
.info1{padding-top:20px;font-style:italic;margin-bottom:-17px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:14px;}
.info2{padding-top:20px;font-style:italic;margin-bottom:-17px;margin-top:-30px;font-style:italic;color:#f9f9f9;font-size:30px;}
.HeaderBar{
		height:4.5em;
		padding-bottom:0px;
		font-size:10px;
	}
.compoboxstyle{margin-bottom:3px;}

.MenuIcon {
		display:table-cell;
		vertical-align: top;
		padding-top: 5px;
		padding-left: 1px;
	}
.MenuIcon input{ font-size:10px; }

.Image{ margin-left:10px; }
.InfoBar{
	        display:none !important;
		visibility:hidden;
		text-align:left;
		padding-left: 5px;
		padding-top: 45px;
		padding-bottom: 0px;
		color:white;
		top:0;
		bottom:0;
		margin: 0.1em;
		margin-left:-1px;
		margin-bottom:100px;
		width: 110%;
		height:20px;
		background:#175898;
		font-size:12px;

	}
.LOGO1{
	height:30px;
	width:100px;
	margin-bottom:-10px;
}
.LOGO{
	height:35px;
	width:120px;
	padding-right:10px;
	padding-bottom:8px;
}
.menul { margin-top:3px; color:#f9f9f9; font-size:10px; }
.MainContent { margin-top: 1em;margin-bottom:100px; }	
.TMM{ text-align:center;}

.container{
	height:20em;
	width:20em;
	margin:auto;
	border:1px;
	padding:1em;
	padding-top:2em;
	text-align:center;
	top:0;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:50px;
	border:1px;
	padding-bottom:0em;
	padding-top:0.1em;
	font-size:12px;	
}
.MainContent1 {
	margin-top: 6em;
    margin-bottom:100px;
}
.text{ width:200px;height:40px;float:left; border:none;color:gray; border-radius:0;
     margin: 0 0  -15px 0;
     padding: 0;
     width: 210px;}
input[type="text"]
{
	-moz-box-sizing:border-box;
   	-webkit-box-sizing:border-box;
    box-sizing:border-box;
	border-radius:0;
	padding-left:5px;
}
input[type="password"]{
	-moz-box-sizing:border-box;
   	-webkit-box-sizing:border-box;
    box-sizing:border-box;
	border-radius:0;
	padding-left:5px;
}
.field{
	height:16em;
	width:6em;
	margin:auto;
	margin-top:0px;
	text-align : center;
		}
#srTable{
	border:1px solid gray;
	color:lightgray;
	width:120%;
}
#srTable td{
	height:auto;
	padding:0px;
	top:0;
	bottom:0;
	border:1px solid gray;
}
#srTable tr{
	height:10px;
	padding:0px;
	top:0;
	bottom:0;
	border:1px solid gray;
}
#srTable td p{
	margin:0px;
}
#srTable td:nth-child(4), td:nth-child(2){text-align:left;width:600em;font-size:8px;}

.srTable{display:table;margin:0 auto; width:90%;margin-top:20%;}
.srTable1{
	text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
}
.oxfort{top:15%;width:100%;height:auto;text-align:right;}
.export{width:100%;position:relative;background:#175898;margin-top:-2%;cursor:pointer;}
.btn-default{
		height:40px;
		margin: 0;
		padding: 0;
		width: 210px;
		border-radius:0;
		border: none;
		text-align: center;
		text-decoration: none;
		font-size: 12px;
		text-align:center;
    	box-sizing: border-box;
		background: #02376a; /* Old browsers */
		background: -moz-linear-gradient(top,  #02376a 0%, #dae3f2 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#02376a), color-stop(100%,#dae3f2)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #02376a 0%,#dae3f2 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #02376a 0%,#dae3f2 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02376a', endColorstr='#dae3f2',GradientType=1 ); /* IE6-9 */
		}
.btn-default input[type="submit"]
{
	-moz-box-sizing:    border-box;
   	-webkit-box-sizing: border-box;
    box-sizing:        border-box;
}
ul { display: inline; text-align: center; }
li { display:inline-block; list-style-type: none; padding:1px 1px 1px 1px; }
img.resize{ width:45px;height: auto;}

.ModuleName{
			display:table-cell;
			vertical-align: middle;
			text-align:center;
			background: transparent;
			color:white;
			font-family:arial;
			font-size:12px;
			left:0px;
		}
.mobile{font-size:10px;margin-left:25px;font-weight:normal;text-align:center;margin-top:20px;}

.Time {
			width:150px;
			height:50px;
			font-size:20px;
		 }
.time {
			width:150px;
			height:25px;
			border-radius:1px;
			border: 1px solid #575D61;
			font-size:20px;
		}
.tab {width:260px;height:200px;}
.pln {border:1px solid #99ccff; width:300px;}

.WorkingHoursAccount {
		border:1px solid darkgray;
		border-collapse: collapse;
		font-family:arial;
		font-size: 2em;
		background-color: #f9f9f9;
		margin:0px auto ;
		margin-top:24px;
		}
.WorkingHoursAccount tr{
		border:1px black solid;
		width:300px ;
		background-color: #f9f9f9;
		}
.WorkingHoursAccount td{
		border:1px black solid;
		width:150px;
		background-color: #f9f9f9;
		font-family:arial;
		font-size:14px;
		overflow: hidden;

		}
#right{ text-align:right;}
#left{ text-align:left; }
.PlanWeek{
			width:110%;
			font-size: 0.7em;
			margin-top:0px;
			text-align: center;
            padding-top:20px;
			}

.PlanWeek tr{
			border:1px black solid;
			width:300px ;
			background-color: #dcdfe1;
		
			}
.PlanWeek td{
			
			width:150px;
			background-color: #f9f9f9;
			font-family:arial;
			font-size: 0.6em;
			padding-right:10px;
			overflow: hidden;
			}
.PlanWeek th{
			border:1px solid darkgray;
			background-color: lightgray;
			font-size: 0.6em;
			}
.PlanWeek th:nth-child(7n-4){
			text-align:center;
			font-size:8px;
			width:20%;
			}
.PlanWeek th:nth-child(7n-3){
			text-align:center;
			font-size:7px;
			width:15%;
			}
.PlanWeek th:nth-child(7n-6){
			text-align:center;
			font-size:7px;
			width:15%;
			}
.PlanWeek th:nth-child(7n-5){
			text-align:center;
			font-size:7px;
			width:15%;
			}
.PlanWeek  th:nth-child(7n-3){
		text-align:left;
		padding-left:2px;
		font-size:7px;
		width:10%;
		}
.WTR {	font-size: 0.7em;
		width:100%;
		margin-top:-100px;
		}
.WTR td input{
		width:100%;
		box-sizing: none;
		display:block;
		border:none;
		padding:5px 5px 5px 5px;
		font-family:arial;
		font-size:11px;
		display:block;
		}
.WTR td {
		border:1px solid darkgray;
		padding: 1px 10px;
		overflow: hidden;
		}

.WTR tr {
		border:1px solid darkgray;
		padding: 1px;
		}

.WTR th {
		border:1px solid darkgray;
		background-color: lightgray;
		font-size: 1.0em;
		}

.WTR  td:nth-child(6n-3){
		width:5px;
		}

.WTR  td:nth-child(6n-4){
		width:0.5%;
		}
.WTR  td:nth-child(6n-5){
		width:0.5%;
		}
.pmg {
		border:1px solid darkgray;
		border-collapse: collapse;
		font-family:arial;
		background-color: #eff0f1;
		width:90%;
		margin-top:30px;
		margin:90 auto;
		margin-left:0px;
		margin-right:10px;
		}
.pmg td { border:1px solid darkgray; padding: 1px; overflow: auto;font-size: 0.7em;} 

.pmg td#bcalender { font-weight: bold;font-size: 0.7em; }

.pmg td#bcalend { font-weight: bold; vertical-align:top; }

.pmg tr { border:1px solid darkgray; padding: 1px; }
.pmg td.selected{vertical-align:middle;font-size:12px;text-align:center;width:50px;}
.pmg td.selected2{width:10%;position:relative;}

.pmg th {border:1px solid darkgray;background-color: lightgray;font-size: 1.0em;}
.scrollshiftmarket{width:90%;margin:0 auto;overflow-x:scroll;padding-top:20px;}

.pmd {
		width:90%;
		border:1px solid darkgray;
		border-collapse:collapse;
		font-family:arial;
		font-size:10px;
		background-color: #eff0f1;
		margin-top:40px;
		table-layout: auto;
		margin-left:0px;
		margin-right:10px;
		bottom:0;
		}     
.pmd td {
		border:1px solid darkgray;
		border-collapse: collapse;
		padding-left:2px;
		padding-right:-5px;
		}
.pmd td#bcalender{
		font-weight: bold;
		background-color:#eff0f1; 
		table-layout: fixed;
		}
.pmd td#b { font-weight: bold;background-color:#eff0f1; }
.pmd td#b:nth-child(n){ color:#4b4b4b;padding-left:5px;font-size:11px;}
.pmd tr { padding: 1px; border-collapse: collapse;}
.scroll{ width:100%;overflow-x:scroll;overflow-y:scroll;overflow-y:visible;padding-bottom:1px;margin-top:10px;}
.scrolleinsatz{ width:100%;overflow-x:scroll;overflow-y:scroll;overflow-y:visible;padding-bottom:1px;margin-top:20px;}

.moh{ margin-bottom:20px; }
.WHR{
		width:400px;
		border:1px solid darkgray;
		border-collapse: collapse;
		font-family:arial;
		background-color: #f9f9f9;
		margin-bottom:50px;
		margin-top:24px;
		text-align: center;
		box-sizing:border-box; /* causes item size to include border and padding */
		-moz-box-sizing:border-box; /*for browser compatibility*/
		}
.WHR tr{ border:1px black solid;background-color: #dcdfe1;}
.WHR td{               
		background-color: #f9f9f9;
		font-family:arial;
		font-size: 0.4em;
		padding-right:0px;
		overflow: hidden;
		}
.WHR th{font-size:7px; border:1px solid darkgray;background-color: lightgray;}
.WHR th:nth-child(7n-4){text-align:center;font-size:8px; width:10%; }
.WHR th:nth-child(7n-3){text-align:center;font-size:7px;width:10%;}
.WHR th:nth-child(7n-6){text-align:center;font-size:7px;width:15%;}
.WHR th:nth-child(7n-5){text-align:center;font-size:7px;width:15%;}
.WHRR{
		border:1px solid black;
		border-collapse: collapse;
		font-family:arial;
		font-size: 0.3em;
		background-color: #f9f9f9;
		margin: 5px auto;
		padding-right:-10px;
		text-align: unset;
		width: 90%;
		margin-bottom:50px;
		margin-top:40px;
		color:#4b4b4b;
		}
.WHRR tr{border:1px darkgray solid; width:300px ; background-color: #f9f9f9; }
.WHRR td{
		border:1px darkgray solid;
		width:150px;
		background-color: #f9f9f9;
		font-family:arial;
		font-size:8px;
		padding-right:5px;
		overflow: hidden;
		text-align:center;
		}
.WHRR td:nth-child(1){width:100px;}
.mobfont{font-size:5px;}
.WHRR  td:nth-child(8n-7){text-align:left; padding-left:5px;}
.WHRR th{border:1px solid darkgray; background-color: lightgray; font-size: 1.0em; }

.FilterImage{ margin-bottom:-5px;width:18px; height:18px;}
.Filter{font-size:17px;width:50px;height:15px;height:19px; }
.Filter1{ width:40px;}
.Filter1p{ width:50px;}

.overlay a {font-size: 20px}
.overlay .closebtn {font-size: 40px;top: 15px;right: 30px;}
.Market{text-align:center;font-size:10px; margin-top:10em;}
.TM{
		 width:80%;
		 height:auto;
		 margin:0 auto;
		 border:1px solid;
		 border-collapse:collapse;
		 background-color:#f9f9f9;
		 font-size:10px;
		 }
.TM tr{border:1px solid;}
.TM td{border:1px solid;}
.TM th{ text-decoration:bold; border:1px solid; }
.overlay {
		 height: 100%;
		 width: 0;
		 position: fixed;
		 z-index: 1;
		 top: 0;
		 right: 0;
		 background-color: #f9f9f9;
		 overflow-x: hidden;
		 transition: 0.5s;
		 }
.overlay-content {
		 position: relative;
		 top: 2%;
		 width: 100%;
		 text-align: center;
		 font-size:10px;
		 }

.overlay a {
		 padding: 8px;
		 text-decoration: none;
		 font-size: 16px;
		 color: #818181;
		 display: block;
		 transition: 0.3s;
		 }
.overlay a:hover, .overlay a:focus {color: gray;}
.overlay .closebtn {position: absolute;top: 5px;right: 5px;font-size: 15px; }
.overlay .closebtn:hover {top: 5px;right: 5px;font-size: 25px;background-color:skyblue;color:black;}
.Medo{
		font-size:16px;
		cursor:pointer;
		text-align:center;
		margin:0 auto;
		background-color:lightgray;
		padding-left:-10px;
		width:60%;
		left:0;
		right:0;
		margin-top:100px;
		}
.Medo:hover{ background-color:skyblue; color:white;width:65%;font-size:16px;}
.container{
	height:20em;
	width:20em;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:50px;
	border:1px;
	padding-bottom:0em;
	padding-top:0.1em;
	text-align:center;
	font-size:12px;	
	top:0;
}

.hFirst{ margin-bottom:-5px;}
.info2{font-size:10px;margin-top:-55px;}
.DataFilter{ width:100%;margin-top:-8px;background:#175898;margin-top:100px\9;padding-top:100px\9;color:#575d61;position:fixed;text-align:right;right:0;}
.MobileDataFilter{ font-size:10px;margin-top:-50px;}
.dropdown {
	    display:none;
		visibility:hidden;
}

.dropdown-content {
	    display:none;
		visibility:hidden;
}
.dropdown-content img{
	    display:none;
		visibility:hidden;
}

.dropdown-content a {
	    display:none;
		visibility:hidden;

}
.PopUpMenuItem{ display:none !important;visibility:hidden;}
.PopUpMenuItem1{display:none !important;visibility:hidden;}
.PopUpMenuItem2{ margin-left:10px;}
PopUpMenuItem5{margin-left:-10px;}
.PopUpMenuItem3{ display:none !important;visibility:hidden;}


.dropdown-content a:hover, .dropdown-content a:focus {
	    display:none;
		visibility:hidden;
}

.closebtn  {
	    display:none;
		visibility:hidden;
}
 .closebtn:hover {
	    display:none;
		visibility:hidden;
}
.dropdown-pop{
	    display:none;
		visibility:hidden;
}
.TOP{margin-top:3.6em;}
.WTR{ width:100%;margin-top:-45px;}

.mobile{margin-top:-70px;}
.scroll{margin-top:10px;}
.btn-default{ margin:0 auto;}
.PlanYear{ margin-top:0px;}
.SchoolHolidays{margin-top:10px;margin-left:0px;}
.wtrError {margin-top:40px;padding-bottom:50px; }
.wtrInfo {margin-top:-40px;padding-bottom:50px;padding-top:15px;font-weight:bold; }
.BBWY {margin-top:100px;width:100%;}
.Bb{ margin-top:100px;font-size:20px;}
.mobilecompoboxstyle{display:none;}
.mobilecompoboxstyle1{display:block;}
.bton .bton1{font-size:10px;}

.scrollplan{margin-top:20%;overflow:scroll;height:400px;}


.MessageStyle{font-size:10px;width:auto;margin-top:-100px;}
.shtable, .shtable1{font-size:10px;}
.MessageStyle1{width:auto;overflow-x:scroll;}
#srTable td{color:black;}
.srTable{overflow:scroll;margin-top:-30px;height:300px;}
.footer{position:fixed;font-size:10px;bottom:0;}

}

  /*for iphone 5 and 5s*/


/* @media only screen and (width:1280px) and (height:800px){
	 .MessageStyle{margin-top:100px;}
 }*/
/*
@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ /*}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ /*}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ /*}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ /*}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ /*}
@media (min-width:1281px) { /* hi-res laptops and desktops *//* }