body {
	background-color: rgb(240, 241, 247, 1.0);
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 12px;
}
h1 {
	margin: 0px 0px 20px 0px;
	font-size: 24px;
	font-weight: normal;
}
a {
	color: rgba(0,131,227,1.00);
	text-decoration: none;
}

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

        Login

************************************************************************************/
.login{
	position: fixed;
	top:0px;
	left: 0px;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/loginbackground.jpg');
    background-size: cover;
    background-position: center;
}

.login form{
    width: 350px;
    padding: 25px;
	height: auto!important;
    background-color: #fff;
    margin: 150px auto;
    text-align: center;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(87,87,87,0.29);
    -moz-box-shadow: 5px 5px 5px 0px rgba(87,87,87,0.29);
    box-shadow: 5px 5px 5px 0px rgba(87,87,87,0.29);
    overflow: hidden;
}


.login form input[type=text], .login form input[type=password]{
    float: left;
    padding: 5px 10px;
    width: calc(100% - 20px);
    border: none;
    border-bottom: 1px solid #cecece;
    margin-bottom: 25px;
    transition: all .2s ease;
    text-align: center;
}

.login form input[type=text]:focus, .login form input[type=password]:focus{
    padding: 10px;
    border-bottom: 1px solid #4063a7;
}

.login form input[type=submit]{
    float: left;
    width: 100%;
    padding: 10px 10px;
    text-align: center;
    color: #fff;
    background-color: #4063a7;
    border: 1px solid #4063a7;
    transition: all .2s ease;
    cursor: pointer;
	margin: 0px!important;
}

.login form input[type=submit]:hover{
    color: #4063a7;
    background-color: #fff;
}
.login form img {
    margin-bottom: 25px;
}


.header > a {
	float: left;
	margin: 7px 20px;
}
.header > a img {
	height: 50px;
}

.header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 64px;
	background-color: #fff;
}
.header ul {
	float: right;
	list-style: none;
}
.header ul li {
	float: left;
}
.header ul li a {
	display: block;
	padding: 25px 30px;
	font-size: 14px;
	color: #000;
	text-decoration: none;
}
.header ul li.admin {
	background-color: #4063a7;
}
.header ul li.admin a {
	color: #fff;
}


.content {
	position: fixed;
	top: 64px;
	left: 0px;
	width: 100vw;
	height: calc(100vh - 140px);
	overflow: auto;
	padding: 36px 0px 40px 0px;
}

.container {
	width: calc(100vw - 80px);
	max-width: 1200px;
	margin: 0px auto;
	padding: 0px 40px;
	text-align: center;
}

.container .block {
	position: relative;
	background-color: #fff;
	width: 300px;
	vertical-align: top;
	padding: 20px;
	text-align: left;
	display: inline-block;
	margin: 20px;
	font-size: 14px;
	line-height: 24px;
	min-height: 220px;
	box-shadow: 0px 10px 9px -8px #666;
}
.container .block.w2 {
	width: 680px;
}
.container .block.w50 {
	width: calc(50% - 110px);
}
.container .block.h265 {
	height: 285px;
}

.container .block strong {
	display: block;
	margin: 0px 0px 20px 0px;
	font-size: 20px;
}
.container .block a {
	display: block;
	margin: 0px 0px 10px 0px;
	text-decoration: none;
	color: #000;
}
.container .block .posbig {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 30px;
}
.container .block img {
	display: inline-block;
	max-height: 40px;
	vertical-align: middle;
	margin: 0px 10px 0px 0px;
}
.container .block a em {
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
}
.container .block a em span {
	float: left;
	margin: -10px 0px 0px 0px;
	color: #666;
	font-size: 12px;
}

.dates {
	list-style: none;
}
.dates li {
	display: block;
	overflow: hidden;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
	border-bottom: 1px solid #ccc;
}
.dates li:last-child {
	border: 0px;
	padding: 0px;
	margin: 0px;
}

