:root{--dark: #34495E;--dark1: #1e293b;--light: #ffffff;--success: #0ABF30;--error: #E24D4C;--warning: #E9BD0C;--info: #3498DB;--primary: #A51C24;--light-primary: #d03f48;--bg1: #a1cbe6;--bg2: #f2f4f6;--light-text: #B2BEB5;--header: lightseagreen;--row: rgb(255, 251, 251);--dblue: dodgerblue;--overlay: rgb(0,0,0,.2);--tblh: #e2eefb;--tblo: whitesmoke;--botder: #eee}html,body{margin:0;width:100%;height:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:9pt}#root{width:100%;height:100%}:focus{outline:1px solid limegreen}.app{height:100%;width:100%;background:linear-gradient(to bottom,var(--bg1),var(--light));display:flex;justify-content:center;align-items:center}.app .signin-container,.app .signup-container{background:#fff;border-radius:10px;width:400px;padding:20px;box-shadow:0 10px 20px #ccc;display:flex;flex-direction:column}.app .signin-container .logo-container,.app .signup-container .logo-container{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.app .signin-container .logo-container h2,.app .signup-container .logo-container h2{color:var(--primary)}.app .signup-container .logo-container{margin-bottom:10px}.app .signin-container .logo-container .logo,.app .signup-container .logo-container .logo{width:160px;height:60px}.app .signin-container .input-group,.app .signup-container .input-group{width:100%;margin-bottom:20px;position:relative}.app .signup-container .input-group{margin-bottom:10px}.app .signin-container .input-group img,.app .signup-container .input-group img{height:16px;position:absolute;top:50%;transform:translateY(-50%)}.app .signin-container .input-group .left-icon,.app .signup-container .input-group .left-icon{left:5px}.app .signin-container .input-group .right-icon,.app .signup-container .input-group .right-icon{right:5px;height:22px;cursor:pointer}.app .signin-container .input-group input,.app .signup-container .input-group input{width:100%;height:45px;border:none;background:#f2f2f2;padding:0 25px;border-radius:10px;box-sizing:border-box}.app .signin-container .forgot-password{width:100%;text-align:right;padding-bottom:20px}.app .signin-container .forgot-password label,.app .signin-container p label,.app .signup-container p label{cursor:pointer;color:#1e90ff;font-weight:600}.app .signin-container button,.app .signup-container button{border:none;height:40px;background:var(--primary);color:#fff;border-radius:10px}.app .signin-container button:hover,.app .signup-container button:hover{cursor:pointer;background:var(--light-primary)}.app .signin-container button:focus,.app .signup-container button:focus{outline:none;background:var(--light-primary)}.app .signin-container .input-group .error,.app .signup-container .input-group .error{border:1px solid red}@media(max-width:768px){.app .signin-container,.app .signup-container{width:350px}}.notifications{position:fixed;top:20px;right:20px;width:300px;z-index:999}.notifications .toast{margin-top:10px;width:300px;box-shadow:5px 5px 10px #888;position:relative;list-style:none;border:1px solid silver;border-radius:4px;padding:10px;background:var(--light);animation:show_toast .3s ease forwards}.notifications .toast .hide{animation:hide_toast .3s ease forwards}.notifications .toast .column{display:flex;align-items:center}.notifications .toast .column img{width:24px}.notifications .toast:before{position:absolute;content:"";height:3px;width:100%;background:red;bottom:0;left:0;animation:progress 5s linear forwards}@keyframes show_toast{0%{transform:translate(100%)}40%{transform:translate(-5%)}80%{transform:translate(0)}to{transform:translate(-10px)}}@keyframes hide_toast{0%{transform:translate(-10px)}40%{transform:translate(0)}80%{transform:translate(-5%)}to{transform:translate(calc(100% + 20px))}}@keyframes progress{to{width:0%}}.notifications .toast.success:before{background:var(--success)}.notifications .toast.error:before{background:var(--error)}.notifications .toast.warning:before{background:var(--warning)}.notifications .toast .column span{font-size:9pt;margin-left:10px}.notifications .toast label{position:fixed;top:0;right:10px;font-size:16pt;color:#aeb0d7;cursor:pointer}.notifications .toast label:hover{color:var(--dark)}.progress{position:absolute;width:100%;height:100%;left:0;top:0;z-index:999;background:url(/loading.gif) no-repeat center center #0000001a;background-size:50px 50px}.home{height:100%;width:100%;position:relative;display:grid;grid-template-rows:50px calc(100% - 80px) 30px;grid-template-columns:200px calc(100% - 200px)}.home .header,.home .footer{grid-column:1 / span 2;background:var(--light);display:flex;align-items:center;justify-content:space-between}.home .header{border-bottom:1px solid rgb(0,0,0,.1)}.home .footer{border-top:1px solid rgb(0,0,0,.1);font-size:8pt}.home .menus{background:var(--light);border-right:1px solid rgb(0,0,0,.1)}.home .menus .mtitle{height:39px;display:flex;align-items:center;gap:5px;font-size:11pt;margin:0 10px;cursor:pointer;border-bottom:1px solid var(--bg2)}.home .menus .mtitle span{font-weight:600;font-size:12pt}.home .menus nav{width:100%;height:calc(100% - 40px)}.home .workspace{background:var(--bg2)}.home .workspace .wtitle{height:39px;width:calc(100% - 5px);background:var(--light);border-bottom:1px solid rgb(0,0,0,.1);padding-left:5px;display:flex;align-items:center;font-weight:700;font-size:12pt}.home .workspace .wspace{height:calc(100% - 40px);width:100%}.home .header img{height:40px;width:110px;margin-left:10px}.home .header div{display:flex;align-items:center}.home .header div label{font-weight:600}.home .header div img{width:24px;height:24px;margin-right:10px}.home .header div img:hover{cursor:pointer;opacity:.6}.menubar{width:100%;height:100%;overflow:auto}.menubar ul{padding:0;margin:0;list-style:none}.menubar ul li{height:35px;margin-top:2px;padding-left:5px;border-right:2px solid var(--light);border-left:5px solid transparent;display:flex;align-items:center;gap:5px}.menubar ul li.active,.menubar ul li:hover{border-left:5px solid var(--bg1);cursor:pointer;background:var(--bg2);font-weight:500}.menubar ul li img{height:16px}.dashboard{width:calc(100% - 40px);height:calc(100% - 40px);position:relative;padding:20px;overflow:auto}.dashboard .user,.dashboard .manager,.dashboard .admin{width:100%}.dashboard .user .analysis,.dashboard .manager .analysis,.dashboard .admin .analysis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px}.dashboard .user .analysis div,.dashboard .manager .analysis div,.dashboard .admin .analysis div{background:#fff;padding:10px;border-radius:5px}.dashboard .admin .analysis div.tot{background:linear-gradient(90deg,var(--bg1),var(--bg1))}.dashboard .admin .analysis div.act{background:linear-gradient(90deg,var(--success),var(--success))}.dashboard .admin .analysis div.del{background:linear-gradient(90deg,var(--error),var(--error))}.dashboard .admin .analysis div h3,.dashboard .admin .analysis div h1{font-weight:600}.dashboard .admin .chart{margin-top:30px;display:flex;justify-content:center;align-items:center}.dashboard .admin .chart .chartContainer{position:relative;width:300px;height:300px}.dashboard .admin .chart .chartContainer .pie-chart{width:100%;height:100%;border-radius:50%}.dashboard .admin .chart .chartContainer .label{position:absolute;font-size:13px;font-weight:700;color:#fff;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.profile{height:calc(100% - 40px);width:calc(100% - 40px);position:relative;padding:20px;overflow:auto}.profile .container{width:calc(100% - 60px);height:calc(100% - 60px);min-width:400px;background:var(--light);border-radius:5px;padding:30px}.profile .container .info{display:flex;align-items:center;gap:30px}.profile .container .info img{height:75px;border:1px solid var(--light-text);border-radius:50px}.profile .container .info div{display:flex;flex-direction:column}.profile .container .info div label{font-size:12pt;font-weight:700}.profile .container .info div span{color:var(--light-text)}.profile .container .info-data{margin-top:20px;border-top:1px solid var(--bg2)}.profile .container .info-data p{display:grid;grid-template-columns:150px auto}.users{width:100%;height:100%;position:relative;display:grid;grid-template-rows:calc(100% - 35px) 35px;grid-template-columns:100%}.users .header{width:calc(100% - 10px);background:var(--primary);color:var(--light);font-weight:700;font-size:10pt;padding:0 5px}.users .section{width:100%;overflow:auto}.users .footer{width:calc(100% - 10px);padding:0 5px;background:var(--light);display:flex;align-items:center;justify-content:space-between}.users .footer button{border:none;background:var(--primary);height:28px;color:#fff;border-radius:4px}.users .footer button:hover{cursor:pointer;background:var(--light-primary)}.users .section table{width:100%;border-collapse:collapse}.users .section table thead{position:sticky;top:0;background:var(--primary);color:#fff}.users .section table tr{height:33px}.users .section table tr:nth-child(2n){background:var(--row)}.users .section table tbody tr:nth-child(odd){background:var(--tblo)}.users .section table tr th,td{border:1px solid var(--light);padding:0 3px}.users .section table tr td img{height:16px;margin-right:10px}.users .section table tr td img:hover{cursor:pointer;opacity:.4}.users .footer .paging{display:flex;align-items:center;gap:2px}.users .footer .paging label{padding:3px;background:var(--bg2);cursor:pointer}.users .footer .paging label.active{background:var(--dblue);color:#fff}.users .popup{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--overlay);display:flex;justify-content:center;align-items:center}.users .popup .panel{width:350px;background:var(--light);padding:10px;border-radius:10px;box-shadow:0 10px 20px var(--light-text);position:relative;display:flex;flex-direction:column}.users .popup .panel span{position:absolute;top:0;right:10px;font-size:14pt}.users .popup .panel span:hover{cursor:pointer;opacity:.5}.users .popup .panel p{font-size:12pt;font-weight:700;padding:0;margin:0;text-align:center;color:var(--primary)}.users .popup .panel legend{margin-top:10px}.users .popup .panel input,.users .popup .panel select{height:25px;border:1px solid var(--light-text);border-radius:4px}.users .popup .panel input.error{border:1px solid var(--error)}.users .popup .panel select{height:30px}.users .popup .panel button{margin-top:10px;height:30px;border:none;background:var(--primary);color:var(--light);border-radius:4px}.users .popup .panel button:hover{cursor:pointer;background:var(--light-primary)}.tm{width:100%;height:100%;position:relative}.tm .section{width:calc(100% - 40px);height:calc(100% - 75px);padding:20px;overflow:auto}.tm .foot{width:100%;height:34px;background:var(--light);border-top:1px solid rgb(0,0,0,.1);display:flex;align-items:center}.tm .foot button{border:none;background:var(--dblue);color:var(--light);padding:5px;border-radius:3px;margin-left:10px;font-size:9pt}.tm .foot button:hover{cursor:pointer;opacity:.8}.tm .section .task{width:calc(100% - 40px);background:var(--light);border-radius:5px;padding:20px;margin-bottom:20px;display:flex;flex-direction:column}.tm .section .task .head{margin:0;padding-bottom:3px;border-bottom:1px solid var(--bg2);display:flex;justify-content:space-between;align-items:center}.tm .section .task .head h3{margin:0}.tm .section .task .head div{display:flex}.tm .section .task .head div img{margin-left:10px;height:16px}.tm .section .task .head div label{width:75px;height:17px;font-size:8pt;text-align:center;color:var(--light);border-radius:4px}.tm .section .task .head div img:hover{cursor:pointer;opacity:.6}.tm .section .task p{margin:10px 0}.tm .section .task legend.right{float:right}.tm .section .task .status{font-size:7pt;display:flex;justify-content:space-between;align-items:center}.tm .section .task legend{color:var(--light-text);padding:0;display:flex}.tm .section .task legend div{width:70px}.tm .section .task legend span{color:var(--dark)}.tm .popup{position:absolute;width:100%;height:100%;left:0;top:0;background:var(--overlay);display:flex;justify-content:center;align-items:center}.tm .popup .panel{width:400px;background:var(--light);border-radius:5px;padding:20px;position:relative;display:flex;flex-direction:column}.tm .popup .panel .close{position:absolute;top:0;right:5px;font-size:12pt;padding:5px}.tm .popup .panel .close:hover{cursor:pointer;opacity:.6}.tm .popup .panel h3{margin:0;color:var(--primary)}.tm .popup .panel label{margin-top:5px;font-weight:600}.tm .popup .panel input,select,textarea{height:28px;border:1px solid var(--light-text);border-radius:3px}.tm .popup .panel .error{border:1px solid red}.tm .popup .panel select{height:32px}.tm .popup .panel textarea{height:50px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.tm .popup .panel button{margin-top:15px;border-radius:3px;border:none;height:32px;background:var(--primary);color:var(--light)}.tm .popup .panel button:focus,.tm .popup .panel button:hover{outline:none;cursor:pointer;background:var(--light-primary)}.dropdown{position:relative;display:flex;flex-direction:column}.dropdown ul{position:absolute;background:var(--tblo);border:1px solid var(--light-text);width:calc(100% - 1.5px);max-height:150px;overflow-y:auto;z-index:999;list-style:none;left:0;margin:30px 0 0;padding:0;box-shadow:0 3px 8px #c8c8c8}.dropdown ul li{padding:8px;cursor:pointer}.dropdown ul li.active,.dropdown ul li:hover{background:var(--tblh)}