*{margin:0;padding:0;box-sizing:border-box;color:wheat;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;z-index:0}body{padding:10px}.container{width:100%;height:96vh;display:flex;justify-content:center;flex-wrap:wrap;background-color:#492f2f;border-radius:10px;overflow-y:auto;overflow-x:hidden;position:relative}button img{width:100%}a{color:#8a2be2;align-self:center}@media (max-width:450px){body{padding:0}.container{border-radius:0;height:100vh;scrollbar-width:none}}.hide{transform:translate(200%)}.show{transform:translate(0)}.main{width:100%;align-content:start;align-self:flex-start;text-align:center;place-items:center;padding:10px;z-index:0}ul{list-style:none;height:100%;width:90%;display:flex;justify-content:space-around;align-items:flex-start;flex-wrap:wrap}ul p{margin:auto}.addbtn{position:fixed;right:20px;bottom:20px;cursor:pointer;width:10%;height:5vh;background:linear-gradient(to left,#00f,green);border:none;outline:none;z-index:10;border-radius:10px;font-size:1.1rem}@media (max-width:1000px){.addbtn{width:15%}}@media (max-width:750px){.addbtn{width:20%}}@media (max-width:450px){.addbtn{width:35%}}header{width:100%;height:10vh;background-color:wheat;display:flex;justify-content:space-between;align-items:center;padding:10px;border-top-left-radius:8px;border-top-right-radius:8px;-webkit-user-select:none;user-select:none}header h1{font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;color:#3d3d92;text-transform:capitalize;text-shadow:1px 1px;letter-spacing:3px;padding:5px 20px}header label{color:#492f2f;font-size:20px;font-weight:700;margin:0 10px}header button{outline:none;border:none;width:40px;height:40px;border-radius:50%;box-shadow:0 0 5px #000;background-color:#492f2f;font-size:25px;font-weight:700;cursor:pointer}@media (max-width:500px){header label{display:none}}@media (max-width:450px){header{border-radius:0}}li{width:100%}li button{outline:none;border:none;text-transform:capitalize;cursor:pointer;width:100%;height:7vh;background-color:#fff;letter-spacing:3px;font-size:14px}li .last{border-bottom-left-radius:8px}li .red{color:tomato}li .red:hover{background-color:tomato;color:wheat}li .close{text-align:center;margin-left:60%;width:30%;font-weight:700}li button:hover{background-color:wheat;color:#492f2f}nav{width:15%;background-color:wheat;border-bottom-left-radius:10px;box-shadow:0 0 5px;position:absolute;top:11%;right:0;z-index:10;transition:all .3s ease}nav ul{list-style:none;display:flex;gap:0;flex-direction:column;align-items:center;width:100%}@media (max-width:1000px){nav{width:20%}}@media (max-width:830px){nav{width:25%}}@media (max-width:630px){nav{width:30%}}@media (max-width:530px){nav{width:35%}}@media (max-width:450px){nav{width:50%}}.todo{position:relative;background-color:#db7093;width:30%;height:auto;max-height:30vh;overflow-y:visible;margin:10px}.todo h3{width:100%;text-align:left;text-transform:capitalize;padding:5px;color:#adff2f;text-decoration:underline}.todo p{width:100%;text-align:left;word-wrap:break-word;padding:5px;color:#8a2be2;text-indent:10px}.todo input{position:absolute;top:5%;right:3%;cursor:pointer}.todo button{width:6%;position:absolute;right:3%;bottom:5%;padding:2px;height:4vh;z-index:5;color:#fff;background-color:tomato;font-size:bolder}.todo button:focus{cursor:not-allowed}#pending{border-left:3px solid powderblue}#completed{border-left:3px solid blueviolet}@media (max-width:870px){.todo{width:46%}}@media (max-width:600px){.todo{width:90%}}.spinner{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:22px;height:22px;animation:spin 2s linear infinite;margin:2px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.privacy-container{max-width:800px;margin:40px auto;padding:20px;font-family:Arial,sans-serif;line-height:1.6;background-color:#fff;color:#222}.privacy-title{font-size:32px;font-weight:700;margin-bottom:20px;color:green}.privacy-heading{font-size:20px;font-weight:700;margin-top:30px;margin-bottom:10px;color:#000}.privacy-paragraph{margin-bottom:15px;font-size:16px;color:#8a2be2}.privacy-footer{font-size:14px;color:#666;margin-top:40px}form{border:1px solid black;align-self:flex-start;width:30%;height:43vh;place-items:center;place-content:center;padding:10px}.sinup{height:53vh}form h1{width:100%;margin:5px;padding:5px;-webkit-user-select:none;user-select:none}form input{width:90%;padding:5px 10px;margin:5px;outline:none;border:none;border-bottom:1px solid transparent;color:#000;font-size:15px;letter-spacing:2px}form input[type=password]{width:80%}form input:hover{transition:transform .3s ease;transform:scale(1.01)}from input:focus{transform:scale(1.01)}form p{width:100%;text-align:center;color:tomato;text-transform:capitalize;-webkit-user-select:none;user-select:none}form .shpass{width:7.5%;padding:5px;background-color:#fff}form .submit{margin:5px;text-transform:uppercase;background:#23236b;padding:10px;letter-spacing:2px;font-family:Courier New,Courier,monospace;font-size:15px;box-shadow:0 0 1px #fff}form .submit:hover{box-shadow:0 0 3px green}form button{cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none}form a{padding:5px;text-decoration:none;color:#fff}@media (max-width:997px){form{height:50vh}}@media (max-width:837px){form{width:35%}}@media (max-width:700px){form{width:40%}}@media (max-width:620px){form{width:50%}}@media (max-width:550px){form{width:60%}}@media (max-width:445px){form{width:80%}}@media (max-width:400px){form{width:100%;border:none;padding:10px}}.addTodo{border-radius:10px;box-shadow:0 0 10px #000;inset:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#0003;z-index:999;list-style:none;height:50vh}.addTodo form{width:95%;margin:7px 9px}.addTodo form input{width:99%;margin:1px;font-size:large;letter-spacing:2px;text-transform:capitalize}.addTodo form input:hover{transform:scale(1)}.addTodo form textarea{min-width:99%;max-width:15vw;min-height:20vh;max-height:20vh;margin:1px;outline:none;border:none;padding:5px;font-size:medium;letter-spacing:1px;color:#8a2be2}.addTodo form .submit{height:4vh;padding:5px}nav{right:1%}.mail-container{display:flex;flex-direction:column;border-right:2px solid #222831;background-color:#faebd7;width:25%;height:89%;position:absolute;top:10.5%;left:5%;overflow-y:auto;scroll-behavior:smooth;scrollbar-color:#888 #f1f1f1}.view-container{width:70%;padding:10px;background-color:#fff;box-shadow:0 4px 16px #0000001a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:absolute;top:10.5%;right:1px;height:89%;border-bottom-right-radius:8px;overflow:auto}.header{background-color:#222831;border-radius:10px;padding:5px;position:relative}.header h2{font-size:1.8rem;color:#978888;margin-bottom:5px}.header label{display:block;font-size:.9rem;color:#8a2be2;margin-bottom:10px}.view-container h3{font-size:1.2rem;color:#555;margin-bottom:15px}.view-container p{font-size:1rem;color:#444;line-height:1.6;white-space:pre-wrap}.view-container .header button{position:absolute;right:3%;top:20%;width:15%;height:6vh;font-size:16px;font-weight:bolder;color:red;background-color:#ff8c00;border-radius:10px;outline:none;border:none;padding:3px;cursor:pointer;display:none}.replayBtn{position:fixed;bottom:5%;right:3%;width:10%;height:7vh;font-size:15px;background-color:#b0e0e6;color:#000;outline:none;cursor:pointer}.my{display:none}@media (max-width: 1000px){.mail-container{left:8%}.view-container{width:67%}}@media (max-width: 768px){.mail-container{left:11%;width:90%}.view-container{display:none;left:0;z-index:6;width:100%}.open,.view-container .header button{display:block}.replayBtn{width:20%}}@media (max-width: 497px){.mail-container{left:15%;width:85%}.replayBtn{width:25%}}.mail-bar{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:5px;width:5%;height:89%;background-color:#1e1e1e;border-right:1px solid #333;box-shadow:2px 0 #0006;position:absolute;top:10.5%;left:0;z-index:5}.mail-bar-item{width:100%;padding:10px;text-align:center;color:#fff;cursor:pointer}.mail-bar-item:hover{background-color:#333}.mail-bar-item img{width:100%}.mail-bar-item.active{background-color:#555}@media (max-width: 1000px){.mail-bar{width:8%}}@media (max-width: 768px){.mail-bar{width:11%}.mail-bar-item{padding:5px}}@media (max-width: 497px){.mail-bar{width:15%}.mail-bar-item{padding:5px}}.mail{background-color:#3f2020;padding:5px;border:1px solid #ccc;cursor:pointer;position:relative;text-align:left}.alert{background-color:tomato}.alert .Manager{display:none}.mail h3,label{color:#66666b}.mail h3{font-size:1.2em;margin:0}.mail label{font-size:.9em;color:#969696;text-decoration:underline}.mail .date{color:#9acd32}.mail .circle{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:10px;position:absolute;right:0;top:40%}.mail:hover{background-color:#502828}.alert:hover{background-color:tomato}.mail .unread{background-color:#28a745}.delete-icon{width:24px;height:24px;fill:tomato}.popup{width:20%;height:20vh;background:repeating-linear-gradient(45deg,#00f,#fff,#00f 10px,#fff 10px);box-shadow:0 0 4px #0006;border-radius:10px;align-content:center}button{background-color:transparent;outline:none;border:none;cursor:pointer;z-index:3}.Manager{position:absolute;bottom:0;left:0}.Manager .hide{display:none}.draft-container{z-index:7;border-radius:10px;box-shadow:0 0 7px #00000080;position:absolute;top:15%;width:50%;height:70vh;background-color:#b0e0e6;padding:10px;color:#8a2be2}.draft-container h3{color:brown;font-weight:700}.draft-container tr th,td{color:#8a2be2;border:1px solid black;padding:5px 10px}.draft-container tr input{padding:5px 10px;outline:none;border:1px solid black;font-size:14px;color:#8a2be2}.draft-container strong{color:#8a2be2;padding:5px 10px;margin:5px}.draft-container .sub{width:70%;border:none;padding:5px 10px;margin:5px;outline:none;border-bottom:2px solid black;color:#8a2be2;font-size:15px}.draft-container textarea{padding:5px 10px;margin:5px;min-width:98%;max-width:98%;min-height:33vh;max-width:33vh;outline:none;color:green;font-size:13px}.draft-container button{background-color:gray;margin:5px;height:7vh;width:10%;font-size:15px;outline:none;cursor:pointer}.draft-container .sent{border:none;padding:3px 15px;background-color:#000}@media (max-width:1080px){.draft-container{width:70%}}.dont{display:none}@media (max-width:768px){.draft-container{width:100%}.draft-container button{width:15%}}