@import"https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.Mail{height:100%;width:100%}.Mail .Mail_Header{width:100%;height:50px;padding:0 40px;display:flex;align-items:center;justify-content:flex-start;background-color:#22242b;font-family:Roboto,sans-serif;font-weight:500;box-shadow:0 0 20px #000}.Mail .Mail_Header .Back{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;text-decoration:none}.Mail .Mail_Header button{margin-top:3px;margin-left:10px;background-color:transparent;border:none;font-size:1.1rem;color:#fff;font-family:Roboto,sans-serif;font-weight:500;cursor:pointer}.Mail .Mail_Header svg{height:70px}.Mail .Mail_Header .Back:hover>button,.Mail .Mail_Header .Back:hover>svg path{color:#20c997;stroke:#20c997}.Mail .Mail_Details{background-color:#fff;position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 20px}.Mail .Mail_Details .Border_Bottom{position:absolute;bottom:0;width:95%;height:1px;background-color:#ddd}.Mail .User_Details{display:flex;align-items:center;justify-content:center}.Mail .User_Details .Logo{padding:5px 10px;border:2px solid #ccc;border-radius:50%;font-size:1.2rem;font-family:Roboto,sans-serif;font-weight:600;color:#20c997}.Mail .User_Details .Mail_Name{padding:0 10px;display:flex;flex-direction:column;justify-content:center}.Mail .User_Details span{font-family:Roboto,sans-serif}.Mail .User_Details .Name{font-size:.8rem}.Mail .User_Details .Email{margin-top:3px;font-size:.7rem;color:#aaa}.Mail .Date_Section{display:flex;flex-direction:column}.Mail .Date_Section span{font-family:Roboto,sans-serif;font-size:.8rem}.Mail .Date_Section .Date{margin-top:3px;color:#888;font-size:.7rem}.Mail .Subject-Sec{padding:10px 20px;display:flex;align-items:center;border-bottom:1px solid #ddd;background-color:#fff}.Mail .Subject-Sec span{font-family:Roboto,sans-serif;color:#888;font-size:.75rem}.Mail .Subject-Sec .Subject{margin-left:10px;color:#000}.Mail .Mail_Content{height:calc(100% - 143px);width:100%;text-wrap:wrap;padding:15px 20px;font-size:.8rem;font-family:Roboto,sans-serif;overflow:auto;background-color:#fff}@media screen and (max-width:480px){.Mail .Mail_Content{font-size:.5rem}}.Main_Page{height:100vh;width:100%;padding:20px;background-image:url(header-bg.jpg);background-repeat:repeat;display:flex;flex-direction:column;align-items:center;justify-content:center}.Main_Page .Upper_Section{width:480px;height:300px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;border:2px dashed #666;border-radius:20px}.Main_Page .Upper_Section .Title{font-family:Caveat,cursive;font-family:Roboto,sans-serif;font-size:1.5rem;color:#fff}.Main_Page .Upper_Section .Mail_Holder{height:50px;display:flex;align-items:center}.Main_Page .Upper_Section .Mail_Holder .Email{background-color:#0003;padding:15px 20px;color:#fff;border-radius:20px;margin-right:20px;box-shadow:0 0 5px #000}.Main_Page .Upper_Section .Mail_Holder .Copy_Button{height:45px;width:45px;background-color:#00c497;border:none;border-radius:50%;cursor:pointer}.Main_Page .Upper_Section .Mail_Holder .Copy_Button:hover{background-color:#555}.Main_Page .Upper_Section .Mail_Holder .Copied{position:absolute;right:20%;top:15%;background-color:#00000080;padding:10px;border-radius:20px;color:#fff;display:none}.Main_Page .Upper_Section .Actions{width:100%;display:flex;align-items:center;justify-content:space-evenly}.Main_Page .Upper_Section .Actions button{padding:13px 25px;background-color:#fff;color:#777;border:none;border-radius:25px;font-family:Roboto,sans-serif;cursor:pointer;box-shadow:0 0 10px #000;display:flex;align-items:center}.Main_Page .Upper_Section .Actions button svg{height:20px}.Main_Page .Upper_Section .Actions button:hover{color:#000}.Main_Page .Emails{height:600px;width:800px;margin-top:10px;border-radius:10px;overflow:auto;box-shadow:0 0 10px #000}.Main_Page .Upper_Section .Actions button.Delete_Email{opacity:.5;cursor:none}@media screen and (max-width:800px){.Main_Page .Emails{width:100%}@media screen and (max-width:480px){.Main_Page{padding:0}.Main_Page .Upper_Section{width:100%;height:500px}.Main_Page .Upper_Section .Mail_Holder{flex-direction:column;padding:0;margin-bottom:10px}.Main_Page .Upper_Section .Mail_Holder .Email{margin-bottom:10px}.Main_Page .Upper_Section .Actions{flex-wrap:wrap}.Main_Page .Upper_Section .Actions button{margin-bottom:10px}@media screen and (max-height:850px){.Main_Page{min-height:100vh}.Main_Page .Upper_Section .Actions{margin-top:10px}.Main_Page .Upper_Section{height:850px}}}}.Popup{position:fixed;top:0;height:100vh;width:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center}.Popup form{width:50vh;height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;background-color:#4e4e55;box-shadow:0 0 10px #000;border-radius:10px}.Popup form input{padding:10px 20px;border:1px solid #aaa;border-radius:10px;width:100%;margin-bottom:20px}.Popup form input:focus{outline:1px solid #aaa}.Popup form input[type=submit]{background-color:#00c497;color:#fff;border:1px solid #fff;font-size:1rem;cursor:pointer;border-radius:20px}.Popup form input[type=submit]:hover{box-shadow:0 0 5px #000}.Popup form .Close_Popup:hover>svg{scale:1.2}.Popup form span{color:#fff;margin-bottom:20px;font-size:1.2rem}.Popup form .Close_Popup{background-color:transparent;border:none;align-self:flex-end;cursor:pointer}.Popup form .Close_Popup svg path{fill:red}.Disabled{cursor:not-allowed;opacity:.5}.Mail_List{width:100%;height:100%}.Mail_List .Header{width:100%;height:50px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;background-color:#22242b;color:#fff;font-family:Roboto,sans-serif;font-weight:500;box-shadow:0 0 20px #000}.Mail_List .Mails{height:calc(100% - 50px);background-color:#fff;overflow:auto}.Mail_List .Mails .Mail{height:50px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #aaa;cursor:pointer}.Mail_List .Mails .Mail:hover{background-color:#ddd}.Mail_List .Mails .Loading{position:relative;left:0;height:3px;background-color:#00c497;width:50%;border-radius:50%;animation:Loading 1s linear infinite}@keyframes Loading{0%{left:0%}50%{left:50%}to{left:0%}}@media screen and (max-width:600px){.Mail_List .Mails .Mail{font-size:.7rem}}*{box-sizing:border-box;padding:0;margin:0}.Get_Name{position:absolute;z-index:1}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:#dddd}::-webkit-scrollbar-thumb{background:#00c497}::-webkit-scrollbar-thumb:hover{background:#058a6b;border-radius:40px}
