html,body{height:100vh;height:100svh;font-family:inter,Noto Sans,sans-serif;background:linear-gradient(to bottom,#bfdbfe,#d1fae5,#fed7aa);margin:0}.subscriptieForm{grid-row:3/4;grid-column:1/13;justify-self:center;align-self:center;max-width:300px}.fadeUpEffect{opacity:0;animation:fadeSlideUp .8s ease forwards}.sauronsEye{grid-column:1/13;border-radius:10px;justify-self:center;box-shadow:0 8px 20px #0000000f}.welcomCard{grid-column:1 / 13;grid-row:4 / 5;align-self:end;justify-self:center;background:linear-gradient(135deg,#f9fafb,#e5e7eb);border-radius:1rem;padding:1.5rem 2.5rem;box-shadow:0 8px 20px #0000000f;font-family:Inter,sans-serif;max-width:230px;text-align:center;color:#111827;font-size:2rem;font-weight:500;transition:all .3s ease-in-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}#day_hours::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}a:hover{text-decoration:none}.red{color:red}.alert{border:2px solid #007bff;background-color:#fff;justify-self:center;max-width:300px;border-radius:10px;margin-top:10px;margin-bottom:0}#searchInput{max-width:188px}#list::-webkit-scrollbar{display:none}.message{position:fixed;top:50%;left:50%;display:flex;width:100%;max-width:305px;flex-direction:column;z-index:10}.hamburger{display:none}tr:hover td{cursor:pointer}:root{--primary-color: #4faafc;--night-mode: #36454f;--night-shift: #8f969b;--status-working: rgb(33, 222, 33);--status-onBreak: rgb(18, 105, 244);--status-notWorking: rgb(252, 3, 3);--select: #ccc}.nightShift{background-color:#8f969b;color:#fff}a{text-decoration:none;color:inherit}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:2}.side-menu{position:absolute;left:0;top:0;padding:20px;display:grid;justify-items:end;grid-auto-rows:max-content;gap:15px;transform:translate(-100%);transition:transform .5s ease;height:100%;width:50%;background-color:#fff;opacity:90%;z-index:3}.side-menu.slide-in{transform:translate(0)}.side-menu.slide-in~.backdrop{opacity:1;pointer-events:auto}#nav-icon4{z-index:5;width:60px;height:45px;position:relative;cursor:pointer;transition:.5s ease-in-out;display:flex;align-items:center;justify-content:center}#nav-icon4 span{display:block;position:absolute;height:4px;width:50%;background:grey;border-radius:4px;opacity:1;transition:.25s ease-in-out;left:25%}#nav-icon4 span:nth-child(1){top:12px;transform-origin:left center}#nav-icon4 span:nth-child(2){top:20px;transform-origin:left center}#nav-icon4 span:nth-child(3){top:28px;transform-origin:left center}#nav-icon4.open span:nth-child(1){transform:rotate(45deg);top:9px;left:14px;width:50%}#nav-icon4.open span:nth-child(2){width:0%;opacity:0}#nav-icon4.open span:nth-child(3){transform:rotate(-45deg);top:31px;left:14px;width:50%}.button{display:grid;align-content:center;padding:4px 8px;font-size:1rem;font-weight:400;color:#fff;background-color:var(--primary-color);border:none;border-radius:8px;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px #0000001a}.button:hover,.button:focus{transform:translateY(-2px);box-shadow:0 6px 18px #00000026;text-decoration:none;outline:none}.button:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.timesheetStyle{text-align:center}.hidden{display:none}.belongTogether{color:#1f2937;background-color:#fafad2}.checkMark{border:1px solid var(--primary-color)}.styled-table{background-color:#fff;width:100%;max-width:1000px;border-collapse:collapse;font-family:Inter,sans-serif;color:#1f2937;box-shadow:0 2px 8px #0000000d;border-radius:8px;font-size:smaller;grid-column:1/13;justify-self:center}.styled-table thead{background-color:var(--primary-color);color:#1f2937;text-align:left}.styled-table th,.styled-table td{border-bottom:1px solid #e5e7eb}.styled-table tbody tr:hover{cursor:default}.styled-table tbody tr:last-child td{border-bottom:none}.content-row{transition:all .3s ease}.content-row.active td{display:table-cell}.content-row td{display:none}.arrow{padding:0;cursor:pointer;text-align:center}.content-row.active td{padding:5px 0}.dropdownArrow{width:20px;height:20px}th,td{border:1px solid black;padding:8px;overflow:hidden;text-overflow:ellipsis}th{background-color:#c8d7f8}.bodyContent{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:10% 10% 55% 15% 10%;height:100%}.form{grid-row:3/4;grid-column:1/13;align-self:center;justify-self:center}.displayRegular{min-width:87px;max-width:90px;white-space:normal;text-align:center;word-wrap:break-word;color:#2626da}.displayOvertTime{text-align:center;color:#1f2937}.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;transform:translate(-50%,-50%);background-color:#fff;border:3px solid red;color:red;max-height:350px;width:80%;align-items:center;border-radius:10px;z-index:10}.uniform-input{display:block;width:100%;padding:8px 12px;font-size:14px;border:2px solid #ccc;border-radius:6px;background-color:#fff;color:#333;box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease}.uniform-input:hover{border-color:#007bff}.uniform-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 5px #007bff4d}body.night-mode .uniform-input{background-color:#333;color:#fff;border-color:#555}body.night-mode .uniform-input:hover,body.night-mode .uniform-input:focus{border-color:#4da8ff;box-shadow:0 0 5px #4da8ff4d}.uniform-input[type=date],.uniform-input[type=time]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.success{max-width:300px;align-items:center;margin:20px 0;border-radius:10px;flex-direction:column;transform:translate(-50%,-50%);overflow-y:auto;padding:10px 20px;display:flex;border:3px solid #40c057;background-color:#fff;color:#40c057;text-align:center;font-size:larger;z-index:10}.specifiedError{color:#1f2937}.dagenInstellen{margin:0;grid-row:2/3;grid-column:2/3;justify-self:start;align-self:center}.timesheetToevoegen{margin:0;grid-row:2/3;grid-column:1/2;justify-self:end;align-self:center}#weekendDag1,#weekendDag2,#colorPreview,#preview:hover{cursor:pointer}.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;justify-content:center;gap:15px;width:80dvw;display:grid;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-flow:column;grid-template-columns:45% 45%}.specialUpdateContainer{grid-column:1/3}.updateDateTime{max-width:250px;color:red;justify-self:center;text-align:center}.submit{border-radius:5px;margin-top:5px;height:50px}.submit:hover{color:#1f2937}input:hover{color:#1f2937;cursor:pointer}.removeError{text-decoration:none;background-color:var(--primary-color);border-radius:5px;margin-top:10px;padding:0 5px;color:#fff;width:fit-content;text-align:center}.removeError:hover{text-decoration:none;color:gray}.timesheetHeader{font-family:inter,Noto Sans,sans-serif;font-size:x-large;height:fit-content;justify-self:center;grid-row:2/3;grid-column:1/13}.browserHeader{display:none}header{width:100%;display:grid;gap:5px;grid-template-columns:repeat(auto-fit,auto);grid-template-rows:1fr;justify-content:end;justify-items:end;align-items:center;grid-auto-flow:column;grid-column:1/13;justify-self:end;margin-right:50px;align-self:center;grid-row:1/2;z-index:5}.newUserForm{justify-self:center;justify-items:center;overflow-x:auto;height:100%;min-width:300px;max-width:500px;grid-row:3/5;grid-column:2/12;display:grid;gap:20px;grid-template-columns:1fr;grid-auto-rows:max-content;padding:20px}.newUserForm::-webkit-scrollbar{display:none}.newUserForm label{display:block;font-weight:700}.newUserForm input{width:100%;padding:8px;box-sizing:border-box}.forgotPassword{font-size:small;grid-column:1/12;grid-row:7/8;justify-self:end;align-self:end}.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:inter,Noto Sans,sans-serif;text-align:center;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:#1f2937}.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:#1f2937}.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:10px}h4{grid-row:2/3;grid-column:1/13;justify-self:center;align-self:center}img,.logo{height:100%}.verificationMessage{border:black solid;padding:10px;background-color:#d3d3d3;grid-column:2/12;grid-row:3/4;justify-items:center;align-content:center;text-align:center}.resendVerificationMessage{color:red}.logoContainer{grid-column:1/13;grid-row:3/4;height:45%;justify-self:center;align-self:center}.headerLinks{margin:0 10px;color:#1f2937;font-family:inter,Noto Sans,sans-serif}.stikyHeader{position:sticky;z-index:2;top:0}.headerLinks:hover{text-decoration:none;color:#1f2937;border-top:solid 1px black}#nav-icon4:hover{border-top:none}.authLinks:hover{text-decoration:none;color:#1f2937}.dropDownMonth{height:fit-content;width:120px;margin-right:10px;border-radius:10px;text-align:center}.displayDay{color:#1f2937}.trashIcon{height:25px}.noteIcon{height:10px;position:absolute;top:0;left:10px}th{text-align:center}.timesheetForm{grid-row:1/2;grid-column:1/13;display:flex;justify-self:start}.timesheetTable{font-family:inter,Noto Sans,sans-serif;border-radius:10px;grid-row:3/4}.updateProfile{color:#1f2937;font-family:inter,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:#1f2937;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:1/13;grid-row:2/3;justify-self:center;align-self:center;font-family:inter,Noto Sans,sans-serif;font-weight:400}.formContainer{text-align:center;grid-row:3/4;grid-column:2/12;justify-self:center;align-self:center;max-height:400px;overflow-y:auto;overflow-x:hidden}.formContainer::-webkit-scrollbar{display:none}.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}.registrationButton{padding-bottom:4px;margin-top:10px;justify-self:end;border:none;background-color:var(--primary-color);color:#fff;border-radius:10px;width:100px}footer{grid-row:5/6;grid-column:1/13;justify-self:center;align-self:end;margin-bottom:10px}.bedrijf{display:flex}.workersForm{grid-column:2/12;grid-row:3/4;min-height:100px;overflow-y:auto;justify-self:center;display:flex;flex-direction:column;align-items:center}.workersForm::-webkit-scrollbar{display:none}.listButton{display:flex;text-decoration:none;align-items:center;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:#1f2937}.listButton:hover{background-color:#ccc}.specialDays{grid-column:1/13;grid-row:3/5;justify-self:stretch;display:flex;flex-direction:column;width:100%}.instellenVoor{text-align:center}.addNewTimesheetForm{display:grid;grid-template-columns:200px;grid-column:2/12;align-self:center;justify-self:center;justify-items: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}.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:fit-content;height:66px;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.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}#betaaldInput:checked~.betaaldInput{display:inline;width:100px}#onbetaaldInput:checked~.onbetaaldInput{display:inline;width:100px}.smallText{font-size:medium}.specialDayForm{overflow-y:auto;display:grid;grid-template-columns:1fr;grid-auto-rows:max-content;width:100%;max-width:100vw;box-sizing:border-box}.specialDayForm::-webkit-scrollbar{display:none}.specialDayForm{-ms-overflow-style:none;scrollbar-width:none}.updateSpecialInput{justify-self:center;max-width:250px}.radioInput{display:grid;justify-content:center;grid-row:1/2;grid-template-rows:max-content;justify-self:center}.dateInput{margin-top:10px;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:#1f2937}.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:120px;width:120px;border-radius:200px;transition:transform .1s ease,box-shadow .1s ease;background:rgb(7,178,7)}.breakButton{font-family:inter,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:120px;width:120px;border-radius:50%;background:#007bff;transition:transform .1s ease,box-shadow .1s ease;cursor:pointer;text-decoration:none}.breakButton:active{transform:scale(.95);box-shadow:2px 2px 5px #929292,-2px -2px 5px #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}.userNote::-webkit-scrollbar{display:none}.userNoteInput{border-radius:10px}.gewerkt{grid-column:1/2}.gepauzeerd{grid-column:2/3}.periode{grid-column:1/3;display:none}.updateTimesheetSubmit{max-width:100px;justify-self:center;grid-column:1/3;grid-row:3/4}.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:120px;width:120px;border-radius:151px;background:#da0a0a}.profileContent{margin-left:10px;align-items:end;margin-right:10px;grid-row:3/4;grid-column:1/13;display:grid;grid-template-columns:repeat(12,auto);grid-auto-rows:repeat(auto-fit,max-content);grid-auto-rows:max-content;overflow:auto;max-height:350px;white-space:nowrap}.profileContent{scrollbar-width:none}.profileContent::-webkit-scrollbar{display:none}p{height:max-content}.buttonText{font-family:inter,Noto Sans,sans-serif;margin:0;font-size:large;color:#fff;grid-column:1/13;grid-row:1/2;justify-self:center;align-self:center}.startButton,.breakButton,.stopButton{margin:0 5px;box-shadow:5px 5px 10px #929292}.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:#1f2937;background-color:#d3d3d3;padding:10px;border-radius:10px;border:1px solid black}.loader{display:none;justify-self:center;width:60px;aspect-ratio:2;--_g: radial-gradient(circle closest-side, black 40%, transparent 55%) no-repeat;background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:calc(100% / 3) 50%;animation:l3 1s infinite linear}@keyframes fromCenterLeft{0%{transform:translate(calc(50vw - 120px))}to{transform:translate(0)}}@keyframes fromCenterRight{0%{transform:translate(calc(120px - 50vw))}to{transform:translate(0)}}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0%}}@media (min-width: 768px){tr:hover{background-color:var(--select)}.side-menu,.backdrop{display:none}.error{width:auto}.browserHeader{display:grid;gap:5px;grid-template-columns:repeat(auto-fit,auto);grid-template-rows:1fr;justify-content:end;justify-items:end;align-items:center;grid-auto-flow:column}#nav-icon4{display:none}.specialDays{grid-column:1/13;grid-row:3/5;justify-self:stretch;display:flex;flex-direction:column;width:100%}.specialDayForm{overflow-y:scroll;display:grid;gap:50px;grid-template-columns:1fr 1fr;width:100vw}.specialDayForm::-webkit-scrollbar{display:none}.radioInput{grid-row:1/2}.dateInput{width:min-content;grid-row:1/2;justify-self:start;align-self:center}}@media (max-width: 768px){.desktop-nav>*:not(.hamburger){display:none}.hamburger{display:block}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}}@media (min-width: 1170px){.timesheetForm{grid-column:2/5}.previewLink{grid-column:10/11}.downloadLink{grid-column:11/12}.dagenInstellen{grid-column:3/4}.timesheetToevoegen{grid-column:2/3}}@media (min-width:1300px){.timesheetForm{grid-column:3/8}.previewLink{grid-column:9/10}.downloadLink{grid-column:10/11}.dagenInstellen{grid-column:4/5}.timesheetToevoegen{grid-column:3/4}}