@charset "utf-8";
/* CSS Document */


div,p,h1,h2,h3,h4,h5,h6,form,table,tr,td,body,ol,ul,li{
	padding:0;
	margin:0;
	background-repeat:no-repeat;
}

div{
	position:relative;
	background-repeat:no-repeat;
}
img{ border:none; }

a{ text-decoration:none; background-repeat:no-repeat; color:#314F5E; }

body {
	-webkit-text-size-adjust:none;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	line-height:1.3em;
	background-color:#DBE5EA;
	text-align:left;
	color:#314F5E;
	width:100%;
	height:100%;
}
.console {
	min-width: 510px;
}

#mainDiv{
	width: 100%;
	text-align: left;
	min-width:320px;
}
#innerMainDiv{
	width: 100%;
	padding-top:50px;
}
#adminStrip{
	width:100%;
	height:30px;
	background-color: #C6202E;
	position:fixed;
	top:0px;
}

#menuStrip{
	width:100%;
	height:49px;
	background-color:#FFF;
	position:fixed;
	top:0px;
	border-bottom:1px solid #DBE5EA;
}
.adminLink{
	font-weight: 700;
	font-size: 115%;
	color: #C6202E;
	position: absolute;
	left: 105px;
	top: 14px;
}

#innerMenuStrip{
	background-image:url(../images/myinfo_logo.svg);
	background-size:auto 30px;
	background-position:10px center;
	width:100%;
	height:100%;
}
#menuButton{
	display:block;
	top:0px;
	right:0px;
	width:50px;
	height:100%;
	position:absolute;
	padding-right:12px;
	background-image:url(../images/menu_button.svg);
	background-size:25px auto;
	background-position:center;
}



.titleStrip{
	background-color:#314F5E;
	width:100%;
	height:50px;
}
.titleStrip h1{
	color:#FFF;
	padding-left:15px;
	padding-top:15px;
	text-align:center;
}

#menuDiv{
	position: absolute;
	width: 300px;
	top: 49px;
	right: 0px;
	font-size: 17px;
	line-height: 16px;
	text-align: right;
	display:none;
}
#menuDiv ul{
	width: 300px;
	display: block;
	box-shadow: 5px 5px 8px #777;
	padding: 0;
	margin: 0;
	list-style: none;
	/* border: 1px solid #DDD; */
}
#menuDiv li{
	width: 100%;
	height: 45px;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
#menuDiv a{
	display: block;
	padding: 14px 15px 10px 5px;
	height: 19px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

#menuDiv li:hover, #menuDiv li a:hover{
	background-color:#6F99AC;
	color:#FFF;
	
}

.admin_login #menuButton,.login_submit #menuButton{
	display:none;
}



#innerContentDiv{
	padding:0px;
}
p,h1,h2,h3,h4,h5,h6,li,label{
	line-height:1.3em;
	font-weight:400;
}

h1{
	font-weight:700;
	font-size:115%;
}

h2{
	font-weight:600;
}


strong{
	font-weight:700;
}
.alert{
	color:#DD3333;
	font-weight:600;
	text-align:center;
	
}

.fieldBox{
	margin-top:15px;
	
}

.fieldBox label{
	padding-bottom:5px;
	display:block;
}
.fieldBox .fieldBG{
	background-color:#FFF;
	height:50px;
}
.fieldBox input[type="text"],.fieldBox input[type="password"]{
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	outline:none;
	box-shadow:none;
	border:none;
	background:none;
	padding:6px;
	margin:0;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	font-size:115%;
	color:#314F5E;
}

.fieldBox .fieldBG input:focus,.fieldBox .fieldBG input:invalid{
	outline:none;
	box-shadow:none;
}

/*
.button{
	display:block;
	height:50px;
	background-color:#6F99AC;
	padding:0 10px;
	color:#FFF;
	font-weight:600;
	line-height:50px;
	overflow:hidden;
	text-align:center;
	margin-bottom:10px;
}
*/

.button{
	display:flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	background-color:#6F99AC;
	border: 2px solid #6F99AC;
	padding:15px 10px;
	box-sizing: border-box;
	color:#FFF;
	font-weight:600;
	line-height:1.2;
	text-align:center;
	margin-bottom:10px;
}



.button.reports{
	background-color:#DD3333;	
}

