@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Nunito:wght@200;300;400;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Rubik:wght@300;400;500;600;700;800;900&family=Signika:wght@300;400;500;600;700&display=swap);#navbar{align-items:center;border-bottom:.5px solid #ebebeb;display:flex;height:12vh;justify-content:space-between;padding:10px 40px 10px 30px;z-index:105}#navbar .left-section-navbar{align-items:center;display:flex;justify-content:center;margin-left:8px}#navbar .left-section-navbar .logo{width:25px}#navbar .left-section-navbar h2{color:#03015d;font-family:Signika,sans-serif;font-size:20px;font-weight:700;margin-left:12px}#navbar .right-section-navbar .user{align-items:center;display:flex;justify-content:center;left:-40px;position:relative}#navbar .right-section-navbar .username{align-items:center;cursor:pointer;display:flex;justify-content:center}#navbar .right-section-navbar .user h3{color:#c4c4c4;font-family:Poppins,sans-serif;font-size:20px;font-weight:400;left:-15px;position:relative;text-transform:capitalize}.right-section-navbar .user svg{color:#c4c4c4;font-weight:lighter;position:relative;top:1px}#navbar .right-section-navbar img{height:40px;width:40px}#navbar .right-section-navbar{align-items:center;display:flex;justify-content:center}#navbar .right-section-navbar .down{align-items:flex-start;background-color:#ececec;box-shadow:1px 1px 4px 1px #0000001a;display:flex;flex-direction:column;justify-content:center;left:-20px;position:absolute;top:40px;z-index:14}#navbar .right-section-navbar .down h4{background-color:#fff;color:#9a9a9a;cursor:pointer;font-family:Noto Sans,sans-serif;font-size:13px;padding:15px 35px;text-decoration:none;width:100%}#navbar .right-section-navbar .down h4 a{color:#9a9a9a;text-decoration:none}#navbar .right-section-navbar .down h4:hover{background-color:#e2e0e0}.up_icon{transform:rotate(-180deg);transition:.2s ease}.down_icon{transform:rotate(0deg);transition:.2s ease}@media(max-width:500px){#navbar .left-section-navbar{margin-left:0!important}#navbar .left-section-navbar .logo{width:20px!important}#navbar .left-section-navbar h2{font-size:17px!important;margin-left:7px!important}.bg{height:30px!important;width:30px!important}#navbar .right-section-navbar .user{left:-20px!important}#navbar .right-section-navbar .user h3{font-size:16px!important;left:-10px!important}}@media(max-height:500px){.bg{height:25px!important;width:25px!important}}@media(min-width:1600px){#navbar .left-section-navbar .logo{width:40px!important}#navbar .left-section-navbar h2{font-size:25px!important;margin-left:15px!important}.bg{height:60px!important;width:60px!important}#navbar .right-section-navbar .user{left:-30px!important}#navbar .right-section-navbar .user h3{font-size:22px!important;left:-10px!important}}#main{display:flex;z-index:15}#main .menu{border-right:.5px solid #d9d9d9;height:88vh;width:20%}.menu .container{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;padding:10px 20px}.menu .container .managment{color:#c4c4c4;font-family:Noto Sans,sans-serif;font-size:12px;margin-top:15px;padding:10px 15px}.menu .container .content{align-items:center;border-radius:10px;cursor:pointer;display:flex;justify-content:center;margin-top:10px;padding:10px 35px 10px 15px}.menu .container .content h3{color:#c4c4c4;font-family:Signika,sans-serif;font-size:17px;font-weight:400;margin-left:15px}.menu .container .content svg{color:#c4c4c4;height:28px;margin-left:15px;width:28px}.active_color,.menu .container .content:hover{background:#ededf4!important;border-color:#332a7c!important;color:#332a7c!important}.message_any_task{left:50%;position:absolute;top:30%;transform:translate(-50%,-50%)}.message_any_task p{color:#999;font-family:Roboto,sans-serif;font-weight:400;text-align:center}.completed-icon{border:2px solid #c4c4c4;border-radius:0 0 50px 50px;height:20px;width:20px}.date-icon{color:#c4c4c4;font-size:10px}.date-icon,.task-icon{align-items:center;border:2px solid #c4c4c4;display:flex;font-family:Signika,sans-serif;height:20px;justify-content:center;width:20px}.task-icon{position:relative}.task-icon span{border:1px solid #c4c4c4;font-family:Signika,sans-serif;height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:70%}.task-icon span:first-child{top:20%}.task-icon span:nth-child(3){top:80%}.progress-icon{border:2px solid #c4c4c4;height:15px;position:relative;top:4px;width:20px}.progress-icon span:first-child{border:2px solid #c4c4c4;height:8px;left:50%;position:absolute;top:-35%;transform:translate(-50%,-50%);width:70%}#main .tasks{height:88vh;overflow-y:auto;padding-bottom:40px;width:80%}.tasks::-webkit-scrollbar{width:10px}.tasks::-webkit-scrollbar-track{background:#f4f3f3;border-radius:15px}.tasks::-webkit-scrollbar-thumb{background:#c4c4c4;border-radius:15px}.tasks .container{padding-bottom:10px}.tasks .container .content{display:flex;justify-content:space-between;padding:40px 45px}.tasks .container .content h2{color:#03015d;font-family:Rubik,sans-serif;font-size:47px}.tasks .container .content button{background:#03015d;border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:15px;font-weight:600;height:50px;outline:none;padding:0 35px;z-index:10}.count-todos{color:#c4c4c4;font-family:Poppins,sans-serif;font-size:20px;font-weight:300}.tasky{align-items:center;display:flex;justify-content:center}.tasky .tasky-content{grid-column-gap:15px;grid-row-gap:25px;column-gap:15px;display:grid;grid-template-columns:repeat(3,23.5vw);padding:10px 0;row-gap:25px}@media(max-width:1100px){.tasky .tasky-content{grid-column-gap:20px!important;column-gap:20px!important;grid-template-columns:repeat(2,34vw)}}@media(max-width:780px){#main .menu{width:25%}#main .tasks{width:75%}.tasks .container .content{padding:40px 45px}.tasks .container .content h2{font-size:37px}.count-todos{font-size:17px!important}.tasks .container .content button{font-size:13px!important;height:40px;padding:0 25px}.tasky .tasky-content{grid-column-gap:20px!important;column-gap:20px!important;grid-template-columns:repeat(2,30vw)}}@media(max-width:660px){.tasks .container .content{padding:30px 20px}.tasks .container .content h2{font-size:37px}.count-todos{font-size:17px!important}.menu .container .managment{font-size:10px!important;padding:10px 5px!important}.menu .content{padding:10px 0;padding-right:15px!important}.menu .container{padding:10px 5px}.menu .container .content h3{font-size:13px}.tasks .container .content button{font-size:13px!important;height:40px;padding:0 25px}.tasky .tasky-content{grid-column-gap:20px!important;column-gap:20px!important;grid-template-columns:repeat(1,50vw)}}@media(max-width:580px){#main .menu{width:35%}#main .tasks{width:65%}.tasks .container .content h2{font-size:20px}.tasks::-webkit-scrollbar{width:5px}.count-todos{font-size:11px!important}.tasks .container .content button{font-size:7px!important;height:30px;padding:0 10px}}@media(max-width:500px){.tasks .container .content h2{font-size:18px}.count-todos{font-size:11px!important}.tasks .container .content button{font-size:7px!important;height:30px;padding:0 10px}}@media(max-width:420px){#main .menu{width:40%}#main .tasks{width:60%}}@media(min-width:1600px){.tasks .container .content{padding:50px}.tasks .container .content h2{font-size:50px}.tasky .tasky-content{grid-template-columns:repeat(4,18vw)}.menu .container .managment{font-size:15px;margin-top:25px;padding:10px 15px}.menu .container .content{padding:15px 40px 15px 20px}.menu .container .content h3{font-size:25px}}#new-task{background-color:#0000001a;height:100vh;left:0;position:absolute;top:0;width:100%;z-index:20}.newTask{align-items:flex-start;background:#fff;border-radius:15px;box-shadow:2px 2px 5px 2px #0003;display:flex;flex-direction:column;justify-content:center;left:50%;padding:3vh 5vh 5vh;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:300}.newTask .input-content{margin-top:15px}#new-task h3{color:#4a4a4a;font-family:Poppins,sans-serif;font-size:20px;font-weight:400;padding-bottom:5px}#new-task input,#new-task textarea{outline:none;padding:10px 12px;width:50vh}#new-task textarea{border:1px solid #c4c4c4;border-radius:5px;height:20vh}#new-task textarea,.date-picker{font-family:Poppins,sans-serif;font-size:12px;font-weight:400}.date-picker{margin-top:5px;width:40vh}.title-input{border:1px solid #c4c4c4;border-radius:5px;font-family:Poppins,sans-serif;font-size:12px;font-weight:400}.btnNew{background:#1e1d58;border:none;border-radius:10px;color:#fff;font-size:13px;margin-top:30px;outline:none;padding:12px;width:100%}.btnNew,.close{cursor:pointer;font-family:Poppins,sans-serif;font-weight:500}.close{color:#c4c4c4;font-size:20px;position:absolute;right:20px;top:15px}@media(max-width:500px){.newTask{padding:15px 20px 20px}.newTask .input-content{margin-top:5px}#new-task h3{font-size:17px}#new-task input,#new-task textarea{padding:7px 12px;width:40vh}#new-task textarea{font-size:11px;height:15vh}.date-picker{margin-top:5px;width:40vh}.date-picker,.title-input{font-size:11px}.btnNew{font-size:12px;margin-top:25px;padding:11px}.close{font-size:15px;right:15px;top:10px}}.card{background:#fff;border-radius:15px;box-shadow:0 2px 4px 1px #dadadac7;position:relative;transition:.5s ease-in}.card__container{display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:20px}.card .title{overflow:hidden;width:80%}.card .into:first-child div:first-child{display:flex;justify-content:space-between}.time{display:flex}.card .delete{cursor:pointer}.card svg{color:#535353}.into__down{display:flex;margin-top:25px}.into__down h4{color:#4a4a4a;font-family:Poppins,sans-serif;font-size:13px;font-weight:500;letter-spacing:-1px}.into__down .flag{left:45%;position:absolute}.into__down .comp svg{color:#830707;cursor:pointer}.orange{color:#f88808!important}.green{color:#37782c!important}.red{color:#c91010!important}.text{height:85px;margin-top:15px;overflow-x:hidden;overflow-y:hidden;width:95%}.text::-webkit-scrollbar{width:7px}.text::-webkit-scrollbar-track{background:#f4f3f3;border-radius:15px}.text::-webkit-scrollbar-thumb{background:#c4c4c4;border-radius:15px}.scroll{overflow-y:scroll!important}.noscroll{overflow-y:hidden!important}.card h2{color:#535353;font-family:Nunito,sans-serif;font-size:22px;font-weight:800}.card h4{color:#4a4a4a;font-size:15px;left:5px;position:relative;top:-3px}.card h4,.card p{font-family:Poppins,sans-serif}.card p{color:#4e4d4d;font-size:13px;font-weight:300}.completed{background-color:#fff!important;border:2px solid #c4c4c4;border-radius:0 0 50px 50px;cursor:pointer;height:18px;left:55%;position:absolute;width:15px}.gray{background-color:#c4c4c4!important}@media(max-width:780px){.into__down{margin-top:5px}.into__down h4{font-size:12px;position:relative;top:-1px}.into__down .flag{left:55%}.completed{left:70%}.text{height:85px;margin-top:15px;overflow-x:hidden;overflow-y:hidden;width:95%}}#sign-up{background-color:#c4c4c4;height:100vh;width:100%}#sign-up,#sign-up .container{align-items:center;display:flex;justify-content:center}#sign-up .container{background-color:#fff;border-radius:15px;height:70vh;width:55vw}#sign-up .container .content{height:100%;width:50%}#sign-up .container .content:nth-child(2) .into{padding:10vh 3.5vw}#sign-up .container .content:nth-child(2) h2{color:#fff;font-family:Rubik,sans-serif;font-size:40px;font-weight:500;padding-bottom:20px}#sign-up .container .content:nth-child(2) p{color:#fff;font-family:Poppins,sans-serif;font-size:12px;font-weight:300;margin-top:10px}#sign-up .container .content .already{color:#8b8b8b;font-family:Poppins,sans-serif;font-size:13px;font-weight:300;margin-top:50px}#sign-up .container .content .already a{color:#fff;font-family:Poppins,sans-serif;font-size:13px;font-weight:500;margin-top:2vh;text-decoration:none}#sign-up .container .content:first-child{background-color:#fff;border-radius:15px}#sign-up .container .content:nth-child(2){background-color:#03015d;border-radius:15px}#sign-up .container .content:first-child .into{height:100%;position:relative}#sign-up .container .content:first-child .into form{padding:4vh 1.8vw}#sign-up .container .content:first-child .into .sign-up_section{bottom:5vh;position:absolute}#sign-up .container .content:first-child .into form input{font-weight:400}#sign-up .container .content:first-child .into form button,#sign-up .container .content:first-child .into form input{border:1px solid #c4c4c4;border-radius:7px;font-family:Poppins,sans-serif;font-size:15px;margin-top:15px;outline:none;padding:1.8vh 15px;width:22vw}#sign-up .container .content:first-child .into form button{background:#03015d;color:#fff;cursor:pointer;font-weight:500}#sign-up .container .content .error{background:#f29494;border-radius:7px;color:#fff;font-family:Poppins,sans-serif;font-weight:400;padding:1.4vh 2vw;width:22vw}@media(max-width:600px){#sign-up .container{border-radius:0;flex-direction:column}#sign-up .container,#sign-up .container .content{height:100%;width:100%}#sign-up .container .content:first-child{border-radius:0}#sign-up .container .content:nth-child(2) .into{padding:80px 40px}#sign-up .container .content:nth-child(2){border-radius:0}#sign-up .container .content:first-child .into form div:nth-child(2){align-items:flex-start;display:flex;flex-direction:column;justify-content:center;width:90%}#sign-up .container .content:first-child .into form{padding:10px 30px}#sign-up .container .content:first-child .into form input{padding:7px 15px;width:90%}#sign-up .container .content:first-child .into form .sign-up_section{bottom:15px;width:90%}#sign-up .container .content:first-child .into form button{padding:8px 15px;width:84%}#sign-up .container .content .error{padding:5px 2vw;width:90%}}#login{background-color:#c4c4c4;height:100vh;width:100%}#login,#login .container{align-items:center;display:flex;justify-content:center}#login .container{background-color:#fff;border-radius:15px;height:55vh;width:52vw}#login .container .content{height:100%;width:50%}#login .container .content:first-child .into{padding:10vh 3.5vw}#login .container .content:first-child h2{color:#fff;font-family:Rubik,sans-serif;font-size:40px;font-weight:500;padding-bottom:20px}#login .container .content:first-child p{color:#fff;font-family:Poppins,sans-serif;font-size:12px;font-weight:300;margin-top:2.5px}#login .container .content:first-child a{color:#fff;font-family:Poppins,sans-serif;font-size:12px;font-weight:600;text-decoration:none}#login .container .content:nth-child(2){background-color:#fff;border-radius:15px}#login .container .content:first-child{background-color:#03015d;border-radius:15px}#login .container .content:nth-child(2) .into{height:100%;position:relative}#login .container .content:nth-child(2) .into form{padding:4vh 1.8vw}#login .container .content:nth-child(2) .into .login_section{bottom:4vh;position:absolute}#login .container .content:nth-child(2) .into form input{font-weight:400}#login .container .content:nth-child(2) .into form button,#login .container .content:nth-child(2) .into form input{border:1px solid #c4c4c4;border-radius:7px;font-family:Poppins,sans-serif;font-size:15px;margin-top:15px;outline:none;padding:1.8vh 15px;width:22vw}#login .container .content:nth-child(2) .into form button{background:#03015d;color:#fff;cursor:pointer;font-weight:500}#login .container .content .error{background:#f29494;border-radius:7px;color:#fff;font-family:Poppins,sans-serif;font-weight:400;padding:1.4vh 2vw;width:22vw}#login .container .content .forgot{color:#8b8b8b;font-family:Poppins,sans-serif;font-size:13px;font-weight:300;margin-top:2vh}#login .container .content .forgot a{color:#03015d;font-family:Poppins,sans-serif;font-size:13px;font-weight:700;margin-top:2vh;text-decoration:none}@media(max-width:600px){#login .container{border-radius:0;flex-direction:column;height:100%!important;width:100%!important}#login .container .content{height:100%;width:100%}#login .container .content:nth-child(2){border-radius:0}#login .container .content:first-child .into{padding:80px 40px}#login .container .content:first-child{border-radius:0}#login .container .content:nth-child(2) .into form div:first-child{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;width:90%}#login .container .content:nth-child(2) .into form{padding:20px 30px}#login .container .content:nth-child(2) .into form .login_section,#login .container .content:nth-child(2) .into form input{width:90%}#login .container .content:nth-child(2) .into form button{width:75%!important}#login .container .content .error{padding:1.5vh 2vw;width:90%}}@media(max-width:800px){#login .container{height:55vh;width:85vw}#login .container .content:nth-child(2) .into form input{width:80%!important}#login .container .content:nth-child(2) .into form button{width:32vw}#login .container .content .forgot,#login .container .content .forgot a{font-size:10px!important}}@media(max-width:1000px){#login .container{height:55vh;width:75vw}#login .container .content:nth-child(2) .into form input{width:80%!important}#login .container .content:nth-child(2) .into form button{width:32vw}#login .container .content .forgot,#login .container .content .forgot a{font-size:10px!important}}#forgot-password{background-color:#c4c4c4;height:100vh;width:100%}#forgot-password,#forgot-password .container{align-items:center;display:flex;justify-content:center}#forgot-password .container{background-color:#fff;border-radius:15px;height:50vh;width:52vw}#forgot-password .container .content{height:100%;width:50%}#forgot-password .container .content:first-child .into{padding:10vh 3.5vw}#forgot-password .container .content:first-child h2{color:#fff;font-family:Rubik,sans-serif;font-size:40px;font-weight:500;padding-bottom:20px}#forgot-password .container .content:first-child p{color:#fff;font-family:Poppins,sans-serif;font-size:12px;font-weight:300;margin-top:2.5px}#forgot-password .container .content:first-child a{color:#fff;font-family:Poppins,sans-serif;font-size:12px;font-weight:600;text-decoration:none}#forgot-password .container .content:nth-child(2){background-color:#fff;border-radius:15px}#forgot-password .container .content:first-child{background-color:#03015d;border-radius:15px}#forgot-password .container .content:nth-child(2) .into{height:100%;position:relative}#forgot-password .container .content:nth-child(2) .into form{padding:4vh 1.8vw}#forgot-password .container .content:nth-child(2) .into .forgot-password_section{bottom:4vh;position:absolute}#forgot-password .container .content:nth-child(2) .into form input{font-weight:400}#forgot-password .container .content:nth-child(2) .into form button,#forgot-password .container .content:nth-child(2) .into form input{border:1px solid #c4c4c4;border-radius:7px;font-family:Poppins,sans-serif;font-size:15px;margin-top:15px;outline:none;padding:1.8vh 15px;width:22vw}#forgot-password .container .content:nth-child(2) .into form button{background:#03015d;color:#fff;cursor:pointer;font-weight:500}#forgot-password .container .content .error{background:#9cee6c;border-radius:7px;color:#fff;font-family:Poppins,sans-serif;font-weight:400;padding:1.4vh 2vw;width:22vw}#forgot-password .container .content .forgot{color:#8b8b8b;font-family:Poppins,sans-serif;font-size:13px;font-weight:300;margin-top:2vh}#forgot-password .container .content .forgot a{color:#03015d;font-family:Poppins,sans-serif;font-size:13px;font-weight:700;margin-top:2vh;text-decoration:none}@media(max-width:600px){#forgot-password .container{border-radius:0;flex-direction:column;height:100%!important;width:100%!important}#forgot-password .container .content{height:100%;width:100%}#forgot-password .container .content:nth-child(2){border-radius:0}#forgot-password .container .content:first-child .into{padding:80px 40px}#forgot-password .container .content:first-child{border-radius:0}#forgot-password .container .content:nth-child(2) .into form div:first-child{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;width:90%}#forgot-password .container .content:nth-child(2) .into form{padding:20px 30px}#forgot-password .container .content:nth-child(2) .into form .forgot-password_section,#forgot-password .container .content:nth-child(2) .into form input{width:90%}#forgot-password .container .content:nth-child(2) .into form button{width:75%!important}#forgot-password .container .content .error{padding:1.5vh 2vw;width:90%}}@media(max-width:800px){#forgot-password .container{height:55vh;width:85vw}#forgot-password .container .content:nth-child(2) .into form input{width:80%!important}#forgot-password .container .content:nth-child(2) .into form button{width:32vw}#forgot-password .container .content .forgot,#forgot-password .container .content .forgot a{font-size:10px!important}}@media(max-width:1000px){#forgot-password .container{height:55vh;width:75vw}#forgot-password .container .content:nth-child(2) .into form input{width:80%!important}#forgot-password .container .content:nth-child(2) .into form button{width:32vw}#forgot-password .container .content .forgot,#forgot-password .container .content .forgot a{font-size:10px!important}}#update-profile{overflow:hidden}#update-profile .container{padding:20px 50px}#update-profile h2{color:#03015d;font-family:Rubik,sans-serif;font-size:40px;padding-bottom:20px}#update-profile .container form input{font-weight:400}#update-profile .container button,#update-profile .container form input{border:1px solid #c4c4c4;border-radius:7px;font-family:Poppins,sans-serif;font-size:15px;margin-top:10px;outline:none;padding:1.8vh 15px;width:25vw}#update-profile .container button{background:#03015d;color:#fff;cursor:pointer;font-weight:500}#update-profile .container form{display:flex;flex-direction:column;justify-content:center;margin-top:25px}.inputfile{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px;z-index:-1}.inputfile+label{background-color:#03015d;border-radius:5px;color:#fff;display:inline-block;font-family:Poppins,sans-serif;font-size:10px;font-weight:400;margin-top:15px;padding:5px 10px}.inputfile+label:hover,.inputfile:focus+label{background-color:#03023a}.inputfile+label{cursor:pointer}@media(max-width:1100px){#update-profile .container button,#update-profile .container form input{width:300px}}.bg-prf{height:75px!important;width:75px!important}@media(max-width:500px){#update-profile .container button,#update-profile .container form input{width:100%}}@media(min-width:1600px){#update-profile .container{padding:50px}#update-profile h2{font-size:50px;padding-bottom:25px}.bg-prf{height:85px!important;width:85px!important}.inputfile+label{margin-top:25px}}*{box-sizing:border-box;margin:0;padding:0}