:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}.Appcontainer{background-color:#bdc0c0;box-sizing:border-box;display:flex;height:100vh;width:100%}.sideBar{max-width:300px;min-width:60px;width:5%;background-color:#dfe6e6}.openClose{margin-bottom:10px;font-size:1.6rem}.sideBarAnimation{animation:openSidebar 2s forwards 1}@keyframes openSidebar{0%{width:5%}to{width:20%}}.closeSidebar{animation:close 2s forwards 1}@keyframes close{0%{width:20%}to{width:5%}}.sidebarIconsContainers{text-align:center;margin:0 auto;font-size:1.3rem;padding-top:10px}.sidebarIconsContainers>i{color:red}.Maincontent{width:100%;overflow-y:scroll;box-sizing:border-box;position:relative}.headContainer{width:100%;height:70px;padding:5px;background-color:#bbbfbf;box-sizing:border-box;float:right;display:flex;justify-content:space-between}.Heading{width:fit-content}.headingAppearence{animation:headingAppear 1s ease-in forwards 1}@keyframes headingAppear{to{opacity:1}}.headingDisAppearence{animation:headingDisAppear 1s ease-out forwards 1}@keyframes headingDisAppear{to{opacity:0}}.profile{width:10%;width:fit-content;height:100%;padding:5px;box-sizing:border-box;display:flex;gap:10px;text-align:center;align-items:center}.Profilepic{height:100%;aspect-ratio:1/1;background-color:#ff0;border-radius:50%;overflow:hidden}.Profilepic>img{height:100%;width:100%}.Icon{font-size:1.5rem;display:inline-block}.FontIcon{width:10%}.Todheader{padding:10px;margin-top:5%;display:flex;justify-content:space-between;width:100%;box-sizing:border-box;background-color:#fff;border-top-left-radius:5px;border-top-right-radius:5px}.Dates{width:250px;border-radius:5px;display:flex;justify-content:center;gap:20px;align-items:center;position:relative;padding:10px}.NextDatesConatiner{position:absolute;top:100%;right:0}.NextDates{overflow-y:scroll;height:200px;font-weight:600;background-color:#ff0;opacity:0;position:relative;z-index:2}.NextDates>p{padding:10px;border-radius:10px;margin:5px}.NextDates>p:hover{background-color:#f0f8ff}.NextDatesAnimate{animation:visible 1s forwards 1}@keyframes visible{0%{transform:translateY(-200px);opacity:0}to{opacity:1;transform:translateY(0)}}.exitAnimation{animation:invisible 1s forwards 1}@keyframes invisible{0%{opacity:1;transform:translateY(0)}to{transform:translateY(-200px);opacity:0}}.search{display:flex;justify-content:center;align-items:center;gap:20px}.searchTodo{width:200px;height:30px;border-radius:5px;font-size:1rem;padding:0 5px}.searchTodo::placeholder{font-size:1rem;padding:5px}.submit{height:90%;display:flex;justify-content:center;align-items:center;background-color:#1652f7;font-size:1rem;font-weight:600;border-radius:5px;padding:0 10px;border:none}.tabs{gap:30px;display:flex;justify-content:center;align-items:center}.tabs>p{font-size:1.3rem;font-family:sans-serif;font-weight:600;cursor:pointer}.bordered{border-bottom:5px solid rgb(37,97,175);color:#2561af}.MainContainer2{width:100%;padding-left:10px;box-sizing:border-box}.AddTaskForm{background-color:#00000080;height:100%;width:100%;left:0;position:fixed;top:0;display:flex;justify-content:center;align-items:center}.honer{background-color:#ff69b4}.formContainer{width:350px;aspect-ratio:4/5;background-color:#fff;border-radius:10px;padding:10px}.formContainerHeader{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:2px dashed}.formContainerHeader>h2{font-weight:600}.FormInputs{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-top:40px;gap:30px}.FormInputs>input{width:90%;height:35px;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:1.1rem;font-weight:500;padding:0 5px}.FormInputs>textarea{width:85%;height:100px;padding:5px;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;font-size:1.1rem}.FormFooter{padding:10px;display:flex;justify-content:space-around}.FormFooter>button{width:30%;height:35px;border-radius:5px;font-weight:600;font-size:1rem}.FormFooter>button:last-child{background-color:#06f}.Editform{position:fixed;top:0;width:100%;height:100%;background-color:#363636b3}.FormToedit{width:30%;background-color:#ff0;padding:20px;position:relative;margin:100px auto 0;border-radius:10px}.editHeader>h1{padding-bottom:10px;border-bottom:2px solid black;margin-bottom:10px}.forminputs{display:flex;justify-content:center;margin:20px}.forminputs>input{width:60%;height:35px;font-size:1.3rem;font-weight:600}.Buttonsection{display:flex;justify-content:space-around}.Buttonsection>button{width:60px;height:30px}.itemConatiner{margin-top:10px;background-color:#fff;display:grid;grid-template-columns:repeat(3,1fr);padding:20px;gap:20px;height:80vh;overflow-y:scroll}.Itemheader{width:100%;display:flex;justify-content:space-between;gap:40px}.Itemheader>h2{background-color:green}.itemConatiner>div{width:370px;padding:10px;border-radius:10px;height:220px;position:relative;overflow:hidden}.closebuttonContainer{position:relative;display:flex;justify-content:end}.CLoseIcon{font-size:30px;color:#fff;font-weight:700;width:30px;height:30px;background-color:#cfd4c5;border-radius:50%}.CLoseIcon:hover{background-color:#9f9f9f}.menuDiv{background-color:#000c;position:absolute;right:0;top:0;width:100%;height:100%}.buttonComtainer{width:auto;display:flex;justify-content:space-around;position:relative;top:35%}.buttonComtainer>button{width:100px;height:40px;font-weight:600;font-family:inherit;border-radius:10px;border:none}.buttonComtainer>button:nth-child(2){background-color:#4180de}.buttonComtainer>button:hover{animation:zoomIn forwards .5s}@keyframes zoomIn{0%{transform:scale(1)}to{transform:scale(1.1)}}.titleInput{display:flex;width:90%}.editContainer{position:relative;width:10%}.EditButton{height:100%;aspect-ratio:1/1;background-color:#fff;position:absolute;border-radius:50%;display:flex;justify-content:center;align-items:center}.titleInput>h2{width:90%;padding:5px;overflow:hidden;position:relative;height:30px}h2>span{background-color:#228b22;white-space:nowrap;position:absolute;animation:movement 5s forwards infinite}@keyframes movement{0%{left:200px}to{left:-200px}}.Itemheader>input{width:20px;aspect-ratio:1/1;display:inline-block}.Itembody{height:85%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.descContainer{flex:1;overflow-y:auto;margin-bottom:10px;padding:5px}.description{font-size:1.1rem;font-weight:500;margin:0}.DateAndTimeContainer{flex-shrink:0;position:relative}.DateAndTimeContainer>p{font-size:1rem;font-weight:500;margin:2px 0}.DateAndTime{margin-right:10px}@media screen and (min-width: 1600px){.itemConatiner{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1321px) and (max-width: 1484px){.itemConatiner{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 768px) and (max-width: 1320px){.itemConatiner{grid-template-columns:repeat(2,1fr)}.Itemheader{flex-wrap:wrap;gap:15px}.titleInput{display:flex;width:50%;gap:10px}.itemConatiner>div{width:90%;margin:20px auto;height:220px}}@media screen and (min-width: 481px) and (max-width: 767px){.itemConatiner{display:flex;flex-direction:column;gap:10px;padding:10px;justify-content:center}.itemConatiner>div{width:80%;margin:10px auto}.titleInput>h2{width:100%;font-size:1rem;height:auto}.EditButton{position:static;border-radius:8px}.DateAndTimeContainer{position:relative;top:100px;background-color:transparent}.description,.DateAndTimeContainer>p{font-size:.9rem}}@media screen and (max-width: 480px){.itemConatiner{display:flex;flex-direction:column;gap:10px;padding:10px}.itemConatiner>div{width:100%;height:auto;padding:8px;border-radius:8px}.Itemheader{flex-direction:column;gap:8px}.titleInput{width:100%;flex-direction:column;gap:6px;align-items:flex-start}.titleInput>h2{width:100%;font-size:1rem;height:auto;padding:4px}h2>span{animation:none;position:static;white-space:normal;background-color:transparent}.Itemheader>input{width:16px;height:16px}.editContainer{width:20%;background-color:#ff0}.EditButton{position:static;aspect-ratio:unset;border-radius:8px;padding:6px}.Itembody{margin-top:6px}.description{font-size:.85rem;font-weight:400}.DateAndTimeContainer{position:static;margin-top:4px;background-color:transparent}.DateAndTimeContainer>p{font-size:.75rem;font-weight:400;margin:2px 0}.DateAndTime{margin-right:6px}}.iconConatiner{width:10%;display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;padding:5px;box-sizing:border-box;align-items:center}.iconConatiner>div{display:flex;padding:5px;width:100%;text-align:center;justify-content:center;align-items:center;gap:10px;background-color:#bbbfbf;box-sizing:border-box;border-radius:5px}.iconConatiner>div:hover{animation:divhover1 1s forwards 1}@keyframes divhover1{to{background-color:#f2f2f2}}.fontIcon{animation:appearIcon 2s forwards 1;display:inline-block;margin-top:7px}.iconConatiner>div>div{position:relative;height:30px;background-color:#ff0}.iconConatiner>div>p{animation:para 3s forwards 1}@keyframes appearIcon{0%{opacity:0}to{opacity:1}}@keyframes para{0%{left:-60px;opacity:0}to{opacity:1;left:0}}