body { font-family: verdana,helvetica,arial,sans-serif; color: #484068; }

div#maindiv { margin: 20px; clear: left; }

div.brand { padding: 4px; padding-left: 10px; padding-right: 10px; }
div.header { display:none; clear:left; }
div.current { float: left; }
div.status { float: left; }
div.client { float:right; }
div.date { float:right; }
div.byline { clear: left; width: 100%; text-align: center; }

div.largeText { margin-top: 20px; margin-bottom: 20px; }
div.prompt { clear: left; margin-bottom: 20px; }
div.promptTop { clear: left; margin-top: 20px; }

div.am { width: 100%; }
div.pm { width: 100%; }
div.tech { width: 100%; }
div.off { width: 100%; }
div.am div.fitter { background-color: green; }
div.pm div.fitter { background-color: orange; }
div.tech div.fitter { background-color: red; }
div.off div.fitter { background-color: red; }

table.week th { text-align: left; }
table.week td { white-space: nowrap; vertical-align: top; padding: 4px; padding-right: 12px; font-size: small; }
div.day { clear: left; margin: 0px; padding: 0px; }
div.sickDay { clear: left; margin: 0px; padding: 4px; background-color: red; color: white; }
a.day { color: #484068; text-decoration: none;  }

td.clockedOn { border-radius: 4px; box-sizing: border-box; color: white; background-color: green; padding: 2px; padding-left: 10px; padding-right: 10px; }
td.notClockedOn { border-radius: 4px; box-sizing: border-box; color: white; background-color: red; padding: 2px; padding-left: 10px; padding-right: 10px; }

tr.notes { display: block; }

table.export { padding: 0px; margin: 0px; border: 0px; }
table.export td { padding: 2px; margin: 0px; border: 0px; font-size: xx-small; }

table.viewDay td { border-radius: 4px; box-sizing: border-box; white-space: nowrap; }
table.viewJob td { max-width: 600px; vertical-align: top; font-size: small; }

table.viewDay td.edit { text-decoration: none; color: white; padding: 4px; background-color: orange; }
table.viewDay td.edit a { text-decoration: none; color: white; }

table.form { padding: 0px; margin: 0px; margin-top:10px; border: 0px; }
table.form td { padding: 2px; padding-right: 6px; margin: 0px; border: 0px; }

div.fitter { margin: 10px; padding: 10px; box-sizing: border-box; }
a.fitter { text-decoration: none; color: white; }

div.fitter-action { border-radius: 4px; box-sizing: border-box; width: 100%; margin-top: 4px; margin-bottom: 4px; padding: 10px; box-sizing: border-box; }
a.fitter-action { text-decoration: none; color: white; }
a.fitter-action-dark { text-decoration: none; color: #484068; }

div.confirm { background-color: green; }
div.edit { background-color: orange; }
div.stop { background-color: red; }

div.clock-on { background-color: green; }
div.choose-job { background-color: green; }
div.clock-off { background-color: red; }
div.start-lunch { background-color: orange; }
div.end-lunch { background-color: orange; }
div.clock-off { background-color: red; }
div.sick { background-color: orange; }
div.tech { background-color: orange; }
div.holiday { background-color: orange; }
div.absence { background-color: orange; }
div.view { background-color: orange; }
div.exit { background-color: red; }
div.start { background-color: green; }
div.admin { background-color: orange; }
div.delete-clockcard { background-color: red; }
div.delete-jobsheet { background-color: red; }

div.viewDay { clear: left; margin-bottom: 20px; }
div.viewDayTitle { padding-top: 20px; font-weight: bold; font-size: 40px; }
div.viewFitter { clear: left; padding-top: 20px; font-weight: bold; }
div.viewFitterShift { margin-top: 20px; margin-bottom: 10px; }
div.viewDayClockCard { clear: left; padding-left: 10px; }
div.viewDayJob { clear: left; padding-left: 10px; }
div.viewDayJobTitle { float: left; width: 180px; }
div.viewDayJobDetail { float: left; font-size: 15px; }

div.jobDetails { float: left; margin-left: 20px; margin-bottom: 20px; }

div.dayDivNav { margin-top: 20px; }

span.suspectTime { background-color: red; color: white; padding-left: 4px; padding-right: 4px; }

input.searchFault{background-color: green; color: white; font-size: 100%; text-align: left; width: 100%; padding: 4px; box-sizing: border-box; border: none; }
input.editFault{background-color: green; color: white; font-size: 100%; text-align: left; width: 100%; box-sizing: border-box; border: none; }
input, select { -webkit-appearance: none; -moz-appearance: normal; color:#484068; border-radius: 4px; box-sizing: border-box; font-size: 100%; }
input.jfButtonGo { background-color: green; color: white; font-size: 100%; text-align: left; width: 100%; margin-top: 4px; padding: 10px; box-sizing: border-box; border: none; }
input.jfButtonGo:hover { text-decoration: none; cursor: pointer; cursor: hand; }
input.jfButtonStop { background-color: red; color: white; font-size: 100%; text-align: left; width: 100%; margin-top: 4px; padding: 10px; box-sizing: border-box; border: none; }
input.jfButtonStop:hover { text-decoration: none; cursor: pointer; cursor: hand; }

input[type="date"]{ padding: 10px; border: none; font-family: verdana,helvetica,arial,sans-serif; color: #484068; }
::-webkit-calendar-picker-indicator{ background-color: #ffffff; padding: 5px; cursor: pointer; border-radius: 3px; }
input[type="time"]{ padding: 10px; border: none; font-family: verdana,helvetica,arial,sans-serif; color: #484068; }
::-webkit-time-picker-indicator{ background-color: #ffffff; padding: 5px; cursor: pointer; border-radius: 3px; }

button.viewNotes {background-color: orange; color: white; font-size: 100%; text-align: left; width: 100%; box-sizing: border-box; border: none; border-radius: 4px;}

a.plainDark { text-decoration: none; color: #484068; }
a.plainDark:hover { text-decoration:underline; cursor:pointer; cursor:hand; }


@media print {
    
    div.largeText { font-size: 30px; }

    div.brand { padding: 4px; padding-left: 10px; padding-right: 10px; }
    div.current { display: none; }
    div.status { display: none; }
    div.prompt { display: none; }
    div.byline { font-size: 8px; }

    div.dayDivNav { display: none; }
    div.viewDayTitle { padding-top: 20px; font-weight: bold; font-size: 20px; }
    div.viewDay { font-size: 10px; }
    div.viewDayJobTitle { width: 100px; }

    input.jfButtonGo { display: none; }
    input.jfButtonStop { display: none; }
    input.time { display: none; }

    span.suspectTime { text-decoration: underline; }
}