.dropdownStyle{
	/* width: 100%; */
	height: 50px;
	overflow: hidden;
	background-image:url(../images/up_down.svg);
	background-size:auto 25px;
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-color:#FFF;
	margin-top:15px;
}

.dropdownStyle select{
	background: transparent;
	padding: 3px;
	padding-left:5px;
	border: 0;
	border-radius: 0;
	height: 50px;
	-webkit-appearance: none;
	width:120%;
	color:#314F5E;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:115%;
}



#contentDiv{
	margin:0 auto;
}
#loginFields{
	padding:10px 0 20px 0;
}
#loginLinks{
	padding-top:15px;
}
#loginLinks a{
	display:block;
	text-align:center;
	margin-bottom:15px;
}

.infoPanel{
	margin-bottom:20px;
	margin-top:20px;
}
.infoPanel img{
	width:100%;
	height:auto;
}



.admin_login #innerContentDiv,.console #innerContentDiv,.login_submit #innerContentDiv,.index #innerContentDiv{
	padding:15px;
}



.admin_login #contentDiv,.console #contentDiv, .login_submit #contentDiv,.index #contentDiv{
	max-width:500px;
}



.shift_confirm #innerContentDiv{
	padding:0;
}


.periodBanner{
	background-color:#B7CCD5;
	padding: 15px 15px;
	margin-bottom:15px;
	text-align:center;
}
.shiftBlock,.detailsPanel,.itemPanel,.enquiryBlock{
	
	max-width:500px;
	margin:0 auto;	
}
.detailsPanelInner,.itemPanelInner{
	margin: 0px 15px 15px 15px;
}
.shiftBlockInner{
	margin: 0px 15px 15px 15px;
	background-color:#FFF;
}
.shiftBlock table{
	width:100%;
	font-size:14px;
}
.shiftBlock table td{
	text-align:left;
	vertical-align:middle;
	padding:10px;
	line-height:1.15em;
}
.shiftBlock table .shiftDate{
	border-right:1px solid #DBE5EA;
	font-size:115%;
	font-weight:700;
	width:40%;
}
.shiftBlock table .shiftButtons{
	border-left:1px solid #DBE5EA;
	width:30px;
}
.shiftBlock table .shiftButtons a{
	display:block;
	width:30px;
	height:30px;
	background-size:30px 30px;
}
.shiftBlock table .shiftDetails{
	border-top:1px solid #DBE5EA;
}
.shiftBlock table .shiftConfirmButton a{
	background-image:url(../images/circle_tick.svg);
}
.shiftBlock table .shiftRejectButton a{
	background-image:url(../images/circle_cross.svg);
}
.shiftBlock table .shiftEditButton a{
	background-image:url(../images/circle_edit.svg);
}
.shiftBlock table .shiftNotesButon a{
	background-image:url(../images/circle_notes.svg);
}

.shiftBlock table .shiftRejectButton{
	vertical-align:bottom;
}
.shiftBlock table .itemEditButton a{
	background-image:url(../images/circle_edit.svg);
}
.shiftBlock.deleted td{
	background-color: #B7CCD5;
}
.shiftConfirmed td{
	background-color:#80DABC;
}
.shiftConfirmed .shiftConfirmButton a{
	background-color: #80DABC;
	background-blend-mode: lighten;
}
.shiftRejected td{
	background-color:#EE9999;
}
.shiftBlock .shiftRejected .shiftRejectButton a{
	background-image:url(../images/notes_icon.svg);
	background-size:auto 25px;
	background-position:center;
}
.shiftConfirmed.shiftLocked .shiftRejectButton a{
	display:none;
}
.shiftRejected.shiftLocked .shiftConfirmButton a{
	display:none;
}
.periodBanner.shiftLocked{
	background-image:url(../images/padlock.svg);
	background-size:auto 30px;
	background-position:right 25px center;
}



#notes{
	display:none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}

