*{box-sizing:border-box}
body{margin:0;background:#eaf0f7;color:#283548;font:14px/1.6 Arial,"Microsoft YaHei",sans-serif}
.mail-page{padding:16px 20px;max-width:1920px;margin:auto}
.mail-header{min-height:58px;margin-bottom:12px}
.brand{display:inline-block;width:200px;font-size:24px;font-weight:700;color:#286cc0;text-decoration:none;vertical-align:middle}
.search-bar{display:inline-block;width:40%;max-width:640px;background:#dfe7f1;border-radius:12px;padding:2px 10px;vertical-align:middle}
.search-bar input{width:calc(100% - 60px);border:0;background:none;height:38px;font:inherit;outline:none}
.header-links{float:right;display:inline-block;margin-left:18px;vertical-align:middle}
.primary-button,.text-button{display:inline-block;height:34px;padding:0 12px;border:0;border-radius:8px;font:inherit;line-height:34px;text-decoration:none;cursor:pointer;vertical-align:middle;white-space:nowrap}
.primary-button{background:#e1edff;color:#2469bf}
.primary-button:hover{background:#cfe2ff}
.primary-button:active{transform:scale(.98)}
.text-button{color:#657187;background:none}
.text-button:hover{background:#edf1f6}
button:disabled{opacity:.45;cursor:default}
.mail-sidebar{display:inline-block;width:200px;margin-right:16px;vertical-align:top}
.compose-button{width:100%;margin-bottom:18px}
.folder-button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 16px;margin-bottom:4px;color:inherit;cursor:pointer;font:inherit}
.folder-button:hover,.folder-button.is-selected{background:#d4e5fb;color:#2469bf}
.header-links select{max-width:260px;background:white;border:1px solid #dce3ed;border-radius:8px;height:34px;padding:0 8px;color:inherit;font:inherit}
.mail-main{display:inline-block;vertical-align:top;width:calc(100% - 222px);background:white;border-radius:14px;padding:16px 22px;min-height:calc(100vh - 110px)}
.toolbar{margin-bottom:14px}
.toolbar h1{display:inline-block;font-size:20px;margin:0 18px 0 0;vertical-align:middle}
.status{color:#64758b;overflow-wrap:anywhere;margin:0 0 8px}
.status:empty{display:none}
.list-heading{padding:4px 8px 12px;border-bottom:1px solid #e5eaf1}
.list-heading span{float:right}
.mail-item{position:relative;border-bottom:1px solid #e9edf3;padding:0 8px;min-height:48px}
.mail-item:hover{background:#f4f8fd}
.mail-select{display:inline-block;width:28px;vertical-align:middle}
.mail-open{display:inline-block;width:calc(100% - 32px);padding:12px 0;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;vertical-align:middle}
.mail-from{display:inline-block;width:25%;padding-right:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.mail-subject{display:inline-block;width:48%;padding-right:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.mail-date{display:inline-block;width:27%;text-align:right;color:#8190a5;vertical-align:middle;white-space:nowrap}
.is-unread .mail-from,.is-unread .mail-subject{font-weight:700;color:#1a2c46}
.unread-dot{display:inline-block;width:6px;height:6px;background:#3686dd;border-radius:50%;margin-right:6px;vertical-align:middle}
.pager{margin-top:16px;text-align:right}
.muted,.mail-meta{color:#758197}
.mail-detail h2{font-size:22px;overflow-wrap:anywhere;margin:0 0 12px}
.mail-meta{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:14px}
.mail-body{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px 0}
.mail-frame{border:0;width:100%;height:600px;margin:12px 0;background:white}
.attachment{padding:10px 0;border-top:1px solid #eef1f6;overflow-wrap:anywhere}
.compose-form label{display:block;margin-bottom:12px;color:#657187}
.compose-form input,.compose-form select,.compose-form textarea{display:inline-block;vertical-align:top;margin-left:16px;width:calc(100% - 90px);border:1px solid #dce3ed;border-radius:8px;padding:8px 10px;color:#283548;font:inherit;background:white}
.compose-form textarea{min-height:260px;resize:vertical}
.compose-form input[type=file]{border:0}
[hidden]{display:none!important}
@media(max-width:900px){.mail-page{padding:12px}.brand{width:160px}.mail-sidebar{width:148px;margin-right:12px}.mail-main{width:calc(100% - 166px);padding:16px}.header-links{margin-left:0}.mail-from{width:30%}.mail-subject{width:50%}.mail-date{width:20%}}
@media(max-width:600px){.mail-header{margin-bottom:10px}.brand{width:auto;font-size:21px}.header-links{float:right}.header-links .text-button{padding:0 8px}.search-bar{display:block;width:100%;max-width:none;margin-top:10px}.mail-sidebar{display:block;width:100%;margin:0 0 10px}.compose-button{width:auto;margin:0 6px 0 0}.mail-sidebar nav{display:inline-block}.folder-button{display:inline-block;width:auto;padding:7px 9px;margin:0}.mail-sidebar .muted{display:inline-block;margin:10px 0 0 8px;max-width:115px;vertical-align:middle}.mail-main{display:block;width:100%;padding:14px 12px;min-height:60vh}.toolbar h1{display:block;margin-bottom:8px}.toolbar .text-button{padding:0 9px}.mail-from{display:block;width:70%;padding:0}.mail-subject{display:block;width:100%;padding:3px 0 0}.mail-date{position:absolute;right:8px;top:13px;width:auto}.mail-item{padding-right:8px}.mail-open{padding:10px 0}.mail-select{vertical-align:top;padding-top:18px}.mail-frame{height:450px}.compose-form input,.compose-form select,.compose-form textarea{display:block;width:100%;margin:5px 0 0}.mail-detail h2{font-size:19px}.pager{text-align:center}}
.mail-settings-form{padding:16px 0;border-bottom:1px solid #eef1f6;margin-bottom:16px}
.mail-settings-form label{display:block;margin:0 0 12px;color:#657187}
.email-field-hint{display:inline;color:#657187}
.mail-settings-form label input{display:block;box-sizing:border-box;width:100%;max-width:640px;height:34px;margin-top:6px;padding:0 10px;border:1px solid #dce3ed;border-radius:8px;font:inherit}
.account-item{padding:14px 0;border-bottom:1px solid #eef1f6;overflow-wrap:anywhere}
.account-item p{margin:6px 0}
.mail-status{position:fixed;right:20px;top:76px;z-index:20;max-width:calc(100vw - 40px);padding:8px 14px;background:#eef5ff;border:1px solid #d2e3fb;border-radius:8px;box-shadow:0 3px 12px #28354814}
.mail-content{border:1px solid #edf0f4;border-radius:10px;padding:0 18px;margin:14px 0}
.mail-body{padding:18px;background:white;border-radius:6px}
.mail-frame{margin:0;background:white;border-radius:6px}
@media(max-width:600px){.header-links{float:none;display:block;margin:8px 0}.header-links select{max-width:52%;width:auto}.mail-status{right:12px;top:12px;max-width:calc(100vw - 24px)}.mail-content{padding:8px}.mail-from{width:100%;padding-right:0}.mail-date{position:static;display:block;width:100%;text-align:left;margin-top:4px}}