:root

{

    --white: #ffffff;
    --green: #94d2bd;
    --lgreen: #E2F3EE;
    --darkgreen: #005f73;
    --teal: #0a9396;
    --orange: #ee9b00;
    --lightorange: #f4cfa9;
    --red: #bb3e03;
    --black: #002229;
    --blue: #007C99;
    --lightblue: #0099b3;
    --bgbody: #fbfbf8;
    --lightgreen:#52AA5E;
}

 

@font-face {
    font-family: OpenSansRegular;
    src: url(/library/fonts/OpenSans/Regular.otf) format("opentype");
}

 

@font-face {
    font-family: OpenSansBold;
    src: url(/library/fonts/OpenSans/Bold.otf) format ("opentype");
}

 

* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box; }
body { margin: 0px auto; width: 100%;height: auto;background-color: var(--bgbody);color: var(--black);font-family: OpenSansRegular;font-size: 100%;line-height: 1.2;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
a { color: var(--black); text-decoration: none; font-weight: normal;  display: block; font-size: 150%; overflow-wrap: break-word;}
ul, ol {margin: 0 auto;padding: 0 10px;max-width: 500px;/* text-align: center; */}
li { list-style-type: none;}
fieldset { padding: 0px; margin: 0px; border: none; }
input{ font-family: OpenSansRegular; padding: 0 10px;font-size: 90%;background: transparent;border: solid #000000 1px;border-radius: 10px;color: #000000;box-sizing: border-box;font-family: Arial;}
textarea, #fb-RecNonWorkOther { max-height: 100px; width: 100%;border-top: none;border-radius: 0 0 10px 10px;border-color: var(--green);background-color: var(--white);  font-family: OpenSansRegular; padding: 10px; font-size: 120%;}
input[type=text], input[type=password] { height: 40px; }
input[type=button], input[type=submit], .work-task .start-btn,  .completed .start-btn, .loggedin .introduction a {cursor: pointer;background-color: var(--darkgreen);color: var(--white);border: none;max-width: 480px;width: 96%;margin: 0 auto;text-align: center;display: block;border-radius: 10px;margin-top: 30px;min-height: 50px;font-size: 130%;text-align: center;}

.formbuilder {padding:  0 10px;}
form {max-width: 500px; margin: 0 auto;}

small { display: flex; justify-content: center; align-items: center; margin-top: 30px; color: lightgray;} 

p { padding: 0px 0px 20px 0px; margin: 0px; }
strong { font-weight: bold; font-family: OpenSansRegular; }
table { border-spacing: 0px; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
.hidden { display: none; }
.spacer { clear: both; height: 0px; }
.errors {color: var(--red); font-size: 120%; margin: 0 auto; text-align: center;}

/* Footer */

.layoutcredits {display: none;}

 /* This is for the mobile app to ensure the status bar has a white background */

.layout_standard
{
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}

.layoutoverlay
{
	display: block !important;
	position: fixed;
    height: constant(safe-area-inset-top);
    height: env(safe-area-inset-top);
	background-color: #fbfbf8;
	top: 0px;
	width: 100%;
	z-index: 1000;
}
 

/* General styling */

.spacer {display: none;}
.general, .page_standarda {margin: 0 auto; text-align: center;}
h2, .pagetitle { margin: 0 auto; font-size: 120%;font-weight: bold;text-transform: uppercase;text-align: left; display: flex;align-items: center;color: var(--white);padding: 12px 15px;}
.pagetitle_inner {  margin: 0 auto; }
.pagecontent_inner {padding: 30px 5px; max-width: 500px; margin: 0 auto;}
.pagecontent_inner h2 {color: black;}
.pagecontent_inner a {color: var(--teal); font-size: 110%;}
.innerpage {margin: 0 auto;padding: 0px 10px;}


/* Select */

select, input[type=number], input[type=date], .form_password input[type=password], input[type=text]  { cursor: pointer; margin-bottom: 20px;min-height: 50px;width: 100%;font-size: 130%;padding-left: 10px;border-top: none;border-radius: 0 0 10px 10px;border-color: var(--green);}
.checkbox {text-align: left; font-size: 130%; padding-left: 15px; margin: 10px 0 10px 0 !important; width: 50%; }
 

/* General label styling*/

.label {font-size: 120%; font-weight: bold; text-align: left; padding: 10px 0 0 15px; background-color: var(--green); color: var(--black); padding-bottom: 10px; border-radius: 10px 10px 0 0;}
  

/* btn */

button {all: initial;font-family: OpenSansRegular;font-size: 130%;padding: 0 10px;/* margin: 0 10px; */ cursor: pointer;}
ul {padding-top: 30px;}
ul li {margin-top: 30px;}
ul li button, .back, .continuebtn, .start-btn, .account ul li a { cursor: pointer; text-align: center;padding: 10px 0;border-radius: 10px;box-shadow: 0 4px 8px rgba(0,0,0,0.1);background-color: var(--green);min-height: 30px;max-width: 500px;width: 100%;}
.start-btn {max-width: 480px;width: 96%; padding: 0;}
.back {margin: 20px auto; display: flex; text-align: center; justify-content: center; align-items: center; background-color: var(--lightorange); max-width: 480px;width: 96%;}
ul li:last-child button {margin-top: 50px; background-color: var(--lightorange);}
.continuebtn, .loggedin .introduction a  {margin: 20px auto; display: flex; text-align: center; justify-content: center; align-items: center; background-color: var(--darkgreen); max-width: 480px;width: 96%; color: var(--white);}

 

/* Timepicker */

.ui-timepicker-list { font-size: 130%;}

 
/* Login */

.log-in {padding: 0px !important; background-color: var(--green); margin: 0 auto; min-height: 100vh;background-image: url(/images/G0zGXG2I7C9doX4wQ7sJ0a503u.png);background-position: center top 100px;background-size: 320px auto;}
.log-in .memb_loginbox {position: absolute;left: 50%;transform: translateX(-50%); width: 96%; max-width: 400px; margin-top: 300px; }
.log-in .label {display: none;}
.log-in input {width: 100%; min-height: 50px; font-size: 120%; border: 2px solid var(--bgbody); background-color: var(--white); }
.log-in .login .submit {background-color: var(--darkgreen); border-color: var(--darkgreen) ;}
.log-in input:focus {outline: none; border-color: var(--darkgreen);}
.log-in .stayloggedin {display: flex; align-items: center; min-height: 20px;}
.log-in .stayloggedin input {width: 20px; margin: 0; margin-right: 10px;}
.log-in .forgotpw  {display: block;}
.log-in .forgotpw a { color: var(--red); font-size: 110%; text-align: center; margin-top: 20px;}

 
.loggedout input[type=password] {margin-bottom: 30px;}
.loggedout .fieldemail {margin-bottom: 20px;}
.loggedin .status {text-align: center;}
.logout {margin: 0 5px;}
.logout .submit {background-color: var(--lightorange); color: var(--black); border-color: var(--lightorange);margin: 0 auto; font-weight: bold;}

 
/* Logged in*/

.loggedin {display: flex; flex-direction: column;}
.loggedin .status {order: -1;}
.loggedin .introduction { text-align: center; }
.loggedin .introduction>p { font-size: 110%; font-weight: bold; padding-top: 5px;}

 
/* Nav */

.header, .pageheader {background-color: var(--teal); height: 50px; width: 100%;}
.toggle {position: absolute; right: 30px; cursor: pointer;font-size: 220%;color: var(--white);padding: 4px 15px 0 0;margin-left: -30px;}
.toggleon ul {display: block;position: fixed;opacity: 1;z-index: 999;margin-top: 50px;padding: 0 0 10px 0 !important;}
.toggleon ul li {margin-top: 0}
.toggleon li a { width: 100vw; height: 50px; margin: 0 auto;border-bottom: 1px solid var(--orange);border-radius: 0;box-shadow: none;background-color: var(--lightorange); display: flex; align-items: center; justify-content: center;}

.toggleoff ul { display: none; }
.sectionlevel1 #nav-14 {display: none;}

.pagetitle {margin: 0; color: var(--white);}
 

@media (min-width: 500px) {
    h2 {text-align: center; display: block; justify-content: center;}
}
 

/* Home page 2 */

.home ul li button {display: flex; align-items: center; justify-content: space-between;}
.home ul li button span { flex-grow: 1; text-align: center; }
.home button i {font-size: 150%;color: var(--black); padding-left: 15px; margin-right: -15px;}
.home ul li:last-child button {margin-top: 80px; background-color: var(--lightorange);}

.editdate {border: 1px solid var(--green); border-radius: 15px; min-height: 100px; margin-top: 20px;}
.editdate .label {text-align: center;}
.radio label { display: flex; align-items: flex-start; margin: 10px; gap: 10px; font-size: 110%;}
.radio input[type="radio"] {margin-top: 5px;}

/* Non-work task */

#fb-36-div > .label:first-of-type { display: none; }
#fb-36-div > .input {margin-top: 40px;}
#fb-RecNonWorkOther { width: 100%; min-height: 50px; font-size: 120%;}
 
#fb-RecEndTime-div {margin-bottom: 30px;}
#fb-RecStartDate-div, #fb-RecStartTime-div, #fb-RecEndDate-div, #fb-RecEndTime-div {width: 50%;display: inline-flex; flex-direction: column; }
#fb-RecStartDate-div input[type=text], #fb-RecStartTime-div input[type=text], #fb-RecEndDate-div input[type=text], #fb-RecEndTime-div input[type=text] { padding-left: 15px; height: 50px; font-size: 120%;font-weight: bold;}
.non-work-task .field input {width: 100%;}
#fb-RecStartDate, #fb-RecEndDate { border-radius: 0px 0px 0px 10px; border-top: none; border-color: var(--green); background-color: var(--white);}
#fb-RecStartTime, #fb-RecEndTime { border-radius: 0px 0px 10px 0px; border-top: none; border-color: var(--green); background-color: var(--white);}

#fb-RecStartDate-div .label, #fb-RecEndDate-div .label {border-radius: 10px 0 0 0;}
#fb-RecStartTime-div .label, #fb-RecEndTime-div .label {border-radius: 0 10px 0 0; margin-top: 20px;}
#fb-RecNonWorkOther {margin-bottom: 30px;}
 

/* Page 4 */

.thankyou h3 {text-align: center; margin-top: 100px;}

/* Select tractor */

.tasks { margin: 0px auto;}
.tasks .formbuilder {margin: 60px auto;}
 
.field_checkbox .label {background: none; font-weight: normal;}
.tasks .field_checkbox {  display: flex;padding: 0 10px 0 0;justify-content: space-between; min-height: 70px; align-items: center; border-radius: 10px; margin: 20px 0px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.tasks .field_checkbox label { opacity: 1;position: relative; color: var(--black);}
.tasks .field_checkbox input { margin: 0 5px 0 15px; padding: 0;}

.tasks .field_checkbox .input input[type=checkbox] {opacity: 0;position: absolute;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;border-radius: 5px;height: 30px;width: 30px;opacity: 1;position: relative;background-color: var(--white);border: none;}
.tasks .field_checkbox .input input[type=checkbox]:checked:after { content: "\2713"; color: var(--darkgreen); position: relative; top: -8px; font-size: 300%; bottom: 16px; font-weight: 700; background-color: var(--green); }

.tasks .field_checkbox:not(:has(input[type="checkbox"]:checked)) {background-color: var(--lightorange);}
.tasks .field_checkbox:has(input[type="checkbox"]:checked) { background-color: var(--green);}

.invalid {border: 2px solid var(--red) !important;}


/* Select task */
#fb-LogVarId-input {padding: 0;}
.work-task .formbuilder {margin-top: 60px;}
.work-task .field_multiselect .checkbox { margin: 0!important; border-color: var(--green); border-radius: 0px; border-top: none; box-shadow: none; }
.work-task .field_multiselect ul {margin-bottom: 20px;}
.work-task .field_multiselect li {background-color: var(--white); border: 1px solid var(--green); width: 100%; min-height: 50px!important; }
.work-task .field_multiselect li label {}
.work-task .field_multiselect li.checkbox label {margin: 0px 0 0 30px; display: flex; align-items: center; padding-top: 10px;}

.work-task .field_multiselect .checkbox input[type=checkbox] { margin: 4px 0 0 -35px; opacity: 0;position: absolute;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;border-radius: 5px;height: 25px;width: 20px;opacity: 1; border: 2px solid var(--green);}
.work-task .field_multiselect .checkbox input[type=checkbox]:checked:after  { content: "\2713"; color: var(--darkgreen); position: relative; left: -10px; font-size: 180%; font-weight: 700; top: -18px; }

.work-task .start-btn { border-radius: 10px; text-align: center;}
.work-task .start-btn i {padding-right: 20px;}
.work-task .back {margin-top: 50px;}


/* Task started*/

.timer {margin: 0 auto;text-align: center; }
.timer .activetask { max-width: 500px; width: 96%; margin: 60px auto 30px auto; border: 2px solid var(--green);border-radius: 10px;background-color: var(--white);border-left: 30px solid var(--green);}
.timer .activetask ul {padding-top: 0; }
.timer .activetask li {box-shadow: none; font-size: 130%; padding: 0; margin: 10px; text-align: left; color: var(--black);}
.timer .timetask {max-width: 500px; margin: 0 auto;}
.timer .timetask p, .timer .piecetask p {font-size: 130%;background-color: var(--green);padding: 8px 10px 10px 10px;color: var(--black);margin: 0 10px;}
.timer .clock {font-size: 450%; margin-bottom: 20px; margin-top: 20px;}
.timer .controls {font-size: 400%;}
.timer .controls i {padding: 0px 15px; color: grey;}

.controls i.fa-play.active {color: var(--lightgreen);}
.controls i.fa-stop.active {color: var(--red);}
.controls i.fa-pause.active {color: var(--orange);}
.timer .back {margin-top: 50px;}

.timer .instructions p {padding: 5px;}
.timer .instructions p i {padding: 0 5px; color: grey;}
.timer .back {margin-top: 20px;}

.timer #finishtaskbtn {background-color: var(--red); margin-top: 50px;}
.piecetask {padding-top: 30px; max-width: 500px; margin: 0 auto;}
 

/* Calendars */

.nonworkcalendar .newday, .calendar .newday {margin: 30px 0px;border: 2px solid var(--green);border-radius: 10px;background-color: var(--white);}
.calendar .task-log { border-bottom: 2px solid var(--green); font-size: 110%; padding-bottom: 10px;}

.calendar .edit {color: var(--white); cursor: pointer; padding: 10px; font-size: 100%; background-color: var(--orange); max-width: 65px; text-align: center; padding: 5px; margin-left: 10px; border-radius: 15px;}
.calendar .taskname {background-color: var(--lgreen); padding: 10px; font-size: 85%; }
.calendar table { width: 94%; table-layout: fixed; border-collapse: collapse;  margin: 10px; }
  
.calendar th, .calendar td {  padding-bottom: 5px; }
.calendar th, .calendar td:nth-child(1), .calendar td:nth-child(2), .calendar td:nth-child(3) {  width: 25%; font-size: 90%;  }
.calendar td:nth-child(4), .calendar th:nth-child(4) { width: 35%; font-size: 90%;  }
.calendar .right {  text-align: right; }
  

.calendar .task-log .qty-log {display: flex; justify-content: space-between; flex-direction: column;}
.nonworkcalendar .daylist, .calendar .daylist, .calendar .editquantity, .calendar .edittime {max-width: 500px;padding: 0;margin: 5px auto;}
/* .calendar .editquantity {border: 1px solid var(--lightorange);} */
.nonworkcalendar .daylist .date-log, .calendar .daylist .date-log {padding-bottom: 5px; font-size: 110%; font-weight: bolder; background-color: var(--green); padding: 10px; }
.calendar .time-log, .calendar .qty-log {font-weight: bold;}
.calendar .totaltime, .calendar .totalqty {display: flex; justify-content: space-between; }



.calendar .totalqty, .calendar .totaltime  { padding: 5px; color: var(--orange); font-size: 110%; font-weight: bold; font-size: 90%;}
.nonworkcalendar .task-log {padding: 10px; }
.nonworkcalendar select, .calendar select {width: 300px; text-align: center; display: flex; margin: 0 auto;}


.calendar .editquantity .title, .calendar .edittime .title  { padding-left: 10px;}
.calendar .editquantity .subtitle, .calendar .edittime .subtitle {padding-left: 10px;}
.calendar .editquantity button, .calendar .edittime button {margin: 0px auto;display: flex;text-align: center;justify-content: center;align-items: center;background-color: var(--lightorange);max-width: 100%;width: 100%;padding: 10px 0px;border-radius: 15px;}
.calendar .editquantity h3, .calendar .edittime h3 {padding: 10px 10px 0;font-weight: normal;}
.calendar .editquantity .editlabel, .calendar .edittime .editlabel {font-size: 120%;font-weight: bold;text-align: left;background-color: var(--lightorange);color: var(--black);padding-bottom: 10px;border-radius: 10px;margin-bottom: 10px;}
.calendar .editquantity input, .calendar .edittime input {border-color: var(--lightorange); }

.calendar .edittime input[type="time"] {line-height: normal; display: flex; align-items: center; height: 70px; font-size: 30px; padding: 0 10px; border: 2px solid var(--lightorange); border-radius: 10px; background-color: #f9f9f9; color: var(--black); box-sizing: border-box; border-radius: 0 0 15px 15px; width: 100%; margin-bottom: 20px; }
.calendar #starttime, .calendar #endtime {height: 50px;  width: 50%;}
.calendar .editingtime span {width: 50%; display: inline-block; padding-left: 12px; font-weight: bold; font-size: 120%; margin-bottom: 5px;}
.calendar input[type="time"] {font-size: 130%;}
.calendar .editquantity button {margin-top: 15px;}
.calendar .dates {text-align: center;/* padding-bottom: 20px; */}
.calendar .dates input {height: 50px; width: 100%;}
.calendar .quantity span {width: 100%; display: inline-block; padding-left: 12px; font-weight: bold; font-size: 120%; margin-bottom: 5px; }
.calendar .quantity input {height: 50px;  width: 50%; border: 1px solid var(--lightorange); border-radius: 10px;}

.calendar .invalid-input {
    border: 1px solid red;
}

/* Qty task completed page 10*/

.completed h3 {margin-top: 60px;}


/*Timed task submit confirmation*/

.confirmation h3 {margin-top: 60px; color: var(--red); margin-bottom: 10px;}
.confirmation p {font-size: 110%; margin-bottom: 60px;}
.confirmation .continuebtn { margin-bottom: 30px;}

 
/* End of the day*/

.thankyou h3 {margin-bottom: 100px;}
.btnhome { background-color: var(--darkgreen); color: var(--white); width: 200px; margin: 0 auto; border: none; border-radius: 10px; text-align: center; min-height: 50px;}

 
/* Account */

.memb_account {padding-top: 20px; margin: 10px; text-align: center;}
.memb_account .field input[type=text] {  margin-bottom: 20px;min-height: 50px;width: 100%;font-size: 130%;padding-left: 10px;border-top: none;border-radius: 0 0 10px 10px;border-color: var(--green);}
.section19 .nav {text-align: center; }
.account .pagecontent_inner {text-align: center;font-size: 110%; }
.account .pagecontent_inner p {padding-top: 60px;}
.account input[type=text] {background-color: var(--white);}
.account .text {padding-top: 20px;}
.account .text ul {padding-top: 0px;}
.account .text a {font-size: 120%;}
.memb_account p a { background-color: var(--darkgreen); color: var(--white); width: 200px; margin: 0 auto; border: none; border-radius: 10px; text-align: center; min-height: 50px; padding-top: 12px;}


.ui-timepicker-wrapper {width: 480px; max-width: 100%; }



/* Break */
#fb-LogShortBreak-div { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--green); }
#fb-LogShortBreak-div .input input[type="checkbox"], #fb-LogLongBreak-div .input input[type="checkbox"]{ margin-top: 8px; margin-right: 8px; -webkit-appearance: none;-moz-appearance: none;-o-appearance: none; cursor: pointer;border-radius: 5px;height: 30px;width: 30px;opacity: 1;background-color: var(--white);border-color: var(--green);}
#fb-LogShortBreak-div .input input[type=checkbox]:checked:after,  #fb-LogLongBreak-div .input input[type=checkbox]:checked:after{color: var(--darkgreen);content: "\2713";font-weight: 800;bottom: 8px;right: 6px;position: relative; font-size: 200%;}

#fb-LogLongBreak-div { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--green); border-top: none; border-radius: 0 0px 10px 10px; }


/* Editing */

.editmode .label { background-color: var(--lightorange);}
.editmode select, .editmode .work-task .field_multiselect .checkbox, .editmode .timer .activetask, .editmode input[type=number], .editmode input[type=text], .editmode #fb-LogLongBreak-div, .editmode #fb-LogShortBreak-div{border-color: var(--lightorange);}
.editmode .field_checkbox .label {background-color: white; border-radius: 15px;}


/* Page 15 Submitting.... */

.spinner {border: 8px solid var(--lgreen); border-top: 8px solid var(--darkgreen); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 50px auto;}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Page 16 Try again */

#page16 p {margin-top: 50px;}
#page16 button {background-color: var(--orange);}

#page8 .clash {margin: 0 10px 30px 10px; font-size: 125%;  padding: 10px;  font-weight: bold; }

/* Declined non-work entry */
.nonworkcalendar .newday.declined { border-color: var(--red); }
.nonworkcalendar .newday.declined .date-log { background-color: var(--red); color: var(--white); }

.nonworkcalendar .status.declined {
	display: inline-block;
	background-color: var(--red);
	color: var(--white);
	font-size: 90%;
	font-weight: bold;
	padding: 5px 12px;
	border-radius: 15px;
	margin-top: 10px;
}