.lbDark{
	position:fixed;
	width:100%;
	height:100%;
	background-color:#000000;
	left:0px;
	right:0px;
	bottom:0px;
	top:0px;
	opacity:0.7;
}
.notesBox{
	width:90%;
	min-width:288px;
	position:relative;
	top:60px;
	background-color:#DBE5EA;
}
.shift_confirm .notesBox{
	max-width:500px;
	margin-left:auto;
	margin-right:auto;
}
.shift_confirm .notesBox .dropdownStyle{
	margin-bottom:30px;
	
}
.notesBanner{
	background-color:#6F99AC;
	padding: 15px 25px;
	margin-bottom:15px;
}
.notesBanner h1{
	color:#FFF;
}
.notesContainer{
	padding:15px;
}
.notesText{
	background-color:#FFF;
	height:210px;
	margin-bottom:30px;
}
.notesText textarea{
	width:96%;
	height:95%;
	resize:none;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	outline:none;
	box-shadow:none;
	border:none;
	background:none;
	padding:6px;
	margin:0;
	font-size:115%;
	color:#314F5E;
}

.notesText textarea:focus,.notesText textarea:invalid{
	outline:none;
	box-shadow:none;
}
.notesBanner a{
	display:block;
	background-image:url(../images/white_cross.svg);
	background-size:20px auto;
	width:35px;
	height:100%;
	background-position:left center;
	position:absolute;
	right:0px;
	top:0px;
}
.notesBox .button{
	
}
.notesBox td:first-child{
	padding-right:5px;
}
.notesBox td:first-child td{
	padding-left:5px;
}
.notesBox #deleteNote{
	background-color:#DD3333;
}
#submitConfirm{
	margin: 30px 0 40px 0;
}
#passwordPanelInner{
	padding-top:80px;
}
.update_details .dropdownStyle{
	margin-top:0;
}
.update_details .button{
	margin-top:35px;
	margin-bottom:80px;
}
.pay_advice .periodBanner{
	margin-top:15px;
}
.payment_enquiry #innerContentDiv{
	padding-top:15px;
}
.absence #innerContentDiv,.reports #innerContentDiv{
	padding-top:15px;
}
.absence .enquiryBlock table .enquiryDate,.reports .enquiryBlock table .enquiryDate{
	width:50%;
}
.absence .enquiryBlock table .enquiryStatus,.reports .enquiryBlock table .enquiryStatus{
	background-image:none; 
}
#start_date_field{
	width:48%;
	float:left;
	margin-right:4%;
}
#end_date_field{
	width:48%;
	float:left;
}
.calendarIcon{
	background-image:url(../images/calendar.svg);
	background-size: 20px 23px;
	background-position:center;
	display:block;
	position:absolute;
	right:5px;
	top:5px;
	width:40px;
	height:40px;
}




.enquiryBlockInner{
	margin: 0px 15px 15px 15px;
	background-color:#FFF;
}
.enquiryBlock table{
	width:100%;
	font-size:14px;
	cursor:pointer;
}
.enquiryBlock table td{
	text-align:left;
	vertical-align:middle;
	padding:10px;
	line-height:1.15em;
}
.enquiryBlock table .enquiryDate{
	border-right:1px solid #DBE5EA;
	font-size:115%;
	font-weight:700;
	width:40%;
}
.enquiryBlock table .enquiryStatus{
	background-image:url(../images/cog.svg);
	background-size: 20px 20px;
	background-position:right 15px center;
}


.enquiryBlock table.inProcess td.enquiryStatus{
	background-blend-mode: color-dodge;
}
.enquiryBlock table .enquiryInfo{
	border-top:1px solid #DBE5EA;
}
.enquiryBlock table .enquiryDetails{
	border-top:1px solid #DBE5EA;
	
}
.enquiryBlock table .enquiryDetails p{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:hidden;
}
.enquiryBlock table .enquiryDetails p.showDetails{
	display:block;
}

.enquiryBlock table.inProcess td{
	background-color:#EE9999;
}
.enquiryBlock table.completed td{
	background-color:#80DABC;
}

.enquiryBlock table.completed td.enquiryStatus{
	background-image:url(../images/circle_tick.svg);
	background-color: #80DABC;
	background-blend-mode: lighten;
	background-size:30px 30px;
}


#addNew{
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
}

