:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;flex-direction:column}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;height:100vh;overflow-x:hidden;overflow-y:scroll}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.landing-page-forms{position:relative;display:flex;flex-direction:column;width:500px;margin:2rem auto}.landing-page-forms .tabs{display:flex;width:100%;justify-content:center}.landing-page-forms .tabs .tab{width:100%;padding:5px;margin:0 1rem;text-align:center;border-bottom:2px solid rgba(25,121,53,0);transition:border-bottom .4s ease-in-out;cursor:pointer}.landing-page-forms .tabs .tab.active{font-weight:700;border-bottom:2px solid rgba(25,121,53,1)}#sign-up{position:relative;display:block;width:100%;height:100%}#sign-up .wrapper{width:100%;padding:2rem;margin:auto;box-sizing:border-box}#sign-up h2{text-align:center;margin-top:0}#sign-up .register-message{position:relative;display:block;margin:1rem 0;padding:5px;border-width:1px;border-style:solid;border-radius:4px;transition:visibility .4s ease-in-out,opacity .4s ease-in-out}#sign-up .register-message.visible{visibility:visible;opacity:1}#sign-up .register-message.hidden{visibility:hidden;opacity:0;margin-top:0;height:0;padding:0}#sign-up .register-message.success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}#sign-up .register-message.failed{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}#sign-up .register-message a{cursor:pointer}form#customisable-form{display:flex;flex-direction:column;gap:1.6rem;width:100%}form#customisable-form .row{display:flex;flex-direction:row;gap:1rem}form#customisable-form .password-wrapper{position:relative;display:block}form#customisable-form .field-wrapper{position:relative;width:100%}form#customisable-form .field-wrapper label{position:absolute;height:fit-content;font-size:14px;text-transform:capitalize;top:0;bottom:0;left:8px;margin:auto;transition:all .2s ease-out;cursor:text;pointer-events:none}form#customisable-form .field-wrapper:has(input:focus,input:not(:placeholder-shown)) label{top:-38px;transform:scale(.85)}form#customisable-form .field-wrapper:has(input:focus,input:not(:placeholder-shown)) label:after{content:"";position:absolute;display:block;width:100%;height:4px;padding:0 7px;top:8px;bottom:0;left:-7px;margin:auto;background-color:#2b2a33;z-index:-1}form#customisable-form .preview-field{display:flex;align-items:center;gap:1rem}form#customisable-form .preview-field .preview-image{width:50px;height:50px;aspect-ratio:1 / 1;background-size:cover;background-position:center;border-radius:50%;border:2px solid aliceblue}form#customisable-form input{width:100%;padding:8px;border-width:1px;border-style:solid;border-color:#3d444d;border-radius:4px;box-sizing:border-box;outline:none;transition:all .4s ease-in-out}form#customisable-form input:user-invalid{border-color:red}form#customisable-form .field-wrapper:has(input:user-invalid,input:placeholder-shown) label .required{color:red}form#customisable-form .field-wrapper .required-field-message{position:absolute;width:100%;font-size:10px;color:red;bottom:0;left:0;opacity:0;visibility:hidden;transition:.4s ease-out;z-index:-1}form#customisable-form .field-wrapper:has(input:user-invalid) .required-field-message{bottom:-15px;opacity:1;visibility:visible}form#customisable-form .password-visibility-button{position:absolute;height:fit-content;padding:8px;line-height:0;top:0;bottom:0;right:8px;margin:auto;background-color:#2b2a33;cursor:pointer}form#customisable-form .password-matches{position:absolute;height:fit-content;padding:8px;font-size:14px;line-height:0;top:0;bottom:0;right:8px;margin:auto;background-color:#2b2a33;cursor:default}form#customisable-form .password-visibility-button .password-visibility-icon{width:16px;aspect-ratio:1 / 1;fill:#f8f8ff;transition:all .4s ease-out}form#customisable-form .password-visibility-button:hover .password-visibility-icon{fill:#f8f8ffbf}.password-confirmation-fields{display:flex;flex-direction:column;gap:1.3rem}form#customisable-form .password-validation{font-size:14px}form#customisable-form .password-validation ul{padding-left:1.5rem}form#customisable-form .password-validation li{list-style-type:none}form#customisable-form .password-validation li .is-valid{margin-right:5px}form#customisable-form button:disabled{color:#ffffff59;background-color:#2b2a33;cursor:not-allowed}form#customisable-form button{background-color:#197935;color:#fff;border:none;transition:all .4s ease-out}form#customisable-form button:not(:disabled):hover{filter:brightness(1.2)}@media (prefers-color-scheme: light){form#customisable-form .field-wrapper:has(input:focus,input:not(:placeholder-shown)) label:after{background-color:#f6f8fa}form#customisable-form input{background-color:#f6f8fa;border-color:#d1d9e0}form#customisable-form .password-visibility-button,form#customisable-form .password-matches{background-color:#f6f8fa}form#customisable-form .password-visibility-button .password-visibility-icon{fill:#2b2a33}form#customisable-form .password-visibility-button:hover .password-visibility-icon{fill:#2b2a33bf}form#customisable-form button:disabled{color:#21354740;background-color:#f6f8fa}}.user-profile{position:relative;display:flex;flex-direction:column;margin:2rem auto;width:500px;align-items:center;color:#f8f8ff;gap:4rem}.user-profile svg{fill:#f8f8ff}.user-profile-header{display:flex;width:100%;margin-bottom:-3rem;align-items:center}.header-action-button{position:relative;width:fit-content;height:fit-content;aspect-ratio:1 / 1;border-radius:50%;padding:10px;background-color:#2b2a3380;border-width:2px;border-style:solid;border-color:#2b2a33;transition:all .4s ease-in-out;cursor:pointer}.user-profile-header .left{margin:0 auto 0 0}.user-profile-header .right{margin:0 0 0 auto}.header-action-button:before{position:absolute;width:fit-content;height:fit-content;top:0;bottom:0;font-size:14px;line-height:unset;margin:auto 0;color:#f8f8ff;opacity:0;visibility:hidden;transition:all .8s ease-in-out;box-sizing:border-box;z-index:-10}.header-action-button.left:before{right:-85px}.header-action-button.right:before{left:-85px}.header-action-button:hover{filter:brightness(1.5)}.header-action-button:hover:before{opacity:1;visibility:visible;z-index:auto}.header-action-button.left.back:before{content:"Back to Profile";right:-105px}.header-action-button.edit:before{content:"Edit Profile"}.header-action-button svg{display:block;width:18px;aspect-ratio:1 / 1}.user-profile-header .title h2{margin:0}.user-info{display:flex;flex-direction:column;align-items:center}.user-info .profile-image{display:block;position:relative;width:150px;height:150px;background-position:center;background-size:cover;border-radius:50%;border-width:4px;border-style:solid;border-color:#f6f8fabf}.user-info .user-fullname{margin:0}.user-info .user-email{font-size:12px}.user-details{width:100%;display:flex;flex-direction:column;gap:.5rem}.user-details .field{display:flex;justify-content:space-between;align-items:center}.user-details .field span{display:block;line-height:normal;text-transform:capitalize}.user-details .field-label{display:flex;align-items:center;gap:.75rem;padding:12px 8px;background-color:#2b2a33;min-width:50%;border-radius:0 26px 26px 0}.user-details .field-label svg{display:block;line-height:normal;width:18px;aspect-ratio:1 / 1}.user-actions{display:flex;gap:2rem;width:100%}.user-profile .user-actions button{width:100%;border:none;transition:all .4s ease-out}.user-profile .user-actions button:not(:disabled):hover{filter:brightness(1.2)}.user-profile .user-actions button#deactivate{background-color:#f6f8fa;color:#213547}.user-profile .user-actions button#logout{background-color:#ff1744;color:#ffffffde}.user-profile .update-message{display:block;width:100%;margin-top:-2rem;text-align:center;opacity:0;visibility:hidden;z-index:-10;transition:all .4s ease-in-out}.user-profile .update-message.visible{opacity:1;visibility:visible;z-index:auto}.user-profile .update-message.success{color:#57d48d}.user-profile .update-message.fail{color:#ff1744}@media (prefers-color-scheme: light){.user-profile{color:#213547}.header-action-button{border-color:#f6f8fa;background-color:#f6f8fa80}.header-action-button:before{color:#213547}.header-action-button:hover{filter:brightness(.9)}.user-details .field-label{background-color:#f6f8fa}.user-profile svg{fill:#213547}};{}