/* GiveTen 0.74 looks (approved design, proto-058) */
/* bottom bar symbols */
#bbar .bb .bi74{display:block;font-size:18px!important;line-height:18px!important;height:18px;font-family:Roboto,Arial,"Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols",sans-serif;font-weight:400;margin:0 auto 2px}
body.o15 #bbar .bb .bi74{font-size:18px!important}
/* Extras tile chips: approved symbols in 5 rotating colors */
#extras-panel .extras-icon.chip74{border:1px solid;border-radius:9px!important;width:29px!important;height:29px!important;min-width:29px!important;display:grid!important;place-items:center!important;font-size:16px!important;line-height:1!important;font-weight:400!important;font-family:Roboto,Arial,"Noto Sans Symbols 2","Noto Sans Symbols",sans-serif!important;box-sizing:border-box}
#extras-panel .extras-icon.chip74 svg{display:none}
/* long account names: one line, smaller, last digits stay visible */
body.o15 .arow-t{font-size:13px!important}
body.o15 .arow-nm{font-size:13px!important}
body.o15 .arow-mk{font-size:12px!important}
/* Special giving (approved own-list screen) */
#extras-panel .sg74{font-family:Roboto,Arial,sans-serif;color:#153148}
#extras-panel .sg74 .sg-card{background:#fff;border:1px solid #d7e0ec;border-radius:13px;padding:12px;margin:0 0 10px}
#extras-panel .sg74 .sg-card h3{font-size:15px;margin:0 0 10px;color:#153148}
#extras-panel .sg74 .sg-intro{font-size:12px;color:#56667e;margin:0 0 10px;line-height:1.45}
#extras-panel .sg74 .sg-kv{display:flex;justify-content:space-between;font-size:13px;padding:6px 0}
#extras-panel .sg74 .sg-kv b{font-size:15px}
#extras-panel .sg74 .sg-f{display:block;font-size:11px;font-weight:700;color:#56667e;margin:0 0 8px;text-transform:none}
#extras-panel .sg74 .sg-f input{display:block;width:100%;box-sizing:border-box;margin-top:4px;border:1px solid #cfdaea;border-radius:8px;padding:10px;font-size:15px;font-family:inherit;color:#153148;background:#fff;min-height:44px}
#extras-panel .sg74 .sg-err{color:#C62828;font-size:12px;min-height:14px;margin:4px 0}
#extras-panel .sg74 .sg-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
#extras-panel .sg74 .sg-btn{border:0;border-radius:9px;background:#123c69;color:#fff;padding:11px 14px;font-size:14px;font-weight:700;min-height:44px;cursor:pointer;width:auto;flex:0 0 auto}
#extras-panel .sg74 .sg-btn.ghost{background:#fff;color:#123c69;border:1px solid #c9d6e8}
#extras-panel .sg74 .sg-btn.red{background:#C62828;color:#fff}
#extras-panel .sg74 .sg-btn.sm{padding:6px 10px;min-height:32px;font-size:12px}
#extras-panel .sg74 .sg-sec{font-size:11px;letter-spacing:1px;color:#56667e;margin:14px 0 7px;font-weight:700}
#extras-panel .sg74 .sg-li{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #e3e9f2;font-size:13px}
#extras-panel .sg74 .sg-li:first-child{border-top:0}
#extras-panel .sg74 .sg-li .m{flex:1;min-width:0;overflow-wrap:anywhere}
#extras-panel .sg74 .sg-li .m small{display:block;color:#6a7c90;font-size:11px;margin-top:2px}
#extras-panel .sg74 .sg-li b{white-space:nowrap}
#extras-panel .sg74 .sg-ask{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff5f5;border:1px solid #f3c9c9;border-radius:9px;padding:8px;margin:0 0 6px;font-size:12px}
#extras-panel .sg74 .sg-ask span{flex:1 1 100%}
#extras-panel .sg74 .sg-note{font-size:11px;color:#6a7c90;margin:4px 2px 10px;line-height:1.4}
#extras-panel .sg74 .sg-link{background:none;border:0;color:#123c69;font-size:12px;font-weight:700;padding:8px 2px;min-height:40px;text-align:left;cursor:pointer;width:100%}

/* Extras sub-screens full screen with the navy header, as in the approved design (was a floating card) */
#extras-panel:not([data-feedback=true]){position:fixed!important;inset:0!important;height:100%!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;box-sizing:border-box!important;background:#f5f7fa!important;overflow-y:auto!important;padding:12px 12px 84px!important}
#extras-panel:not([data-feedback=true]) .extras-heading{position:sticky!important;top:-12px!important;z-index:5!important;background:#13315C!important;color:#fff!important;margin:-12px -12px 12px!important;padding:8px 12px!important;min-height:48px!important;align-items:center!important;display:flex!important}
#extras-panel:not([data-feedback=true]) .extras-heading h2{color:#fff!important;font-size:17px!important;margin:0!important}
#extras-panel:not([data-feedback=true]) .extras-heading button{color:#fff!important;background:transparent!important;border:1px solid #ffffff55!important;border-radius:7px!important;width:auto!important;flex:0 0 auto!important;padding:6px 12px!important;min-height:36px!important}
/* bottom bar: Extras shows as the current tab while Extras is open */
body.extras-open #bbar #b-extras{color:#123c69!important;font-weight:700!important}
body.extras-open #bbar #b-extras span{color:#123c69!important;font-weight:700!important}
/* home header buttons: approved symbols */
body.o15 #o15-head #o15-quick button .o15-qc.qc74{font-size:22px!important;line-height:1!important;color:#f5f6fc!important;font-family:Arial,"Noto Sans Symbols 2","Noto Sans Symbols",sans-serif!important;font-weight:400!important}
body.o15 #o15-head #o15-quick button .o15-qc.qc74 svg{display:none!important}
/* account rows: name ····last4, amount, then Hide (approved order) */
body.o15 #o15-main .arow .arow-n{display:contents!important}
body.o15 #o15-main .arow .arow-t{order:1}
body.o15 #o15-main .arow .arow-b{order:2;margin-left:auto}
body.o15 #o15-main .arow .account-hide{order:3;flex:0 0 auto}
body.o15 #o15-main .arow .arow-l{order:4}

/* long account names wrap to a 2nd line instead of being cut off ("Chase Sapphire Preferred Visa Signature ····4417") */
body.o15.theme #o15-main .arow,body.o15 #o15-main .arow{height:auto!important;max-height:none!important;min-height:46px!important;overflow:visible!important}
body.o15 #o15-main .arow .arow-t{display:block!important;white-space:normal!important;overflow:visible!important;line-height:1.25!important;flex:1 1 0!important;min-width:0!important;overflow-wrap:anywhere}
body.o15 #o15-main .arow .arow-nm{display:inline!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
body.o15 #o15-main .arow .arow-mk{display:inline-block!important;white-space:nowrap!important}
body.o15 #o15-main .arow .arow-b{white-space:nowrap!important}