@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap";:root{--heading-color: #444;--text-color: #999;--primary-color: #8d69f1;--primary-color-light: #d2c4fa;--highlight-color: #d13267;--bg-color: #f4f4f4;--online: #0ebb50;--text-normal: #4b5563;--text-subtle: #44546f;--text-main: #172b4d;--text-light: #abb0ba;--light-blue: #06b6d4;--normal-blue: #388bff;--bg-blue: #4a90e2;--wood-brown: #e4d2ba}*,*:before,*:after{box-sizing:border-box}body{font-family:Poppins,sans-serif;margin:0;font-size:1.1em;background:var(--bg-color)}ul,li,p,h1,h2,h3,h4{margin:0;padding:0}ul{list-style-type:none}.page-title{font-size:1em;color:var(--heading-color);display:inline-block}.btn{background:#fff;padding:8px 12px;border-radius:4px;color:var(--primary-color);cursor:pointer;font-size:1em;border:1px solid var(--primary-color)}.btn:hover{color:#fff;background-color:var(--primary-color)}.btn:disabled,.btn[disabled]{border:1px solid #999999;background-color:#ccc;color:#fff}label{display:block;margin:24px auto}label span{display:block;margin-bottom:6px}input,textarea{padding:8px 6px;font-size:1em;color:#777;width:100%;box-sizing:border-box;border:1px solid #ddd;border-radius:4px;outline-color:#444;resize:none}textarea{min-height:160px}.error{color:red;background:pink;border:1px solid red;border-radius:4px;padding:8px;margin:10px 0}.App{display:flex}.App .container{flex-grow:1;width:100%}.progress-icon{width:50px;height:50px;animation:loading .6s linear infinite running;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(250deg)}to{transform:rotate(360deg)}}.project-list{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:20px}.project-card{background-color:#fff;padding:16px;border-radius:6px;box-shadow:3px 3px 5px #0000000d;text-decoration:none;color:inherit}.project-card a{text-decoration:none;color:inherit}.project-card .due-date{color:var(--text-color);font-size:.8em}.project-card h4{font-size:.9em;color:var(--heading-color)}.project-card p{color:var(--text-color);font-size:.9em}.project-card .assigned-to{margin-top:20px;padding-top:10px;border-top:1px solid #eee;letter-spacing:.5px;font-weight:300}.project-card ul{margin:10px 0;display:flex}.project-card li{margin-right:10px}.project-card .avatar-wrapper{width:40px;height:40px;display:inline-block}.project-card .avatar-wrapper:after{display:none}.avatar-wrapper{width:70px;height:70px;position:relative;display:inline-block}.avatar-wrapper .avatar{width:100%;height:100%;border:3px solid #fff;object-fit:cover;border-radius:55px}.avatar-wrapper:after{position:absolute;content:"";width:16px;height:16px;border-radius:50%;background:var(--online);border:3px solid #fff;bottom:5px;right:0}.dashboard{padding:60px}.dashboard .container{max-width:1400px;margin:0 auto}@media (max-width: 768px){.dashboard{padding:20px}}@media (max-width: 500px){.dashboard{padding:10px}}.project-filter{margin:30px auto}.project-filter nav{display:flex;padding:10px;background-color:#fff;border-radius:4px}.project-filter p{font-size:.9em;margin-right:10px}.project-filter button{background:transparent;border:0;font-family:inherit;font-weight:700;color:var(--text-color);cursor:pointer;border-right:1px solid #e4e4e4;font-size:.9em}.project-filter button:last-child{border:0}.project-filter button.active{color:var(--primary-color)}.project-details.container{max-width:1200px;margin:0 auto}.project-details{display:grid;grid-template-columns:3fr 2fr;align-items:start;grid-gap:40px;padding:10px}.project-summary{background-color:#fff;padding:30px;border-radius:4px}.project-summary .due-date{margin-right:3em;color:var(--title-color);white-space:nowrap}.project-summary .project-info .due-date span{background-color:var(--wood-brown);padding:4px 8px;border-radius:4px;margin-left:5px;font-size:.8em;color:var(--text-main);-webkit-user-select:none;user-select:none;white-space:nowrap}.project-summary .project-info{display:flex;align-items:center;font-size:clamp(.75rem,2vw,.9rem)}.project-summary .project-info .label{display:flex;align-items:center;gap:2px;background-color:var(--primary-color-light);padding:4px 8px;border-radius:4px;font-size:.8em;color:var(--text-main);-webkit-user-select:none;user-select:none}.project-summary .project-info .label img{width:16px;height:16px}.project-summary .project-info .created-by{display:flex;align-items:center;gap:2px;position:relative;cursor:default;white-space:nowrap;margin-right:3em}.project-summary .project-info .created-by .avatar-wrapper{width:35px;height:35px;border:1px solid var(--wood-brown);border-radius:50%;cursor:pointer}.project-summary .page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:800;line-height:1.1;letter-spacing:-1px;background:linear-gradient(90deg,var(--primary-color),var(--text-subtle));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:none;font-family:Satoshi,Inter,Segoe UI,sans-serif;transition:all .3s ease;margin-bottom:1.5rem;position:relative}.project-summary .page-title:after{content:"";display:block;width:60px;height:4px;background:var(--primary-color);margin-top:10px;border-radius:4px;transition:width .3s ease}.project-summary .page-title:hover:after{width:100px}.project-summary .details{margin:30px 0;color:var(--text-color);line-height:1.8em;font-size:clamp(.9rem,2vw,1rem);white-space:pre-wrap}.project-summary h4{color:var(--text-color);font-size:.9em}.project-summary .assigned-users{display:flex;margin-top:20px}.project-summary .assigned-users .avatar{margin-right:10px}.project-summary .assigned-users div[data-user-name],.project-summary .created-by{position:relative;cursor:pointer}.project-summary .assigned-users div[data-user-name]:after,.project-summary .created-by:after{content:attr(data-user-name);position:absolute;top:-25px;left:0;background-color:#ccc;padding:3px 6px;color:#222;font-size:.8rem;border-radius:5px 0;transition:all .1s ease .4s;box-shadow:0 0 2px #22222261;background-image:-webkit-linear-gradient(top,#f8f8f8,#cccccc);opacity:0;z-index:99;visibility:hidden}.project-summary .created-by:after{top:-35px;left:65%}.project-summary .assigned-users div[data-user-name]:hover:after,.project-summary .created-by:has(.avatar-wrapper:hover):after{visibility:visible;opacity:1}.project-summary .avatar-wrapper{width:55px;height:55px}.project-summary .avatar-wrapper:after{display:none}.project-summary+.btn{margin-top:20px}.project-summary .status{margin-top:20px;font-size:.8em;color:var(--text-color)}.project-comments label{margin-bottom:0}.project-comments textarea{min-height:40px;font-size:1em}.project-comments h4{color:var(--heading-color);margin-top:10px}.project-comments li{padding:10px 15px;border-radius:4px;border:1px solid #f2f2f2;margin-top:20px;box-shadow:3px 3px 5px #0000000d;background:#fff;position:relative;transition:all .3s ease}.comment-author{display:flex;align-items:center;color:var(--title-color)}.comment-author .avatar-wrapper{width:35px;height:35px;margin-right:5px}.comment-author .avatar-wrapper:after{display:none}.comment-author-name{font-size:.8em;font-weight:500;margin-right:10px;color:var(--text-normal)}.comment-date{color:var(--text-color);font-size:.7em;display:inline-block}.comment-content{color:var(--text-color);font-size:clamp(.75rem,2vw,.9rem);margin-top:5px}.project-comments .delete-comment{display:none;justify-content:center;align-items:center;color:#e19494;width:20px;height:20px;border-radius:25px;background:#f9d3d3;cursor:pointer;position:absolute;right:5px;top:5px}.project-comments li:hover{box-shadow:3px 3px 5px #0000001a;transform:scale(1.01)}.project-comments li:hover .delete-comment{display:flex}.project-comments .delete-comment:hover{color:#fbdede;background:#e18282}@media (max-width: 1300px){.project-details{grid-template-columns:1fr}}@media (max-width: 768px){.project-info .created-by,.project-summary .due-date{margin-right:1em}}@media (max-width: 500px){.project-summary{padding:20px}.project-summary .project-info{flex-wrap:wrap}.project-summary .project-info .label{margin-top:10px}.add-comment .progress-icon{width:30px;height:30px;animation:loading .6s linear infinite running;position:relative;transform:unset}}.dropdown{position:relative;width:100%}.dropdown-trigger{display:inline-flex;align-items:center;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:3px 10px}.dropdown-trigger:hover{border-color:var(--primary-color-light)}.dropdown-trigger:has(input:focus){outline:2px solid var(--primary-color-light)}.dropdown-trigger span{transform:rotate(90deg);transition:transform .4s;color:#4e4e4e}.dropdown-trigger span.active{transform:rotate(270deg)}.dropdown-trigger input{flex-grow:1;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;padding:0;margin:0;font-size:15px;color:#4e4e4e;font-family:Inter,sans-serif}.dropdown-items-wrapper{position:absolute;width:100%;left:0;top:115%;background-color:#fff;z-index:10;box-shadow:0 5px 12px #00000026;padding:5px 0}.dropdown-items-wrapper li{padding:5px 20px;font-size:1rem;font-weight:300;color:var(--text-normal)}.dropdown-items-wrapper li:hover{background-color:#f1f2f4;background-color:var(--primary-color-light);color:#fff;cursor:pointer}.dropdown-items-wrapper li.selected{background-color:var(--primary-color);color:#fff}.dropdown-trigger input::placeholder{color:#4e4e4e;font-size:14px;font-weight:400;font-family:Inter,sans-serif}.custom-date-picker{position:relative;max-width:300px;font-family:Inter,sans-serif}.date-input{padding:6px 12px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#fff;font-size:14px;color:#4e4e4e;display:flex;align-items:center;justify-content:space-between}.date-input.open{outline:2px solid var(--primary-color-light);box-shadow:0 0 10px #0000001a}.date-input .icon{transform:rotate(90deg);transition:transform .2s;font-family:Poppins,sans-serif;font-size:17.6px;padding:0;margin:0}.date-input.open .icon{transform:rotate(270deg)}.calendar-popup{position:absolute;top:105%;left:0;background:#fff;border-radius:8px;padding:15px 10px;box-shadow:0 5px 12px #00000026;z-index:1000;margin-top:5px}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600;font-size:15px;color:#333}.calendar-header button{background:var(--bg-color);border:none;font-size:16px;font-weight:600;color:#888;cursor:pointer;padding:3px 12px;border-radius:4px;line-height:1.4}.calendar-header button:hover{background:#ccc;color:#fff}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.week-day{text-align:center;font-weight:500;font-size:12px;color:#888}.calendar-day{text-align:center;padding:8px;cursor:pointer;border-radius:4px;font-size:14px;transition:color .1s}.calendar-day:hover{background-color:#f0f0f0;background-color:var(--primary-color-light);color:#fff}.calendar-day.selected{background-color:var(--primary-color);color:#fff}.calendar-day.empty{background-color:transparent;cursor:default}.calendar-day.today{border-radius:0;border-bottom:2px solid var(--primary-color);color:var(--primary-color);font-weight:600}.calendar-day.disabled{color:#ccc;cursor:not-allowed;pointer-events:none;background-color:#f6f6f6}.time-picker{margin-top:10px;padding-top:10px;border-top:1px solid #eee;display:flex;align-items:center}.time-picker .time-input{padding:6px 8px;border:1px solid #ccc;border-radius:4px;font-size:14px;cursor:pointer;color:#5e5e5e}.time-picker span{margin-right:10px;color:#444;font-weight:500;font-size:15px}.time-input{background:#fdf6ec;color:#5e5e5e}.time-input::-webkit-datetime-edit-hour-field,.time-input::-webkit-datetime-edit-minute-field,.time-input::-webkit-datetime-edit-second-field,.time-input::-webkit-datetime-edit-ampm-field{padding:5px 8px}.users-list{width:304px;box-sizing:border-box;background:#fbfbfb;display:flex;flex-direction:column;box-shadow:0 0 8px #0000001a;position:fixed;top:30%;overflow:hidden;height:60vh;border-radius:8px;z-index:10;color:#172b4d}.users-list h3{text-align:center;font-size:15px;font-weight:500;padding:15px 10px;color:var(--text-subtle)}.users-list-item{display:flex;align-items:center;margin:20px auto;font-size:.9rem;padding:5px 0;color:var(--text-main)}.users-list-item:hover{background-color:#f1f2f4;cursor:pointer}.users-list-item:active{transform:scale(1.05)}.users-list-item .avatar-wrapper{margin:0 10px 0 30px;width:40px;height:40px;min-width:40px}.users-list-item .avatar-wrapper:after{display:none}.users-list-item.online .avatar{border:1px solid var(--online)}.users-list-content{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--primary-color-light);scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.user-search{width:95%;display:block;margin:3px auto;font-size:1rem;padding:10px 8px 10px 12px;border-radius:8px}.user-search:focus{background-color:#fff;outline-color:var(--normal-blue)}.user-search::placeholder{color:silver;font-weight:100;padding:0 5px;font-size:.9rem;letter-spacing:1.4px}.users-list section{position:relative}.users-list section .close-modal{position:absolute;display:block;top:0;right:0;padding:10px 20px;cursor:pointer;font-weight:300;color:#626f86}.users-list section .close-modal:hover{background-color:#e8e8e8;border-radius:0 0 0 8px}.no-results{font-size:1rem;color:var(--text-light);justify-self:center;margin-top:30px}.error-toast{font-size:.8rem;color:red;background:pink;border:1px solid red;border-radius:4px;margin:10px 0;position:absolute;top:10%;right:1%;display:flex;flex-direction:column;animation:shake-toast 1s ease-out;z-index:9999}.error-toast p{padding:8px}.error-toast .timeout{align-self:flex-end;display:block;height:5px;width:100%;background:#ff5f2f;position:relative;bottom:0;animation:timeout-toast 3s linear}@keyframes timeout-toast{0%{width:100%}to{width:0}}@keyframes shake-toast{0%{transform:translate(10%)}20%{transform:translate(-10%)}80%{transform:translate(0)}}.error-toast:nth-of-type(2n){top:20%}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content.style{background:#fff;border-radius:8px;padding:20px;max-width:500px;width:100%}.modal-content.no-style{max-width:500px;width:100%}.create-form{padding:20px;margin:20px auto 0;max-width:800px;width:100%;position:relative}.assigned-list{display:flex;flex-wrap:wrap}.assigned-list li{margin-right:5px;font-size:1rem;position:relative;display:flex;flex-direction:column;align-items:center}.assigned-list .avatar-wrapper:after{display:none}.assigned-list .avatar-wrapper{width:50px;height:50px;cursor:pointer;transition:opacity .2s ease}.assigned-list .avatar-wrapper:hover .avatar{opacity:.9;border-width:2px}.assign-user-icon{width:45px;height:45px;border-radius:50%;background:#ddd;font-size:1.6rem;display:flex;justify-content:center;align-items:center;border:2px solid white;color:#fff;cursor:pointer}.assign-user-icon:hover{background-color:#bababa}.assign-user-icon.active{background-color:var(--text-main)}.assigned-list li[data-user-name]:after{content:attr(data-user-name);position:absolute;top:-35px;left:0;background-color:#ccc;padding:4px 8px;color:#222;font-size:.8rem;border-radius:5px 0;transition:all .1s ease .4s;box-shadow:0 0 2px #22222261;background-image:-webkit-linear-gradient(top,#f8f8f8,#cccccc);opacity:0;z-index:99;visibility:hidden}.assigned-list li[data-user-name]:hover:after{visibility:visible;opacity:1}.assigned-list .delete{margin-top:3px;display:none;justify-content:center;align-items:center;color:#e19494;width:20px;height:20px;border-radius:25px;background:#f9d3d3;cursor:pointer}.assigned-list li[data-user-name]:hover .delete{display:flex}.assigned-list .delete:hover{color:#fbdede;background:#e18282}.select-options span{display:block;margin-bottom:6px}form>div{margin:15px 0}.date-picker span{display:block;margin-bottom:6px}.create-form input:focus,.create-form textarea:focus{outline:2px solid var(--primary-color-light)}.create-form input:read-only:focus{outline:none;border:none}.auth-form{max-width:360px;margin:60px auto;padding:40px;border:1px solid #ddd;box-shadow:3px 3px 5px #0000000d;background:#fff;font-size:1rem}.auth-form .avatar-upload{display:flex;align-items:center;cursor:pointer;border:2px solid rgba(101,101,102,.117);padding:5px 8px;font-size:.95rem;color:#656566;width:60%;border-radius:20px}.auth-form .avatar-upload img{width:20px;margin-right:5px;filter:invert(40%)}.auth-form .avatar-upload:active{outline:1px solid #444}.auth-form input[type=file]{display:none}.auth-form .avatar-preview{display:inline-block;width:50px;height:50px;border-radius:50%;object-fit:cover;margin-left:1rem;position:absolute;right:20%;top:-8px;border:2px solid var(--primary-color);cursor:pointer}.auth-form .avatar-group.active{display:flex;position:relative}.auth-form label:has(.avatar-preview) .avatar-upload{color:#bebebe}.auth-form label:has(.avatar-preview) .avatar-upload img{filter:invert(90%)}.home{min-height:100vh;width:100%;background-color:#faf3e8;background:url(/assets/bg-ngw0_lxa.png) no-repeat center/cover;position:relative}.home:before{position:absolute;content:"";top:0;left:0;right:0;bottom:0;-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px);mix-blend-mode:color-burn}.home>*{position:relative;z-index:1}.hero-title{font-size:5.5rem;font-family:Montserrat Underline,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;text-align:center;margin-top:40px}.hero-title span{display:block}.hero-title img{width:100px}.hero-title .img-wrapper,.hero-card .img-wrapper{position:relative;width:fit-content;border-radius:8px;background-color:red;height:106px;display:inline-block;padding:5px 10px;margin:0 8px}.hero-title .img-wrapper:first-of-type{background-color:#d3e0ff}.hero-title .img-wrapper:last-of-type img{position:relative;bottom:-3px}.hero-title .img-wrapper:last-of-type{background-color:#c8f2d2;top:-8px}.hero-title .img-wrapper:first-of-type{bottom:-20px}.hero-title .img-wrapper:first-of-type img{position:relative;top:-20px}.hero-sub-title{max-width:800px;margin:30px auto 55px;font-size:1.3rem;text-align:center}.try-out{background:#cddbff;max-width:max-content;border-radius:35px;margin:0 auto 65px;display:flex;align-items:center;justify-content:space-around;box-shadow:0 0 2px #0000001a;padding:6px 8px;font-family:sans-serif;font-optical-sizing:auto}.try-out p{margin-right:25px;padding-left:25px;color:#4f617a}.try-out a{width:35px;height:35px;border-radius:50%;background-color:#fff;box-shadow:0 0 6px #0000004d;margin:0;cursor:pointer;display:flex;padding:5px}.try-out a:hover{box-shadow:0 0 6px 2px #cddbffcc}.try-out span{font-weight:500}.hero-card{margin-top:5px;display:flex}.hero-card .left-card{flex-basis:60%;display:grid;grid-template-columns:1fr 1fr 1fr;padding:15px;background-color:#fff;margin-left:30px;border-radius:15px;color:#181d33;font-family:Karla,sans-serif}.right-card{flex-basis:30%;margin:0 auto;background-color:#3773ffe2;border-radius:15px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;color:#fff}.right-card .mockup{width:160px;position:relative;top:20px}.right-card a{padding:6px 8px 6px 6px;border-radius:35px;background-color:#fff;border:none;margin:20px 0;display:flex;align-items:center;width:fit-content;text-decoration:none;color:#3773ffe2;font-size:.9rem}.right-card .text-content img{width:20px;height:20px;border-radius:50%;margin-right:5px}.right-card .text-content{margin-left:20px}.right-card .text-content h3{font-size:3rem;font-weight:400;margin-top:3rem}.right-card .text-content h3 sup{font-size:1rem;margin-left:5px;color:#edd686}.right-card .text-content p{font-size:1rem}.hero-card .content-column{font-size:1rem;display:flex;flex-direction:column;justify-content:space-between;margin:0 8px;position:relative}.hero-card .content-column p{font-weight:500;word-spacing:2px;opacity:.9;max-width:80%;line-height:1.4}.hero-card .img-wrapper{background-color:#f6de9dd5;margin-bottom:30px}.hero-card .img-wrapper img{width:93px}.hero-card .left-card h3{font-weight:350;font-size:4rem;font-family:Karla,sans-serif;font-optical-sizing:auto}.hero-card .content-column:nth-of-type(2):after,.hero-card .content-column:nth-of-type(1):after{position:absolute;content:"";top:0;right:30px;height:99%;width:1.5px;background-color:#cddbff}.hero-card .content-column:nth-of-type(2) p,.hero-card .content-column:nth-of-type(3) p{font-size:.85rem}.hero-card .buttons span{display:inline-block;border:2px solid #d4e0ff;padding:5px 8px;border-radius:15px;font-size:.8rem;margin:0 3px;font-weight:500;color:#181d33}.hero-card .buttons span:nth-last-of-type(2n){border-color:#0650ff;color:#0650ff}@media screen and (max-width: 768px){.hero-title{font-size:2.5rem;margin-top:20px}.hero-title .img-wrapper{height:70px;padding:2px 6px;margin:4px}.hero-title img{width:70px}.try-out{margin-bottom:40px}.hero-sub-title{font-size:1rem;margin-top:30px;padding:0 20px}.hero-card{flex-direction:column;margin-top:10px}.hero-card .left-card h3{font-size:2.5rem}.hero-card .left-card{grid-template-columns:1fr;padding:10px;place-items:center;text-align:center;width:90%;margin:0 auto}.hero-card .img-wrapper{margin:10px auto 30px}.hero-card .content-column{margin-bottom:50px}.hero-card .content-column p{font-weight:500;word-spacing:2px;opacity:.9;margin:0 auto 20px}}.navbar{width:100%;height:8vh;box-sizing:border-box;font-family:Karla,sans-serif}.navbar.modify{box-shadow:0 0 5px #0000001a}.navbar ul{height:100%;display:flex;margin:0 auto;align-items:center;justify-content:flex-end;max-width:1150px;padding:0 10px}.navbar .logo a{display:flex;align-items:center;font-size:1.4rem;background-color:#d3e0ff;background-color:#4158d0;background-image:linear-gradient(43deg,#4158d0,#c850c0 46%,#ffcc70);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.navbar .logo{font-weight:700;color:var(--heading-color);letter-spacing:1px;display:flex;align-items:center;margin-right:auto}.navbar .logo img{margin-right:10px;width:25px;filter:invert(60%)}.navbar a{color:#646363;text-decoration:none;margin-right:20px}.navbar .name{margin-right:10px;font-size:1rem}.navbar .mobile-logout{display:none}@media screen and (max-width: 768px){.navbar ul{justify-content:center;position:relative}.navbar .logo{margin-right:0}.navbar .name,.navbar .btn{display:none}.navbar .mobile-logout{display:block;position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.navbar .mobile-logout:hover{opacity:.8}.navbar .mobile-logout:active{scale:1.1}}.hero-card .icons img{width:40px;height:40px}.hero-card .icons div{border-radius:50%;width:40px;height:40px;background-color:red;display:inline-block;padding:5px;position:relative;border:2px solid white}.hero-card .icons div:nth-of-type(1){background-color:#b2e9cd}.hero-card .icons div:nth-of-type(2){background-color:#edd686;left:-10px}.hero-card .icons div:nth-of-type(3){background-color:#d3e0ff;left:-20px}.hero-card .icons div:nth-of-type(4){background-color:#06a4ffc8;left:-30px;position:relative}.hero-card .icons div:nth-of-type(4):before{position:absolute;content:"+";right:-70%;top:0;width:45px;height:45px;border-radius:50%;background:#191e34;z-index:1;font-size:1.6rem;display:flex;justify-content:center;align-items:center;border:2px solid white;color:#fff}.nav-links{margin-top:80px;margin-left:20px}.nav-links li{margin-top:10px}.nav-links a{display:flex;padding:10px;text-decoration:none;width:100%;color:#fff;box-sizing:border-box}.nav-links img{margin-right:10px;filter:invert(100%)}.nav-links a.active{color:#555;background:var(--bg-color);border-radius:20px 0 0 20px}.nav-links .active img{filter:invert(40%)}.sidebar{max-width:300px;width:max(20%,300px);background:var(--primary-color);min-height:100vh;box-sizing:border-box;position:relative;color:#fff;transition:all .3s ease}.sidebar-content{position:sticky;top:0;width:100%}.sidebar .user{font-weight:700;text-align:center;letter-spacing:1px;padding:40px 30px;border-bottom:1px solid rgba(255,255,255,.2)}.sidebar .user p{margin-top:10px}.toggle-button{display:none;position:absolute;right:-40px;top:20px;z-index:1001;width:40px;height:40px;justify-content:center;align-items:center;border-top-right-radius:4px;border-bottom-right-radius:4px;cursor:pointer;border:1px solid var(--text-color)}.sidebar-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:999;opacity:0;transition:opacity .3s ease-in-out}@media screen and (max-width: 768px){.sidebar{transform:translate(-100%);position:fixed;z-index:1000}.sidebar.open{transform:translate(0)}.toggle-button{display:flex}.toggle-button:hover{background-color:var(--primary-color);color:#fff;border:1px solid #fff}.sidebar-backdrop{display:block;opacity:1}.sidebar-backdrop.open{opacity:1}}.user-list{width:fit-content;max-width:250px;background:#fbfbfb;color:var(--heading-color);height:100vh;right:0;top:0;display:flex;flex-direction:column;position:relative;transform:translate(0);transition:transform .3s ease-in-out}.user-list h2{text-align:center;border-bottom:1px solid #eee;font-size:1em;padding:20px 0}.list-content{overflow-y:auto;padding:0 5px;scrollbar-width:auto;scrollbar-color:#8d69f1 #d2c4fa;scroll-behavior:smooth;scrollbar-highlight-color:red;-webkit-overflow-scrolling:touch}.online-users-btn{position:absolute;top:50%;left:-15px;transform:translate(-50%,-50%);padding:10px;width:43px;height:43px;border-radius:50%;display:none;justify-content:center;align-items:center;background-color:var(--primary-color);border:3px solid var(--bg-color);cursor:pointer}.online-users-btn svg{fill:#fff}.user-list .user-list-item{display:flex;justify-content:flex-end;align-items:center;margin:15px auto;font-size:clamp(.8rem,1.5vw,.9rem)}.user-list .avatar-wrapper{margin-left:10px;width:45px;height:45px;min-height:45px;min-width:45px}.user-list .avatar-wrapper:after{display:none}.user-list .avatar{padding:2px}.user-list .online-user{display:inline-block;margin-right:5px;width:10px;height:10px;background:var(--online);border-radius:25px}.user-list-item:has(.online-user) .avatar{border:1px solid var(--online)}.list-content::-webkit-scrollbar{width:10px}.list-content::-webkit-scrollbar-track{background:#d2c4fa}.list-content::-webkit-scrollbar-thumb{background-color:#8d69f1;border-radius:8px}.list-content::-webkit-scrollbar-thumb:hover{background-color:#4e1ed2}@media (max-width: 1400px){.online-users-btn{display:flex}.user-list{transform:translate(100%);position:fixed}.user-list.open{transform:translate(0)}.user-list.close{transform:translate(100%)}}