.dates li div.cal {
	float: left;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid #4063a7;
	width: 40px;
	margin: 0px 20px 0px 0px;
}
.dates li div.cal span {
	background-color: #4063a7;
	color: #fff;
	display: block;
	text-align: center;
	font-size: 10px;
	line-height: 10px;
	padding: 5px 0px;
}
.dates li div.cal strong {
	display: block;
	background-color: #fff;
	text-align: center;
	line-height: 27px;
	height: 30px;
	margin: 0px!important;
}
.dates li div.txt {
	display: inline-block;
	width: calc(100% - 65px);
}
.dates li div.txt div {
	display: table-cell;
	vertical-align: middle;
	height: 52px;
}
.dates li div.txt div em {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: #666;
	margin: 0px;
	line-height: 15px;
	overflow: hidden;
	max-height: 30px;
}



.more {
	text-align: right;
	font-size: 12px;
	color: #666 !important;
	margin: 0px !important;
	position: absolute;
	bottom: 10px;
	right: 20px;
}

.postedby {
	display: block;
	text-align: right;
	font-size: 12px!important;
	color: #666!important;
	margin: 10px 0px 10px 0px;
}
.startworkon {
	display: none;
}

.block form {
	display: block;
	height: 330px;
	overflow: hidden;
}
form .w50 {
	display: inline-block;
	width: 49.5%;
	vertical-align: top;
	margin: 0px 0px 20px 0px;
}
form label {
	display: block;
	margin: 0px 0px 4px 0px;
}
form input {
	display: inline-block;
	padding: 5px 10px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	border-radius: 5px;
	border: 1px solid #ccc;
	width: calc(100% - 22px);
}
form .w50 input {
	width: calc(100% - 40px);
}
form select {
	display: inline-block;
	padding: 5px 10px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	border-radius: 5px;
	border: 1px solid #ccc;
	width: calc(100% - 0px);
	margin: 0px 0px 10px 0px;
}
form input[type=submit] {
	float: right;
	padding: 10px 20px;
	background-color: #4063a7;
	color: #fff;
	width: auto;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	border-radius: 5px;
	border: 1px solid #4063a7;
	margin: 30px 0px 0px 0px;
}
form input[type=checkbox] {
	padding: 10px 20px;
	width: auto;
	border-radius: 5px;
	border: 1px solid #4063a7;
	margin: 30px 0px 0px 0px;
}
form textarea {
	display: block;
	padding: 5px 10px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	border-radius: 5px;
	border: 1px solid #ccc;
	width: calc(100% - 22px);
	height: 50px;
}

.admincontent {
	display: block;
	width: 1000px;
	margin: 0px auto;
}

.adminmenu {
	background-color: #4063a7;
	margin: -36px 0px 30px 0px;
}
.adminmenu ul {
	display: block;
	overflow: hidden;
	width: 1000px;
	margin: 0px auto;
}
.adminmenu ul li {
	display: inline-block;
}
.adminmenu ul li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
}

table {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}
table th {
	background-color: #000!important;
	color: #fff!important;
	border-left: 1px solid #000;
	border-top: 1px solid #000; 
	padding: 8px 15px;
	text-align: left;
}
table td {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc; 
	background-color: #fff;
	padding: 8px 15px;
	text-align: left;
}
form.containerform input {
	margin: 0px 0px 15px 0px;
}

.setvacation {
	text-align: center;
}
.setvacation input {
	border: 0px;
	width: 40px;
	text-align: center;
}
.vactable td, .vactable th {
	padding: 4px 8px;
	text-align: center;
}
.vactable tr.totalrow td {
	background-color: rgba(235,235,235,1.00);
}
.vactable tr.weekend td {
	color:rgba(176,176,176,1.00);
	background-color:rgba(255,170,172,0.50);
}
.vactable tr td.sick {
	background-color: rgba(249,255,25,1.00);
}
.vactable tr td.special {
	background-color: rgba(161,189,255,1.00);
}
.vactable tr td:first-child{
	text-align: right;
}

.vactable td span {
	cursor: pointer;
}
.vactable td span.hasnotes {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("/images/info.png");
	background-position: center right;
	background-size: auto 80%;
	background-repeat: no-repeat;
}





table.vactable {
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 auto;
	font-size: 12px;
}

.vactable thead, .vactable tfoot {
    position: relative;
	border-right: 26px solid rgb(240, 241, 247, 1.0);
	border-bottom: 1px solid #ccc;
}
.vactable thead tr, .vactable tfoot tr {
    display: block;
    position: relative;
}
.vactable td, .vactable th {
	padding: 4px 4px!important;
	width: 90px;
}
.vactable tr td:first-child, .vactable tr th:first-child {
	width: 65px!important;
}

