.formBox {}
	

	
/*form classes*/
.formTextBox, .forms input[type="text"], .forms textarea, .forms input[type="password"] {outline:none; font-size: 16px; background:#fdfdfd; font-weight:300; border-radius: 3px;  border:1px solid rgba(0,0,0,0.2);  padding: 3px 12px; box-shadow:inset 1px 3px 5px 1px rgba(0,0,0,0.05); color:#444; min-width: 100px; width:100%; max-width:320px; margin:3px 0px;}
.formTextBox:hover,  .forms input[type="text"]:hover,.forms input[type="password"]:hover,  .forms textarea:hover .formTextarea:hover{border-color:#aaa;}
.formTextBox:focus,  .forms input[type="text"]:focus, .formTextarea:focus, .forms textarea:focus  {color:#111; border-color:#999; background:#fff; }
.formButton, .forms input[type="submit"], .forms input[type="button"] {-webkit-appearance:none; cursor:pointer;outline:none;font-size: 16px;border-radius: 3px;border: 1px solid rgba(0,0,0,0.1);padding: 3px 12px;box-shadow:0px 0px 1px rgba(0,0,0,0.1);color:#fff;color:rgba(255,255,255,0.8);background: #3d71b9;}
.formButton:hover, .forms input[type="button"]:hover {color:#fff; opacity:0.9; }
.formButton:active, .forms input[type="button"]:active {color:#fff; opacity:1; text-shadow:0px 1px 1px rgba(0,0,0,0.4); background:#000 !important;}
.w100p {width: 100%;}
.w50p {width: 50%;}
.w40p {width: 40%;}
fieldset {padding: 3px 0px; border:none; position:relative;}
fieldset label {padding:3px 0px; font-size: 12px; color:#333; display:block;font-weight: 300;}
fieldset select {width: 100%; font-size: 16px; background:#f5f5f5;}
fieldset input[type="checkbox"] {margin:0px; margin-top:-2px;}
fieldset a {font-weight: 600; color:inherit;}
.formOptins {margin:10px 0px;}
.formOptins label {font-size: 12px; color:#444; font-weight: 200; position:relative; padding-left: 25px; line-height: 1.3; margin-bottom: 5px; display:inline-block; width:100%;}
.formOptins label input[type="checkbox"] {position:absolute; left:0; top: -2px;}
.forms select {width:100%; max-width:320px; height: 26px; font-size: 16px; color:#444; margin: 3px 0px;}
.help {position:relative; font-size: 12px !Important; background:#eef; padding:5px 10px 5px 50px; border-radius:6px; box-shadow:0px 1px 2px rgba(0,0,0,0.1);}
.help:before {content:"\f059"; font-family:'fontAwesome' !important;  position:absolute; left: 10px; top: -3px; font-size: 36px; color:#1a339a;}

.mandatoryError {background:#fdd; color:#f00}
.formTextarea {width: 100%; height: 80px; outline:none; font-size: 16px; background:#f5f5f5; font-weight:300; font-family:'Work Sans'; border-radius: 5px; border:1px solid rgba(0,0,0,0.3); padding: 3px 12px; box-shadow:0px 0px 1px rgba(0,0,0,0.1); color:#444;}
.topLabel {color:#666; font-size:10px; text-align:center; background:#f5f5f5; padding:2px;}
.formError {color:#f00; border-color:red !important;}
.error {background:red; color:#fff;}
.deleteBtn {background:#600 !important; border-color:#f00 !important;}

.forms>ul>li {padding-left: 0;}
.forms>ul>li>label {font-size: 16px !important;}
.forms>ul li label input {position:relative; top:-2px; margin-right: 8px;}
.forms>ul>li>ul>li {padding-left:20px; margin-bottom:-2px !important; }
.forms>ul>li>ul>li label {font-size: 13px;}    

/*input wrapper classes*/
.inputWrap {position:relative; display:block;margin:2px 0px; overflow:hidden; margin-bottom: 6px;}
.inputWrap.wrapLeft input,.inputWrap.wrapLeft select {padding-left: 50px !important; margin:0px !important;}
.inputWrap.wrapRight input,.inputWrap.wrapRight select {padding-right: 50px !important; margin:0px !important;}
.inputWrap i.wrapLeft {position: absolute; left: 11px; top: 7px; font-size: 18px; width:18px; text-align:center; text-shadow:0px 1px 2px #fff; color:#555;}
.inputWrap i.wrapRight {position: absolute; right: 11px; top: 7px; font-size: 18px; text-shadow:0px 1px 2px #fff; color:#555; z-index:9;pointer-events: none;}
.inputWrap.wrapLeft:before {position:absolute; top:1px; left:1px; bottom:1px; content:""; background: #eee; width:38px;  border-radius: 3px 0px 0px 3px; border-right: 1px solid #ccc; box-shadow:1px 0px 2px rgba(0,0,0,0.1);}
.inputWrap.wrapRight:after {position:absolute; top:1px; right:1px; bottom:1px; content:""; background: #eee; width:38px;  border-radius: 3px 0px 0px 3px; border-left: 1px solid #ccc; box-shadow:-1px 0px 2px rgba(0,0,0,0.1);pointer-events: none;}
.inputWrap input[type="text"],.inputWrap input[type="password"] {display:inline-block;height: 32px;outline:0;border-radius: 4px;width:100%;border:1px solid #ddd;padding: 6px 10px;font-size: 14px;font-family:'Source Sans Pro';font-weight: 500;}
.inputWrap input[type="text"]:hover,.inputWrap input[type="password"]:hover {background:#f5f5f5;}
.inputWrap input[type="text"]:focus,.inputWrap input[type="password"]:focus {background:#fff;border: 1px solid red;box-shadow:0px 0px 4px rgba(0,100,200,0.6);}

.inputWrap select {width:100%; outline:none; -webkit-appearance:none; appearance:none; -moz-appearance:none; height: 32px; border:1px solid #ddd; background:#fff;font-size: 14px;font-family:'Source Sans Pro';font-weight: 500; color:#555;}
	
#progress-wrp {border: 1px solid #0099FF;padding: 1px;position: relative;height: 22px;border-radius: 3px;margin: 10px 10px 0 10px;text-align: left;background: #fff;box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);}
#progress-wrp .progress-bar {height: 100%;border-radius: 3px;background-color: #35ff28;width: 0;box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);}
#progress-wrp .status {top: 3px;left: 50%;position: absolute;display: inline-block;color: #000000;}
.downloadFile {max-width: 242px; background:#f9f9f9 !important; width: 100%; margin-left: 5px; font-size: 12px !important; padding:1px !important;}
	
	
	
	
html, body {font-family:'Source Sans Pro' !important;}

h1 {font-size: 28px; color:#555; font-weight: 300; margin: 10px 0 20px 0; padding-bottom: 5px;}
h1 i {color:red; font-size: 75% !important; margin-right: 5px;}
h2 {font-size: 22px; color:#555; font-weight: 300; margin: 20px 0 20px 0; border-bottom:1px solid red; padding-bottom: 5px;}
p {font-size: 18px; color:#555; font-weight: 300; line-height: 1.6; margin-bottom: 12px;}
li {font-size: 18px; color:#555; font-weight: 300; line-height: 1.6; margin-bottom: 4px;}
label {font-weight: 300; }
input {font-family:'Source Sans Pro' !important;}

#emergencies li {position:relative; padding-right: 30px; border-bottom:1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px;}
#emergencies li i {position:absolute; right: 5px; top: 5px; font-size: 208x;}
#emergencies li label {display:inline-block; margin-right: 10px; min-width: 280px;}
#emergencies li label:last-child {width:100%; display:block;}
#emergencies li label:last-child textarea {display:block; width:100%; max-width:860px; height: 80px; font-size: 16px; font-family:'Source Sans Pro' !important;}
	
#references li {position:relative; padding-right: 30px; border-bottom:1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px;}
#references li i {position:absolute; right: 5px; top: 5px; font-size: 208x;}
#references li label {display:inline-block; margin-right: 10px; min-width: 280px;}
#references li label:nth-of-type(4) {width:100%; display:block;}
#references li label:nth-of-type(4) textarea {display:block; width:100%; max-width:860px; height: 80px; font-size: 16px; font-family:'Source Sans Pro' !important;}
	
header {border-bottom:1px solid #999; margin-bottom: 30px; background:#f5f5f5;}
header h1 {margin:0 !important; padding: 20px; text-align:center;}
header h1 img {max-height: 40px; vertical-align:middle}		
	
	
	
	#contratorNav li {display:inline-block; margin:10px 5px 0 0; padding: 8px 12px; background:#ddd; border-radius: 6px 6px 0 0; cursor:pointer;}
	#contratorNav {border-bottom:1px solid red;}	
	#contratorNav li:hover {background:#666;color:#fff;}
	#contratorNav li.selected {background:red !important; color:#fff !Important;}
	




#modal {position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.7); z-index:100;}
#modalbox {position:relative;background:rgba(255,255,255,0.95);margin: 10vh auto;min-width:280px;max-width:480px;width:100%;border:1px solid #aaa;border-radius: 4px;box-shadow:0 0 20px rgba(0,0,0,0.2);padding: 15px;transform:scale(1);}
#modalbox h2 {color:red; font-size: 24px; margin:0 0 15px 0; font-weight: 300;}
#closeModal {position:absolute; right: 10px; top: 10px; font-size: 18px; color:#999; cursor:pointer;}
#closeModal:hover {color:#333;}
#modalbox.shrink {transform:scale(0.2); opacity:0.2;}



.onOffSwitch {
    position: relative; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onOffSwitch-checkbox {
    display: none;
}
.onOffSwitch-label {
    display: block; overflow: hidden; cursor: pointer; float: none !important;
    border: 2px solid #999999; border-radius: 20px;
    padding-top: 0px !important;
}
.onOffSwitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onOffSwitch-inner:before, .onOffSwitch-inner:after {
    display: block; float: left; width: 50%; height: 18px; padding: 0; line-height: 18px;
    font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onOffSwitch-inner:before {
    content: attr(data-onVal);
    padding-left: 10px;
    background-color: #0099FF; color: #FFFFFF;
}
.onOffSwitch-inner:after {
    content: attr(data-offVal);
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onOffSwitch-switch {
    display: block; width: 18px; margin: -1.5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 50px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onOffSwitch-checkbox:checked + .onOffSwitch-label .onOffSwitch-inner {
    margin-left: 0;
}
.onOffSwitch-checkbox:checked + .onOffSwitch-label .onOffSwitch-switch {
    right: 0px; 
}

.custRate {background:#fee;}






.calendarInfoPop p {margin:0; font-size: 14px;}






#modalbox h2 {position:relative;}
#modalbox h2 i {position:absolute; right: 0px;}
.calendarInfoPop {overflow-y:auto; max-height: 60vh;}
.calendarInfoPop p {margin:0; font-size: 14px;}
.calendarInfoPop p label {display:inline-block; vertical-align:top; width: 80px;}
.calendarInfoPop p span {display:inline-block; width: 180px;}
.calendarInfoPop h3 {padding: 5px 0; color:red;}

.calendarInfoPop li {margin:5px 0 5px 80px;; font-size: 14px;}



#activeTimesheets li {position:relative;  background:#fff; padding: 15px; border:1px solid #eee; border-radius: 6px; box-shadow:0 0 20px rgba(0,0,0,0.1);}
#activeTimesheets li div label {display:inline-block; font-size: 14px; width: 150px;}
.ts_dayConfirm {position:absolute; right:15px; bottom:15px; }
#activeTimesheets li div em {display:inline-block; margin-left: 10px; color:red; font-size: 14px;}
.overan label {width:auto !important;}
.overan select {margin-left: 15px !important; width: 180px !important;}


.oldTimes {margin: 50px 0; font-size: 14px; color:#555;}
.oldTimes thead th {padding: 50px 5px 5px 5px; position:relative; min-width: 30px; border-right:1px solid #ddd;}
.oldTimes thead th:last-child {border:none;}
.oldTimes thead th span {position:absolute; width:100px; transform:rotate(-90deg); margin-top:5px; transform-origin:0 60%; text-align:left; }
.oldTimes tbody {background:#f5f5f5;}
.oldTimes tbody td {padding: 10px; border-right:1px solid #ddd; font-size: 16px; color:#000;}
.oldTimes tbody tr {border-left:1px solid #ddd;}


.reasonOvertime,.reasonPrecall { font-family: 'Source Sans Pro'; font-size: 14px !important; max-width: 400px !important; height: 50px; }




.statusP {cursor:pointer; position:relative; display:inline-block; padding: 3px 6px; border-radius: 20px; background:red; color:#fff; font-size: 14px; color:#fff;}
.statusP:hover:after {content:"Provisional"; position:absolute; color:#000; font-size: 10px; left:-14px; bottom:-15px;}
.statusP:hover {background:darkred;}

.statusC {cursor:pointer; position:relative; display:inline-block; padding: 3px 6px; border-radius: 20px; background:green; color:#fff; font-size: 14px; color:#fff;}
.statusC:hover:after {content:"Confirmed"; position:absolute; color:#000; font-size: 10px; left:-10px; bottom:-15px;}
.statusC:hover {background:darkgreen;}


.inv_area {background:#eee; padding: 10px; border-radius: 6px; border:1px solid #ddd; margin-top: 10px;}
.inv_area h3 {font-size: 24px; background:red; color:#fff; padding: 5px 15px; border-radius: 20px; margin-bottom: 10px;}
.inv_container {background:#fff; border-radius: 6px; padding: 5px; border:1px solid #ddd; margin-bottom: 10px;}
.inv_container h4 {font-size: 20px; background:#444; color:#fff; margin:-5px -5px 10px -5px; padding: 5px 10px;}
.inv_item { font-size: 18px; padding: 6px 10px; border-bottom:1px solid #ddd; position:relative;}
.inv_item span {width: 50%; display:inline-block;}
.inv_item label {width: 25%; display:inline-block; font-size: 16px;}
.reportIssue {position:absolute; right: 10px; background:red; color:#fff; bottom:4px; font-size: 14px; border:0; border-radius: 20px; padding:2px 10px 4px 10px; margin-top:-4px;}
.inv_container .inv_item:last-of-type {border:none !important;}
.inv_area .inv_item:last-of-type {border:none !important;} 
.inv_area>.inv_item {margin:0 5px;}
.inv_issue {background:yellow; padding:5px 10px; margin:5px -10px 10px 5px; font-weight:bold;}
.reportOK {position:absolute; right: 130px; background:green; color:#fff;  bottom:4px; border:none; border-radius: 20px; margin-top:-4px; padding:3px 10px 3px 10px;}
.issueForm {position:relative;}
.issueForm textarea {font-size:12px; width:80%; padding: 10px; font-family:Helvetica; border:2px solid #aaaa; margin: 10px 0; height: 70px;}
.issueForm input {position:absolute; right: 0px; bottom: 10px;background:#000; color:#fff; font-size: 16px; border:none; border-radius: 20px; padding: 5px 15px;}


#checkComplete {background:green; color:#fff; margin:20px auto; border:0; padding:5px 20px; font-size: 20px; display:block; border-radius:20px;}
#checkComplete:hover {background:black;}

@media(max-width:640px){
	.inv_item {padding-bottom: 30px;}
	.issueForm textarea {width:100%;}
.issueForm input {bottom:-20px;}	

}


.courseList li {font-size: 14px; padding: 15px 20px; margin-bottom: 10px; background:#eef; border:1px solid #dde; border-radius: 10px; box-shadow:0 5px 10px rgba(0,0,0,0.1);}
.courseList li label {display:inline-block; width: 90px; font-size: 11px;}
.courseList li div {position:relative; padding: 4px 0; border-bottom:1px solid #ddd; padding-right: 50px;}
.courseList li div button {position:absolute; right:0; cursor:pointer; background:#07d; color:#fff; border:none; border-radius: 4px; padding: 3px 6px 2px 6px;}
.courseList li div button:hover {background:#000;}
/*.courseList li div input[type="button"] {position:absolute; right:0; width: 100px; font-size: 14px;}*/
.courseList li div textarea {font-family:helvetica; font-size: 14px; padding: 10px; height: 70px;}
.courseList li table {width: calc(100% + 50px)!important;}
.courseList li table, .courseList li table input {width:100%; font-size: 13px !important; line-height:1;}
.courseList li table th {text-align:center; padding:5px 0; background:rgba(0,0,0,0.1); min-width: 75px;}
.courseList li table input[type="button"]{height: 20px; width:64px; padding-top: 2px !important; padding-left: 5px; padding-right: 5px;}
.courseList li table td {padding: 5px 2px 3px 2px;}
.courseList li table tr:nth-child(2n) {background:#fff;}
.courseList li table td.outcome {text-align:center; font-weight:bold;}
.courseList li table td:nth-child(5) {text-align:center;}

.courseList li table td.outcome span {display:inline-block; font-size: 10px; width: 32%;}
.courseList li table td.outcome span input {margin:2px 0;}

.courseList li table th button {position:relative; font-size: 8px; margin: 3px 1px;}
.courseList li table th button.ALLpass {background:green;}
.courseList li table th button.ALLfail {background:red;}
.courseList li table th button.ALLabsent {background:black;}

.outcome[data-outcome="pass"] {color:green !important; text-transform:uppercase;}
.outcome[data-outcome="fail"] {color:red !important; text-transform:uppercase;}

.yesno {display:block; border:1px solid #ddd; border-radius: 10px; padding: 10px; margin-bottom: 2px;}
.yesno label {display:block;}
.yesno select {width: 130px !important;margin-top: 10px !important;}
.yesno textarea {max-width: 480px !important; width: 100% !important; font-size: 12px !important; font-family:Helvetica; padding: 8px !important; display:block; height: 70px;}