.addNewBox{
	width:500px;
	position:relative;
	margin: 0 auto;
	top:60px;
	background-color:#DBE5EA;
}
.addNewBanner{
	background-color:#6F99AC;
	padding: 15px 25px;
	margin-bottom:15px;
}
.addNewBanner h1{
	color:#FFF;
}
.addNewContainer{
	padding:0 15px 15px 15px;
}
.addNewText{
	background-color:#FFF;
	height:210px;
	margin-top:15px;
}
.questionblock{
	height:70px;
	margin-top:8px;
}
.question{
	margin-top:20px;
	margin-bottom:0px;
}
.twoLines{
	height:60px;
	margin-bottom:30px;
}
.submit_record .twoLines{
	margin-bottom:0;
}
.addNewText textarea{
	width:100%;
	height:100%;
	resize:none;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	outline:none;
	box-shadow:none;
	border:none;
	background:none;
	padding:6px;
	margin:0;
	font-size:115%;
	color:#314F5E;
	box-sizing: border-box;
}

.addNewText textarea:focus,.addNewText textarea:invalid{
	outline:none;
	box-shadow:none;
}
.addNewBanner a{
	display:block;
	background-image:url(../images/white_cross.svg);
	background-size:20px auto;
	width:35px;
	height:100%;
	background-position:left center;
	position:absolute;
	right:0px;
	top:0px;
}
.notesBox .button{
	
}
.notesBox td:first-child{
	padding-right:5px;
}
.notesBox td:first-child td{
	padding-left:5px;
}
.notesBox #deleteNote{
	background-color:#DD3333;
}

.noclaims{
	font-weight: 700;
	font-size: 115%;
	text-align:center;
	margin-bottom:15px;
}

.addClaim{
	background-color:#FFFFFF;
	color:#314F5E;
	background-image:url(../images/circle_plus.svg);
	background-size:30px 30px;
	background-position: right 10px center;
	text-align:left;
}
#km_field,#amount_field,#other_field,#expenseNotes,#travelNotes,#selectParticipant{
	display:none;
}
#addNew .button{
	margin-top:15px;
}
#addReceipt{
	background-color:#FFF;
	margin-top:15px;
	display:none;
}
#addReceipt p{
	padding-bottom:10px;
}
#addReceipt h2{
	font-weight: 700;
	font-size: 115%;
	margin-bottom: 10px;
}
.addReceiptInner{
	
}
.receiptBlock{
	border-bottom:1px solid #DBE5EA;
	/* padding-bottom:15px; */
	padding:15px;
}
.selecReceipt{
	position:absolute;
	right:15px;
	top:15px;
	display:block;
	width:31px;
	height:31px;
	background-image:url(../images/circle_tick.svg);
	background-size:30px 30px;
}
.selected{
	background-color: #80DABC;
}
.selected .selecReceipt{
	background-color: #80DABC;
	background-blend-mode: lighten;
}
.deleteButton{
	width:45%;
	margin-right:15px;
	float:left;
	background-color:#DD3333;
}
.timeDropdown{
	width:22%;
	float:left;
	margin-right: 4%;
}
.timeinout{
	width:48%;
	float:left;
	margin-right: 4%;
}
.smallMargin{
	margin-top:2px;
}
.checkBox{
	margin-top:15px;
	background-color:#FFF;
	padding:10px;
}
.checkBox a{
	display:block;
	height:30px;
	background-image:url(../images/check_box.svg);
	background-size:25px 25px;
	background-position: 3px center;
	padding-left:40px;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:115%;
	line-height:1.9em;
}
.checkBox .checkBoxChecked{
	background-image:url(../images/circle_tick.svg);
	background-position:0 center;
	background-size: 30px 30px;
}
#saveIncomplete{
	width:45%;
	margin-right:15px;
	float:left;
	background-color:#FFF;
	border:2px solid #6F99AC;
	color:#314F5E;
}
.noBG{
	background:none;
}
.overlapWarning,.incompleteWarning,.mismatchWarning{
	background-image:url(../images/alert.svg);
	background-position:15px 14px;
	background-size:12px 11px;
	color:#DD3333;
	font-size:115%;
	font-weight:400;
	padding:10px 15px 5px 37px;
	display:none;
	
}
.overlap .overlapWarning{ display:block; }
.overlap .incompleteWarning{ display:none; }
.overlap .mismatchWarning{ display:none; }

.incomplete .incompleteWarning{ display:block; }
.incomplete .overlapWarning{ display:none; }
.incomplete .mismatchWarning{ display:none; }

