/* Native mail appearance from the selected Fokus concept. */

.outlook-demo .native-client{color-scheme:light;--ink:#242424;--sub:#616161;--sheet:#fff;--line:#e0e0e0;--mail-tint:#ebf3fc;--mail-gray:#f5f5f5;--mail-green:#0f6cbd;color:#242424;border:1px solid #d6d6d6;overflow:clip;background:#fff;border-radius:7px;box-shadow:0 12px 34px #20272215;}
.outlook-demo .native-client svg{width:16px;height:16px;flex-shrink:0;stroke-width:1.5;}
.outlook-demo .native-client button{color:inherit;font-family:inherit;}
.outlook-demo .native-client p{margin:0;}
.outlook-demo .native-client b,.outlook-demo .native-client strong{font-weight:600;}
.outlook-demo .native-client .mail-reading{font-size:13px;line-height:1.55;min-height:490px;padding:21px 23px;background:#fff;color:#242424;}
.outlook-demo .native-client .mail-reading h3{font-family:inherit;font-size:21px;line-height:1.35;letter-spacing:0;font-weight:600;margin-bottom:22px;}
.outlook-demo .native-client .sender-line{gap:11px;margin-bottom:16px;}
.outlook-demo .native-client .sender-line b{font-size:13px;}
.outlook-demo .native-client .sender-line span:not(.avatar){font-size:11px;color:#616161;}
.outlook-demo .native-client .sender-line time{font-size:11px;color:#616161;}
.outlook-demo .native-client .avatar{width:33px;height:33px;font-size:12px;background:#ead9ed;color:#62296a;}
.outlook-demo .native-client .brand-avatar{background:#dce6ee;color:#41566b;border-radius:50%;}
.outlook-demo .native-client .message-meta{padding-left:44px;font-size:11px;color:#616161;margin-bottom:24px;}
.outlook-demo .native-client .email-body{font-family:inherit;font-size:13px;line-height:1.7;color:#242424;}
.outlook-demo .native-client .email-body p+p{margin-top:16px;}
.outlook-demo .native-client .email-body .signature{color:#242424;font-size:13px;margin-top:24px;}
.outlook-demo .native-client .mail-link{color:#0b57d0;font-size:13px;text-decoration:underline;font-weight:400;}
.outlook-demo .native-search{display:flex;align-items:center;gap:10px;height:32px;min-width:0;font-size:12px;}
.outlook-demo .native-top-tools{display:flex;align-items:center;gap:18px;margin-left:auto;}
.outlook-demo .native-user{width:28px;height:28px;border-radius:50%;background:#752853;color:#fff;display:grid;place-items:center;font-size:11px;flex-shrink:0;}
.outlook-demo .outlook-client{font-family:'Segoe UI',Arial,sans-serif;}
.outlook-demo .outlook-top{background:#0f6cbd;color:#fff;display:flex;gap:18px;align-items:center;padding:10px 14px;}
.outlook-demo .outlook-top>b{font-size:18px;font-weight:600;}
.outlook-demo .native-waffle{display:flex;align-items:center;}
.outlook-demo .outlook-top .native-search{margin-left:40px;background:#eef5fc;color:#3e5366;border-radius:4px;padding:0 12px;width:320px;}
.outlook-demo .outlook-workspace{display:grid;grid-template-columns:42px minmax(0,1fr);background:#f5f5f5;}
.outlook-demo .outlook-apps{padding-top:8px;display:flex;align-items:center;flex-direction:column;gap:25px;background:#f0f0f0;border-right:1px solid #e3e3e3;}
.outlook-demo .outlook-apps>span{height:36px;width:100%;display:flex;align-items:center;justify-content:center;}
.outlook-demo .outlook-apps>span.active{border-left:3px solid #0f6cbd;background:#e5e5e5;}
.outlook-demo .outlook-apps img{width:21px;height:21px;object-fit:contain;}
.outlook-demo .outlook-menu{display:flex;gap:25px;align-items:center;padding:11px 16px 0;background:#fafafa;border-bottom:1px solid #e6e6e6;font-size:12px;}
.outlook-demo .outlook-menu>span{padding-bottom:9px;}
.outlook-demo .outlook-menu .selected{font-weight:600;border-bottom:2px solid #0f6cbd;}
.outlook-demo .outlook-menu>svg{margin-bottom:9px;}
.outlook-demo .outlook-ribbon{display:flex;align-items:center;gap:17px;min-height:48px;padding:8px 12px;border-bottom:1px solid #ddd;background:#fafafa;}
.outlook-demo .outlook-ribbon>span{display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;}
.outlook-demo .outlook-ribbon>span.new-mail{background:#0f6cbd;color:#fff;border-radius:4px;padding:8px 10px;gap:7px;}
.outlook-demo .outlook-panes{display:grid;grid-template-columns:155px 224px minmax(0,1fr);}
.outlook-demo .outlook-folders{background:#f5f5f5;font-size:11px;padding:15px 6px 20px 9px;}
.outlook-demo .outlook-folders>p{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:0 4px 13px;}
.outlook-demo .outlook-folders>p.folder-account{margin-top:24px;}
.outlook-demo .native-folder{display:flex;align-items:center;gap:8px;min-height:33px;padding:7px 8px;font-size:11px;}
.outlook-demo .native-folder>b{margin-left:auto;font-weight:400;}
.outlook-demo .outlook-folders .native-folder.active{background:#dce6ee;color:#0f548c;border-radius:3px;font-weight:600;}
.outlook-demo .native-mail-list{background:#fff;border-right:1px solid #ddd;}
.outlook-demo .outlook-focused{padding:14px 14px 0;display:flex;align-items:center;gap:17px;border-bottom:1px solid #ddd;font-size:12px;}
.outlook-demo .outlook-focused>b{color:#0f548c;border-bottom:2px solid #0f6cbd;padding-bottom:10px;}
.outlook-demo .outlook-focused>span{padding-bottom:10px;}
.outlook-demo .outlook-focused>svg{margin-left:auto;margin-bottom:10px;}
.outlook-demo .native-date{font-size:11px;background:#fafafa;padding:8px 14px!important;color:#616161;border-bottom:1px solid #eee;}
.outlook-demo .native-mail-row{border:0;border-bottom:1px solid #eee;background:#fff;padding:13px 11px;display:flex;gap:8px;width:100%;text-align:left;min-height:92px;position:relative;}
.outlook-demo .native-mail-row[aria-pressed="true"]{background:#ebf3fc;}
.outlook-demo .native-mail-row[aria-pressed="true"]:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#0f6cbd;}
.outlook-demo .native-row-avatar{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;background:#ead9ed;color:#62296a;font-size:11px;border-radius:50%;}
.outlook-demo .belerate-initial{color:#41566b;background:#dce6ee;}
.outlook-demo .neutral-initial{color:#5f5323;background:#ede4cb;}
.outlook-demo .native-row-content{min-width:0;display:flex;flex-direction:column;gap:5px;flex:1;}
.outlook-demo .native-row-content>span{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:11px;}
.outlook-demo .native-row-content time{font-size:11px;color:#616161;}
.outlook-demo .native-row-content strong{font-size:11px;line-height:1.4;}
.outlook-demo .native-row-content small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#616161;}
.outlook-demo .native-list-filler{font-size:11px;color:#616161;}
.outlook-demo .native-list-filler>span{display:block;padding:8px 14px;background:#fafafa;border-bottom:1px solid #eee;}
.outlook-demo .native-list-filler p{padding:14px;line-height:1.8;}
.outlook-demo .native-list-filler small{font-size:11px;}
.outlook-demo .native-reader-wrap{padding:10px;background:#f5f5f5;min-width:0;}
.outlook-demo .outlook-client .mail-reading{border:1px solid #e0e0e0;border-radius:4px;min-height:520px;}
.outlook-demo .native-client .read-tools{margin-bottom:23px;display:flex;justify-content:space-between;align-items:center;color:#616161;}
.outlook-demo .native-client .read-tools>span{display:flex;align-items:center;gap:16px;}
.outlook-demo .native-client .read-tools .native-reply-label{color:#0f6cbd;font-size:11px;gap:5px;}
.outlook-demo .native-reply-bar{display:flex;gap:10px;margin-top:35px;color:#424242;font-size:12px;}
.outlook-demo .native-reply-bar>span{display:inline-flex;align-items:center;gap:8px;border:1px solid #c5c5c5;border-radius:4px;padding:7px 12px;}
.outlook-demo .native-client .plain-email-detail{margin-top:18px;font-size:13px;line-height:1.7;}
.outlook-demo .native-client .plain-email-detail p+p{margin-top:13px;}
.outlook-demo .native-client .plain-email-detail hr{border:0;border-top:1px solid #ddd;margin:20px 0;}
.outlook-demo .native-client .native-email-link{color:#0b57d0;border:0;background:none;font-size:13px;font-family:inherit;text-decoration:underline;padding:0;text-align:left;}
.outlook-demo .native-explainer{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--sub);padding:17px 0 0;}
.outlook-demo .native-explainer>span:first-child{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.outlook-demo .native-explainer b{color:var(--ink);font-weight:500;}
.outlook-demo .native-explainer>span:last-child{font-size:11px;white-space:nowrap;}

@media(max-width:950px){
 .outlook-demo .outlook-panes{grid-template-columns:125px 202px minmax(0,1fr);}
 .outlook-demo .outlook-folders .native-folder{font-size:11px;gap:5px;padding-inline:5px;}
 .outlook-demo .outlook-ribbon .ribbon-extra{display:none;}
 .outlook-demo .native-top-tools{gap:12px;}
 .outlook-demo .outlook-top .native-search{margin-left:5px;width:260px;}
}
@media(max-width:850px){
 .outlook-demo .outlook-folders{display:none;}
 .outlook-demo .outlook-panes{grid-template-columns:205px minmax(0,1fr);}
 .outlook-demo .native-explainer{flex-wrap:wrap;gap:8px;}
 .outlook-demo .native-explainer>span:last-child{white-space:normal;}
}
@media(max-width:720px){
 .outlook-demo .outlook-top .native-top-tools>svg:nth-child(-n+3){display:none;}
 .outlook-demo .outlook-top{gap:12px;}
 .outlook-demo .outlook-top .native-search{flex:1;width:auto;}
 .outlook-demo .outlook-panes{grid-template-columns:170px minmax(0,1fr);}
 .outlook-demo .native-client .mail-reading{padding:18px;}
 .outlook-demo .native-row-avatar{display:none;}
}
@media(max-width:520px){
 .outlook-demo .native-demo{margin-inline:3%;}
 .outlook-demo .native-client{border-radius:5px;}
 .outlook-demo .outlook-top{padding:10px;gap:10px;flex-wrap:wrap;}
 .outlook-demo .outlook-top>b{font-size:17px;}
 .outlook-demo .outlook-top .native-search{order:5;flex-basis:100%;height:31px;margin-left:0;}
 .outlook-demo .outlook-top .native-top-tools{margin-left:auto;}
 .outlook-demo .outlook-workspace{grid-template-columns:minmax(0,1fr);}
 .outlook-demo .outlook-apps{display:none;}
 .outlook-demo .outlook-ribbon{gap:15px;flex-wrap:wrap;}
 .outlook-demo .outlook-ribbon>span:nth-of-type(3),.outlook-demo .outlook-ribbon>span:nth-of-type(4){display:none;}
 .outlook-demo .outlook-panes{grid-template-columns:minmax(0,1fr);}
 .outlook-demo .native-mail-list{display:grid;grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid #ddd;}
 .outlook-demo .outlook-focused{grid-column:1/-1;}
 .outlook-demo .native-date,.outlook-demo .native-list-filler,.outlook-demo .native-mail-row[data-mail="heating"]{display:none;}
 .outlook-demo .native-mail-row{padding:13px 10px;min-height:79px;border-bottom:0;}
 .outlook-demo .native-mail-row:first-of-type{border-right:1px solid #e0e0e0;}
 .outlook-demo .native-row-content small{display:none;}
 .outlook-demo .native-row-content>span{flex-wrap:wrap;gap:3px;}
 .outlook-demo .native-reader-wrap{padding:8px;}
 .outlook-demo .native-client .mail-reading{min-height:465px;padding:17px 14px;}
 .outlook-demo .native-client .mail-reading h3{font-size:20px;}
 .outlook-demo .native-client .read-tools>span{gap:11px;}
 .outlook-demo .native-client .read-tools .native-reply-label{font-size:11px;gap:3px;}
 .outlook-demo .native-client .email-body{font-size:12px;}
 .outlook-demo .native-client .email-body .signature{font-size:12px;}
 .outlook-demo .native-client .sender-line{flex-wrap:wrap;}
 .outlook-demo .native-client .message-meta{padding-left:0;}
 .outlook-demo .native-reply-bar{gap:8px;font-size:11px;}
 .outlook-demo .native-reply-bar>span{padding:7px 9px;}
 .outlook-demo .native-explainer{font-size:11px;}
}
.outlook-demo { --sub:#59635d; --ink:#202722; }
.outlook-demo [hidden] { display:none!important; }
.outlook-demo button { cursor:pointer; }
.outlook-demo .sender-line { display:flex; align-items:center; }
.outlook-demo .sender-line>div { display:flex; flex-direction:column; min-width:0; }
.outlook-demo .sender-line>div>span { overflow-wrap:anywhere; }
.outlook-demo .sender-line time { margin-left:auto; }
.outlook-demo .avatar { display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; }
.outlook-demo .email-body hr { border:0; border-top:1px solid #e0e0e0; margin:18px 0; }
.outlook-demo .native-client .native-email-link { min-height:44px; }
.outlook-demo .native-explainer { font-size:11px; }
.outlook-demo .native-explainer img { width:18px; height:18px; border-radius:4px; }
.outlook-demo .demo-controls { display:grid; grid-template-columns:repeat(5,1fr); margin-top:24px; border-bottom:1px solid var(--line); gap:14px; }
.outlook-demo .demo-controls button { display:flex; align-items:center; gap:9px; min-height:52px; padding:12px 0; border:0; border-bottom:2px solid transparent; background:transparent; font-family:inherit; color:#59635d; font-size:13px; text-align:left; }
.outlook-demo .demo-controls button>span { font-size:10px; }
.outlook-demo .demo-controls button[aria-pressed="true"] { border-bottom-color:#244e42; color:#244e42; font-weight:600; }
.outlook-demo .demo-controls button:hover { color:#244e42; background:#eef3ed; }
.outlook-demo .demo-explanation { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; padding:22px 0 0; min-height:100px; }
.outlook-demo .demo-explanation p { font-size:14px; line-height:1.7; color:#59635d; max-width:760px; }
.outlook-demo .demo-explanation .demo-explanation__title { color:#244e42; font-weight:500; }
.outlook-demo.review-open .native-client { display:none; }

.outlook-demo .approval-panel { background:#fff; border:1px solid #c5d1c1; border-radius:8px; padding:30px; margin-top:20px; }
.outlook-demo .approval-heading { display:flex; align-items:center; gap:9px; font-size:12px; color:#59635d; margin-bottom:24px; }
.outlook-demo .approval-heading img { width:24px; height:24px; border-radius:5px; }
.outlook-demo .approval-panel h3 { font-size:28px; }
.outlook-demo .approval-note { font-size:13px; color:#59635d; margin:12px 0 24px; }
.outlook-demo .approval-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.outlook-demo .approval-columns label { font-size:13px; font-weight:500; }
.outlook-demo textarea { display:block; width:100%; resize:vertical; min-height:170px; margin-top:10px; border:1px solid #b7c5b2; border-radius:5px; background:#fafbf9; padding:16px; font:14px/1.7 var(--f); color:#202722; }
.outlook-demo .approval-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.outlook-demo .approval-result { margin-top:18px; font-size:13px; color:#244e42; }
@media(max-width:720px) { .outlook-demo .demo-explanation { grid-template-columns:1fr; gap:8px; } }
@media(max-width:520px) {
 .outlook-demo .demo-controls { gap:3px; margin-top:16px; }
 .outlook-demo .demo-controls button { flex-direction:column; align-items:start; justify-content:center; gap:4px; font-size:11px; min-height:58px; }
 .outlook-demo .demo-explanation p { font-size:13px; }
 .outlook-demo .approval-panel { padding:20px; }
 .outlook-demo .approval-columns { grid-template-columns:1fr; }
 .outlook-demo .approval-actions { flex-direction:column; }
}

.outlook-demo,.outlook-demo .approval-panel { scroll-margin-top:100px; }