.cf-root .cf-expense-detail-trigger{display:inline;padding:0;min-height:0;border:0;border-radius:3px;background:none;color:inherit;font:inherit;line-height:inherit;text-align:left;cursor:help;text-decoration:underline dotted #8baabe66;text-underline-offset:4px}
.cf-root .cf-expense-detail-trigger:hover,.cf-root .cf-expense-detail-trigger:focus-visible{color:#a5f0d4;text-decoration-color:currentColor;outline:1px solid #70d8b6;outline-offset:4px}
.cf-monthly-expense-detail{position:fixed;z-index:10020;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;padding:18px;border:1px solid #52768c;border-radius:12px;background:#101e2d;color:#e8f0f7;box-shadow:0 18px 60px #0009;font:13px/1.5 system-ui,sans-serif;color-scheme:dark}
.cf-monthly-expense-detail[hidden]{display:none}
.cf-monthly-expense-detail header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cf-monthly-expense-detail header small{font-size:10px;letter-spacing:1px;color:#8ba9bf}
.cf-monthly-expense-detail h3{margin:2px 0 10px;font-size:18px;color:#e8f0f7}
.cf-monthly-expense-detail header button{flex:none;width:30px;height:30px;border:1px solid #4c6c81;border-radius:6px;background:#20374a;color:#e8f0f7;font-size:22px;cursor:pointer}
.cf-md-period{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#a7bdcc}
.cf-md-period select{padding:5px 10px;border:1px solid #4c6c81;border-radius:6px;background:#172d40;color:#e8f0f7;font:inherit}
.cf-md-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cf-md-totals div{padding:10px 12px;border:1px solid #304d62;border-radius:7px;background:#172e41}
.cf-md-totals span{display:block;color:#acc1d2;font-size:11px}.cf-md-totals strong{display:block;font-size:18px;font-variant-numeric:tabular-nums;color:#a5f0d4}
.cf-md-note,.cf-md-hint{margin:10px 0;color:#abc0d0;font-size:11px}.cf-md-hint{margin-bottom:0}
.cf-md-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid #304d62;border-radius:7px}
.cf-monthly-expense-detail table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
.cf-monthly-expense-detail th,.cf-monthly-expense-detail td{padding:9px 10px;border-bottom:1px solid #294457;text-align:right;vertical-align:top;overflow-wrap:anywhere}
.cf-monthly-expense-detail thead th{position:sticky;top:0;z-index:1;background:#20394d;color:#c9deed;font-size:10px;text-transform:uppercase}
.cf-monthly-expense-detail th:first-child,.cf-monthly-expense-detail td:first-child{text-align:left;width:40%}
.cf-monthly-expense-detail th:nth-child(2),.cf-monthly-expense-detail td:nth-child(2){text-align:left;width:18%}
.cf-monthly-expense-detail td:nth-child(n+3){font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-monthly-expense-detail td strong,.cf-monthly-expense-detail td span,.cf-monthly-expense-detail td small{display:block}
.cf-monthly-expense-detail td strong{color:#d6f0ff}.cf-monthly-expense-detail td small{margin-top:3px;font-size:10px;color:#a2bbce}.cf-monthly-expense-detail td .cf-md-paid{color:#92dfbb}.cf-monthly-expense-detail td .cf-md-pending{color:#f1c985}
.cf-monthly-expense-detail tfoot th,.cf-monthly-expense-detail tfoot td{position:sticky;bottom:0;background:#203e47;font-weight:700;color:#b5f1d9}
.cf-monthly-expense-detail .cf-md-empty{text-align:center;padding:24px;color:#acc1d2}
@media(max-width:560px){.cf-monthly-expense-detail{padding:12px}.cf-md-totals{gap:5px}.cf-md-totals div{padding:7px}.cf-md-totals strong{font-size:14px}.cf-monthly-expense-detail table{min-width:580px}.cf-md-scroll{overflow-x:auto}}