.mismatch .overlapWarning{ display:none; }
.mismatch .incompleteWarning{ display:none; }
.mismatch .mismatchWarning{ display:block; }

.overlap .shiftBlockInner,.incomplete .shiftBlockInner,.mismatch .shiftBlockInner{
	border:2px solid #DD3333;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.alert_doconfirm #innerMainDiv{
	padding-top:0;
	
}
.alert_doconfirm #innerMainDiv .button{
	width: 44%;
	margin-left: 3%;
	margin-right: 3%;
	float: left;
	box-sizing: border-box;
}
.alert_doconfirm #innerContentDiv{
	padding:20px;
}
.alert_doconfirm p{
	text-align:center;
	padding-bottom:20px;
	line-height:140%;
}
.forgot #innerContentDiv,.sendpassword #innerContentDiv {
	padding: 20px;
}
.forgot #innerMainDiv,.sendpassword #innerMainDiv{
	padding-top:0;
	
}
.forgot #innerMainDiv .button{
	margin-top:15px;
	
}
.sendpassword h1{
	padding-bottom:15px;
}



#overlay-background,#lbBackground {
/* display: none;
opacity: 0; */
background: rgba(0,0,0,.75);
width: 100%;
height: 100%;
z-index: 9999999;
top: 0;
left: 0;
position: fixed;
overflow: scroll;
}

#overlay-container{
	background-image:url(../images/cake.jpg);
	background-size: auto 190px;
	background-position: center 20px;
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    background-color: white;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    padding: 40px;
	padding-top:230px;
    position: relative;
	text-align:center;
}

#password-container{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    background-color: white;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    padding: 30px 30px 25px 30px;
    position: relative;
	text-align:left;
}

#password-container h2{
	line-height: 1.3em;
	font-size: 16px;
    margin-bottom: 10px;
}

#password-container ul{
	margin-left:17px;
	margin-bottom:20px;
}
#password-container p{
	margin-bottom:5px;
}
#lbContainer{
	max-width:640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    background-color: white;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    position: relative;
	text-align:center;
	padding:0;

}
#lbFrame{
	width:100%;
	height:100%;
}
#overlay-container h1,#overlay-container h2{
    color: black;
    line-height: 1.3em;
}
#overlay-container h1{
    font-size: 36px;
	color:#FF0000;
}

#overlay-container h2{
    font-size: 24px;
    margin-bottom: 10px;
}

.overlay-close{
    position: absolute;
    right: 10px;
    top: 10px;
    font-family:Arial, "sans-serif";
    font-size: 28px;
    color: #B0B0B0;
}

@media only screen and (max-width: 640px) {
	body{ font-size:16px; }
	.addNewBox{
		width:90%;
	}
	.periodBanner{
		text-align:left;
	}
	.titleStrip h1{
		text-align:left;
	}
	.noclaims{
		text-align:left;
		padding-left:15px;
	}
	.alert_doconfirm #innerMainDiv .button{
		float:none;
		width:100%;
		margin-left:0;
		margin-right:0;
	}
	 #overlay-container{
        height: auto;
        width: 90%;
    }
	
	#lbBackground{
		position: absolute;
		min-height: 1800px;
	}
	#lbContainer{
		margin-top:50px;
	}
}




.admin #menuButton{
	background-image:url(../images/menu_button_admin.svg);
}
.admin .titleStrip{
	background-color:#C6202E;
}

body.admin {
	background-color:#f3f0e9;
}


.admin .button{
	background-color:#E69A9A;
	border: 2px solid #E69A9A;
}

.admin #menuStrip{
	border-bottom:1px solid #f3f0e9;
}


#menuDiv li:hover, #menuDiv li a:hover{
	background-color:#E69A9A;
}

.validate #innerContentDiv{
	padding-top:30px;
}

.verifyButton{
	margin-top:30px;
}

.center{
text-align: center;
}

#results{
	position:absolute;
	left:0px;
	top:67px;
	right:0px;
	background-color:#FFF;
	padding:5px 10px;
	box-shadow: 3px 3px 10px #555;
	display:none;
	z-index: 10;
	box-sizing: border-box;
}
.result{
	display:block;
	color:#222;
	padding-top:5px;
	padding-bottom:5px;
	font-size:15px;
	box-sizing: border-box;
}
.result:hover{
	background-color:#CCC;
}