/* What v1 got from JS widgets (select2, datepicker) and v3 gets from CSS. */
select.form-control.custom-select { -webkit-appearance: none; appearance: none; padding-right: 30px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='none' stroke='%23385487' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center; text-overflow: ellipsis; }
input[type=date].form-control::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.btn-link:hover { color: inherit; }
.mainmenu-account.active .mainmenu-accountmenu { display: block; }
.btn-group.open > .dropdown-menu { display: block; }
.control-pagination a, .control-pagination span.page-first, .control-pagination span.page-back, .control-pagination span.page-next, .control-pagination span.page-last { cursor: pointer; }
.list-header form { margin: 0; }
tr[data-href] { cursor: pointer; }
.upload-box { display: flex; align-items: center; justify-content: center; height: 100px; border: 2px dashed #b7bfc4; color: #bdc3c7; font-size: 22px; cursor: pointer; }
nav#layout-mainmenu ul li.mainmenu-account.active .mainmenu-accountmenu { display: block; }
nav#layout-mainmenu ul li .mainmenu-accountmenu li form button { display: block; padding: 10px 30px !important; font-size: 14px; color: #666; }
nav#layout-mainmenu ul li .mainmenu-accountmenu li form button:hover { background: #4ea5e0 !important; color: #fff; }
/* v1 kept messages outside #layout-canvas, whose CSS hides them; v3 renders them inside. */
#layout-canvas .flash-message.in { display: block; position: fixed; z-index: 9000; }
/* The search box grows to the left, as v1's JS kept it on screen. */
.toolbar-item .size-input-text, .toolbar-item .size-input-text form { display: flex; justify-content: flex-end; }
.toolbar-item .size-input-text input.growable { flex: 0 0 auto; transition: width .2s; }
/* List filter popovers */
.filter-popover { position: absolute; top: 100%; left: 0; z-index: 400; min-width: 230px; padding: 14px; margin-top: 2px; background: #fff; border-radius: 3px; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.filter-popover .checkbox { margin: 0 0 8px; }
.filter-popover-dates { display: flex; gap: 10px; }
.filter-popover-dates label { flex: 1; font-size: 12px; font-weight: 400; margin: 0; min-width: 150px; }
.filter-popover-dates .form-control { margin-top: 4px; height: 34px; padding: 4px 8px; }
.filter-popover-actions { display: flex; gap: 8px; margin-top: 12px; }
.control-filter > a.filter-reset:after { content: none !important; }
.control-filter > a.filter-reset { color: #c0392b; }
.modal-open { overflow: hidden; }
.control-filter .filter-scope { display: inline-block; padding: 10px; }
.control-filter a.filter-scope .filter-label { margin-right: 5px; }
.control-filter a.filter-scope .filter-setting { display: inline-block; margin-right: 5px; }
.control-filter a.filter-scope.active .filter-setting { padding: 0 5px; color: #fff; background: #6aab55; border-radius: 4px; }
.control-filter a.filter-scope:not(.filter-reset):after { content: "\f107"; font-family: FontAwesome; font-size: 14px; }
.control-filter a.filter-scope:hover { color: #000; }
/* Deposit tab: white on v1's green. */
.nav-tabs > li.diposit-now > a, .nav-tabs > li.diposit-now > a:hover, .nav-tabs > li.diposit-now.active > a { color: #fff !important; }
/* Savings months: July to June, six per row on desktop so a full year takes two rows. */
.month-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.month-grid .checkbox { margin: 0; }
@media (min-width: 992px) { .month-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Receipt preview, with a remove button as v1's upload widget had. */
.upload-preview { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 6px; border: 1px solid #d1d6d9; }
.upload-preview img { display: block; max-width: 100%; max-height: 220px; }
.upload-preview-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .6); line-height: 26px; cursor: pointer; }
.upload-preview-remove:hover { background: #c0392b; }