body{height:100svh;font-family:Noto Sans,sans-serif}:root{--primary-color: #019541;--status-working: rgb(33, 222, 33);--status-onBreak: rgb(18, 105, 244);--status-notWorking: rgb(252, 3, 3)}.button{padding:2px 5px 4px;background-color:var(--primary-color);color:#fff;border:none;border-radius:5px}table{grid-column:1/13;justify-self:center;border-collapse:collapse;font-size:smaller;font-family:Noto Sans,sans-serif;width:100%}th,td{border:1px solid black;padding:8px;text-align:left}th{background-color:#c8d7f8}.bodyContent{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:10% 10% 55% 15% 10%;height:100vh}.displayRegular{white-space:normal;text-align:center;word-wrap:break-word;color:#2626da}.displayOvertTime{text-align:center;color:#daa30a}.displayBreak{text-align:center;color:#da0a0a}.errorBox{grid-row:4/5;grid-column:2/12;word-break:break-all}.error{display:flex;flex-direction:column;overflow-y:auto;padding:10px 20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:pink;color:red;max-height:350px;width:80%;align-items:center;border-radius:10px;z-index:1}.specifiedError{color:#000}.dagenInstellen{grid-row:2/3;grid-column:2/3;justify-self:start;align-self:center}.timesheetToevoegen{grid-row:2/3;grid-column:1/2;justify-self:end;align-self:center}.previewLink{grid-row:2/3;grid-column:11/12;height:50px;align-self:center;justify-self:end}.downloadLink{height:40px;align-self:center;grid-row:2/3;grid-column:12/13}.updateTimesheet{grid-row:3/3;grid-column:2/12;justify-self:center;align-self:center}.updateStartTime,.updateEndTime,.updateStartBreak,.updateEndBreak,.updateSpecialInput{color:red}.submit{border-radius:5px;margin-top:5px;height:50px}.submit:hover{color:#000}input:hover{color:#000;cursor:pointer}.removeError{text-decoration:none;background-color:#ccc;margin-top:10px;border:1px solid black;color:#000;width:50%;text-align:center}.removeError:hover{text-decoration:none;color:#fff}.timesheetHeader{margin-top:20px;font-family:Noto Sans,sans-serif;font-size:x-large;justify-self:center;grid-row:2/3;grid-column:1/13}header{grid-column:1/13;justify-self:end;margin-right:50px;align-self:center;grid-row:1/2}.newUserForm{justify-self:center;min-width:300px;max-width:500px;grid-row:3/4;grid-column:2/12;display:grid;gap:10px;grid-template-columns:repeat(12,1fr)}.loginForm{min-width:300px;max-width:500px;justify-self:center;grid-column:2/12;display:grid;gap:10px;grid-template-columns:repeat(12,1fr);width:100%;align-self:center}.userNameLabel{grid-column:2/12;grid-row:1/2}.userName{grid-column:2/12;grid-row:2/3}.passLabel{grid-column:2/12;grid-row:3/4}.pass{grid-column:2/12;grid-row:4/5}h2{font-family:Noto Sans,sans-serif;grid-column:2/12;grid-row:2/3;justify-self:center;align-self:center}.registerLink{grid-column:7/10;grid-row:5/6;text-align:center;justify-self:end;align-self:center;background-color:var(--primary-color);color:#fff;border-radius:10px;width:80px;padding-top:1px;margin-top:10px;height:28px}.registerLink:hover{text-decoration:none;color:#000}.loginButton{grid-column:10/12;grid-row:5/6;margin-top:10px;justify-self:end;border:none;background-color:var(--primary-color);color:#fff;border-radius:10px;width:70px;padding-bottom:2px}.loginButton:hover{color:#000}.rememberLabel{grid-row:6/7;grid-column:8/12;justify-self:end;align-self:center;margin-bottom:0}.remeberCheckbox{grid-row:6/7;grid-column:7/9;height:25px;margin-right:10px;align-self:center;justify-self:end}.text-danger{color:red;padding:10px;font-size:medium;grid-row:4/5;grid-column:1/13;justify-self:center}h3{margin-bottom:20px}h4{grid-row:2/3;grid-column:1/13;justify-self:center;align-self:center}img,.logo{height:100%}.logoContainer{grid-column:1/13;grid-row:3/4;height:50%;justify-self:center;align-self:center}.headerLinks{margin:0 10px;color:#000;font-family:Noto Sans,sans-serif}.stikyHeader{position:sticky;z-index:2;top:0}.headerLinks:hover{text-decoration:none;color:#000;border-top:solid 1px black}.authLinks:hover{text-decoration:none;color:#000}.dropDownMonth{height:35px;width:120px;border-radius:10px;text-align:center}.displayDay{color:#000}.noteIcon{height:10px;position:absolute;top:0;left:10px}th{text-align:center}.timesheetForm{grid-row:1/2;grid-column:1/13;justify-self:start}.timesheetTable{border-radius:10px;grid-row:3/4}.updateProfile{color:#000;font-family:Noto Sans,sans-serif;grid-row:5/6;grid-column:1/4;font-size:x-small;align-self:end;justify-self:end;margin-bottom:10px}.updateProfile:hover{color:#000;border-top:1px solid black;text-decoration:none}.date{text-align:center}.displayDay:hover{text-decoration:none;border-bottom:1px solid black}h1{grid-column:5/9;grid-row:2/3;justify-self:center;align-self:center;font-family:Noto Sans,sans-serif;font-weight:400}.formContainer{text-align:center;grid-row:3/4;grid-column:2/12;min-width:300px;max-width:500px;justify-self:center;align-self:center}.logincontainer{grid-column:2/12;min-width:300px;max-width:500px;justify-self:center}ul{color:red;list-style:none;margin-top:10px;text-align:center;padding-left:0}.loginError{height:fit-content;justify-content:center;align-self:center;border-radius:5px;grid-row:4/5;grid-column:3/11;background-color:pink}.nameLabel{grid-column:2/12;grid-row:1/2}.name{grid-column:2/12;grid-row:2/3}.emailLabel{grid-column:2/12;grid-row:3/4}.email{grid-column:2/12;grid-row:4/5}.passwordLabel{grid-column:2/12;grid-row:5/6}.password{grid-column:2/12;grid-row:6/7}.passwordConfirmationLabel{grid-column:2/12;grid-row:7/8}.passwordConfirmation{grid-column:2/12;grid-row:8/9}.registrationButton{padding-bottom:4px;margin-top:10px;justify-self:end;border:none;background-color:var(--primary-color);color:#fff;border-radius:10px;grid-column:2/12;grid-row:9/10;width:100px}footer{grid-row:5/6;grid-column:1/13;justify-self:center;align-self:end;margin-bottom:10px}.workersForm{grid-column:2/12;grid-row:3/4;min-height:100px;justify-self:center;display:flex;flex-direction:column;align-items:center}.workerButton{text-decoration:none;width:250px;height:45px;position:relative;background-color:#fff;border-radius:10px;margin-bottom:20px;text-align:start;padding-left:20px;border:1px solid grey;color:#000}.workerButton:hover{background-color:#ccc}.specialDays{grid-column:2/12;grid-row:3/5;justify-self:center;display:flex;flex-direction:column}.instellenVoor{text-align:center}.addNewTimesheetForm{display:grid;grid-template-columns:200px;grid-column:2/12;align-self:center;justify-self:center}.newTimesheetSubmit{margin-top:10px}.newTimesheetInput{margin:5px}.newTimesheetDate:after{content:" Datum ";padding:0 5px}.addTimesheet{max-width:100px;margin-top:20px}.startInput:after{content:" Start ";padding:0 5px}.endInput:after{content:" End ";padding:0 5px}fieldset{margin:30px 0}.checkMark{display:grid;position:absolute;top:0;left:0;height:25px;width:25px;background-color:#eee;border-radius:50%}.checkboxContainer{display:block;position:relative;padding-left:35px;width:185px;height:66px;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}#onbetaald{margin-bottom:20px}.checkboxContainer .radioBox{position:absolute;opacity:0;cursor:pointer}.checkboxContainer:hover .radioBox~.checkMark{background-color:#ccc}.checkboxContainer .radioBox:checked~.checkMark{background-color:var(--primary-color)}.checkMark:after{display:none}.checkboxContainer .radioBox:checked~.checkMark:after{display:grid}.checkMark:after{align-self:center;justify-self:center;content:"";width:8px;height:8px;border-radius:50%;background:white}.betaaldInput,.onbetaaldInput{display:none;width:150px}#betaaldInput:checked~.betaaldInput{display:inline}#onbetaaldInput:checked~.onbetaaldInput{display:inline}.specialDayForm{margin-top:30px;overflow-y:scroll;display:grid;grid-template-columns:1fr;grid-row:1fr 1fr;width:auto}.specialDayForm::-webkit-scrollbar{display:none}.specialDayForm{-ms-overflow-style:none;scrollbar-width:none}.updateSpecialInput{margin-bottom:50px}.radioInput{display:grid;justify-content:center;grid-row:1/2;grid-template-rows:max-content;justify-self:center}.dateInput{width:min-content;grid-row:2/3;justify-self:center}.startDateInput{margin:10px 0}.startDateInput:after{content:" Start ";padding:0 5px}.endDateInput:after{content:"End";padding:0 5px}.dagSubmit,.periodeSubmit{margin-top:10px}.working,.onBreak,.notWorking{border-radius:20px;position:absolute;right:15px;top:45%;height:3px;width:3px}.onBreak{background-color:var(--status-onBreak);box-shadow:0 0 5px 3px var(--status-onBreak)}.notWorking{background-color:var(--status-notWorking);box-shadow:0 0 5px 3px var(--status-notWorking)}.working{background-color:var(--status-working);box-shadow:0 0 5px 3px var(--status-working)}.specialsButton{grid-row:4/5;grid-column:2/12;text-decoration:none;background-color:#1e90ff;border-radius:5px;padding:5px;height:max-content;color:#fff;justify-self:center}.specialsButton:hover{text-decoration:none;color:#000}.startButton{align-self:center;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(50px,auto);text-align:center;font-size:small;grid-row:3/4;grid-column:5/9;justify-self:center;height:100px;width:100px;border-radius:151px;background:linear-gradient(145deg,#a7de70,#019541);box-shadow:5px 5px 10px #929292,-5px -5px 10px #fff}.breakButton{font-family:Noto Sans,sans-serif;align-self:center;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(50px,auto);text-align:center;font-size:small;grid-row:3/4;grid-column:5/7;justify-self:center;height:100px;width:100px;border-radius:151px;background:linear-gradient(145deg,rgb(200,215,248),#2626da);box-shadow:5px 5px 10px #929292,-5px -5px 10px #fff}.userNoteForm{grid-row:4/5;grid-column:2/12;justify-self:center}.userNote{word-break:break-all;max-height:60px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.userNoteContainer{margin:20px 0 0;grid-row:4/5;grid-column:4/10;justify-self:center}.delete{grid-row:4/5;grid-column:2/3}.stopButton{align-self:center;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(50px,auto);text-align:center;font-size:small;grid-row:3/4;grid-column:7/9;justify-self:center;height:100px;width:100px;border-radius:151px;background:linear-gradient(145deg,rgb(248,200,200),#da0a0a);box-shadow:5px 5px 10px #929292,-5px -5px 10px #fff}.profileContent{margin-left:10px;margin-right:10px;grid-row:3/4;grid-column:1/13;display:grid;grid-template-columns:repeat(12,auto);grid-template-rows:repeat(auto-fit,max-content);grid-auto-rows:max-content;overflow:auto;max-height:350px;white-space:nowrap}.profileContent::-webkit-scrollbar{display:none}.profileContent{-ms-overflow-style:none;scrollbar-width:none}p{height:max-content}.buttonText{font-family:Noto Sans,sans-serif;font-size:large;margin-bottom:0;color:#fff;grid-column:1/13;grid-row:1/2;justify-self:center;align-self:center}.startButton,.breakButton,.stopButton{transition:transform .2s ease-in;margin:0 5px}.startButton:hover,.breakButton:hover,.stopButton:hover{text-decoration:none;transform:scale(1.05)}.date{grid-column:1/2;position:relative}.displayTotalRegular{text-align:center;grid-row:4/5;grid-column:3/5;justify-self:center;align-self:center;color:#2626da;background-color:#c8d7f8;padding:10px;border-radius:10px;border:1px solid #2626da}.displayTotalBreak{text-align:center;grid-row:4/5;grid-column:6/8;justify-self:center;align-self:center;color:#da0a0a;background-color:#f8c8c8;padding:10px;border-radius:10px;border:1px solid #da0a0a}.displayTotalOverTime{text-align:center;grid-row:4/5;justify-self:center;grid-column:9/11;align-self:center;color:#daa30a;background-color:#f8efc8;padding:10px;border-radius:10px;border:1px solid #daa30a}@media (min-width: 768px){.error{width:auto}.specialDays{grid-column:2/12;grid-row:3/5;justify-self:center;align-self:center;display:flex;flex-direction:column}.specialDayForm{overflow-y:scroll;display:grid;gap:100px;grid-template-columns:1fr 1fr;width:auto}.radioInput{grid-row:1/2;justify-self:center}.dateInput{width:min-content;grid-row:1/2;justify-self:center;align-self:center}}@media (max-width: 768px){h2{font-size:x-large}h1{grid-column:1/13;text-align:center}.formContainer{text-align:center}.bodyContent{grid-auto-rows:20% 5% 45% 25% 5%}.newUserForm{scale:.9}header{justify-self:end;margin-right:5px}.headerLinks,.authLinks{margin:0 2px}p{font-size:small}}