.vactable tr td:nth-child(2), .vactable tr th:nth-child(2) {
	width: 65px!important;
}
.vactable tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: calc(100vh - 310px);
}
.vactable.redh1 tbody {
    height: calc(100vh - 360px);
}
.vactable.redh2 tbody {
    height: calc(100vh - 410px);
}



.highlight-row td {
  background-color: #fff8dc;
}
.highlight-col {
  background-color: #fff8dc;
}

.documents {
	text-align: center;
}
.peryaer {
	max-width: 800px;
	background-color: #fff;
	padding: 30px;
	border-radius: 10px;
	margin: 9px auto 30px auto
}
.peryaer strong {
	display: block;
	font-weight: normal;
	font-size: 18px;
	margin: 0px 0px 10px 0px;
}
.peryaer ul {
	margin: 0px;
	list-style: none;
	padding: 0px;
	}
.peryaer ul li {
	display: block;
	margin: 0px 0px 5px 0px;
	border-radius: 10px;
	background-color: rgba(224,224,224,1.00);
	padding: 10px 20px;
	text-align: left;
}
.peryaer ul li img {
	display: inline-block;
	height: 35px;
	margin: 0px 5px 0px 0px;
	vertical-align: middle;
}
.peryaer ul li a { 
	color: #000;
	font-size: 16px;
}
.peryaer ul li em { 
	display: inline-block;
	width: calc(100% - 120px);
	vertical-align: middle;
	line-height: 18px;
}
.peryaer ul li em span { 
	display: block;
	vertical-align: middle;
	font-size: 12px;
}

.notificationMessage {
	display: block;
	width: 300px;
	position: fixed;
	bottom: 20px;
	left: -500px;
	padding: 10px;
	border-radius: 10px;
	line-height: 16px;
	transition: all 0.3s;
}
.notificationMessage.open {
	left: 20px;
}
.notificationMessage.status200 {
	background-color: rgba(193,211,184,1.00);
	border: 2px solid rgba(13,179,0,1.00);
}
.notificationMessage.status500 {
	background-color: rgba(255,179,181,1.00);
	border: 2px solid rgba(255,0,4,1.00);
}
.notificationMessage strong {
	display: block;
	margin: 0px 0px 5px 0px;
	font-weight: normal;
	font-size: 16px;
}



.custom-tooltip {
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
}

.requesteddays {
	border-radius: 10px;
	padding: 10px 20px 0px 20px;
	background-color: #fff;
}
.requesteddays > div { 

	display: none;
}
.requesteddays > div.show { 
	display: block;
}
.requesteddays > strong { 
	display: block;
	font-size: 16px;
	font-weight: normal;
	margin: 0px 0px 10px 0px;
	border-bottom: 1px solid #ccc;
	padding: 5px 0px 10px 0px;
}
.requesteddays > div li { 
	border-radius: 10px;
	background-color: #fff;
	margin: 0px 0px 10px 0px;
	padding: 10px 0px;
	overflow: hidden;
	border-bottom: 1px solid #ccc;
}
.requesteddays > div li:last-child { 
	border-bottom: 0px;
}
.requesteddays > div li div { 
	float: left;
	min-height: 50px;
}
.requesteddays > div li div.c1 { 
	width: 30%;
}
.requesteddays > div li div.c2 { 
	width: 20%;
}
.requesteddays > div li div.c3 { 
	width: 30%;
}
.requesteddays > div li div.c4 { 
	width: 20%;
}
.requesteddays > div li div strong { 
	display: block;
	font-weight: normal;
	font-size: 18px;
	margin: 0px 0px 10px 0px;
}



.overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.30);
	z-index: 1000;
}
.popup {
	position: fixed;
	z-index: 1001;
	padding: 30px;
	border-radius: 10px;
	background-color: #fff;
	top: 50%;
	left: 50%;
}

.messages {
	position: relative;
}

