*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}html{color-scheme:dark light;hanging-punctuation:first last}body{min-height:100svh}@media(prefers-reduced-motion:no-preference){:has(:target){scroll-padding-top:2rem}}img,picture,svg{display:block;max-width:100%}button{background:none;border:none}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:400;line-height:1}p{text-wrap:pretty;max-width:75ch}li{list-style:none}input,select,textarea,button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:none;border:none;padding:0;margin:0;inline-size:100%}@font-face{font-family:iAWriterQuattro-Reg;font-style:normal;font-weight:400;font-display:swap;src:local(""),url(/static/fonts/iAWriterQuattroS-Regular.woff2) format("woff2"),url(/static/fonts/iAWriterQuattroS-Regular.woff) format("woff")}@font-face{font-family:iAWriterQuattro-Bold;font-style:normal;font-weight:700;font-display:swap;src:local(""),url(/static/fonts/iAWriterQuattroS-Bold.woff2) format("woff2"),url(/static/fonts/iAWriterQuattroS-Bold.woff) format("woff")}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:iAWriterQuattro-Reg,system-ui,sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh;font-family:inherit}#root{min-height:100vh}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fff;padding:1rem}.btn-bubble-arrow{border-radius:10em;justify-content:center;align-items:center;font-size:1em;text-decoration:none;display:flex;position:relative;cursor:pointer}.btn-bubble-arrow__arrow{color:#131313;background-color:#ff4c2f;border-radius:10em;flex-flow:row;justify-content:center;align-items:center;width:3.75em;height:3.75em;aspect-ratio:1/1;display:flex;position:relative;transition:transform .735s cubic-bezier(.625,.05,0,1);transform:scale(0) rotate(.001deg);transform-origin:left}.btn-bubble-arrow__arrow.is--duplicate{z-index:2;background-color:#efeeec;position:absolute;right:0}.btn-bubble-arrow__arrow-svg{width:40%;transition:transform .735s cubic-bezier(.625,.05,0,1);transform:rotate(.001deg)}.btn-bubble-arrow__arrow.is--duplicate{position:absolute;z-index:2;right:0;transform:scale(1) rotate(.001deg);transform-origin:right}.btn-bubble-arrow__content{color:#efeeec;background-color:#000;border-radius:10em;justify-content:center;align-items:center;width:100%;height:3.75em;padding-left:2em;padding-right:2em;display:flex;position:relative;transition:transform .735s cubic-bezier(.625,.05,0,1);transform:translate(-3.75em) rotate(.001deg)}.btn-bubble-arrow__content.no-bubble{transform:none}.btn-bubble-arrow__content-text{font-family:iAWriterQuattro-Bold,system-ui,sans-serif;line-height:1}.btn-bubble-arrow:hover .btn-bubble-arrow__content{transform:translate(0) rotate(.001deg)}.btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg{transform:rotate(-45deg)}.btn-bubble-arrow:hover .btn-bubble-arrow__arrow{transform:scale(1) rotate(.001deg)}.btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate{transform:scale(0) rotate(.001deg)}.login-container{width:100%;max-width:400px;position:relative;z-index:2;overflow:clip}.login-logo{display:block;margin:0 auto 1rem;max-width:250px}.login-background-clock{position:fixed;top:50%;right:50%;width:180vw;height:auto;aspect-ratio:1/1;border-radius:50%;background-color:#f8f9fa;transform:translate(50%,-50%)}.login-card{background:transparent;border-radius:12px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.login-card h1{font-family:iAWriterQuattro-Bold,system-ui,sans-serif;margin:0 0 2rem;color:#333;font-size:2rem;text-align:center}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem;text-align:left}.form-group label{color:#555;font-weight:500;font-size:.9rem}.form-group input{padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s}.form-group input:focus{outline:none;border-color:#667eea}.form-group input:disabled{background-color:#f5f5f5;cursor:not-allowed}.login-button{padding:.875rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-family:iAWriterQuattro-Bold,system-ui,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #667eea66}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed}.error-message{background:#fee;color:#c33;padding:.75rem;border-radius:6px;font-size:.9rem;text-align:center}.dashboard-container{width:100%;max-width:600px}.dashboard-container .btn-bubble-arrow{margin-top:1rem}.dashboard-card{background:#fff;border-radius:12px;padding:1rem}.dashboard-header{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.dashboard-header h1{font-family:iAWriterQuattro-Bold,system-ui,sans-serif;margin:0;color:#333;font-size:1.75rem}.dashboard-content{display:flex;flex-direction:column;gap:1.5rem}@keyframes rotate-clock{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes breathe{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.85}}.attendance-panel{background:#f8f9fa;padding:1.5rem;border-radius:8px;text-align:left}.attendance-panel h2{margin:0 0 1rem;color:#333;font-family:iAWriterQuattro-Bold,system-ui,sans-serif;font-size:1.25rem;text-align:center}.success-message{padding:1rem;background-color:#d4edda;color:#155724;border-radius:4px;text-align:center;margin-bottom:1rem}.attendance-types{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.attendance-types .attendance-type{display:flex;flex-direction:column;align-items:center;gap:.5rem}.attendance-types .attendance-type:nth-child(3){grid-column:span 2}.attendance-types .attendance-type:nth-child(3) .attendance-button{font-family:iAWriterQuattro-Bold,system-ui,sans-serif;background-color:#fff;color:#000;border-radius:10em;justify-content:center;align-items:center;width:100%;height:3.75em;padding-left:2em;padding-right:2em;display:flex;flex-direction:row;position:relative;transition:transform .735s cubic-bezier(.625,.05,0,1);border:1px dashed black}.attendance-types .attendance-type:nth-child(3) .attendance-button.active{background:#ffc107;border-color:transparent;animation:breathe 3s ease-in-out infinite}.attendance-types .attendance-type:nth-child(3) .attendance-button.active img{filter:brightness(0) invert(1)}.attendance-types .attendance-type p{font-size:.75rem;text-align:center;color:#000;-webkit-hyphens:auto;hyphens:auto}.attendance-button{padding:1rem;background:#fff;border-radius:50%;cursor:pointer;transition:all .2s;text-align:left;width:100%;height:auto;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;border:1px dashed black}.attendance-button>div{width:100%;height:auto}.attendance-button img{width:100%;height:100%;object-fit:contain}.attendance-button.active{background:#ffc107;border-color:transparent}.attendance-button.active img{filter:brightness(0) invert(1);animation:rotate-clock 60s steps(60) infinite}.attendance-button:disabled:not(.active){opacity:.5;cursor:not-allowed}.stop-button{width:100%;padding:.75rem;background:#ffc107;color:#333;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.stop-button:hover:not(:disabled){background:#e0a800;transform:translateY(-2px)}.stop-button:disabled{opacity:.6;cursor:not-allowed}.attendance-timeline{background:#f8f9fa;border-radius:8px;padding:1.5rem}.attendance-timeline h2{margin:0 0 .25rem;font-family:iAWriterQuattro-Bold,system-ui,sans-serif;font-size:1.25rem;text-align:center;color:#333}.attendance-timeline .loading,.attendance-timeline .empty-state{text-align:center;padding:2rem;color:#555}.attendance-timeline .error-message{padding:1rem;background-color:#fee;color:#c33;border-radius:4px;text-align:center}.attendance-timeline .timeline-content{display:flex;flex-direction:column;gap:2rem}.attendance-timeline .timeline-date-group{display:flex;flex-direction:column;gap:1rem}.attendance-timeline .timeline-date-header{font-size:.875rem;font-weight:600;text-align:center;color:#555;text-transform:uppercase;letter-spacing:.05em;padding-bottom:.5rem}.attendance-timeline .timeline-items{display:flex;flex-direction:column;gap:.75rem;position:relative;padding-left:2rem}.attendance-timeline .timeline-items:before{content:"";position:absolute;left:.8rem;top:.5rem;bottom:.5rem;width:2px;background:#e0e0e0}.attendance-timeline .timeline-item{display:flex;gap:1rem;position:relative}.attendance-timeline .timeline-item.active .timeline-content-item{animation:pulse-active 1s ease-in-out infinite}@keyframes pulse-active{0%{box-shadow:0 0 #0006}to{box-shadow:0 0 0 8px #0000}}.attendance-timeline .timeline-marker{position:absolute;width:20px;height:20px;left:-1.75rem;top:.25rem;z-index:1;background-color:#f8f9fa}.attendance-timeline .timeline-marker img{width:100%;height:100%;object-fit:contain}.attendance-timeline .timeline-dot{width:12px;height:12px;border-radius:50%;background:#f8f9fa;border:3px solid #667eea;box-shadow:0 0 0 3px #f8f9fa}.attendance-timeline .timeline-dot.office{border-color:#3b82f6}.attendance-timeline .timeline-dot.homeoffice{border-color:#8b5cf6}.attendance-timeline .timeline-dot.breaktime{border-color:#f59e0b}.attendance-timeline .timeline-dot.doctorvisit{border-color:#ec4899}.attendance-timeline .timeline-dot.vacation{border-color:#10b981}.attendance-timeline .timeline-dot.sick{border-color:#ef4444}.attendance-timeline .timeline-content-item{flex:1;background:#fff;padding:.75rem 1rem;border-radius:6px;border-left:3px solid #e0e0e0;transition:border-left-color .2s ease,transform .2s ease}.attendance-timeline .timeline-content-item:hover{border-left-color:#667eea;transform:translate(2px)}.attendance-timeline .timeline-content-item:hover:not(.timeline-item.active .attendance-timeline .timeline-content-item){box-shadow:0 2px 8px #00000014}.timeline-item.completed .attendance-timeline .timeline-content-item{border-left-color:#28a745}.attendance-timeline .timeline-time{font-size:.875rem;font-weight:600;color:#333;margin-bottom:.25rem}.attendance-timeline .timeline-type{font-size:.875rem;color:#333;margin-bottom:.125rem}.attendance-timeline .timeline-action{font-size:.75rem;color:#555;text-transform:uppercase;letter-spacing:.05em}.timeline-item.start .attendance-timeline .timeline-action{color:#28a745}.timeline-item.stop .attendance-timeline .timeline-action{color:#dc3545}.attendance-timeline .timeline-note{font-size:.75rem;color:#555;font-style:italic;margin-top:.25rem}.form-section{display:flex;justify-content:center;align-items:center;min-block-size:100vh;padding:3em 1em}.form-group{display:flex;flex-direction:column;gap:1.5em;inline-size:25em;margin-block-end:0}@media screen and (max-width:767px){.form-group{inline-size:100%}}.form{display:flex;flex-direction:column;gap:1.5em;inline-size:100%}.form-field-group{display:flex;flex-direction:column;gap:.75em;align-items:flex-start}.form-field{inline-size:100%;position:relative}.form-label{inline-size:100%;margin-block-end:0;font-size:.875em;font-weight:500;line-height:1;color:#121212}.form-required{color:#ff5324}.form-input{display:block;inline-size:100%;block-size:auto;padding:.9em 3.5em .9em 1em;margin-block-end:0;font-size:1.125em;font-weight:500;line-height:1.2;color:#121212;background-color:#efeeeb;border:1px solid hsl(40,11%,93%);border-radius:.328125em;outline:0 transparent;outline-offset:0;box-shadow:0 0 transparent;appearance:none;vertical-align:middle;box-sizing:border-box}.form-input.is--textarea{resize:vertical;min-block-size:9em}.form-input:focus{border-color:#cdcbc6}.form-input::placeholder{color:#1212124d;background-color:#efeeeb}.form-field-icon{display:flex;justify-content:center;align-items:center;inline-size:3.5em;max-block-size:3.5em;padding-inline:1em;color:#cdcbc6;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:.375em;position:absolute;inset-block:1px;inset-inline-end:1px}.form-field-icon.is--error{color:#ff5324}.form-field-icon.is--select{inset-inline-end:1.75em}.form-field-chevron{display:flex;justify-content:center;align-items:center;inline-size:3.5em;max-block-size:3.5em;padding-inline:1em;color:#121212;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:.375em;position:absolute;inset-block:1px;inset-inline-end:1px}.radiocheck-group{display:flex;flex-direction:column;gap:.75em;inline-size:100%;position:relative}.radiocheck-field{display:flex;align-items:flex-start;margin-block-end:0;padding-inline-start:0;position:relative}.radio-input,.checkbox-input{inline-size:0;block-size:0;margin-block-start:0;margin-inline-start:0;cursor:pointer;position:absolute}.radiocheck-custom{display:flex;justify-content:center;align-items:center;inline-size:1.25em;block-size:1.25em;margin-block-start:.066em;margin-inline-end:.75em;color:#efeeeb;background-color:#efeeeb;border:1px solid hsl(0,0%,7%);border-radius:.125em;order:-1;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute}.radiocheck-custom.is--radio{border-radius:50%}.radiocheck-check-svg{inline-size:1.5em;position:absolute}.radio-dot{inline-size:.375em;block-size:.375em;background-color:currentColor;border-radius:50%;color:inherit}.radiocheck-field-icon{display:flex;justify-content:center;align-items:center;inline-size:3.5em;max-block-size:3.5em;padding-inline:1em;color:#cdcbc6;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:.375em;position:absolute;inset-block-start:1px;inset-inline-end:1px}.radiocheck-field-icon.is--error{color:#ff5324}.radiocheck-label{flex-grow:1;margin-block-end:0;padding-inline-start:1.8em;font-size:1.125em;font-weight:500;line-height:1.2;color:#121212;cursor:pointer}.radiocheck-label.is--small{flex-grow:1;padding-inline-start:2em;font-size:1em}.form-inactive-text{margin-inline-start:auto;padding-inline-start:.5em;opacity:.35}.form-submit{visibility:hidden;opacity:0;position:absolute;inset:0}.form-submit-btn{font-family:iAWriterQuattro-Bold,system-ui,sans-serif;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:1.005em 1.125em;color:#efeeeb;background-color:#121212;border:1px solid hsl(0,0%,7%);border-radius:500px;outline:0 transparent;outline-offset:0;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 0 transparent}.form-submit-btn:focus{border-color:#cdcbc6;outline-color:#121212;outline-offset:0;border-width:1px}.form-submit-btn-p{margin-block-end:0;font-size:1.125em;font-weight:500;line-height:1.2}.form-divider{inline-size:100%;block-size:1px;background-color:#121212;opacity:.15}.form-notifcation{inline-size:100%;padding:1.125em;font-size:1em;text-align:start;color:#0fb369;background-color:#efeeeb;border:1px solid hsl(153,85%,38%);border-color:inherit;border-radius:.375rem;outline:0 transparent;outline-offset:0;position:relative}.form-notifcation.is--error{margin-block-start:0;padding-inline-end:3.5em;color:#ff5324}.form-notification-icon{display:flex;justify-content:center;align-items:center;inline-size:3.5em;padding-inline:1em;color:inherit;pointer-events:none;position:absolute;inset-block-start:50%;inset-inline-end:0;transform:translateY(-50%)}.form-notification-bg{display:flex;background-color:currentColor;border-radius:calc(.375rem - 2px);color:inherit;opacity:.1;pointer-events:none;position:absolute;inset:0}.form-notification-p{font-size:1.125em;font-weight:500;color:inherit}[data-validate].is--error input,[data-validate].is--error textarea,[data-validate].is--error select{border-color:#ff5324}[data-validate].is--error .form-field-icon.is--error,[data-validate].is--error .radiocheck-field-icon.is--error{opacity:1}[data-validate].is--error .radiocheck-custom{border-color:#ff5324}[data-validate].is--error input:checked~.radiocheck-custom{border-color:#121212}[data-validate].is--success .form-field-icon.is--success,[data-validate].is--success .radiocheck-field-icon.is--success{opacity:1}[data-form-validate] .radiocheck-field input:focus-visible~.radiocheck-custom{background-color:#d5d2cd;color:#e4e2dd}[data-form-validate] .radiocheck-field input:focus-visible:checked~.radiocheck-custom,[data-form-validate] .radiocheck-field input:checked~.radiocheck-custom{background-color:#121212;color:#efeeeb}[data-form-validate] .radiocheck-field .radiocheck-label.is--small{margin-block-start:.125em}[data-form-validate] select:has(option[value=""]:checked){color:#1212124d}