/* Online bankieren - aanmeldscherm */
body.lg{background:#e9ecea;display:flex;flex-direction:column;min-height:100vh}
.lg-in{max-width:980px;margin:0 auto;padding:0 20px}
.lg-hdr{background:#fff;border-bottom:3px solid #006b3a}
.lg-hdr .lg-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.lg-hdr .logo svg{width:36px;height:36px}
.lg-hdr .logo .lt b{font-size:18px}
.lg-help{font-size:13px;color:#555}
@media(max-width:520px){.lg-help{display:none}}

.lg-main{width:100%;max-width:440px;margin:34px auto 40px;padding:0 16px;flex:1}
.steps{list-style:none;margin:0 0 10px;padding:0;display:flex;font-size:13px;color:#777}
.steps li{flex:1;padding:6px 0;border-bottom:3px solid #c9cfcb}
.steps li span{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background:#c9cfcb;color:#fff;font-weight:600;margin-right:6px;font-size:12px}
.steps li.on{color:#006b3a;font-weight:500;border-bottom-color:#006b3a}
.steps li.on span{background:#006b3a}
.lg-box{background:#fff;border:1px solid #c9cfcb;padding:22px 26px 24px}
@media(max-width:420px){.lg-box{padding:18px 16px}}
.lg-box h1{font-size:22px;color:#1b1b1b;margin-bottom:4px}
.lg-box .sub{font-size:14px;color:#555;margin-bottom:16px}
.fict{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:#6b716d}
.fict b{font-weight:500}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:14px;font-weight:500;margin-bottom:4px}
.fld input{width:100%;font:inherit;font-size:16px;padding:8px 10px;border:1px solid #8c8c8c;border-radius:0;background:#fff}
.fld input:focus{outline:2px solid #006b3a;outline-offset:-1px;border-color:#006b3a}
.fld input.code{font-size:20px;letter-spacing:4px;width:180px}
.row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px;border-top:1px solid #e3e3e3;padding-top:16px}
.row .btn{min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cancel,.linkbtn{font-size:14px;color:#006b3a;background:none;border:0;padding:0;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
.err{display:none;background:#fbeaea;border:1px solid #d9a3a3;color:#8a1f1f;padding:8px 12px;font-size:14px;margin-bottom:14px}
.err.show{display:block}
.hintbox{background:#f1f5f2;border:1px solid #cfdcd3;padding:9px 12px;font-size:14px;margin-bottom:14px}
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite;display:none}
.busy .spin{display:inline-block}
.btn:disabled{opacity:.7;cursor:wait}
@keyframes sp{to{transform:rotate(360deg)}}
.lg-tips{font-size:13px;color:#555;margin-top:20px;padding:0 2px}
.lg-tips h2{font-size:15px;margin-bottom:4px;color:#333}
.lg-tips ol{padding-left:18px;margin:0 0 10px}

/* rekeningoverzicht */
.acc{width:100%;max-width:980px;margin:0 auto;padding:26px 20px 50px;flex:1}
.acc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.acc-top .who{font-size:14px;color:#555}
.acc-top h1{font-size:26px;margin:0}
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid #b9c2bc}
.tabs button{background:#d7ddd9;border:1px solid #b9c2bc;border-bottom:0;font:inherit;font-size:14px;color:#333;padding:8px 16px;cursor:pointer;white-space:nowrap}
.tabs button:hover{background:#e6ebe8}
.tabs button.on{background:#fff;color:#006b3a;font-weight:500;position:relative;top:1px}
.pane{background:#fff;border:1px solid #b9c2bc;border-top:0;padding:20px 22px}
@media(max-width:600px){.pane{padding:14px 12px}}
.pane>h2{font-size:19px;color:#006b3a;border-bottom:1px solid #e3e3e3;padding-bottom:8px;margin-bottom:14px}
.fade{animation:fd .25s ease}
@keyframes fd{from{opacity:0}to{opacity:1}}
.oh-s{margin-bottom:20px}
.oh-s h3{font-size:16px;margin-bottom:8px}
.oh-t{font-size:14px!important}
.oh-t th{background:#eef2ef!important;font-weight:500!important;color:#333;padding:7px 10px!important;border-bottom:1px solid #b9c2bc!important}
.oh-t td{padding:7px 10px!important;border-bottom:1px solid #e3e3e3!important}
.oh-t tbody tr:nth-child(even) td{background:#fafbfa}
.oh-t td.amt{text-align:right;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.oh-t th.amt{text-align:right}
.oh-t td.amt.neg{color:#a01c1c}
.oh-t td.amt.pos{color:#006b3a}
.oh-t td.iban{font-variant-numeric:tabular-nums;white-space:nowrap}
.oh-t td.dt{white-space:nowrap;color:#555}
.oh-kv dt{color:#666}
.oh-noot{color:#666!important}
.oh-s ul{padding-left:20px}
.sumrow{display:flex;flex-wrap:wrap;border:1px solid #cfdcd3;margin-bottom:18px}
.sumcard{flex:1 1 220px;padding:10px 14px;border-right:1px solid #cfdcd3;background:#f6f9f7}
.sumcard:last-child{border-right:0}
@media(max-width:600px){.sumcard{border-right:0;border-bottom:1px solid #cfdcd3}.sumcard:last-child{border-bottom:0}}
.sumcard small{display:block;font-size:13px;color:#555}
.sumcard b{display:block;font-size:20px;font-weight:600;color:#1b1b1b;font-variant-numeric:tabular-nums}
.sumcard span{font-size:12.5px;color:#666}
@media(max-width:600px){
  .oh-t thead{display:none}
  .oh-t,.oh-t tbody,.oh-t tr,.oh-t td{display:block;width:100%}
  .oh-t tr{padding:8px 0;border-bottom:1px solid #dcdcdc}
  .oh-t td{border:0!important;padding:2px 0!important;text-align:left!important;display:flex;justify-content:space-between;gap:14px;background:none!important}
  .oh-t td::before{content:attr(data-l);color:#777;font-size:12.5px;flex:none}
}
.lg-ftr{font-size:12px;color:#666;padding:12px 0;border-top:1px solid #cfd5d1;background:#f4f5f4}
.lg-ftr a{color:#555}