.messages .list {
	float: left;
	width: 40%;
}
.messages .list ul {
	display: block;
	width: 80%;
	background-color: #fff;
}
.messages .list ul li {
	display: block;
	text-align: left;
	line-height: 26px;
	border: 1px solid #fff;
	margin: 0px 0px 2px 0px;
	padding: 10px 20px;
	cursor: pointer;
}
.messages .list ul li:hover {
	border: 1px solid #4063a7;
}
.messages .list ul li.new {
	border-bottom: 1px solid #4063a7;
}
.messages .list ul li.new strong, .messages .list ul li.new em, .messages .list ul li.new em span {
	font-weight: bold!important;
}
.messages .list ul li strong {
	font-weight: normal;
	display: block;
	font-size: 18px;
}
.messages .list ul li em {
	overflow: hidden;
	font-style: normal;
	font-weight: normal;
	display: block;
}
.messages .list ul li em span {
	float: right;
}
.messages .list ul li.active {
	background-color: rgba(221,231,255,1.00);
	border: 1px solid #4063a7;
}





.messages .details {
	float: right;
	width: 60%;
	text-align: left;
}

.messages .details .mssgtitle {
	background-color: #fff;
	margin: 0px 0px 4px 0px;
	padding: 10px 20px;
	font-size: 18px;
}
.messages .details .mssgheader {
	background-color: #fff;
	margin: 0px 0px 4px 0px;
	padding: 10px 20px;
	overflow: hidden;
}
.messages .details .mssgheader strong {
	display: block;
	font-size: 16px;
	color: #4063a7;
	line-height: 22px;
}
.messages .details .mssgheader em {
	display: block;
	font-size: 12px;
	line-height: 20px;
}

.messages .details .mssgheader .tools {
	float: right;
}
.messages .details .mssgheader .tools a {
	display: inline-block;
	margin: 5px 0px 0px 10px;
	padding: 10px 20px;
	background-color: #4063a7;
	color: #fff;
}
.messages .details .mssgbody {
	background-color: #fff;
	padding: 20px 20px;
	overflow: hidden;
}


.holliday td {
	background-color: #ffc000;
}
.nowd {
	background-color: rgba(228,228,228,0.30)!important;
}



.mobnav {
	display: none;
}

@media only screen and (max-width: 739px) {

	.header {
		z-index: 1000;
	}
	.header ul {
		display: none!important;
	}
	.container {
		width: 100vw;
		padding: 0px 0px;
	}
	
	.container .block.w2 {
		width: calc(100% - 80px);
	}
	.container .block {
		width: calc(100% - 80px);
	}
	.container .block.w50 {
		width: calc(100% - 80px);
	}
	.container .block {
        width: calc(100% - 40px);
		padding: 20px;
		margin: 0px 0px 20px 0px;
		min-height: 0px!important;
		max-height: none!important;
		height: auto!important;
		display: block !important;
	}
    .latestnote {
        color: #fff!important;
        background-color: #4063a7 !important;
        margin: -34px 0px 20px 0px !important;
        width: calc(100% - 40px) !important;
        display: block !important;
    }
    .latestnote em {
		color: #fff!important;
	}
	.container .block.w50 {
        width: calc(100% - 40px);
    }
	form .w50 {
		width: 100%;
		display: block;
		float: none;
		text-align: left!important;
	}
	form .w50 input {
		width: calc(100% - 22px);
	}
	.block form {
		height: auto;
	}
	
	.mobnav {
		display: inline-block;
		float: right;
		height: 30px;
		margin: 20px 20px 0px 0px
	}
	
	.nav.active ul {
        display: block !important;
        position: fixed;
        z-index: 100000000;
        width: 200px;
        top: 66px;
        right: 0px;
        background-color: #fff;
        box-shadow: 0px 2px 9px -2px #000;
	}
	.nav.active ul li {	
		float: none;
		display: block;
	}
	
	.messages .list {
		display: block;
		height: 30vh;
		float: none;
		width: 100%;
		overflow-x: auto;
		border-bottom: 5px solid #4063a7;
	}
	.messages .list ul{
		width: 100%;
	}
	.messages .list ul li {
		border-bottom: 1px solid #ccc;
	}

	.messages .details {
		float: none;
		width: 100%;
		height: calc(70vh - 146px);
		text-align: left;
		display: block;
		background-color: #fff;
	}
	
}