@import"https://fonts.googleapis.com/css2?family=Nunito&display=swap";:root{--background-color:#F4F6FA;--filter-font-color:#2F3031;--favourite-read:#f2f2f2;--read-card-background:#ffffff;--text-color:#636363;--filter-badge:#E1E4EA;--border-color:#CFD2DC;--accent-color:#E54065;--filter-badge:#e1e5ea }*{margin:0;padding:0;font-family:Nunito}.head{display:flex;justify-content:space-between}.App{background-color:#f4f5f9;padding-block:1rem;padding-inline:3rem}.mail-section{display:grid;grid-template-columns:30% 70%;grid-template-areas:"list-mail single-mail ";column-gap:2rem}.card-section{grid-area:list-mail}.mail{background-color:var(--read-card-background);width:100%;padding-block:2rem;grid-area:single-mail;border:1px solid var(--border-color);border-radius:10px;height:fit-content}.mail-title{color:var(--text-color);font-size:larger}.title-date{margin-left:10px}.mail-date{color:var(--text-color)}.favourite-btn{background-color:var(--accent-color);border:unset;border-radius:100px;padding-inline:10px;padding-block:5px;height:35px;cursor:pointer;color:#fff;align-self:center}.heading-avatar{display:flex;align-items:center}.mail-heading{display:flex;justify-content:space-between;margin-inline:1rem}.mail-body{padding:2rem;text-align:justify}.card{display:flex;background-color:var(--favourite-read);padding:1rem;border:1px solid var(--border-color);border-radius:10px;margin-bottom:1.5rem;cursor:pointer}.card-border{border:1px solid var(--accent-color)}.desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:20rem}.avatar{border-radius:50%;background-color:var(--accent-color);width:3rem;height:3rem;color:#fff}.avatar:after{content:attr(data-name);position:relative;left:1.2rem;top:11px;font-weight:700}.card-info{display:flex;flex-direction:column;margin-left:1.5rem}.date{margin-right:2rem}.favourite{color:var(--accent-color)}.filter{margin-right:2rem}.pill-badge{cursor:pointer;padding-inline:8px}input[type=radio]:checked+label{background-color:var(--filter-badge);outline:1px solid var(--border-color);border-radius:100px}input[type=radio]{visibility:hidden}.filter-section{margin-bottom:1rem}.pages-btn{width:2rem;margin-left:10px}.center-loader{display:flex;justify-content:center;align-items:center}.loader{display:inline-block;position:relative;width:80px;height:80px}.loader section{display:inline-block;position:absolute;left:8px;width:16px;background:var(--accent-color);animation:loader 1.2s cubic-bezier(0,.5,.5,1) infinite}.loader section:nth-child(1){left:8px;animation-delay:-.24s}.loader section:nth-child(2){left:32px;animation-delay:-.12s}.loader section:nth-child(3){left:56px;animation-delay:0}@keyframes loader{0%{top:8px;height:64px}50%,to{top:24px;height:32px}}