html, body, .wrapper {
height: 99.5%;
min-height: 99.5%;
}
.wrapper {
display: flex;
overflow: hidden;
flex-direction: column;
}
/*HEADER*/
.alert p{
margin-bottom:2px;
}
.btn-white{
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.myAlert-top{
position: fixed;
top: 5px;
left:2%;
width: 96%;
z-index:9999;
display:none;
}
.navbar {
padding-left: 0;
padding-right: 0;
}
.navbar-brand {
position: relative;
float: left;
margin: 0;
padding: 0;
}
.navbar-brand > * {
display: inline-block;
}
.navbar-brand h2 {
font-size: 18px;
color: var(--pink1);
line-height: 42px;
margin-left: 20px;
}
h2 {
font-family: Montserrat, Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
#nav i.fa-bar {
display: inline-block;
color: #313131;
font-size: 16px;
font-family: i;
font-weight: 400;
line-height: 20px;
letter-spacing: normal;
}
#nav > ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
line-height: 42px;
}
#nav > ul > li {
position: relative;
float: left;
margin: 0;
padding: 0 0 0 32px;
}
#nav > ul > li > a i {
display: block;
float: left;
font-size: 30px;
line-height: 42px;
color: #8c9dad;
}
a i.fa-plus-square {
color: var(--pink1) !important;
font-size: 2.3rem;
}
#nav li.nav-badge {
position: relative;
display: inline-block;
}
#nav li.nav-badge span {
position: absolute;
right: -10px;
top: 0px;
width: 20px;
height: 20px;
background: #df571b;
text-align: center;
border-radius: 50%;
color: white;
font-size: 12px;
line-height: 20px;
}
#nav > ul > li > a img {
display: block;
float: left;
margin: 0 14px 0 32px;
box-shadow: 0 3px 0 rgba(0, 0, 0, .16);
border-radius: 50%;
border: 1px solid #5a5959;
}
/*COLUMN LEFT*/
.left-column {
padding-top: 20px;
box-shadow: none;
border-radius: 20px 0 0 0;
background: #f6f6f6;
opacity:0;
}
.left-column > div.column-header, .left-column > div.column-body, .right-column {
padding-left: 20px;
padding-right: 20px;
}
.left-column th, .left-column td {
position: relative;
z-index: 2;
padding: 8px 14px;
border: 0 solid #e3e3e3;
border-bottom-width: 1px;
font-weight: 400;
text-align: left;
vertical-align: top;
color: #25435f;
font-family: Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
line-height: 1.35714285714;
}
td.overlay-n {
color: #315f25;
}
table.tree-table {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border-top: 1px solid #e3e3e3;
font-size: 0.8 rem;
}
.tree-table i {
display: inline-block;
position: relative;
top: 2px;
margin: 0 4px 0px 0px;
color: #8c9dad;
font-size: 14px;
line-height: 1px;
}
th {
padding-top: 16px;
padding-bottom: 16px;
}
.list-bottom {
position: relative;
z-index: 2;
list-style: none;
margin: 0;
padding: 0;
box-shadow: 5px 0px 15px rgb(205, 205, 248);
background: #fbfbfe;
text-align: center;
display: flex;
}
.list-bottom li a {
display:block;
}
.list-bottom li {
flex-grow: 3;
}
.list-bottom li.active {
background: white;
padding:0;
box-shadow: 0 0 10px 0.1px rgba(0,0,0,.16);
background-color: white;
transform: scale(0.6, 1.2);
}
.list-bottom li.active i {
transform: scaleX(1.9);
}
.list-bottom i {
color: #8c9dad;
font-size: 26px;
line-height: 48px;
}
/*TABLES*/
table.dataTable, table.dataTable th, table.dataTable td {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.table-a tr[role="row"] {
cursor:pointer;
}
table.row-details {
width:80%;
margin:0 auto;
}
table.row-details td {
padding: 0 5px;
border: none;
}
/*BUTTONS*/
#info-buttons .list-box {
list-style: none;
padding: 0;
color: rgba(163, 175, 175, .97);
font-weight: 600;
text-align: center;
flex:1 1 auto;
}
#info-buttons .list-box li {
position: relative;
margin: 5px 0;
padding: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
border-radius: 3px;
background: #fefcfd;
}
#info-buttons .list-box a {
display: block;
color: rgba(163, 175, 175, .97);
text-decoration: none;
}
.module-info > div {
border-radius: 8px;
background: #f5f5f5;
color: #a5a6a8;
height: 100%;
padding: 15px 0;
}
.module-info {
}
/* FORMS AND MODALS*/
.invalid-feedback{
position:absolute;
}
.custom-control-label::before, .custom-control-label::after {
top:0.65rem;
}
.custom-control-label{
padding-right:10px;
text-align:right;
}
.row > .table-button{
position: absolute;
z-index: 10;
right: 20px;
top: 22px;
}
.deleteButton{
color: #dc3545;
text-decoration: none !important;
}
.deleteButton:hover{
color: #dc3545;
}
.bootbox-body{
font-size: 1rem;
}
.bootbox-form .checkbox{
padding: 20px;
border: 1px solid;
border-color: #e2e2e2;
border-radius: 10px;
margin: 5px;
}
.bootbox-input-checkbox{
margin: 10px;
}
.bootbox-close-button{
box-shadow: none;
}
.modal{
pointer-events:none;
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.modal-content{
box-shadow: 4px 8px 20px rgb(234, 234, 248);
border-radius: 20px;
background: #fff;
border:none;
border-top: 1px solid #dadce0;
}
.checkbox-right::before, .checkbox-right::after{
left:auto;
right:0;
margin-right: 0 !important;
}
.checkbox-right{
padding-right:20px;
}
.nav-pills a{
text-transform: uppercase;
font-size:1em;
font-weight:600;
}
.form-group label {
display: block;
color: #8e9a94;
font-weight: 600;
line-height: 36px;
font-size: 1em;
}
.form-group div[class^='field'], .form-group div[class*=' field']{
padding:0;
}
/*MODALS*/
.btn-round{
line-height:92%;
border-radius: 20px;
}
.modal-dialog-centered{
left: 0;
}
.modal-h {
cursor: move;
}
/* Grid description fields: auto-growing, wrapping textarea (replaces the
single-line input so long text shows in full across multiple lines).
Styled to match the other cell inputs: only a bottom line, no focus box. */
textarea.grid-desc-wrap {
width: 100%;
min-height: 1.7em;
margin: 0;
padding: 4px 2px;
border: 0;
border-bottom: 1px solid #cdcdcd;
background: transparent;
font: inherit;
line-height: 1.4;
resize: none;
overflow: hidden;
white-space: pre-wrap;
word-break: break-word;
box-sizing: border-box;
vertical-align: top;
outline: none;
box-shadow: none;
}
textarea.grid-desc-wrap:focus { outline: none; box-shadow: none; border-bottom-color: #4ec1fd; }
/* Non-posting grid column resizing: fixed layout + drag handle on header cells. */
.npTable { table-layout: fixed; }
.npTable thead th { position: relative; }
.npTable thead th .np-col-resize {
position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
cursor: col-resize; z-index: 5; user-select: none;
}
.modal-header ul{
list-style: none;
font-size:1.25rem;
display:inline-block;
margin-right:20px;
margin-bottom:0 !important;
}
.modal-lg {
max-width: 900px;
}
.modal-md-special {
max-width: 650px;
}
.modal-md-plus {
max-width: 720px;
}
/* FLEX */
.content-wrapper {
flex: 1 1 100%;
max-width: 1500px;
margin: 0 auto;
}
.nav-wrapper {
flex: 0;
}
.column-wrapper {
display: flex;
overflow: hidden;
flex-direction: column;
height: 100%;
}
.column-wrapper > div {
flex: 0 0 auto;
}
.column-wrapper > .column-body {
flex: 1 1 0;
overflow-y: scroll;
}
.h100 {
height: 100%;
}
.no-flex {
flex: 0 !important;
}
.no-overflow {
overflow: hidden !important;
}
.box-list > div {
padding: 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:10px 0;
}
.box-list > div >.title{
color:var(--pink1);
font-size:1rem;
text-transform: uppercase;
font-weight: 600;
}
.cpopup{
position:absolute;
display:none;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
background: #fff;
padding: 15px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index:9999;
min-height: 200px;
}
.cpopup .title{
color:var(--pink1);
font-weight: 600;
margin-bottom:0.5rem;
}
/*MOBILE MENU*/
#mob-nav ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
color: #fff;
z-index: 99;
}
#mob-nav > ul > li {
position: relative;
float: none;
margin: 0;
border-bottom: 1px solid rgba(0,0,0,.1);
font-size: 1.6em;
z-index: 99;
}
#mob-nav > ul > li > a {
display: block;
overflow: hidden;
position: relative;
z-index: 99;
float: none;
padding: 8px 20px;
color: #25435f;
text-transform: none;
text-decoration: none;
}
#mob-nav > ul > li > a span {
display: block;
position: absolute;
right: 20px;
top: 11.5px;
min-width: 18px;
height: 18px;
box-shadow: 0 3px 14px rgba(0,0,0,.16);
border-radius: 9px;
background: #1bdf1b;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
#mob-nav {
padding-left: 68px;
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 9;
height: 50px;
box-shadow: 0 0 4px rgba(0,0,0,.1);
background-color: #4cccbf;
color: #fff;
}
#mob-nav .navbar-brand a, #mob-nav h2 {
color: #fff !important;
margin-bottom: 0;
}
#slide-navbar-collapse {
position: fixed;
top: 0;
left: 0px;
z-index: 99;
height: 100%;
background-color: #ddd;
overflow: auto;
width: 240px;
box-shadow: 0 0 5px rgba(0,0,0,.25);
background: #fff;
line-height: 1.55;
}
.menu-overlay {
display: none;
background-color: #000;
bottom: 0;
left: 0;
opacity: 0.5;
filter: alpha(opacity=50);
/* IE7 & 8 */
position: fixed;
right: 0;
top: 0;
z-index: 49;
}
/*Left NavBar*/
.navbar-fixed-left {
width: 57px;
position: fixed;
border-radius: 0;
height: 100%;
box-shadow: 1px 0 36px rgba(0,0,0,.16);
background-color: #4cccbf;
bottom: 0;
left: 0;
z-index: 8;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
}
.navbar-fixed-left + .wrapper {
padding-left: 100px;
}
.navbar-fixed-left ul {
-webkit-justify-content: space-between;
display: flex;
justify-content: space-between;
flex-direction: column;
position: absolute;
left: 0;
top: 184px;
right: 0;
bottom: 26px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.navbar-fixed-left > ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
}
.navbar-fixed-left > ul li a i {
display: block;
font-size: 33px;
line-height: 35px;
}
#logo {
position: fixed;
left: 0;
top: 10px;
z-index: 1001;
margin: 0;
}
#logo a {
display: block;
overflow: hidden;
width: 96px;
height: 84px;
box-shadow: 0 3px 6px rgba(0,0,0,.16);
border-radius: 0 10px 10px 0;
background: url(../images/logo.svg) center center no-repeat #fff;
background-size: 76px auto;
text-align: left;
text-indent: -3000em;
z-index: 1001;
}
#logo a.expand {
display: block;
overflow: hidden;
width: 190px;
height: 84px;
box-shadow: 0 0 0;
border-radius: 0 0 0 0;
background: url(../images/logo.svg) center center no-repeat #fff;
background-size: 76px auto;
text-align: left;
text-indent: -3000em;
z-index: 1001;
}
@media only screen and (max-width: 768px) {
.wrapper {
margin-top: 70px;
}
.navbar-fixed-left + .wrapper {
padding-left: 0;
}
#logo a {
width: 58px;
height: 50px;
border-width: 0;
background-size: 47px auto;
}
.navbar-fixed-left > ul {
position: relative;
top: 0;
bottom: 0;
padding: 0;
-webkit-flex-direction: row;
flex-direction: row;
width: 100%;
}
.navbar-fixed-left {
top: auto;
right: 0;
width: auto;
height: 50px;
}
.navbar-fixed-left > ul li {
-webkit-flex-grow: 3;
-ms-flex-grow: 3;
flex-grow: 3;
}
.navbar-fixed-left > ul li a i {
line-height: 50px;
}
}
@media only screen and (max-width: 992px) {
#logo a {
width: 50px;
background-size: 40px auto;
}
}
@media only screen and (max-width: 1200px) {
#logo a {
width: 57px;
height: 49px;
box-shadow: none;
border-width: 0;
border-right-width: 1px;
border-radius: 0;
background-size: 45px auto;
}
#logo {
top: 0;
}
}
/*scrollbar*/
::-webkit-scrollbar {
width: 5px;
height: 5px;
border-radius: 5px;
opacity: .5;
}
::-webkit-scrollbar-track {
border-radius: 5px;
background: #f9f9fe;;
opacity: .5;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.dataTables_scrollBody {
}
.dataTables_scrollBody::-webkit-scrollbar-thumb, .left-column .column-body::-webkit-scrollbar-thumb {
background: #f6f6f6;
}
.dataTables_scrollBody:hover::-webkit-scrollbar-thumb, .left-column .column-body:hover::-webkit-scrollbar-thumb {
background: #888;
}
/*RESPONSIVE*/
@media (max-width: 991px) {
.column-wrapper, .wrapper {
display: block;
}
html, body, .wrapper {
height: 100%;
}
html, body, .wrapper {
height: auto;
}
.h100 > div {
margin-bottom: 20px;
}
.h100 > div:last-of-type {
margin-bottom: 50px;
}
.h100 {
height: auto;
}
}
@media (min-width: 576px) {
.modal-xl {
width: 95%;
}
}
@media (min-width: 768px) {
.modal-xl {
width: 90%;
max-width: 90%;
}
}
/*new added*/
.accountTableColor{
background-color:var(--pink1);
border-color:var(--pink1);
}
.accountNavColor{
color:var(--pink1);
}
/*.leftActive{
border: 2px solid green;
}
tr.branch td:active {
background-color: yellow;
}*/
.activeBox {
/*background-color: yellow;*/
}
.trial{
color: #fff;
background-color: var(--pink1);
}
tr:focus {
background-color: white;
border-right: 1px solid var(--pink1);
outline: none;
}
.es-list{
color: #878A89
}
.es-list li.nested1{
padding-left:20px;
}
.es-list li.nested2{
padding-left:30px;
}
.es-list li.nested3{
padding-left:40px;
}
.box-list{
font-size:1.5em;
}
.box-list div{
align-items: center;
}
.box-list .form-group{
margin-bottom: 0;
}
.box-list a {
font-size:1.5em;
}
.box-list a.delete-option{
color:red;
position:absolute;
top:7px;
right:-20px;
border-radius: 50%;
background:white;
}
.box-list a.delete-field{
color:red;
position:absolute;
top:7px;
right:5px;
border-radius: 50%;
background:white;
z-index:2;
}
.box-list a.add-option{
color:green;
position:absolute;
top: 7px;
right:-20px;
border-radius: 50%;
background:white;
}
.box-list div.row>.field-input{
padding: 0 3px;
}
.left-ul{
list-style:none;
}
.left-ul li{
display:block;
padding:15px;
font-size:2em;
}
script {
display:none !important;
}
.ui-datepicker { z-index: 9999 !important; }
#ui-datepicker-div { width: 250px; }
.tree-table tbody {
display:block;
height:calc(100vh - 320px);
overflow-y:auto;
overflow-x:hidden;
}
.tree-table thead, .tree-table tbody tr, .scroll-table tbody tr, .scroll-table thead {
display:table;
width:100%;
table-layout:fixed;
}
.tree-table thead {
width: calc( 100% )
}
.tree-table {
width:355px;
opacity: 0;
}
aside.left-side.noajax .tree-table {
opacity: 1;
}
aside.left-side {
opacity: 0;
}
aside.left-side.noajax {
opacity: 1;
}
.dataTables_scrollBody{
height:calc(100vh - 485px);
/*overflow: auto;*/
background-color: #fdfdfd;
}
.table-wrapper{
overflow-y: hidden;
}
.table-wrapper:hover{
overflow-y: auto;
}
/*fix size select */
.es-list li {
padding: 5px 15px;
font-size: 1em;
}
/*fix extra borders on transactions table */
.dataTable {
border-width: 0px;
}
.tree-table th {
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #e8e9eb;
}
.tree-table tbody tr td:first-child{
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
max-width: 250px;
}
.tree-table tbody tr:hover > td:nth-child(2){
transition: .5s ease;
/* display:none; */
}
.tree-table tbody tr:hover > td:first-child{
transition: 1s ease;
overflow: visible;
/* width: 75%; */
}
.tree-table tbody tr:hover {
background-color: white;
border-right: 1px solid var(--pink1);
box-shadow: 1px 0 15px rgba(191,191,191,.7);
}
.tree-table tbody tr[data-type="property"] td:first-child,
.tree-table tbody tr[data-type="tenant"] td:first-child{
width:65%;
}
.tree-table tbody tr[data-type="account"] td:first-child,
.tree-table tbody tr[data-type="unit"] td:first-child{
width:50%;
}
.tree-table tbody tr[data-type="lease"] td:first-child{
width:30%;
}
.tree-table tbody tr[data-type="lease"] td:nth-child(2){
/* overflow: hidden; */
text-overflow: ellipsis;
white-space:nowrap;
width:15%
}
.tree-table tbody tr[data-type="lease"] td:nth-child(3){
width:35%;
}
.tree-table tbody tr[data-type="property"]:hover > td:first-child,
.tree-table tbody tr[data-type="account"]:hover > td:first-child,
.tree-table tbody tr[data-type="tenant"]:hover > td:first-child{
transition: 1s ease;
overflow: visible;
width: 85%;
}
.tree-table tbody tr[data-type="unit"]:hover > td:first-child,
.tree-table tbody tr[data-type="lease"]:hover > td:first-child{
transition: 1s ease;
overflow: visible;
width: 70%;
}
.tree-table tbody tr[data-type="account"]:hover > td:nth-child(2),
.tree-table tbody tr[data-type="lease"]:hover > td:nth-child(2){
transition: .5s ease;
display:none;
}
@keyframes expandLeft {
0% { width: 69px;}
91% { width: 190px;}
100% { width: 190px;}
}
@keyframes expand {
0% {opacity: .1;}
90% {opacity: .9;}
100% { opacity: 1;}
}
@keyframes fadeLeft {
0% {opacity: .1; margin-left: 200px;}
90% {opacity: .9; margin-left: -5px;}
100% {opacity: 1; margin-left: 0px;}
}
@keyframes fadeUp {
0% {opacity: .1; margin-top: 500px;}
95% {opacity: .9; margin-top: -5px;}
100% {opacity: 1; margin-top: 10px;}
}
@keyframes fade {
0% {opacity: .1; }
90% {opacity: .9; }
100% {opacity: 1; }
}
.tabcontent{
margin-top: 10px;
}
.module-info{
-webkit-animation-name: fadeLeft;
-webkit-animation-duration: .8s;
animation-name: fadeLeft;
animation-duration: .8s;
}
#aside:hover, #aside.expand{
-webkit-animation-name: expandLeft;
-webkit-animation-duration: .6s;
animation-name: expandLeft;
animation-duration: .6s;
width: 190px;
}
#aside:hover a span, #aside.expand a span {
-webkit-animation-name: expand;
-webkit-animation-duration: 3s;
animation-name: expand;
animation-duration: 3s;
display: inline-block;
}
#aside a span {
-webkit-animation-name: expand;
-webkit-animation-duration: 5s;
animation-name: expand;
animation-duration: 5s;
display: none;
left:0;
}
.list-horizontal li.active a {
transition: background .5s ease, color .5s ease, box-shadow .5s ease;
}
#aside ul li {
padding: 6px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
margin-left: 5px;
}
#aside ul li:hover, #aside ul li.active {
background-color: white;
}
#aside ul li:hover, #aside ul li.active {
transition: 1s ease-out;
padding-left: 15px;
}
#aside ul li:hover a, #aside ul li.active a {
color: var(--pink1);
}
.newAlert{
text-align: center;
border-radius: 5px;
margin: 20px auto;
vertical-align: middle;
height: 378px;
width: 478px;
background-color: white;
box-shadow: 1px 0 15px rgba(191,191,191,.7);
font-size: 40px;
padding: 25px;
-webkit-animation-name: fadeUp;
-webkit-animation-duration: .5s;
animation-name: fadeUp;
animation-duration: .5s;
position: fixed;
top: 15%;
left: 35%;
z-index: 9999;
display: none;}
.newAlert.alert-danger{
color:red;
}
.alert-icon{
height: 50%;
}
.alert-title{
color: rgba(0,0,0,.65);
font-weight: 600;
text-transform: none;
position: relative;
display: block;
padding: 13px 16px;
font-size: 27px;
line-height: normal;
text-align: center;
}
.alert-body {
font-size: 16px;
position: relative;
float: none;
line-height: normal;
vertical-align: top;
text-align: left;
display: inline-block;
margin: 0;
padding: 0 10px;
font-weight: 400;
color: rgba(0,0,0,.64);
overflow-wrap: break-word;
box-sizing: border-box;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
}
.hide{
display:none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before, .sa-icon.sa-success::after {
content: '';
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
-webkit-border-radius: 120px 0 0 120px;
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
-webkit-border-radius: 0 120px 120px 0;
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
.sa-icon.sa-success {
border-color: transparent\9;
}
.sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9;
}
.sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9;
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
@-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
@-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Self-contained success checkmark (replaces the old .sa-success stack, which
was fragile against global styles and rendered a mangled check). Pure SVG +
stroke-draw animation, immune to outside CSS. */
.success-checkmark {
display: block;
width: 80px;
height: 80px;
margin: 0 auto;
}
.success-checkmark__circle {
fill: none;
stroke: #4CAF50;
stroke-width: 4;
opacity: .5;
stroke-dasharray: 226;
stroke-dashoffset: 226;
animation: successCircleDraw .6s ease forwards;
}
.success-checkmark__check {
fill: none;
stroke: #4CAF50;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: successCheckDraw .35s .5s ease forwards;
}
@keyframes successCircleDraw { to { stroke-dashoffset: 0; } }
@keyframes successCheckDraw { to { stroke-dashoffset: 0; } }
#percentage {
text-align:left !important;
}
@-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
@keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
.popup-checkbox-div{
position: absolute;
right: 220px;
top: -105px;
z-index: 1002;
width: 260px;
padding: 13px 30px 0;
box-shadow: 4px 8px 27px rgba(0,0,0,.16);
border-radius: 18px;
background: #fcfcfc;
text-align: left;
}
.popup-checkbox-div-management{
position: absolute;
right: 170px;
/* top: -105px; */
z-index: 1002;
width: 260px;
padding: 13px 30px 0;
box-shadow: 4px 8px 27px rgba(0,0,0,.16);
border-radius: 18px;
background: #fcfcfc;
text-align: left;
}
.popup-checkbox-div ul {
overflow-x: hidden;
overflow-y: auto;
max-height: 220px;
margin: 0 -24px 7px 0;
font-family: Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
}
.popup-checkbox-div ul li{
display: block;
float: none;
margin: 0;
padding: 8.5px 0;
font-size: 16px;
}
#root .list-input li .popup-checkbox-div ul li label{
padding-left: 32px;
line-height: 1.35714285714;
text-align: left;
left: 0px;
}
.popup-checkbox-div h4{
text-transform: none;
}
table.dataTable thead th {
border:none;
}
.list-bottom li a:hover{
font-size: 30px !important;
background-color: white;
}
#root .table-c.d.dataTable tr:hover {
box-shadow: 1px 0 15px rgba(0,0,0,.16);
background: #fafafa;
}
.table-c.c .input-amount input:disabled {
border-bottom: none;
color: #818481;
}
.table-b-wrapper {
box-shadow: 1px 7px 7px rgb(230, 230, 236);
}
.table-b th {
font-weight: 400;
}
.table-b tr:hover {
background-color: #fff;
/* box-shadow: 0px 0px 20px #88888861; */
/* height: */
}
#statementsprint.table-b tr {
background-color: #fff;
/* box-shadow: 0px 0px 20px #88888861; */
/* height: */
}
.table-b td {
width: 7%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.context-menu {
display: none;
position: absolute;
z-index: 911110;
padding: 12px 0;
width: 240px;
background-color: #fff;
border: solid 1px #dfdfdf;
box-shadow: 1px 1px 2px #cfcfcf;
}
.context-menu--active {
display: block;
}
.context-menu__items {
list-style: none;
margin: 0;
padding: 0;
}
.context-menu__item {
display: block;
margin-bottom: 4px;
}
.context-menu__item:last-child {
margin-bottom: 0;
}
.context-menu__link {
display: block;
padding: 4px 12px;
color: #0066aa;
text-decoration: none;
}
.context-menu__link:hover {
color: #fff;
background-color: #0066aa;
}
.report-modal footer, .report-modal header, .report-modal section{
flex: 0 0 auto;
}
.report-modal .modal-dialog {
height:90%;
}
.report-modal #root form {
display:flex;
flex-direction: column;
}
.report-modal section label, .report-modal section a, .report-modal section span{
color: var(--pink1);
font-size: 14px;
}
.report-modal section a, .report-modal section div > span{
font-weight:800;
}
.report-modal section #reports-filters{
padding-top:10px;
}
.report-modal section label{
white-space: nowrap;
}
/*.report-modal section input{
max-width: 120px;
}*/
.report-modal section input span{ font-weight: normal;}
.report-modal table th{
color: rgba(0,0,0,.87);
}
/* Permissions */
.table-bordered thead th{
border: 1px solid #dee2e6;
}
.permissions * {
vertical-align: middle;
}
.permissions td {
color: #25435f;
}
.p-standard {
display: inline-block;
margin-bottom: 0;
}
.p-standard-label{
padding-right: 0;
}
.custom-control-input:focus~.custom-control-label::before{
box-shadow:none;
}
.custom-control{
min-height: 2rem;
}
@media print {
.page-break {page-break-before: always; }
}
.parameters input{
padding:5px;
height:auto;
background:none;
line-height:14px;
}
.parameters label{
font-weight: 700;
margin-top:5px;
}
.parameters > *{
margin-left:8px;
}
.form-charge section > div.cpopup{
visibility: visible;
opacity: 1;
}
.cell-effort-driven {
text-align: center;
}
.slick-cell .toggle {
background-position: left center;
background-repeat: no-repeat;
display: inline-block !important;
text-decoration: none;
width: 19px;
height:10px;
}
.toggle.expand {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAHlJREFUeNrcU1sNgDAQ6wgmcAM2MICGGlg1gJnNzWQcvwQGy1j4oUl/7tH0mpwzM7SgQyO+EZAUWh2MkkzSWhJwuRAlHYsJwEwyvs1gABDuzqoJcTw5qxaIJN0bgQRgIjnlmn1heSO5PE6Y2YXe+5Cr5+h++gs12AcAS6FS+7YOsj4AAAAASUVORK5CYII=);
}
.toggle.collapse {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAHFJREFUeNpi/P//PwMlgImBQsA44C6gvhfa29v3MzAwOODRc6CystIRbxi0t7fjDJjKykpGYrwwi1hxnLHQ3t7+jIGBQRJJ6HllZaUUKYEYRYBPOB0gBShKwKGA////48VtbW3/8clTnBIH3gCKkzJgAGvBX0dDm0sCAAAAAElFTkSuQmCC);
}
tr.notr{
display:block;
}
.tree-table {
height:100%;
}
.tree-table *{
color: #25435f ;
}
.tree-table .greenTd{
color:#0fa531;
}
/*
SlickGrid custom styles
*/
.ui-widget-content.slick-row > .slick-cell {
cursor: pointer;
padding: 0;
padding: 7px 14px;
}
.ui-widget-content.slick-row:hover {
background-color: white;
border-right: 1px solid var(--pink1);
box-shadow: 1px 0 15px rgb(215, 215, 248);
}
ui-widget-content.slick-row{
}
.slick-header-column-sorted {
font-style: normal;
}
.ui-widget-content.slick-row.active {
background-color: white;
border-right: 1px solid var(--pink1);
}
.formGridTable tbody, .formGridTable thead, .formGridTable tr {
display: block;
/* width: 900px; */
}
.formGridTable tr {
min-width:900px;
}
.formGridTable {
display:flex;
flex-direction: column;
}
.formGridTable th:hover{
-moz-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.103);
-webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.103);
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.103);
}
.flexmodal .formGridTable{
display: block;
}
.formGridTable tbody {
flex: 1 1;
}
.formGridTable thead, .formGridTable tfoot {
flex: 0 0;
}
.formGridTable tr {
/* display:flex; */
/* flex-direction:row; */
}
.formGridTable td, .formGridTable th {
flex:1;
}
.slick-footer{
border-top:1px solid #000 !important;
}
.slick-footer .slick-cell {
font-weight:600;
}
/*--FLEXBOX FOR MODALS--*/
.modal.flexmodal .modal-dialog {
height: 95%;
}
.modal.flexmodal .modal-content, .modal.flexmodal .modalContent{
height: 100vh;
}
.modal.flexmodal .modal-dialog #root{
height: 100%;
min-height: 0;
padding: 20px;
}
.modal.flexmodal .modal-dialog .popup-a{
position:relative;
left: auto;
right:auto;
}
.modal.flexmodal form{
height: 100%;
display:flex;
flex-direction: column;
}
.modal.flexmodal form > div.has-table-c {
flex: 1 1;
overflow: hidden;
border-radius: 5px;
}
.modal.flexmodal form > div.tabFunction {
flex: 1 1;
display:flex;
flex-direction: column;
}
.modal.flexmodal form > div.tabFunction > nav {
flex: 0 0;
}
.modal.flexmodal form > div.tabFunction > div.tabcontent {
flex: 1 1;
overflow: hidden;
}
.modal.flexmodal form table {
/*height:100%; */
overflow: hidden;
}
.modal.flexmodal form table tbody {
/*height:100%; */
height: calc(100vh - 600px);
}
.modal.flexmodal form table.tableGridTable, .modal.flexmodal form table.tableGridTable tbody{
height:100%;
}
.modal.flexmodal footer .list-btn {
height: 50px;
}
table.flex-table {
display: flex;
flex-direction: column;
height: 100%;
}
table.flex-table thead,
table.flex-table tbody {
display: block;
}
table.flex-table thead {
margin-right: 0px;
}
table.flex-table tbody {
flex: 1;
overflow-y: scroll;
}
table.flex-table tr {
width: 100%;
display: flex;
}
table.flex-table tr td,
table.flex-table tr th {
display: flex;
flex: 1;
align-items:center;
justify-content:left;
}
table.flex-table.action-column tr td:last-child, table.flex-table.action-column tr th:last-child {
flex: 0 0 auto;
}
/*--END OF FLEXBOX FOR MODALS--*/
#minMaxCloseBox{
z-index: 1000;
display: block;
position: fixed;
right: 0px;
top: 45%;
height:75px;
width:20px;
}
@keyframes expandLeft2 {
0% { width: 0px;}
100% { width: 220px;}
}
@keyframes expandLeft3 {
0% { width: 0px;}
100% { width: 200px;}
}
@keyframes expandLeft4 {
0% { width: 0px;}
100% { width: 1000px;}
}
#minMaxCloseBox:hover, #minMaxCloseBox.expanded{
-webkit-animation-name: expandLeft2;
-webkit-animation-duration: .5s;
animation-name: expandLeft2;
animation-duration: .5s;
width:220px;
height: 80%;
}
#minMaxCloseBox:hover ul, #minMaxCloseBox.expanded ul{
-webkit-animation-name: expandLeft3;
-webkit-animation-duration: .5s;
animation-name: expandLeft3;
animation-duration: .5s;
background-color: rgba(255, 255, 255, 0.9);
z-index: 1000;
display: block;
width:200px;
position: fixed;
right: 0px;
top: 15%;
height: 80%;
border-radius: 5px 0px 5px 5px;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.16) 2px 2px 10px;
}
#rightPopup{
-webkit-animation-name: expandLeft4;
-webkit-animation-duration: .5s;
animation-name: expandLeft4;
animation-duration: .5s;
background-color: rgba(255, 255, 255, 0.9);
display: block;
width:1000px;
position: fixed;
right: 0px;
top: 5%;
height: 100%;
border-radius: 5px 0px 5px 5px;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.16) 2px 2px 10px;
flex-grow: 3;
flex-direction: row-reverse;
display: flex;
}
#rightPopupWrapper{padding:10px;opacity: 1;width: calc(100% - 40px);}
div#rightPopupWrapper {}
#rightPopupWrapper > .tabFunction > .tabcontent {
flex: 1 1;
height: 500px;
}
.closeButton {
padding: 15px;
height: 40px;
border-radius: 50%;
}
.closeButton:hover {
background-color: #fbfbfe;
}
#minMaxCloseBox ul{
display:none;
width:0px;
}
#minMaxCloseBox li{
display:none;
list-style-type: none;
padding: 10px;
background-color: aliceblue;
margin:2px;
cursor: pointer;
}
#minMaxCloseBox:hover li, #minMaxCloseBox.expanded li{
display: block;
}
.handle-container{
transform: rotate(-90deg);
margin-top: calc(100px + 50%);
background-color: var(--pink1);
transform-origin: left top 0;
float: left;
color: white;
padding: 5px;
width:75px;
border-radius: 7px 7px 0px 0px;
}
#minMaxCloseBox ul li:first-child{
padding: 3px;
background-color: white;
margin: -10px;
color: rgb(183 183 207);
}
#minMaxCloseBox ul li:first-child:hover{
color: var(--pink1);
}
#minMaxCloseBox ul li span{
width: 100px;
display: inline-block;
}
ul#report-params li p{
font-size: 12px;
width: 100%;
text-align: right;
margin-bottom: 10px;
color: #1e1e1e;
}
ul#report-params li p span{
display:inline-block;
}
ul#report-params li a, ul#report-params li a:hover {
color: var(--pink1);
margin-top:5px;
}
/* SWITCH STYLES */
/* The switch - the box around the slider */
label.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-right:10px;
cursor: pointer;
left:auto;
top:auto;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.switch .option-text{
margin-left: 40px;
}
input:checked + .slider {
background-color: var(--pink1);
}
.module-rec input:checked + .slider {
background-color: #4ec1fd;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.d-breadcrumbs{
margin-bottom: 15px;
}
.slider.round:before {
border-radius: 50%;
}
/* SWITCH STYLES END */
/* REPORTS GROUPING */
.grouping-select{
width:150px !important;
}
#reports-bottom li {
display:flex;
justify-content: left;
}
#reports-bottom li > #totals {
flex: 1 1;
display:flex;
justify-content: left;
}
#reports-bottom .custom-control{
min-height: 0;
}
#reports-bottom .form-group label{
line-height: 24px;
}
#reports-bottom .custom-control-label::before, #reports-bottom .custom-control-label::after, .report-filters .custom-control-label::before, .report-filters .custom-control-label::after {
top:4px !important;
}
.report-gmain input{
width: 200px;
height: 24px;
}
#reports-bottom .sort .arrow-down{
content: "";
}
.hftotals, .hgtotals {display:flex;}
#reports-bottom .cpopup-trigger{
min-width:0;
}
/* REPORTS GROUPING END*/
.list-filters .es-list li{
min-height: 0;
}
/* REPORTS MODAL */
/* REPORTS MODAL END */
.paidInFull, .hasRecId, .hasDepositId{
display: block;
color: #b1e9b170;
text-align: center;
margin: 0 auto;
font-size: 100px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
-ms-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
font-weight: 900;
text-transform: uppercase;
}
.paidInPartial{
display: block;
color: #b5a1b045;
text-align: center;
margin: 0 auto;
font-size: 50px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
left: 0;
right: 0;
-ms-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
font-weight: 900;
text-transform: uppercase;
}
.duplicate{
display: block;
color: #83b6f142;
text-align: center;
margin: 30px;
font-size: 75px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
-ms-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
font-weight: 900;
text-transform: uppercase;
}
.table-c.c{
border-collapse: collapse;
}
.table-c.c tbody tr {
background-color: white;
border: 5px solid #f5f6f6;
}
.table-c.c tbody td:first-child { border-top-left-radius: 10px; }
.table-c.c tbody td:last-child { border-top-right-radius: 10px; }
.table-c.c tbody td:first-child { border-bottom-left-radius: 10px; }
.table-c.c tbody td:last-child { border-bottom-right-radius: 10px; }
tbody td{
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.formGridTable tbody td{
overflow: visible;
}
.formGridTable tbody td.just-text{
overflow: hidden;
}
/*----RIGHT SLICK----*/
.right-side > .cols-b {
flex:0 0 auto;
}
.right-side > .tabFunction {
flex: 1 1;
display:flex;
flex-direction: column;
overflow:visible;
}
.right-side > .tabFunction > nav {
flex: 0 0 auto;
}
.right-side > .tabFunction > .tabcontent {
flex: 1 1;
}
.right-side .slick-header-column.ui-state-default {
border-width: 0;
}
.rightslick-table {
height:100%;
}
.cpopup a{
height: auto;
text-indent: inherit;
}
.window-options ul {
list-style: none; margin: 0; padding: 0;
}
.window-options li {
float: left; margin: 0;
}
.window-options .min{
padding: 8px 20px;cursor: pointer;
}
.window-options .max{
padding: 8px 20px;cursor: pointer;
}
.window-options .close2{
padding: 8px 20px;
cursor: pointer;
}
.cols-a>article {
overflow-y:hidden !important;
height:100%;
}
.es-list .grid-canvas{
width:100% !important;
}
.es-list .ui-widget-content.slick-row:hover, .es-list .ui-widget-content.slick-row.highlighted {
background-color: #e6e6e6;
border-right: none;
box-shadow: none;
}
.es-list .slick-pane.slick-pane-top.slick-pane-left {
top:11px !important;
}
.es-list.ui-widget{
max-height:182px;
}
.es-list .ui-widget-content.slick-row > .slick-cell {
padding: 5px 10px;
font-size: .9em;
border-bottom: none;
color: #878A89;
}
.printOrientationPopup{
position:absolute;
background: #eff3f8;
padding:3px;
display:none;
left:-30px;
z-index:2000;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .16);
width:122px;
}
li#printIdRR{
position:relative;
}
.rightslick-table {
position:relative;
}
/* make right side header smaller*/
.rightslick-table .slick-header-column.ui-state-default{
padding:10px;
font-weight:75;
}
ul.print-orientation {
list-style: none;
margin-bottom:0;
display:inline-block;
}
ul.print-orientation li{
font-size: 24px;
display: inline-block;
width:36px;
height:36px;
text-align:center;
padding:1px;
}
ul.print-orientation.mini li{
width:28px;
height:28px;
text-align:center;
padding:2px;
}
ul.print-orientation.mini li i{
font-size: 20px;
}
ul.print-orientation li.active{
border: 2px solid #bdbdbd;
border-radius: 3px;
background: #e8e9eb;
}
ul.print-orientation.mini li.active{
border: 2px solid #bec1be;
border-radius: 3px;
background: #ffe5e5;
}
ul.print-orientation input{
display:none;
}
ul.print-orientation label{
position:relative;
left:auto;
cursor:pointer;
float:none;
margin:0;
}
.report-filters span.float-right {
display: flex;
align-items: center;
justify-content: center;
}
.table-c.b, .table-c.b td, .table-c.b tr{
overflow: visible;
}
.reports-row{
display: flex;
width:15%;
flex-direction: row;
flex-flow: column wrap;
padding:0 15px;
}
.reports-row .reports-col a {
line-height: 26px;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #372f2b;
display: inline-block;
}
.reports-row .reports-col{
padding-left: 12px;
margin-right:30px;
width: 250px;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
.reports-row .reports-col:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: var(--pink1);
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.reports-row .reports-col:hover:before {
right: 0;
}
.reports-row .reports-col a:hover {
text-decoration: none;
color: var(--pink1);
}
.reports-row .reports-col:hover a {
color: var(--pink1);
font-weight: 700px;
}
.reports-row .reports-col a:last-child {
float:right;
}
.reports-row .reports-col a:first-child {
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*shadow fix for grid */
.has-table-c .table-c.d.da tbody.dataTables_scrollBody tr {
box-shadow: 0 3px 6px rgba(0,0,0,.04);
border-radius: 3px;
border: 1px solid #d7d7d7;
margin-top:4px;
}
/*alt colors for right side slickgrid */
.rightslick-table .slick-row.ui-widget-content .slick-cell{
border-bottom: none;
}
.rightslick-table .slick-row.ui-widget-content.odd{
background-color: #fcf9fc14;
}
#users-list {
display: flex;
flex-direction: column;
overflow: hidden;
}
#users-list > * {
flex: 0;
}
#users-list > div {
flex: 1;
overflow-y: scroll;
}
.render-btn-wrap, .recordset-btn-wrap {
position:fixed;
bottom:0;
width:300px;
}
.slick-headerrow-column input {
height:26px;
}
a.slickFilter {
display: block;
font-size: 14px;
width: 20px;
height: 20px;
z-index: 999;
position: absolute;
color: #000 !important;
padding: 1px 3px;
left: 0;
top: 8px;
}
.selectize-input input{
width:auto !important;
}
.tableGridTable {
box-shadow: 1px 0 15px rgba(191,191,191,.7);
border-radius: 6px;
border: 8px solid #f5f6f6;
background: #f5f6f6;
}
.tableGridTable thead th {
padding-top: 2.5px;
padding-bottom: 2.5px;
background: #f5f5f5;
color: #25435F;
font-size: 1.5em;
font-weight: 400;
font-family: Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
position: relative;
/* z-index: 2; */
padding: 8px 14px;
border: 0 solid #e3e3e3;
border-bottom: 0 solid #e3e3e3;
}
.tableGridTable tr {
border-radius: 10px;
background-color: #ffffff;
border-collapse: separate;
border-bottom: 9px solid #f5f6f6;
}
.tableGridTable td {
padding-top: 17.5px;
padding-bottom: 17.5px;
background: none;
color: #8E9A94;
font-size: 1.7em;
font-weight: 400;
vertical-align: middle;
overflow: visible;
}
.tableGridTable tbody, .tableGridTable thead, .tableGridTable tr {
display:block;
width:100%;
}
.tableGridTable tr {
min-width:900px;
}
.tableGridTable {
display:flex;
flex-direction: column;
}
.tableGridTable tbody {
flex: 1 1;
}
.tableGridTable thead, .tableGridTable tfoot {
flex: 0 0;
}
.tableGridTable tr {
display:flex;
flex-direction:row;
}
.tableGridTable td, .tableGridTable th {
flex:1;
text-overflow: ellipsis;
overflow:hidden;
}
.tableGridTable tr.editing td, .tableGridTable tr.editing th {
overflow:visible;
}
#utilitiesModal tr.editing td, #newUtilityModal tr.editing td{
overflow:visible;
}
/* */
label.custom-checkbox {
margin: 0;
padding: 0 10px 0 0;
color: #8E9A94;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
text-align: left;
padding-left: 32px;
display:inline-block;
min-height:18px;
}
.small-label label.custom-checkbox {
font-size: 1em;
}
label.custom-checkbox input {
position: absolute;
left: -3000em;
}
label.custom-checkbox .input {
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid var(--pink1);
opacity: .6;
cursor: pointer;
margin-right:5px;
position: absolute;
left: 0;
}
label.custom-checkbox .input:before {
visibility: hidden;
opacity: 0;
color: #fff;
font-family: i;
font-weight: 400;
font-size: 10px;
line-height: 10px;
text-align: center;
text-indent: 0;
}
label.custom-checkbox input:checked ~ .input {
border-color: var(--pink1);
background: var(--pink1);
opacity: 1;
}
label.custom-checkbox input:checked ~ .input:before {
visibility: visible;
opacity: 1;
}
label.custom-checkbox .input:before {
content: "\e923";
position:absolute;
top:2px;
left:0px;
right:0;
}
label.custom-checkbox .input:before .input:before {
visibility: visible;
opacity: 1;
}
label.custom-checkbox .input {
width: 18px;
height: 18px;
border-radius: 2px;
position:absolute;
}
label.custom-checkbox * {
line-height: 20px;
}
h3.header-th label.custom-checkbox .input:before{
color: var(--pink1);
}
h3.header-th label.custom-checkbox{
color:white;
}
h3.header-th label.custom-checkbox .input{
background:white !important;
border-color: white !important;
opacity: 1;
}
.theme-c label.custom-checkbox .input{
border-color: #4ec1fd;
/* margin-right: 10px; */
}
#csvcheckboxes label.custom-checkbox .input{
border-color: #4ec1fd;
}
.theme-c h3.header-th label.custom-checkbox .input:before{
color: #4ec1fd;
}
.theme-c label.custom-checkbox input:checked ~ .input {
background: #4ec1fd;
border-color: #4ec1fd;
}
#csvcheckboxes {
background: #4ec1fd;
border-color: white;
}
nav.expanded {
width:150px !important;
background-color: #0066aa !important;
}
#aside.expanded ul{
/*top: 75%;*/
}
#aside.expanded i{
font-size: 13px;
line-height: 15px;
}
#aside.expanded i, #aside.expanded i.icon-coins{
font-size: 13px;
text-align: left;
display: block;
}
#aside.expanded span{
position: absolute;
visibility: visible;
left: 30px;
}
#aside.expanded #logo a{
width:160px;
}
#aside.expanded:hover{
width:160px;
}
/* */
#wrapTableDivStyle{
border-radius: 6px;
overflow: hidden;
padding: 10px;
height:300px;
/* height: calc(100vh - 500px); */
}
i.fa, i.far, i.fas {
font-family: Font Awesome\ 5 Free !important;
font-weight: 900;
}
a.leasesfilter, a.activefilter{
display: block;
width: 10px;
font-size: 24px;
color: #878787;
margin-left: 15px;
width: 10px;
}
#permissions tr.child td:first-child {
padding-left:30px
}
#permissions tr.parent td {
background: #f5f5f5;
}
.table-c.dc.d.da.billTable tr {
overflow:visible;
}
.table-c.dc.d.da.billTable td {
overflow:visible;
}
#permission-properties ul, #permission-reports ul{
max-height: 60vh;
overflow-y: scroll;
}
#openModals ul li{
float: left;
padding: 3px;
list-style-type: none;
background-color: aquamarine;
margin: 5px;
margin-right: 5px;
cursor:pointer;
border-radius: 13%;
}
#openModals{
overflow-x: scroll;
}
.slickSelectCell {
overflow: visible;
}
.formGridSlickTable>div>div>div>.slick-row.odd>.slick-cell{
background: #f8f9fb;
border:none;
}
.rec-add .formGridSlickTable>div>div>div>.slick-row.odd>.slick-cell{
background: #f7fcff;
}
.formGridSlickTable>div>div>div>.slick-row.even>.slick-cell{
background: #fff;
border:none;
}
.slick-row.ui-widget-content.success div{
background-color: rgb(78, 193, 253) !important;
}
.slick-row.ui-widget-content.error div{
background-color: rgb(245 217 221) !important;
}
.slick-footerrow-column.ui-state-default {
border:none;
}
.theme-c .slick-footerrow-column{
color: #4ec1fd;
font-size: 1.5em;
font-weight: 700;
padding:10px;
background:none;
}
.nooverflow{
overflow: visible;
white-space: nowrap;
color: #97acb7;
}
.formGridSlickTable .slick-footerrow-column{
/*font-size: 1.9em; */
}
.slick-footerrow{
background-color: white;
}
.formGridSlickTable .slick-header-column{
background-color: #4ec1fd;
color: white;
padding-top: 7px;
padding-bottom: 7px;
}
.formGridSlickTable .slick-header{
border-radius: 5px;
background-color: #4ec1fd;
}
.formGridSlickTable input.slickinput {
position: absolute;
top: 5px;
width: 100%;
}
.csvImport-modal .formGridSlickTable input.slickinput{
top: 0px;
width: 100%;
height: 100%;
}
.csvImport-modal .ui-widget-content.slick-row > .slick-cell{
padding: 0px;
}
.csvImport-modal .ui-widget-content.slick-row > .slick-cell .select{
top: 0px;
width: 100%;
height: 100%;
}
.csvImport-modal .ui-widget-content.slick-row > .slick-cell .select input{
top: 0px;
width: 100%;
height: 100%;
}
.csvImport-modal .ui-widget-content.slick-row:hover {
background-color: white;
border-right: none;
box-shadow: none;
}
.csvImport-modal .ui-widget-content input {
border-left: 1px solid aliceblue;
border-bottom: 1px solid aliceblue;
}
.csvImport-modal .ui-widget-content input:hover {
border:1px solid #4ec1fd;
}
.checkboxGroup .slick-cell{
border:none;
}
.es-list .fes-add i {
color: green;
margin-left: -5px;
margin-right: 5px;
}
.es-list .fes-setup i {
color: green;
margin-left: -5px;
margin-right: 5px;
}
.formGridSlickTable.utilities .slick-header-column {
height:32px !important;
white-space: normal !important;
text-align: center;
}
.slick-plus{
font-family: i !important;
font-size:24px;
line-height:16px;
color: #1371fe;
text-align:center;
}
input.paybillfilter{
width: 150px;
display: inline-block;
background: #eef3f566;
border-radius: 10px;
border: none;
float: right;
}
input.paybillfilter:before {
content: "\e902";
}
#accountList .ui-widget-content.slick-row:hover > div:nth-child(2){
width: 0px;
padding: 0;
}
#accountList .ui-widget-content.slick-row:hover > div:nth-child(3){
padding-left: 80px;
transition: 1s ease;
}
#accountList .ui-widget-content.slick-row > div:nth-child(3){
padding-left: 0px;
transition: 1s ease;
}
#accountList .ui-widget-content.slick-row > div:first-child{
min-width: 50%;
}
#accountList .ui-widget-content.slick-row:hover > div:first-child{
transition: 1s ease;
width: 80%;
}
.clickable_stat:hover {
cursor: pointer;
background-color: white;
border-color: #2196F3;
border-width: 1px;
box-shadow: 0 13px 13px rgba(207, 207, 240, 1);
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out; /* Safari prior 6.1 */
/* transition: box-shadow .5s, background-color .5s; */
}
.clickable_stat{
-webkit-transition: all 0.4s ease-in-out; /* Safari prior 6.1 */
transition: all 0.4s ease-in-out;
border-radius: 5px;
padding: 3px;
}
/*
.reportLinkMultcont:hover {
box-shadow: -3px 4px 29px rgb(45, 143, 220);
zoom:120%;
cursor: pointer;
-webkit-transition: all .5s ease-in-out !important;
transition: all .5s ease-in-out !important;
}
.reportLinkMultcont:hover figcaption {
display:none;
}
.reportLinkMultcont:hover img {
opacity: .1 !important;
-webkit-transition: all .3s ease-in-out !important;
transition: all .3s ease-in-out !important;
}
.reportLinkMultcont figcaption.hover {
display:none;
}
.reportLinkMultcont:hover figcaption.hover {
display:block;
zoom: 75%;
-webkit-transition: display .5s, zoom .5s;
transition: display .5s, zoom .5s;
} */
.reportLinkMultcont:hover {
box-shadow: -3px 4px 29px rgb(45, 143, 220);
cursor: pointer;
-webkit-transition: all .5s ease-in-out !important;
transition: all .5s ease-in-out !important;
perspective: 1000px;
}
.reportLinkMultcont:hover .figcontainer {
transform: rotateY(180deg);
}
.figcontainer{
transition: transform 0.8s;
transform-style: preserve-3d;
}
.reportLinkMultcont:hover img {
opacity: .1 !important;
-webkit-transition: all .3s ease-in-out !important;
transition: all .3s ease-in-out !important;
}
.reportLinkMultcont figcaption {
backface-visibility: hidden;
}
.reportLinkMultcont figcaption.hover {
transform: rotateY(180deg);
zoom:75%;
top: 0;
}
figcaption .link-btn a {
color: white !important;
font-size: 20px;
}
.link-btn a:before {content: "";
position: absolute;
z-index: -1;
left: 100%;
right: 0;
bottom: 0;
background: #f5f5f5;
height: 100%;
opacity: .5;
-webkit-transition-property: left;
transition-property: left;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
/*DEPOSIT MODAL RESPONSIVE*/
.deposit-modal header.primary{
display: flex;
flex-direction: row;
box-shadow: 0px 0px;
padding: 5px;
flex: 0;
}
.deposit-modal header.secondary{
padding: 5px 10px;
min-height: unset;
flex: 0;
}
.deposit-modal header.primary h2{
flex: 0 0 auto;
position:relative;
left:0;
top: 0;
}
.deposit-modal header.primary nav.window-options{
flex: 1;
text-align:center;
}
.deposit-modal header.primary nav.window-options ul{
margin:auto;
display:inline-block;
}
.deposit-modal header.primary nav.window-buttons{
flex: 0 0 auto;
}
.deposit-modal .main-deposit-container {
flex: 1;
display:flex;
flex-direction: column;
height: calc(55vh);
}
.deposit-modal footer {
flex: 0;
}
.deposit-modal .main-deposit-container>div {
flex: 2;
display:flex;
flex-direction:row-reverse;
overflow-y: hidden;
}
.deposit-modal .main-deposit-container>div>div{
height: 100%;
overflow-y: hidden;
}
.deposit-modal table{
display:flex;
flex-direction: column;
height:auto !important;
}
.deposit-modal table thead{
flex: 0;
}
.deposit-modal table tbody{
flex: 1;
}
.deposit-modal table tr{
display:flex;
}
.deposit-modal .formGridTable tr{
display: block;
}
.deposit-modal table td{
flex:1;
}
.deposit-modal td:first-child {
/* width: auto !important; */
}
.deposit-modal .main-deposit-container>div>aside{
height: 90%;
overflow-y: hidden;
}
.deposit-modal .main-deposit-container table {
flex: 1;
height: auto;
}
.deposit-modal #select_check_section {
display: flex;
flex-direction: column;
padding-left: 5px;
}
.deposit-modal #select_check_section ul {
flex:0;
}
.deposit-modal #select_check_section thead tr {
border-radius: 6px;
overflow:hidden;
}
.deposit-modal #select_check_section table {
flex:1;
}
/*DEPOSIT MODAL RESPONSIVE END*/
.cbgroup {
height: 150px;
box-shadow: 1px 0 15px rgba(0,0,0,.07);
border-radius: 3px;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 13px solid #fff;
border-right: 11px solid #fff;
color: #8E9A94;
font-weight: 600;
font-family: Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
letter-spacing: normal;
position:relative;
}
.cbgroup .custom-checkbox {
padding: 0;
}
.cbgroup .ui-widget-content.slick-row:hover, .cbgroup .ui-widget-content.slick-row.active {
box-shadow: none;
border: none;
}
.utilities.formGridSlickTable .slick-row.ui-widget-content{
border: 1px solid #d7d7d7;
border-radius:5px;
margin-top:7px;
height:40px;
}
.utilities.formGridSlickTable .es-list .slick-row.ui-widget-content{
border: none;
border-radius:0px;
}
.utilities.formGridSlickTable .ui-widget-content.slick-row > .slick-cell {
background: #ffffff0d !important;
color: #878A89;
font-size: 11px;
}
.utilities.formGridSlickTable>div>div>div>.slick-row.odd>.slick-cell
{
background: #fff;
}
.utilities.formGridSlickTable .slick-header-column{
background-color: white;
color: #a19da0;;
padding-top: 7px;
padding-bottom: 7px;
}
.utilities.formGridSlickTable .slick-header{
background-color: white;
}
.formGridSlickTable .errorRow{
border: 1px solid #eb0e0e !important;
box-shadow: #dc35453b 2px 5px 2px;
}
.formGridSlickTable .successRow{
border: 1px solid #33c20e !important;
box-shadow: #5cdc353b 2px 5px 2px;
}
.tooltipster-error .tooltipster-box, .tooltipster-error .tooltipster-arrow-background{
background: rgb(235, 14, 14) !important;
}
.tooltipster-error .tooltipster-content{
color:white !important;
}
.error-msg {
visibility: hidden;
min-width: 500px;
background-color: #f30838b8;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 99999;
bottom: -25px;
left: 35%;
font-size: 1.4em;
padding: 5px !important;
font-weight: bold;
}
/* Show the tooltip text when you mouse over the tooltip container */
.errorRow:hover .error-msg {
visibility: visible;
}
.module-rec {
display: flex;
flex-direction: column;
height:100%;
}
.module-rec > * {
flex: 0;
}
.rec-outer {
display:flex;
flex:1;
}
.rec-outer > div{
flex:1;
display:flex;
flex-direction: column;
height:100%;
padding-right:10px;
}
.rec-outer > div > header{
flex:0;
}
#rec-add > header > h2, #rec-add > header > p{
display: inline-block;
}
#rec-add > header > p{
float: right;
}
.rec-outer > div > div{
flex:1;
}
.rec-outer .ui-widget{
height: 100%;
overflow: visible !important;
}
.rec-table .slick-row .slick-cell{
padding: 10px 14px;
}
.rec-table .slick-row {
background:none;
}
.rec-table .ui-state-default, #rec-add .slick-header-column{
background:none;
padding: 5px;
color: #A3AFAE;
font-size: 12px;
font-family: Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: 400;
border: none;
}
#rec-add .slick-header-column, #rec-add .formGridSlickTable .slick-header{
background: #e8f1f8;
border: none;
}
.rec-table #checkall {
height: 100%;
width: 100%;
border: dotted 1px #9d9292;
cursor: pointer;
}
.rec-table .slick-pane-top{
box-shadow: 1px 0 15px rgba(207, 207, 240, 1);
border-radius: 8px;
border: 6px solid #fcfcfe;
background: #fbfcfd;
}
.clrdrecinfo, .transLinkD, .unmarkBilled{
box-shadow: 0 3px 6px rgba(207, 207, 240, 1);
border-radius: 8px;
background: #14c36b;
color: white !important;
cursor: pointer;
padding: 0px 5px 0px 5px;
}
.matchinfo{
color: #04a904;
border-radius: 8px;
padding: 0px 5px 0px 5px;
}
.matchinfo i{
font-size:10px;
}
.matchinfo:hover{
box-shadow: 0 3px 6px rgba(207, 207, 240, 1);
background: #04a904;
color: white !important;
cursor: pointer;
}
.btn-show-match-candidates:hover i{
filter: brightness(1.15);
}
.trans-match-anchor-count{
display: inline-block;
min-width: 14px;
padding: 0 4px;
font-size: 10px;
font-weight: 700;
line-height: 14px;
text-align: center;
color: #fff;
background: #4ec1fd;
border-radius: 8px;
vertical-align: top;
}
#menucontainer.trans-match-menu{
display: flex; flex-direction: column; max-height: 420px; overflow: hidden; padding: 0;
border: none; border-radius: 12px; box-shadow: 0 12px 40px rgba(60, 60, 90, .22); font-family: inherit;
}
#menucontainer.trans-match-menu .trans-match-picker{ display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
#menucontainer.trans-match-menu .trans-match-loading-inner{
display: flex; align-items: center; justify-content: center;
min-height: 48px; min-width: 160px; padding: 14px 20px;
font-size: 12px; font-weight: 500; color: #7a7a92; white-space: nowrap;
}
#menucontainer.trans-match-menu .trans-match-message-inner{
font-size: 12px; color: #7a7a92; text-align: center; line-height: 1.4;
}
/* header */
#menucontainer.trans-match-menu .trans-match-header{
flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 9px 12px;
border-bottom: 1px solid #f0eef6; background: color-mix(in srgb, var(--pink1, #c2329a) 6%, #fff);
}
#menucontainer .trans-match-link-ico{
flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center;
justify-content: center; background: #fff; color: var(--pink1, #c2329a); font-size: 11px; box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
#menucontainer.trans-match-menu .trans-match-header h4{
flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 7px;
font-size: 12px; font-weight: 700; color: #2b2b3a;
}
#menucontainer .trans-match-htitle{ flex: 0 0 auto; white-space: nowrap; }
#menucontainer.trans-match-menu .trans-match-header-count{ color: #9a9ab0; font-weight: 600; font-size: 11px; }
#menucontainer .trans-match-bank-line{
flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 500; color: #9a9ab0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#menucontainer .trans-match-close{
flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
border-radius: 5px; color: #9a9ab0; font-size: 15px; line-height: 1; cursor: pointer;
}
#menucontainer .trans-match-close:hover{ background: #fff; color: #5a5a72; }
/* list */
#menucontainer.trans-match-menu .trans-match-list{
flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0; max-height: 360px; list-style: none;
}
/* card */
#menucontainer.trans-match-menu li.trans-match-card,
#menucontainer.trans-match-menu .trans-match-list.tableList li{
display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 0; border: none;
border-bottom: 1px solid #f2f1f7; border-radius: 0; background: #fff; color: inherit; cursor: default;
font-weight: normal; list-style: none; overflow: visible;
}
#menucontainer.trans-match-menu li.trans-match-card:hover,
#menucontainer.trans-match-menu li.trans-match-card.trans-match-best:hover{ background: #faf9fe; }
#menucontainer.trans-match-menu li.trans-match-card.trans-match-best{ background: #fff; box-shadow: inset 3px 0 0 var(--pink1, #c2329a); }
#menucontainer.trans-match-menu li.trans-match-card span{ padding: 0; }
/* left main block */
#menucontainer .trans-match-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#menucontainer .trans-match-row1{ display: flex; align-items: center; gap: 8px; }
#menucontainer .trans-match-title{ font-size: 12px; font-weight: 700; color: #2b2b3a; white-space: nowrap; }
#menucontainer .trans-match-ref{
display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 16px;
background: #f0eff5; font-size: 10px; color: #7a7a92;
}
#menucontainer .trans-match-ref .lbl{ font-weight: 600; }
#menucontainer .trans-match-row2{ display: flex; align-items: center; gap: 16px; font-size: 11px; color: #3a3a4c; }
#menucontainer .trans-match-row2 .lbl{ color: var(--pink1, #c2329a); font-weight: 600; margin-right: 3px; }
#menucontainer .trans-match-memo{
font-size: 10.5px; font-style: italic; color: #a8a8ba; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; max-width: 100%;
}
/* right side: days + buttons */
#menucontainer .trans-match-side{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#menucontainer .trans-match-days{ color: #9a9ab0; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
#menucontainer .trans-match-card .trans-match-actions{ display: flex; gap: 6px; margin: 0; padding: 0; border: none; }
#menucontainer.trans-match-menu li.trans-match-card button{ margin: 0; line-height: 1.2; font-size: 11px; font-weight: 600; position: static; float: none; min-width: 0 !important; overflow: visible; top: 0; }
#menucontainer .trans-match-actions .btn-open-trans-match{
padding: 4px 11px; border: 1px solid #e2e1ec; border-radius: 6px; background: #fff; color: #4a4a5e; box-shadow: none;
}
#menucontainer .trans-match-actions .btn-open-trans-match:hover{ background: #f6f5fb; color: #2b2b3a; }
#menucontainer .trans-match-actions .btn-accept-trans-match{
padding: 4px 12px; border: none; border-radius: 6px; background: #22a06b; color: #fff; box-shadow: 0 2px 6px rgba(34,160,107,.28);
}
#menucontainer .trans-match-actions .btn-accept-trans-match:hover{ filter: brightness(1.07); }
#menucontainer .trans-match-actions .btn-accept-trans-match:disabled{ opacity: .55; }
/* combined reconcile grid action cell: Quick add + Add as + Rule, as one
connected segmented group (flush, only the outer ends rounded).
Scoped under .module-rec .formGridSlickTable to beat that grid's blue button rule. */
.module-rec .formGridSlickTable .grid-actions{ display: inline-flex; align-items: stretch; gap: 0; }
.module-rec .formGridSlickTable .grid-actions button{
position: static !important; top: 0 !important; float: none !important; min-width: 0 !important;
overflow: visible !important; box-shadow: none !important; margin: 0 !important;
box-sizing: border-box; line-height: 1.1; font-family: inherit; white-space: nowrap;
font-size: 11px !important; font-weight: 600; cursor: pointer;
padding: 4px 11px !important; border: 1px solid #e2e1ec; border-radius: 0;
}
.module-rec .formGridSlickTable .grid-actions button + button{ margin-left: -1px !important; }
.module-rec .formGridSlickTable .grid-actions .ga-quickadd{
background: var(--pink1, #c2329a) !important; color: #fff !important;
border-color: var(--pink1, #c2329a); border-radius: 14px 0 0 14px;
}
.module-rec .formGridSlickTable .grid-actions .ga-quickadd:hover{
filter: brightness(1.07); background: var(--pink1, #c2329a) !important;
}
.module-rec .formGridSlickTable .grid-actions .ga-addas,
.module-rec .formGridSlickTable .grid-actions .ga-rule{
background: #fff !important; color: #4a4a5e !important;
}
.module-rec .formGridSlickTable .grid-actions .ga-rule{ border-radius: 0 14px 14px 0; }
.module-rec .formGridSlickTable .grid-actions .ga-addas:hover,
.module-rec .formGridSlickTable .grid-actions .ga-rule:hover{
background: #f6f5fb !important; color: #2b2b3a !important; position: relative; z-index: 1;
}
.clrdrecinfo, .transLinkD{
background: #14c36b;
}
.unmarkBilled{
background: #c314a6;
}
.recDetails, .addtransas, .transLinkD{
min-width: 16px;
padding: 6px 10px 6px;
color: white;
font-family: Arial,Helvetica,sans-serif;
font-size: .7em !important;
margin-top: 7px;
}
.recDetails{
background: #14c36b;
}
.addtransas{
background: #60b5e1;
}
.addtransas:hover {
box-shadow: 0 3px 8px rgba(207, 207, 240, 1);
background: #2797d1;
}
.clrdrecinfo:hover, .recDetails:hover, .transLinkD:hover {
box-shadow: 0 3px 8px rgba(207, 207, 240, 1);
background: #1c9659;
}
.unclrdrecinfo {
box-shadow: 0 3px 6px rgba(207, 207, 240, 1);
border-radius: 8px;
background: #e6cc65;
color: white;
cursor: pointer;
padding: 0px 5px 0px 5px;
}
.unclrdrecinfo:hover {
box-shadow: 0 3px 8px rgba(207, 207, 240, 1);
background: #f1da7e;
}
.bankcard{
padding-top: 5px;
padding-bottom: 5px;
padding-right: 30px;
padding-left: 30px;
margin: 5px;
border-radius: 5px;
color:white;
text-align: center;
display: inline-block;
}
.bankcard p{
text-align: center
}
.bankcard:hover {
box-shadow: 0 3px 6px rgb(156 153 156 / 70%);
}
.bankAcct{
width:80%;
border-top:1px solid #cccccc30;
padding: 10px 0px 0px 20px;
margin: 5px;
cursor: pointer;
}
.bankAcct div{
padding: 5px;
}
.bankAcct.connected, .bankAcct.connected h6{
color: #d1d1e1;
cursor: not-allowed;
}
.bankAcct:hover{
background-color: #fcfcfe;
}
.bankAcct.connected:hover{
background-color: white;
}
#banktrans .slick-row {
background:white;
font-size: 11px;
border-top: 1px dashed #959595;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: rgb(149, 149, 149);
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}
#alert-wrapper, #alert-notification, #snooze-wrapper{
color: #8c9dad;
}
@media screen and (max-width: 890px) {
#calculatorIcon, .tooltip-menu-logout{
display:none !important;
}
.globalSearchWrapper{
width: 200px!important;
}
}
#alert-container{
height: 310px;
overflow: auto;
display: inline-block;
width: 100%;
}
#alert-container .instant-alert-container{
width: 100%;
}
#recDropdownList .select{
float: left;
width: 180px;
}
.investorLine:hover {
background-color: #eee;
cursor: pointer;
}
#errorMessagePopup2{
left: 180px;
top: 780px;
position: fixed;
}
#alert-wrapper, #alert-notification, #snooze-wrapper{
width: 790px;
height: calc(100vw - 150px);
display:block;
display:none;
background-color: white;
position: fixed;
box-shadow: 4px 5px 11px rgb(207 207 240);
border-radius: 5px;
background: #fff;
padding: 25px;
}
@media screen and (max-width: 1200px) {
.timer.tooltipstered, .tooltip-menu.tooltipstered{
display:none;
}
}
@media screen and (max-width: 760px) {
.timer.tooltipstered, .tooltip-menu.tooltipstered{
display:none;
}
}
#alert-wrapper{
width:350px;
height: 400px;
}
#snooze-wrapper{
width:330px;
height: 180px;
}
#alert-notification{
width: 350px;
height: 160px;
right: 20px;
bottom: 160px;
}
#alertnotificationcontainer {
font-size: 12px;
display: flex;
align-items: center;
width: 100%;
}
#snooze-wrapper-container input{
width: 50%;
height: 20px;
}
#snooze-wrapper-container select{
width: 50%;
height: 27px;
}
#snooze-container button{
width: 100%;
height: 20px;
padding: 2px 2px 2px 2px;
margin-bottom: 5px;
box-shadow: none;
}
#snooze-container button:hover{
border: 2px var(--pink1);
color: var(--pink1);
}
.instant-alert-container, .instant-search-container{
padding: 10px 20px;
font-size: 12px;
display: flex;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid #ededed;
}
.instant-search-icon-container{
width: 50px;
min-width: 60px;
height: 60px;
display: inline-block;
/* border: 1px solid #fff8f8; */
border-radius: 10%;
position: relative;
font-size: 25px;
}
.instant-search-container:hover, {
background: rgb(251 251 254);
}
.instant-search-content-container{
display: inline-block;
margin-left: 15px;
padding: 5px;
width: 80%;
}
.instant-search-content-header{
margin: 0 0 3px;
color: #4f4f52;
}
.instant-search-content-header span{
float: right;}
.instant-search-content-header a{
color: #4a4a4a!important;
font-size: 14px;
letter-spacing: normal;
font-weight: 700;
line-height: 17px;
text-decoration: none!important;
}
.instant-search-content-content{
padding: 5px;
}
.snooze:hover, .dismiss:hover {
opacity: .7;
}
.instant-search-content-actions{
color: #63b3fe;
}
.instant-search-content-actions a:hover{
text-decoration: underline !important;
}
/* Dashboard receivables widget: tenant name link (opens sidebar like instant search) */
.receivables-tenant-link {
color: #63b3fe !important;
text-decoration: none !important;
cursor: pointer;
}
.receivables-tenant-link:hover {
text-decoration: underline !important;
}
#search-container-wrapper li{
border-bottom: 2px solid #e4dbdb;
margin: 0 0px 0px;
}
#search-container-wrapper li.active{
border-bottom: 2px solid black;
}
#dropdownoptions {
display: block;
position: relative;
width: 20%;
padding: 0 0 0 10px;
}
#search-container-wrapper li.active a{
box-shadow: 0 0px 0px rgb(255 255 255);
background: rgb(255, 255, 255) !important;
color: black;
}
#search-container-wrapper li:hover a{
background: rgb(251 251 254) !important;
}
#calculatorInput {
background-color: white;
border-radius: 10px;
width: 100%;
border: unset;
text-align: right;
height: 18px;
color: rgb(87 111 132);
}
#removeCalculatorline:hover {
background-color: rgb(232 232 251);
}
#removeCalculatorline {
padding:1px;
border-radius: 5px;
}
#removeCalculatorline i:hover{
color: #f11414;
}
#removeCalculatorline i{
color: rgb(232 232 251);
padding: 3px;
font-size: 10px;
}
#calculatorclrBtn{
border-radius: 10px;
padding: 2px;
float: left;
}
#calculatorclrBtn:hover{
background-color: rgb(232 232 251);
}
.module-rec .formGridSlickTable button{
min-width: 16px;
padding: 6px 10px 6px !important;
font-size: 11px !important;
background: #4EC1FD;
color: white;
margin-top: 7px;
}
.module-rec .formGridSlickTable .slick-footerrow-column button{
font-size: .8em !important;
}
/* ββ Reconcile "Add Multiple Transactions" bulk bar β dark action bar ββ */
#rec-add .slick-footerrow, #rec-add .slick-footerrow-columns{
background-color: #253048;
}
#rec-add .slick-footerrow{
border-radius: 10px;
}
#rec-add .slick-footerrow-column{
display: flex;
align-items: center;
height: 52px; /* keep in sync with footerRowHeight in reconciliation/auto.php */
box-sizing: border-box;
margin: 0;
padding: 0 8px;
font-size: 13px;
font-weight: 400;
color: #fff;
overflow: visible;
}
#rec-add .rec-bulk-label{
color: #fff;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
}
#rec-add .rec-bulk-count{
margin-left: 12px;
color: #93a1bd;
font-weight: 400;
font-size: 12px;
white-space: nowrap;
}
#rec-add .slick-footerrow-column.align-right{
justify-content: flex-end;
font-size: 15px;
font-weight: 700;
color: #fff;
}
/* the bulk selects β light outlined pills so they stand out on the dark bar */
/* (.module-rec + .formGridSlickTable needed to outrank the module.css 25px-input rule) */
.module-rec #rec-add .formGridSlickTable .slick-footerrow-column .select{
width: 100%;
height: 32px;
margin: 0;
padding: 0;
top: 0;
}
#rec-add .slick-footerrow-column .select:after{
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.08);
border-radius: 8px;
box-shadow: none;
}
#rec-add .slick-footerrow-column .select:before,
#rec-add .slick-footerrow-column .select:hover:before{
color: #93a1bd;
right: 10px;
}
#rec-add .slick-footerrow-column .select input.es-input{
position: relative;
z-index: 3;
width: 100%;
background: none;
border: none;
box-shadow: none;
box-sizing: border-box;
height: 32px;
margin: 0;
padding: 0 26px 0 12px;
color: #fff;
font-size: 12px;
font-weight: 500;
}
#rec-add .slick-footerrow-column .select input.es-input::placeholder{
color: #93a1bd;
}
/* quickAdd β primary pill button like the Pay-bills bar */
.module-rec #rec-add .slick-footerrow-column button{
margin: 0;
top: 0;
padding: 8px 20px !important;
border: 0;
border-radius: 999px;
background: #4b7cf7;
color: #fff;
font-size: 12px !important;
font-weight: 600;
}
.module-rec #rec-add .slick-footerrow-column button:hover{
background: #3d68d8;
}
.module-rec .formGridSlickTable button:hover{
background: #60b5e1;
}
.module-rec .formGridSlickTable input{
border-bottom: none;
height: 22px;
padding-left: 8px;
}
.module-rec .formGridSlickTable .select:after {
background: none;
border:none;
}
.module-rec .formGridSlickTable .select:before {
right: 5px;
}
button:focus {
outline: none;
}
.link-icon { overflow: visible; }
.lnkDeleteRec {
color: #ff000078;
padding: 10px;
/* background-color: #e3e3f6; */
border-radius: 50%;
font-weight: 600;
font-size: 15px;
float: right;
}
.lnkDeleteRec:hover{
background-color: #e3e3f6;
}
#dropdownlist:hover{
background-color: #4ec1fd;
opacity: 0.5;
}
#columnDropDownMenu{
width: 180px;
height: 290px;
overflow: hidden;
display:block;
display:none;
position: fixed;
/* box-shadow: 4px 5px 11px rgb(207 207 240); */
border-radius: 10px;
background: white;
background-color: white;
padding: 5px;
border: 1px solid #4ec1fd;
}
#errorMessagePopup{
width: auto;
height: 48px;
overflow: hidden;
display:block;
display:none;
position: fixed;
background: white;
background-color: white;
padding: 5px;
}
#columnDropDownMenu ul{
list-style: none;
padding:0px;
margin: 0px;
/* width: 130px;
overflow: hidden; */
}
#columnDropDownMenu li{
color: black;
font-weight: 400;
cursor: pointer;
text-align: left;
padding: 0 10px 0 10px;
white-space: nowrap;
/* position: relative;
width: fit-content; */
}
#columnDropDownMenu .blank{
height: 17.64px;
}
#columnDropDownMenu li:hover{
color:white;
background: #4ec1fd;
white-space: nowrap;
/* animation: marquee 8s linear infinite; */
}
/* @keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
} */
#menucontainer{
width: 200px;
display: block;
left: 1340.5px;
top: 414.094px;
position: absolute;
z-index: 9999;
background: rgb(255, 255, 255);
padding: 5px 0px 5px 0px;
box-shadow: 0 5px 20px 0 rgb(109 110 111 / 8%);
border: 1px solid rgb(55 23 23 / 11%);
border-radius: 4px;
padding: 0px;
}
#menucontainer td{
border-bottom-width: 0px;
padding: 4px 14px;
}
#menucontainer table{
border-top: none;
color: #898d91;
font-size: .9em;
}
#menucontainer h4{
margin: 15px;
color: #878383;
font-weight: 600;
}
#menucontainer ul{
list-style: none;
padding:0px;
margin: 0px;
}
#menucontainer li{
padding: 12px;
color: #8e9a94;
font-weight: 400;
cursor: pointer;
}
#menucontainer li:hover{
font-weight: 600;
background: #f9f8f8;
}
#menucontainer .tableList li{
background-color: #9eb7a30d;
padding: 10px;
}
#menucontainer li i{
font-size: 15px;
padding: 10px;
background: #f9f8f8;
border-radius: 50%;
font-weight: 700;
}
#menucontainer li span{
padding: 10px;
}
#menucontainer li:hover i{
background: #fff;
}
#depositModal .form-bills header input{
width: 270px;
}
#depositModal .form-bills header > div{
width: 90%;
}
#depositModal .form-bills header p{
width: 33%;
}
#depositModal .form-bills header.secondary {
border-top: 1px solid #f0f8ff;
box-shadow: none;
border-radius: 0px;
margin-top: 1px;
padding: 5px;
}
#depositModal .form-bills header .select{
width: auto;
}
.datepickerright:before{
content: "\e930";
display: block;
position: absolute;
right: 0;
bottom: 7px;
width: 35px;
font-family: i;
font-weight: 400;
font-size: 21px;
line-height: 21px;
text-align: center;
}
.datepickerright{
padding: 15px 5px;
border: 0px solid #adadf330;
background: #fbfbfe;
display: inline;
width: 90px;
border-radius: 4px;
height: 16px;
}
.datepickerright:hover{
background: #adadf330;
}
.ignored-label{
font-family: Arial,Helvetica,sans-serif;
font-weight: 600;
font-size: .8em;
color: #a5a6a8;
}
.archived-label{
font-family: Arial,Helvetica,sans-serif;
font-weight: 600;
font-size: .875em;
color: var(--pink1);
position: absolute;
right: 12px;
top: 12px;
}
.archived-note{
opacity: .5;
}
.grid-canvas {
margin: auto;
}
#reports-table .slick-sortable-placeholder {
background: rgb(251, 251, 254);;
}
.invoiceTable td, .invoiceTable th {
/* max-width: 400px !important; */
}
.toggleInputsul{
list-style-type: none;
height:100px;
}
.toggleInputs{
float: left;
height: 100px;
width: 100px;
padding: 12px;
background-color: aliceblue;
margin: 10px;
border-radius: 5px;
border-radius: 5px;
border: 1px solid #e5edf4;
text-align: center;
font-weight: 500;
font-size: large;
}
.toggleInputs icon{
font-size:45px;
}
.toggleInputs:hover{
background-color: #c7dff4;
}
.toggleInputs.chosen{
border: 1px solid var(--pink1);
}
#hideAfterRec, #refreshRec{
padding: 5px;
border-radius: 35px;
}
#hideAfterRec:hover, #refreshRec:hover{
opacity: .8;
background: aliceblue;
}
a#editMaintenanceButton{
color:blue;
}
a#editMaintenanceButton:hover {
text-decoration: underline;
}
.has-table-c.m-email-flex {
display: flex;
flex-direction: column;
height:100%;
}
.has-table-c.m-email-flex > * {
flex: 0;
}
.has-table-c.m-email-flex > iframe, .has-table-c.m-email-flex > div.iframe-wrapper {
flex: 1;
}
.iframe-wrapper {
position: relative;
}
.iframe-wrapper iframe {
height:100%;
}
.iframe-wrapper i {
position: absolute;
/* padding: 10px; */
font-size: 24px;
/* background: white; */
/* border: 1px solid #000; */
right: 0;
top: 0;
cursor: pointer;
}
.normalselect {
font-size: 16px;
color: #3f3f3f;
background: white;
border-color: lightgrey;
border-radius: 5px;
}
/* REPORT LIST */
.tooltipster-content {
overflow-x: hidden;
}
.has-search .form-control {
padding-left: 2.375rem;
height: auto;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
/* END REPORT LIST */
.reportEditor input#rname {
height: 28px;
padding: 0 10px;
border-radius: 5px;
width: 300px;
}
.reportEditor #category {
font-size: 14px;
color: #767676;
box-shadow: none;
border: 1px solid #adadf330;
width: 300px;
padding: 0 10px;
border-color: #d6d6d6;
background: #fff;
color: #767676;
font-size: 16px;
height: 28px;
font-weight: 400;
}
.lChargeDelete {
position: absolute;
top:5px;
right:5px;
color: #8E9A94;
font-size: 16px;
}
.form-entry textarea.custom-check-address, .custom-check-address {
font-size: 16px;
height: 48px;
width: 92%;
float: right;
border: 1px solid #f3e6e8;
border-radius: 5px;
}
pre, code, kbd, samp.check-address {
font-family: Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 16px;
position: relative;
left: 50px;
}
i.fa-arrows-alt.handle {
float: left;
font-size: 20px;
cursor: move;
}
.bre-filter-wrapper i {
position: absolute;
right: 20px;
top: 10px;
cursor: pointer;
}
.splitdiv, .splittitle {
display:none;
}
.split .splitdiv {
display: block;
}
.split .splittitle {
display: block;
display: block;
padding: 5px;
margin-top: 5px;
font-size: 13px;
font-weight: bold;
}
.loaderScreen {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
text-align: center;
padding-top: 35%;
background: rgba(255, 255, 255, 0.51);
z-index:99999;
}
.loaderScreen img{
width: 100px;
}
.copyright {
text-align: center;
width: 200px;
height: 19px;
margin: auto;
position: fixed;
bottom: 0;
z-index: 9999;
background: #fff;
left: calc(50% - 100px);
padding: 3px;
border-radius: 10px 10px 0 0;
box-shadow: #00000052 0px 0 3px 0px;
}
.transLink td{
white-space: pre-wrap;
}
.folder-wrapper.folder-link{
color:#d1d6da;
}
.hoverShow, .hoverShowHidden{
opacity: .9;
}
.filtersList{
color: #90969b;
font-weight: 600;
font-size: 15px;
padding: 5px;
border-radius: 7px;
margin: -5px;
}
.filtersList:hover {
background-color: var(--pink1);;
color:white;
}
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
padding: 10px;
}
.savedImportbutton{
width: 200px;
height: 125px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius:10px;
}
.savedImportrow{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
overflow: auto;
max-height: 300px;
}
#uploadOptions.button {
width: 120px;
height: 100px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius:10px;
}
#uploadOptions.button:hover, .savedImportbutton:hover {
opacity: .7;
}
#ChooseFile ::file-selector-button, .file-input ::file-selector-button {
display: none;
}
#ChooseFile, .file-input {
box-shadow: 0 3px 6px rgba(207, 207, 240, 1);
border-bottom: none;
display: inline-block;
max-width: 200px;
background-color: #4ec1fd;
color: white;
top: 0.3px;
font-size: 13px;
border-radius: 2px;
font-weight: 700;
font-family: Montserrat, Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;
letter-spacing: .1em;
cursor: pointer;
}
#ChooseFile:hover, .file-input:hover {
opacity: .8;
}
#ChooseFile input, .file-input input{cursor: pointer; background-color: #4ec1fd;color: white;height: 23px;padding: 2px 5px;text-align: center;font-weight: 700;font-family: Montserrat, Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif;letter-spacing: .1em;}
#collectionsModal .cbgroup{
height: 130px;
}
.file-input, .file-input input{
background-color: var(--pink1);
}
#collectionsModal .ui-widget-content.slick-row.active, #collectionsModal .ui-widget-content.slick-row.active>.slick-cell{
background: #9ad6f5 !important;
}
.openUpModal{
cursor: pointer;
}
.openUpModal:hover{
opacity: .8;
zoom:101%;
}
.singleEmailButton{
border-radius: 5px;
padding: 0px 5px 0px 5px;
}
.singleEmailButton:hover{
background: #4ec1fd;
/* color: white !important; */
}
#preveiw_email span{
max-width: 100px;
word-wrap: break-word;
}
.selectize-input small, .selectize-dropdown small{
color: grey;
}
/* ===========================================================================
Reports list popup redesign (.rep-pop) β used in the header tooltip and
the full-panel "Reports List" view. Functional hooks (reportToggle,
favoriteReport, reportLink, duplicateReport, #reportsFilter, #favoriteToggle,
[cat-id], [report-id], .hidden) are preserved; this only restyles.
=========================================================================== */
.rep-pop { font-family: inherit; color: #54546a; display: flex; flex-direction: column;
max-height: calc(100vh - 90px); }
.rep-pop .hidden { display: none !important; }
/* ββ header bar βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.rep-pop .rep-head { display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 10px 20px 16px; border-bottom: 1px solid #eceaf3; }
.rep-pop .rep-head-group { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rep-pop .rep-head-right { justify-content: flex-end; }
.rep-pop .rep-title { flex: 0 0 auto; margin: 0; font-size: 16px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: #8a8aa0; }
/* segmented system/user toggle */
.rep-pop .rep-toggle { display: inline-flex; background: #f3f2fa; border-radius: 10px; padding: 3px; }
.rep-pop .rep-toggle a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
border-radius: 8px; font-size: 13px; font-weight: 600; color: #8a8aa0; text-decoration: none;
white-space: nowrap; transition: all .15s; }
.rep-pop .rep-toggle a i { font-size: 12px; }
.rep-pop .rep-toggle a.selected { background: #fff; color: var(--pink1, #c2329a);
box-shadow: 0 2px 6px rgba(120,120,180,.18); }
/* favorites-only pill (checkbox hidden) */
.rep-pop .rep-fav { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
border: 1px solid #e6e5ef; border-radius: 10px; font-size: 13px; font-weight: 600;
color: #6c6c85; cursor: pointer; user-select: none; margin: 0; transition: all .15s; }
.rep-pop .rep-fav i { color: #c9c8d6; transition: color .15s; }
.rep-pop .rep-fav input { display: none; }
.rep-pop .rep-fav:hover { border-color: #d8d6e6; }
.rep-pop .rep-fav input:checked ~ i,
.rep-pop .rep-fav.is-on i { color: #f5b301; }
/* search */
.rep-pop .rep-search { position: relative; }
.rep-pop .rep-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
color: #b3b3c4; font-size: 13px; pointer-events: none; }
.rep-pop .rep-search input { width: 230px; max-width: 30vw; padding: 9px 13px 9px 34px;
border: 1px solid #e6e5ef; border-radius: 10px; font-size: 13px; background: #f7f6fb;
color: #54546a; transition: border-color .15s, background .15s; }
.rep-pop .rep-search input:focus { outline: none; background: #fff; border-color: var(--pink1, #c2329a); }
/* buttons */
.rep-pop .rep-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none;
white-space: nowrap; border: 1px solid transparent; transition: all .15s; }
.rep-pop .rep-btn i { font-size: 12px; }
.rep-pop .rep-btn-ghost { background: #fff; color: #4a4a5e; border-color: #e4e3ef; }
.rep-pop .rep-btn-ghost:hover { background: #f6f5fb; color: #2b2b3a; text-decoration: none; }
.rep-pop .rep-btn-primary { background: var(--pink1, #c2329a); color: #fff;
box-shadow: 0 4px 12px rgba(120,120,180,.25); }
.rep-pop .rep-btn-primary:hover { filter: brightness(1.07); color: #fff; text-decoration: none; }
.rep-pop .rep-close { width: 34px; height: 34px; display: inline-flex; align-items: center;
justify-content: center; border-radius: 10px; color: #9a9ab0; background: #f3f2fa;
text-decoration: none; transition: all .15s; }
.rep-pop .rep-close:hover { background: #e9e7f2; color: #5a5a72; text-decoration: none; }
/* ββ body βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.rep-pop .rep-body { overflow-y: auto; padding: 8px 20px 12px; }
.rep-pop .rep-cat { display: flex; align-items: flex-start; gap: 20px; padding: 18px 6px;
border-bottom: 1px solid #f0eff5; }
.rep-pop .rep-cat:last-child { border-bottom: none; }
.rep-pop .rep-cat-info { flex: 0 0 150px; display: flex; align-items: flex-start; gap: 11px; padding-top: 4px; }
.rep-pop .rep-cat-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; font-size: 15px;
color: var(--pink1, #c2329a); background: #f4f1fb;
background: color-mix(in srgb, var(--pink1, #c2329a) 11%, #fff); }
.rep-pop .rep-cat-name { font-size: 15px; font-weight: 700; color: #54546a; }
.rep-pop .rep-cat-count { font-size: 12px; color: #a3a3b8; margin-top: 2px; }
/* report card grid */
.rep-pop .rep-cards { flex: 1 1 auto; min-width: 0; display: grid;
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.rep-pop .rep-card { display: flex; align-items: center; gap: 9px; padding: 11px 13px;
border: 1px solid #ebeaf2; border-radius: 11px; background: #fff; transition: all .15s; }
.rep-pop .rep-card:hover { border-color: #d8d6e8; box-shadow: 0 4px 14px rgba(120,120,180,.12);
transform: translateY(-1px); }
.rep-pop .rep-card-star { flex: 0 0 auto; cursor: pointer; line-height: 1; }
.rep-pop .rep-card-star i { color: #cfced9; font-size: 15px; transition: color .15s; }
.rep-pop .rep-card-star i.selected { font-weight: 900; color: #f5b301; }
.rep-pop .rep-card-name { flex: 1 1 auto; min-width: 0; color: #5c5c70; font-size: 13.5px;
font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-pop .rep-card-name:hover { color: var(--pink1, #c2329a); text-decoration: none; }
.rep-pop .rep-card-copy { flex: 0 0 auto; color: #b9b8c8; font-size: 14px; text-decoration: none;
padding: 2px; transition: color .15s; }
.rep-pop .rep-card-copy:hover { color: var(--pink1, #c2329a); text-decoration: none; }
/* full-panel mode (copied into .right-side by the Reports List link) */
.right-side .rep-pop { max-height: none; }
.right-side .rep-pop .rep-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* ===========================================================================
Header user dropdown redesign (.uprof) β content of the #logout tooltip.
Preserves logout link, Gmail connect, and #primaryColorPicker mechanism.
=========================================================================== */
.uprof { width: 300px; font-family: inherit; color: #54546a; text-align: left; }
.uprof a { text-decoration: none; }
/* header: avatar + name/email + admin badge */
.uprof-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; }
.uprof-ava { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff;
background: var(--pink1, #3bb273); }
.uprof-id { flex: 1 1 auto; min-width: 0; }
.uprof-name { font-size: 15px; font-weight: 700; color: #3a3a4c; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uprof-email { font-size: 12.5px; color: var(--pink1, #3bb273); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.uprof-badge { flex: 0 0 auto; align-self: flex-start; font-size: 11px; font-weight: 600;
color: var(--pink1, #3bb273); border: 1px solid color-mix(in srgb, var(--pink1, #3bb273) 45%, #fff);
padding: 3px 10px; border-radius: 20px; }
/* gmail card */
.uprof-gmail { border: 1px solid #ebeaf2; border-radius: 12px; padding: 13px; margin-bottom: 14px;
background: #fbfafe; }
.uprof-gmail-top { display: flex; align-items: center; gap: 10px; }
.uprof-gmail-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: flex;
align-items: center; justify-content: center; font-size: 14px; color: #e08a2b; background: #fdf0dd; }
.uprof-gmail.is-connected .uprof-gmail-icon { color: #1f9d57; background: #e2f5ea; }
.uprof-gmail-title { font-size: 13.5px; font-weight: 700; color: #3a3a4c; }
.uprof-gmail-status { font-size: 12px; color: #9a9ab0; display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.uprof-gmail-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #e0a020; display: inline-block; }
.uprof-gmail.is-connected .uprof-gmail-status { color: #1f9d57; }
.uprof-gmail.is-connected .uprof-gmail-status .dot { background: #28b463; }
.uprof-gmail-desc { font-size: 12px; color: #9a9ab0; margin: 10px 0; line-height: 1.45; }
.uprof-gmail-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 9px 12px; border: 1px solid #e2e1ec; border-radius: 9px; background: #fff;
font-size: 13px; font-weight: 600; color: #4a4a5e; transition: all .15s; }
.uprof-gmail-btn i { color: var(--pink1, #3bb273); }
.uprof-gmail-btn:hover { background: #f6f5fb; color: #2b2b3a; }
/* menu items */
.uprof-menu { border-top: 1px solid #f0eff5; padding: 6px 0; }
.uprof-item { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-radius: 9px;
color: #4a4a5e; font-size: 14px; font-weight: 500; transition: background .15s; }
.uprof-item > i:first-child { width: 18px; text-align: center; color: #9a9ab0; font-size: 15px; }
.uprof-item span { flex: 1 1 auto; }
.uprof-item .uprof-chev { color: #c5c4d3; font-size: 12px; }
.uprof-item:hover { background: #f6f5fb; color: #2b2b3a; }
.uprof-item:hover > i:first-child { color: var(--pink1, #3bb273); }
/* primary color swatches */
.uprof-colors { border-top: 1px solid #f0eff5; padding: 14px 4px; }
.uprof-colors-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #a3a3b8; margin-bottom: 10px; }
.uprof-swatches { display: flex; align-items: center; gap: 10px; }
.uprof-swatch { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
justify-content: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: transform .12s; }
.uprof-swatch i { opacity: 0; font-size: 13px; transition: opacity .12s; }
.uprof-swatch:hover { transform: scale(1.08); }
.uprof-swatch.is-on i { opacity: 1; }
.uprof-swatch.is-on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.uprof-color-input { width: 34px; height: 34px; padding: 0; border: 1px dashed #d5d4e2; border-radius: 10px;
background: #fff; cursor: pointer; }
/* logout */
.uprof-logout { display: flex; align-items: center; gap: 10px; padding: 13px 6px 4px;
border-top: 1px solid #f0eff5; color: #d23b6e; font-size: 14px; font-weight: 600; }
.uprof-logout i { font-size: 15px; }
.uprof-logout:hover { color: #b32a55; }
/* time tracker in profile card */
.uprof-timer { border: 1px solid #ebeaf2; border-radius: 12px; padding: 13px; margin-bottom: 14px; background: #fbfafe; }
.uprof-timer-top { display: flex; align-items: center; gap: 10px; }
.uprof-timer-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: flex;
align-items: center; justify-content: center; font-size: 14px; color: var(--pink1, #3bb273);
background: color-mix(in srgb, var(--pink1, #3bb273) 12%, #fff); }
.uprof-timer-info { flex: 1 1 auto; min-width: 0; }
.uprof-timer-title { font-size: 13.5px; font-weight: 700; color: #3a3a4c; }
.uprof-timer-state { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 12px; color: #9a9ab0; }
.uprof-timer-state .dot { width: 7px; height: 7px; border-radius: 50%; background: #b7b7c6; display: inline-block; }
.uprof-timer-clock { font-size: 18px; font-weight: 700; color: #6c6c85; letter-spacing: .5px;
font-variant-numeric: tabular-nums; }
.uprof-timer-taskwrap { margin-top: 10px; }
.uprof-timer-task { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #e2e1ec;
border-radius: 9px; background: #fff; font-size: 13px; color: #44445a; }
.uprof-timer-task:focus { outline: none; border-color: var(--pink1, #3bb273); }
#timerInfo .uprof-timer-project { display: inline-block; margin-top: 8px; font-size: 13px; color: #44445a; }
.uprof-timer #startEnd.uprof-timer-btn {
position: static !important; top: auto !important; right: auto !important; left: auto !important; float: none !important;
width: 100% !important; height: auto !important; min-width: 0 !important; margin: 10px 0 0 !important;
padding: 10px !important; border: none !important; border-radius: 10px !important; box-shadow: none !important;
background: #22a06b; color: #fff !important; font-size: 14px !important; font-weight: 600; cursor: pointer;
text-align: center; overflow: visible;
}
.uprof-timer #startEnd.uprof-timer-btn:hover { filter: brightness(1.05); }
/* ===========================================================================
Slide-out drawer (user / group forms) + buttons β GLOBAL.
These also live in settings.css for the settings pages, but the drawer can
be opened from the header dropdown on ANY page, so the styles must load
globally (custom.css is included on every page). Keep in sync with
settings.css. (.set-* layout/table/nav styles intentionally stay page-only.)
=========================================================================== */
.set-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px;
border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; line-height: 1.2;
text-decoration: none; border: 1px solid transparent; transition: all .15s; white-space: nowrap;
/* neutralize the global button{} rule (module.css: top:-10px; float:left; min-width:172px; box-shadow) */
position: static !important; top: 0 !important; float: none !important; min-width: 0 !important;
box-shadow: none !important; overflow: visible !important; }
button.set-btn { margin: 0 !important; }
.set-btn-primary { background: var(--pink1, #c2329a); color: #fff;
box-shadow: 0 4px 12px rgba(120,120,180,.25); }
.set-btn-primary:hover { filter: brightness(1.07); color: #fff; text-decoration: none; }
.set-btn-ghost { background: #fff; color: #4a4a5e; border-color: #e4e3ef; }
.set-btn-ghost:hover { background: #f6f5fb; color: #2b2b3a; text-decoration: none; }
.modal.set-drawer { background: rgba(33, 33, 55, .38); }
.modal.set-drawer .modal-dialog { position: fixed !important; top: 0; right: 0; bottom: 0;
width: 460px; max-width: 94vw; height: 100%; margin: 0 !important; pointer-events: auto; }
.modal.set-drawer.fade .modal-dialog { transform: translateX(100%) !important; transition: transform .28s ease; }
.modal.set-drawer.show .modal-dialog { transform: translateX(0) !important; }
.modal.set-drawer .modal-content { height: 100%; border: none; border-radius: 0;
box-shadow: -10px 0 34px rgba(50, 50, 85, .22); display: flex; flex-direction: column; }
.modal.set-drawer form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.set-drawer-head { display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; padding: 20px 24px; border: none; border-bottom: 1px solid #f0eff5; }
.set-drawer-head-main { display: flex; align-items: center; gap: 13px; }
.set-drawer-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
display: flex; align-items: center; justify-content: center; font-size: 18px;
color: var(--pink1, #c2329a); background: #f6eef4;
background: color-mix(in srgb, var(--pink1, #c2329a) 12%, #fff); }
.set-drawer-title { margin: 0; font-size: 18px; font-weight: 700; color: #2b2b3a; }
.set-drawer-sub { margin: 2px 0 0; font-size: 13px; color: #9a9ab0; }
.modal.set-drawer .set-drawer-head .set-drawer-close {
flex: 0 0 auto; align-self: flex-start; margin: 0; padding: 0; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center; background: none; border: none;
border-radius: 8px; font-size: 20px; line-height: 1; color: #b5b5c6; opacity: 1;
text-shadow: none; cursor: pointer; float: none; transition: background .15s, color .15s; }
.modal.set-drawer .set-drawer-head .set-drawer-close:hover { background: #f3f2fa; color: #6c6c85; }
.set-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; }
.set-form-section { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: #a3a3b8; margin: 18px 0 12px; }
.set-form-section:first-child { margin-top: 0; }
.set-field { margin-bottom: 15px; }
.set-field > label { display: block; font-size: 13px; font-weight: 600; color: #44445a; margin-bottom: 6px; }
.set-field .set-opt { font-weight: 500; color: #a3a3b8; }
.set-field small { display: block; margin-top: 6px; font-size: 12px; color: #9a9ab0; line-height: 1.45; }
.set-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal.set-drawer .form-control,
.modal.set-drawer select.form-control {
width: 100%; height: auto; padding: 10px 13px; font-size: 14px; color: #2b2b3a;
background: #f7f6fb; border: 1px solid #e9e8f1; border-radius: 10px; box-shadow: none;
transition: border-color .15s, background .15s; }
.modal.set-drawer .form-control:focus {
background: #fff; border-color: var(--pink1, #c2329a); outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink1, #c2329a) 18%, transparent); }
.modal.set-drawer .form-control::placeholder { color: #b3b3c4; }
.modal.set-drawer .select { display: block; width: 100%; position: relative; }
.modal.set-drawer .es-input,
.modal.set-drawer select.editable-select {
width: 100%; height: auto; padding: 10px 13px; font-size: 14px; color: #2b2b3a;
background: #f7f6fb; border: 1px solid #e9e8f1; border-radius: 10px; box-shadow: none; }
.modal.set-drawer .es-input:focus {
background: #fff; border-color: var(--pink1, #c2329a); outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink1, #c2329a) 18%, transparent); }
.modal.set-drawer .es-list { border-radius: 10px; border: 1px solid #e9e8f1;
box-shadow: 0 10px 26px rgba(60, 60, 90, .16); margin-top: 4px; z-index: 5; }
.set-drawer-link { display: inline-block; margin-top: 4px; color: var(--pink1, #c2329a);
font-weight: 600; font-size: 13px; text-decoration: none; }
.set-drawer-link:hover { text-decoration: underline; }
.set-gmail { font-size: 13px; }
.set-gmail .connected { color: #1f9d57; font-weight: 600; }
.set-gmail .disconnected { color: #9a9ab0; }
.set-group-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.set-group-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
border: 1px solid #e9e8f1; border-radius: 10px; font-size: 13px; font-weight: 600;
color: #555; cursor: pointer; user-select: none; transition: all .15s; }
.set-group-chip input { accent-color: var(--pink1, #c2329a); margin: 0; }
.set-group-chip:hover { border-color: #d5d3e6; }
.set-drawer-foot { display: flex; align-items: center; gap: 12px; padding: 16px 24px;
border: none; border-top: 1px solid #f0eff5; background: #fff; }
.set-drawer-foot .set-btn { padding: 11px 18px; }
.set-drawer-foot .set-btn-primary { flex: 1 1 auto; justify-content: center; }
/* ===========================================================================
System alerts widget (header bell β #alert-wrapper). Severity-grouped cards.
=========================================================================== */
#alert-wrapper { width: 360px; height: auto; max-height: 86vh; padding: 0; border-radius: 14px;
box-shadow: 0 14px 44px rgba(60, 60, 90, .2); overflow: hidden; }
#alert-wrapper .sa-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px;
border-bottom: 1px solid #f0eef6; background: #faf9fe; }
#alert-wrapper .sa-head-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: flex;
align-items: center; justify-content: center; background: #fdecec; color: #e0564f; font-size: 13px; }
#alert-wrapper .sa-head-title { margin: 0; font-size: 16px; font-weight: 700; color: #2b2b3a; }
#alert-wrapper .sa-head-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
height: 20px; padding: 0 7px; border-radius: 10px; background: #f0eff5; color: #7a7a92; font-size: 12px; font-weight: 700; }
#alert-wrapper .sa-dismiss-all { margin-left: auto; color: #9a9ab0; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
#alert-wrapper .sa-dismiss-all:hover { color: #6c6c85; }
#alert-wrapper .sa-head-close { display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; margin-left: 4px; border-radius: 7px; color: #b5b5c6; cursor: pointer; font-size: 13px; }
#alert-wrapper .sa-head-close:hover { background: #efedf6; color: #6c6c85; }
#alert-container { height: auto; max-height: calc(86vh - 58px); overflow: auto; padding: 6px 14px 14px;
display: block; width: 100%; }
.sa-group { margin-top: 14px; }
.sa-group:first-child { margin-top: 8px; }
.sa-group-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
letter-spacing: .07em; text-transform: uppercase; color: #9a9ab0; margin-bottom: 8px; padding-left: 2px; }
.sa-group-label .sa-gdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sa-group-label.sa-critical .sa-gdot { background: #e0564f; }
.sa-group-label.sa-warning .sa-gdot { background: #e0913b; }
.sa-group-label.sa-info .sa-gdot { background: #3f7fd6; }
.sa-card { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; margin-bottom: 9px;
border: 1px solid #efeef5; border-radius: 11px; background: #fff; }
.sa-card:last-child { margin-bottom: 0; }
.sa-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
justify-content: center; font-size: 13px; }
.sa-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #6c6c85; line-height: 1.4; }
.sa-text b { color: #2b2b3a; font-weight: 700; }
.sa-card.sa-critical { border-color: #f6dada; }
.sa-card.sa-critical .sa-icon { background: #fdecec; color: #e0564f; }
.sa-card.sa-critical .sa-text b { color: #d6463f; }
.sa-card.sa-warning { border-color: #f6e6cf; }
.sa-card.sa-warning .sa-icon { background: #fdf2e1; color: #e0913b; }
.sa-card.sa-warning .sa-text b { color: #cf8430; }
.sa-card.sa-info { border-color: #dde8f7; }
.sa-card.sa-info .sa-icon { background: #eaf1fb; color: #3f7fd6; }
.sa-card.sa-info .sa-text b { color: #3a72c4; }
.sa-dismiss { flex: 0 0 auto; color: #c5c4d3; font-size: 15px; line-height: 1; text-decoration: none; padding: 0 2px; }
.sa-dismiss:hover { color: #8a8aa0; text-decoration: none; }
.sa-empty { padding: 34px 16px; text-align: center; color: #9a9ab0; font-size: 13px; }
.sa-empty i { color: #28b463; margin-right: 6px; }
/* clickable bold count β drill-down */
.sa-text b.sa-hot { cursor: pointer; border-bottom: 1px dotted currentColor; }
.sa-text b.sa-hot:hover { filter: brightness(.92); }
/* drill-down detail popover (mirrors the dashboard alerts-card) */
.sa-detail-pop { position: fixed; z-index: 100001; background: #fff; border: 1px solid #e7e6f0;
border-radius: 11px; box-shadow: 0 16px 44px rgba(60, 60, 90, .24); max-width: 760px; max-height: 62vh;
overflow: hidden; display: none; font-size: 13px; color: #3a3a4c; }
.sa-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
border-bottom: 1px solid #f0eff5; font-weight: 700; color: #2b2b3a; background: #faf9fe; }
.sa-detail-close { color: #b5b5c6; font-size: 16px; line-height: 1; text-decoration: none; padding: 0 2px; }
.sa-detail-close:hover { color: #6c6c85; text-decoration: none; }
.sa-detail-msg, .sa-detail-loading { padding: 16px; color: #9a9ab0; font-size: 13px; }
.sa-detail-scroll { max-height: calc(62vh - 44px); overflow: auto; }
.sa-detail-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.sa-detail-table th { text-align: left; padding: 7px 12px; background: #f8f7fc; color: #8a8aa0; font-size: 11px;
text-transform: uppercase; letter-spacing: .04em; font-weight: 700; position: sticky; top: 0; border-bottom: 1px solid #eceaf3; }
.sa-detail-table td { padding: 7px 12px; border-bottom: 1px solid #f2f1f7; white-space: nowrap; color: #44445a; }
.sa-detail-row.is-clickable { cursor: pointer; }
.sa-detail-row.is-clickable:hover td { background: #faf9fe; color: #2b2b3a; }
/* Gmail conversations merged into the Related Conversations panel (flat list +
thread reading pane, Outlook-style) */
.gmailMsgList { width: 100%; }
.gmailMsg { cursor: pointer; padding: 7px 6px; border-bottom: 1px solid #f0f0f0; }
.gmailMsg:hover { background: #f8f9fa; }
.gmailMsg:last-child { border-bottom: none; }
.gmailMsg > b { font-weight: 500; }
.gmailMsg.gmail-unread > b { font-weight: 700; }
.gmailMsg.gmail-unread { border-left: 3px solid #4ec1fd; }
.gmailMsgDate { color: #999; font-size: 12px; white-space: nowrap; float: right; }
.gmailMsg .emailBody { color: #777; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmailClip { color: #888; margin-left: 4px; }
/* Direction badge */
.gmailDir { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 3px; margin-right: 6px; }
.gmailDir i { margin-right: 2px; font-size: 9px; }
.gmailDir-in { background: #e3f2fd; color: #1565c0; } /* Incoming (from contact) */
.gmailDir-out { background: #eceff1; color: #607d8b; } /* Outgoing (sent by us) */
/* Actions + reply box */
.gmail-actions { margin-top: 4px; font-size: 12px; }
.gmail-actions a.gmailAction, .gmail-actions a.gmailReply { text-decoration: none; }
.gmail-actions a.gmailAction:hover, .gmail-actions a.gmailReply:hover { text-decoration: underline; }
.gmailReplyForm { padding: 6px 0; }
/* Load more */
.gmailLoadMoreWrap { text-align: center; padding: 8px 0; }
.gmailLoadMore { font-size: 12px; text-decoration: none; color: #34495e; background: #eef1f6; padding: 5px 16px; border-radius: 14px; }
.gmailLoadMore:hover { background: #e2e7ef; text-decoration: none; }
.gmailLoadMore.disabled { color: #999; pointer-events: none; }
/* Reading pane: full thread history */
.gmailThreadView { padding: 4px; }
.gmailThreadMsg { border: 1px solid #ececec; border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.gmailThreadMsgHead { padding: 8px 10px; background: #f7f8fa; border-bottom: 1px solid #ececec; font-size: 13px; }
.gmailThreadMsgHead small { color: #888; }
.gmailBodyFrame { width: 100%; min-height: 180px; border: 0; background: #fff; }
.gmailAttachments { padding: 6px 10px; border-bottom: 1px solid #f3f3f3; display: flex; flex-wrap: wrap; gap: 6px; }
.gmailAttach { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; text-decoration: none; background: #eef1f6; color: #34495e; padding: 3px 9px; border-radius: 12px; }
.gmailAttach:hover { background: #e2e7ef; text-decoration: none; }
.gmailAttachSize { color: #999; }
/* =========================================================================
Report viewer redesign (scoped to .rpt-ui) β phase 1 (chrome only)
========================================================================= */
.rpt-ui { padding: 0 !important; border-radius: 14px; overflow: hidden; background: #fff; }
.rpt-ui form[type="report"] { display: block; }
/* ---- Toolbar ---- */
.rpt-ui header.rpt-toolbar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 22px 18px 16px; background: #fff; border-bottom: 1px solid #eceaf3; cursor: move;
/* neutralize module.css `.form-entry.popup-a header` (margin-top:-15px; zoom:90%) */
margin: 0 !important; zoom: 1 !important;
}
.rpt-ui .rpt-tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rpt-ui .rpt-toolbar h2 {
font-size: 15px; font-weight: 700; margin: 0; color: #2b2b3a;
text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.rpt-ui .rpt-tb-icon {
width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
background: color-mix(in srgb, var(--pink1, #3bb273) 16%, #fff); color: var(--pink1, #3bb273);
}
.rpt-ui .rpt-basis-chip {
font-size: 11px; font-weight: 600; color: #6c6c85; background: #f1f0f7;
border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
/* action icon buttons β each individually bordered (like the mockup) */
.rpt-ui .rpt-tb-actions { display: inline-flex; align-items: center; gap: 5px; }
.rpt-ui .rpt-icon-btn {
width: 27px; height: 27px; border: 1px solid #e5e4ee; border-radius: 7px; background: #fff;
color: #9a9ab0; font-size: 11px; text-decoration: none; transition: all .12s;
display: inline-flex; padding: 0;
}
.rpt-ui .rpt-icon-btn i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; }
.rpt-ui .rpt-icon-btn:hover { background: #f6f5fb; color: var(--pink1, #3bb273); border-color: var(--pink1, #3bb273); }
/* toggles */
.rpt-ui .rpt-tb-toggles { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
/* segmented control (Accrual / Cash basis) */
.rpt-ui .rpt-seg {
display: inline-flex; align-items: center; padding: 2px; background: #f1f0f7;
border-radius: 9px; float: none; position: static;
}
.rpt-ui .rpt-seg-opt {
padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; color: #6c6c85;
cursor: pointer; white-space: nowrap; transition: all .12s; user-select: none;
position: static; float: none; top: 0; box-shadow: none; min-width: 0; overflow: visible;
}
.rpt-ui .rpt-seg:not(.is-on) .rpt-seg-opt[data-on="0"],
.rpt-ui .rpt-seg.is-on .rpt-seg-opt[data-on="1"] {
background: #fff; color: var(--pink1, #3bb273); box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
/* Truncated / Expanded β mutually-exclusive segmented toggle (only one active) */
.rpt-ui .rpt-seg-te .rpt-seg-opt.active {
background: #fff; color: var(--pink1, #3bb273); box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
/* print orientation β restyled as a segmented pill matching the other toolbar toggles */
.rpt-ui .rpt-tb-toggles .print-orientation {
display: inline-flex; align-items: center; padding: 2px; margin: 0;
background: #f1f0f7; border-radius: 9px; list-style: none;
}
.rpt-ui .rpt-tb-toggles .print-orientation li {
width: auto; height: auto; padding: 0; font-size: 11px;
display: inline-flex; border: none !important; border-radius: 6px; background: transparent;
}
.rpt-ui .rpt-tb-toggles .print-orientation li i { font-size: 13px; }
.rpt-ui .rpt-tb-toggles .print-orientation label {
display: inline-flex; align-items: center; justify-content: center;
padding: 4px 9px; border-radius: 6px; margin: 0; color: #6c6c85;
cursor: pointer; transition: all .12s; line-height: 1;
}
.rpt-ui .rpt-tb-toggles .print-orientation li.active {
border: none !important; background: transparent;
}
.rpt-ui .rpt-tb-toggles .print-orientation li.active label {
background: #fff; color: var(--pink1, #3bb273); box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
/* right group: edit columns + window controls */
.rpt-ui .rpt-tb-right { display: flex; align-items: center; gap: 10px; }
.rpt-ui .rpt-ghost-btn {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #dcdbe6;
border-radius: 7px; font-size: 11px; font-weight: 600; color: #55556a; text-decoration: none;
background: #fff; transition: all .12s; white-space: nowrap;
}
.rpt-ui .rpt-ghost-btn:hover { border-color: var(--pink1, #3bb273); color: var(--pink1, #3bb273); }
.rpt-ui .rpt-win { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.rpt-ui .rpt-win-btn {
width: 27px; height: 27px; border: 1px solid #e5e4ee; border-radius: 7px; background: #fff;
display: inline-flex; align-items: center; justify-content: center;
color: #a3a3b5; font-size: 11px; cursor: pointer; transition: all .12s;
}
.rpt-ui .rpt-win-btn i { line-height: 1; }
.rpt-ui .rpt-win-btn:hover { background: #efeef4; color: #55556a; }
.rpt-ui .rpt-win-btn.reportMax:hover { background: #efeef4; color: var(--pink1, #3bb273); }
.rpt-ui .rpt-win-btn.close2 { color: #b5b5c4; }
.rpt-ui .rpt-win-btn.close2:hover { background: #fdeaea; color: #e5484d; }
/* ---- Filter bar ---- */
.rpt-ui .rpt-filterbar {
border: none !important; padding: 0 !important; margin: 0 !important;
background: #faf9fc; border-bottom: 1px solid #eceaf3 !important;
}
.rpt-ui .rpt-fb-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; }
.rpt-ui .rpt-fb-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #9a9ab0; }
.rpt-ui #reports-filters {
display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
width: auto !important; margin: 0; flex: 1 1 auto;
}
.rpt-ui #reports-filters .col-auto { padding: 0; display: flex; align-items: center; }
.rpt-ui #reports-filters .filter-wrapper p,
.rpt-ui #reports-filters .parameters p {
display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: nowrap; white-space: nowrap;
}
.rpt-ui #reports-filters label { font-size: 11px; font-weight: 600; color: #6c6c85; margin: 0; white-space: nowrap; line-height: 28px; }
.rpt-ui #reports-filters input[type="text"] {
height: 28px; border: 1px solid #dcdbe6; border-radius: 7px; padding: 3px 8px;
font-size: 11.5px; background: #fff; min-width: 90px; max-width: 140px;
}
.rpt-ui #reports-filters input.dinput { min-width: 92px; max-width: 100px; }
.rpt-ui #reports-filters p > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
/* the "and" text between two date inputs stays readable */
.rpt-ui #reports-filters p > span:empty { display: none; }
.rpt-ui .rpt-fb-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.rpt-ui .rpt-refresh-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; border: none;
background: var(--pink1, #3bb273); color: #fff; font-size: 12px; font-weight: 600;
text-decoration: none; transition: filter .12s;
}
.rpt-ui .rpt-refresh-btn:hover { filter: brightness(.94); color: #fff; }
.rpt-ui .rpt-hide-link { font-size: 12px; font-weight: 600; color: #8a8a9e; text-decoration: none; }
.rpt-ui .rpt-hide-link:hover { color: var(--pink1, #3bb273); }
/* ---- Centered report header ---- */
.rpt-ui #report-header { text-align: center; padding: 22px 16px 6px; }
.rpt-ui #report-header h2 {
font-size: 20px; font-weight: 800; color: #2b2b3a !important; letter-spacing: .02em; margin: 0 0 6px;
}
.rpt-ui #report-header > h4 { font-size: 13px; color: #8a8a9e !important; margin: 0 0 2px; }
.rpt-ui #report-header > div h4 { display: inline; font-size: 12.5px; color: #9a9ab0 !important; margin: 0; }
.rpt-ui #report-header > div h4:not(:last-child)::after { content: " \00b7 "; color: #c9c9d6; }
/* ---- Table area ---- */
.rpt-ui #reports-table { padding: 4px 12px 14px; }
/* soften the legacy heavy black total rules to light grey to match the mockup */
.rpt-ui #reports-table td.footer-total { border-top-color: #dcdbe6 !important; }
.rpt-ui #reports-table #table99999 { border-top-color: #c7c6d4; }
.rpt-ui #reports-table .table-c.e td { border-bottom-color: #f2f1f7; color: #33343e; }
.rpt-ui #reports-table #table0_wrapper table thead,
.rpt-ui #reports-table > #header-wrapper { color: #8a8a9e; }
/* ---- Filter inputs: compact, chip-like ---- */
/* cap each widget cell width so no filter can stretch into the next one
(NO overflow:hidden β that clips the selectize dropdown & multi-item wrapping) */
.rpt-ui #reports-filters .filter-wrapper,
.rpt-ui #reports-filters .parameters { max-width: 360px; }
.rpt-ui #reports-filters .filter-wrapper p > span,
.rpt-ui #reports-filters .parameters p > span { max-width: 330px; min-width: 0; }
/* selectize widget β wide enough for long names, items wrap, dropdown stays visible */
.rpt-ui #reports-filters .selectize-control {
min-width: 190px !important; max-width: 320px !important; width: auto !important; margin: 0;
display: inline-block; vertical-align: middle; position: relative;
}
.rpt-ui #reports-filters .selectize-input {
border-radius: 7px !important; border: 1px solid #dcdbe6 !important; box-shadow: none !important;
min-height: 28px !important; height: auto !important; padding: 2px 8px !important; font-size: 11.5px !important;
min-width: 0 !important; width: 100% !important; display: flex !important; align-items: center;
flex-wrap: wrap !important; gap: 2px;
/* many selected items: stay ~3 rows tall and scroll inside instead of growing the filter bar
(the dropdown is a sibling of .selectize-input, so overflow-y here does not clip it) */
max-height: 82px; overflow-y: auto; align-content: flex-start;
}
.rpt-ui #reports-filters .selectize-input > .item,
.rpt-ui #reports-filters .selectize-input > div > .item { max-width: 100%; }
.rpt-ui #reports-filters .selectize-input input { font-size: 11.5px !important; min-width: 30px; }
.rpt-ui #reports-filters .selectize-dropdown { min-width: 170px; font-size: 12px; }
.rpt-ui #reports-filters .selectize-input.items { background: #fff; }
.rpt-ui #reports-filters .selectize-input > .item,
.rpt-ui #reports-filters .selectize-input > div > .item {
background: color-mix(in srgb, var(--pink1, #3bb273) 12%, #fff) !important;
border: 1px solid color-mix(in srgb, var(--pink1, #3bb273) 40%, #fff) !important;
color: #2b6f52 !important; border-radius: 5px !important; padding: 0 6px !important;
font-size: 11.5px !important; line-height: 20px !important; margin: 1px 3px 1px 0 !important;
}
/* fastSelect / editable-select single widget */
.rpt-ui #reports-filters input.es-input,
.rpt-ui #reports-filters input.fes {
max-width: 160px !important; width: 160px !important; height: 28px !important;
border-radius: 7px !important; border: 1px solid #dcdbe6 !important; box-shadow: none !important;
padding: 3px 22px 3px 8px !important; font-size: 11.5px !important;
}
.rpt-ui #reports-filters .filter-wrapper > p > span > input,
.rpt-ui #reports-filters input[type="text"] { max-width: 160px !important; }
/* ---- Summary sidebar (right of the report table, filled by Reports.renderSummary) ---- */
/* the form is a column flexbox and #reports-table gets its height via flex (module.css);
.rpt-body/.rpt-main must continue that flex chain or the grid collapses to 0 height */
.rpt-ui .rpt-body { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.rpt-ui .rpt-body > .rpt-main {
flex: 1 1 auto; min-width: 0; min-height: 0;
display: flex; flex-direction: column;
}
.rpt-ui .rpt-body > .rpt-main > #report-header { flex: 0 0 auto; }
.rpt-ui .rpt-summary {
flex: 0 0 200px; width: 200px; padding: 16px 14px; border-left: 1px solid #eceaf3;
background: #faf9fc; display: flex; flex-direction: column; gap: 8px; align-self: stretch;
overflow-y: auto;
}
.rpt-ui .rpt-sum-title {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #9a9ab0; margin: 6px 0 2px;
}
.rpt-ui .rpt-sum-card { background: #fff; border: 1px solid #e5e4ee; border-radius: 9px; padding: 4px 10px; }
.rpt-ui .rpt-sum-line {
display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
padding: 6px 0; border-bottom: 1px solid #f2f1f7; font-size: 11.5px;
}
.rpt-ui .rpt-sum-line:last-child { border-bottom: none; }
.rpt-ui .rpt-sum-label {
color: #6c6c85; font-weight: 600; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rpt-ui .rpt-sum-val { color: #2b2b3a; font-weight: 700; white-space: nowrap; }
.rpt-ui .rpt-sum-val.neg { color: #e5484d; }
.rpt-ui .rpt-sum-net { background: #263340; border-radius: 10px; padding: 12px 12px 10px; text-align: center; }
.rpt-ui .rpt-sum-net-label {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #aeb8c2; margin-bottom: 4px;
}
.rpt-ui .rpt-sum-net-val { font-size: 17px; font-weight: 800; color: #4fd08c; white-space: nowrap; }
.rpt-ui .rpt-sum-net-val.neg { color: #ff8a8f; }
.rpt-ui .rpt-sum-btn {
display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e5e4ee;
border-radius: 8px; background: #fff; font-size: 11.5px; font-weight: 600; color: #55556a;
text-decoration: none; transition: all .12s;
}
.rpt-ui .rpt-sum-btn i { color: #9a9ab0; width: 14px; text-align: center; transition: color .12s; }
.rpt-ui .rpt-sum-btn:hover { border-color: var(--pink1, #3bb273); color: var(--pink1, #3bb273); text-decoration: none; }
.rpt-ui .rpt-sum-btn:hover i { color: var(--pink1, #3bb273); }
/* =========================================================================
Quick Add command palette (#adding_new.qa-overlay) β replaces tooltipster menu
========================================================================= */
.qa-overlay { display: none; position: fixed; inset: 0; z-index: 100050; background: rgba(28,26,42,.45); }
.qa-overlay.open { display: flex; align-items: flex-start; justify-content: center; padding: 46px 16px; overflow-y: auto; }
.qa-panel {
width: 100%; max-width: 820px; background: #fff; border-radius: 16px;
box-shadow: 0 24px 64px rgba(0,0,0,.30); overflow: hidden;
font-family: Montserrat, "Segoe UI", Arial, Helvetica, sans-serif;
}
.qa-overlay ul, .qa-overlay li { list-style: none; margin: 0; padding: 0; float: none; }
.qa-overlay a, .qa-overlay a:hover, .qa-overlay a:focus { text-decoration: none !important; }
/* search */
.qa-search { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid #eee; }
.qa-search > i { color: #a3a3b5; font-size: 15px; }
#qaSearch { flex: 1; border: none; outline: none; font-size: 13px; color: #333; background: none; padding: 0; }
#qaSearch::placeholder { color: #b0b0c0; }
.qa-esc { font-size: 11px; color: #9a9ab0; border: 1px solid #e5e4ee; border-radius: 6px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.qa-esc:hover { background: #f3f2f9; color: #55556a; }
/* recent */
.qa-recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid #f0eff5; background: #faf9fc; }
.qa-recent-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #9a9ab0; margin-right: 2px; }
.qa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #e5e4ee; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 600; color: #55556a; transition: all .12s; }
.qa-chip i { font-size: 10px; color: #8a8a9e; transition: color .12s; }
.qa-chip:hover { border-color: var(--pink1, #3bb273); color: var(--pink1, #3bb273); }
.qa-chip:hover i { color: var(--pink1, #3bb273); }
/* grid of categories */
.qa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 20px; padding: 20px 22px; max-height: 64vh; overflow-y: auto; }
.qa-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.qa-cat { --c: #3bb273; min-width: 0; }
.qa-cat-head { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--c); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 2px solid var(--c); }
.qa-cat-head i { font-size: 10px; }
.qa-list { display: flex; flex-direction: column; gap: 4px; }
.qa-link { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 7px; transition: background .12s; }
.qa-link:hover { background: #f5f4fb; }
.qa-ico { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.qa-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.qa-title { font-size: 10.5px; font-weight: 600; color: #33333f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-sub { font-size: 9px; color: #9a9ab0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* category accent colors */
.qa-cat.cat-leasing { --c: #3bb273; }
.qa-cat.cat-accounting { --c: #c2329a; }
.qa-cat.cat-people { --c: #3b82c2; }
.qa-cat.cat-banking { --c: #d99a2b; }
.qa-cat.cat-payables { --c: #d9484d; }
.qa-cat.cat-receivables { --c: #2fa96a; }
.qa-cat.cat-properties { --c: #3b82c2; }
.qa-cat.cat-investors { --c: #d99a2b; }
/* footer */
.qa-foot { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-top: 1px solid #eee; background: #faf9fc; font-size: 11px; color: #9a9ab0; }
.qa-foot-hint b { display: inline-block; background: #fff; border: 1px solid #e5e4ee; border-radius: 4px; padding: 0 5px; margin-right: 3px; color: #6c6c85; font-weight: 600; }
.qa-brand { margin-left: auto; font-weight: 600; color: #b8b8c6; }
@media (max-width: 900px) {
.qa-grid { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================================================
Reports command palette (#report_list.rep-overlay) β reuses .qa-* shell
========================================================================= */
.rep-overlay .qa-panel { max-width: 940px; }
/* tabs in the search row */
.qa-tabs { display: inline-flex; align-items: center; gap: 2px; background: #f1f0f7; border-radius: 9px; padding: 2px; margin-left: 4px; }
.qa-tab { padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; color: #6c6c85; white-space: nowrap; transition: all .12s; }
.qa-tab.is-active { background: #fff; color: var(--pink1, #3bb273); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.qa-tab:hover { color: var(--pink1, #3bb273); }
.qa-tab.rep-tab-batched i { font-size: 10px; margin-right: 3px; }
/* favorites-only star toggle */
.rep-favtoggle { display: inline-flex; align-items: center; cursor: pointer; color: #cfcfda; margin: 0 2px; }
.rep-favtoggle input { display: none; }
.rep-favtoggle i { font-size: 14px; transition: color .12s; }
.rep-favtoggle:hover i, .rep-favtoggle.is-on i { color: #e8b93b; }
/* masonry columns of categories */
.rep-cats { column-count: 4; column-gap: 20px; padding: 20px 22px; max-height: 64vh; overflow-y: auto; }
.rep-cats .qa-cat { display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 22px; min-width: 0; }
.rep-cats .qa-cat.hidden, .rep-cats .qa-item.hidden { display: none; }
/* report row = link + star (+ duplicate on hover) */
.rep-item { display: flex; align-items: center; gap: 2px; }
.rep-item .qa-link { flex: 1 1 auto; min-width: 0; }
.qa-star { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #cbcbd8; font-size: 12px; border-radius: 6px; transition: all .12s; }
.qa-star:hover { color: #e8b93b; background: #f5f4fb; }
.qa-star i.selected { color: #e8b93b; font-weight: 900; } /* fa5: weight 900 renders the solid star */
.qa-dup { flex: 0 0 auto; width: 22px; height: 24px; display: none; align-items: center; justify-content: center; color: #b8b8c6; font-size: 11px; border-radius: 6px; transition: all .12s; }
.rep-item:hover .qa-dup { display: inline-flex; }
.qa-dup:hover { color: var(--pink1, #3bb273); background: #f5f4fb; }
/* footer add-report link */
.qa-foot-add { margin-left: 10px; font-size: 11px; font-weight: 600; color: var(--pink1, #3bb273); }
.qa-foot-add i { font-size: 10px; margin-right: 3px; }
.qa-foot-add:hover { filter: brightness(.9); }
@media (max-width: 900px) { .rep-cats { column-count: 2; } }
/* =========================================================================
Memorized Transactions window redesign (.mt-ui / .mt-modal)
========================================================================= */
.mt-modal .modal-dialog { max-width: 1280px !important; width: calc(100vw - 60px); margin: 30px auto !important; }
.mt-modal .modal-content.mt-ui { padding: 0 !important; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 64px rgba(0,0,0,.30);
display: flex; flex-direction: column; height: calc(100vh - 90px); max-height: 880px; }
.mt-ui form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* kill the global `button { min-width:172px; float:left; ... }` rule for every button in this modal */
.mt-modal button, .mt-modal input[type="submit"], .mt-modal input[type="button"], .mt-modal input[type="reset"] {
min-width: 0 !important; float: none !important; overflow: visible !important; box-shadow: none !important;
position: static !important; top: 0 !important; border-radius: 10px; height: auto !important; }
/* header β neutralize global `header h2` + `.form-entry.popup-a header` (margin-top:-15px; zoom:90%) */
.mt-ui header.mt-head { display: flex; align-items: center; gap: 14px; padding: 16px 14px !important; border-bottom: 1px solid #eceaf3; cursor: move; margin: 0 !important; zoom: 1 !important; flex: 0 0 auto;
/* neutralize global .modal-h card styling (rounded corners + shadow) picked up from the drag-handle class */
border-radius: 0 !important; box-shadow: none !important; background: #fff !important; width: auto !important; }
/* kill module.css `.form-bills header > div { margin:0 auto }` which shoves the flex groups around */
.mt-ui header.mt-head > div { margin: 0 !important; }
.mt-head-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin: 0 !important; }
.mt-ui .mt-head .mt-search { margin: 0 auto !important; }
.mt-icon { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; background: color-mix(in srgb, var(--pink1, #c2329a) 16%, #fff); color: var(--pink1, #c2329a); }
.mt-titles { display: flex !important; flex-direction: column !important; align-items: flex-start; min-width: 0; position: static !important; float: none !important; }
.mt-ui .mt-head h2.mt-title { position: static !important; float: none !important; top: auto !important; left: auto !important; right: auto !important; display: block !important; width: auto !important; height: auto !important; font-size: 17px !important; font-weight: 700 !important; color: #2b2b3a !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; text-align: left !important; white-space: nowrap; }
.mt-ui .mt-head h2.mt-title:before, .mt-ui .mt-head h2.mt-title:after { content: none !important; display: none !important; }
.mt-sub { position: static !important; float: none !important; display: block !important; font-size: 11.5px; color: #9a9ab0; margin-top: 1px; white-space: nowrap; }
.mt-search { flex: 1 1 auto; max-width: 420px; margin: 0 auto; display: flex; align-items: center; gap: 9px; background: #f5f4fa; border: 1px solid #ecebf3; border-radius: 10px; padding: 8px 13px; }
.mt-search i { color: #a3a3b5; font-size: 13px; }
.mt-search input { flex: 1; border: none; outline: none; background: none; font-size: 13px; color: #333; padding: 0; }
.mt-win { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.mt-win-btn { width: 28px; height: 28px; border: 1px solid #e5e4ee; border-radius: 7px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #a3a3b5; font-size: 11px; cursor: pointer; transition: all .12s; }
.mt-win-btn:hover { background: #f3f2f9; color: #55556a; }
.mt-win-btn.close2:hover { background: #fdeaea; color: #e5484d; }
/* subbar: tabs + summary */
.mt-subbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #f0eff5; background: #faf9fc; flex: 0 0 auto; }
.mt-tabs { display: inline-flex; align-items: center; gap: 2px; background: #f1f0f7; border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.mt-tab { padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #6c6c85; white-space: nowrap; transition: all .12s; }
.mt-tab .mt-tab-c { font-size: 11px; color: #9a9ab0; margin-left: 3px; }
.mt-tab.is-active { background: #fff; color: #2b2b3a; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.mt-tab.is-active .mt-tab-c { color: var(--pink1, #c2329a); }
.mt-tab:hover { color: #2b2b3a; }
.mt-summary { display: flex; align-items: center; gap: 26px; }
.mt-sum-block { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.mt-sum-label { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #9a9ab0; text-transform: uppercase; }
.mt-sum-val { font-size: 14px; font-weight: 700; color: #2b2b3a; }
.mt-sum-money { color: #2fa96a; }
/* table */
.mt-table-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px; }
.mt-table { width: 100%; border-collapse: collapse; }
.mt-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9a9ab0; padding: 12px; border-bottom: 1px solid #eceaf3; white-space: nowrap; }
.mt-table td { padding: 11px 12px; border-bottom: 1px solid #f4f3f8; font-size: 12.5px; color: #33333f; vertical-align: middle; }
.mt-row:hover td { background: #faf9fd; }
.mt-col-check { width: 44px; }
.mt-col-type { width: 96px; }
.mt-col-auto { width: 70px; }
.mt-col-act, .mt-table thead .mt-col-act { width: 84px; text-align: right; }
.mt-col-amt, .mt-table thead .mt-col-amt { text-align: right; white-space: nowrap; }
.mt-name { font-weight: 600; }
.mt-untitled { color: #b5b5c4; font-weight: 500; font-style: italic; }
.mt-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #eef0f5; color: #5b5b70; white-space: nowrap; }
.mt-badge-charge { background: #eef1fb; color: #4664c6; }
.mt-badge-payment, .mt-badge-customerpayments { background: #e8f7ef; color: #2fa96a; }
.mt-badge-billpayment { background: #fef2e6; color: #d1852b; }
.mt-badge-bill { background: #fdecec; color: #d9484d; }
.mt-badge-check { background: #f0ecfb; color: #6b46c1; }
.mt-badge-deposit { background: #e6f7f6; color: #2a9d94; }
.mt-badge-creditcard { background: #eceeffc9; color: #4b52c4; }
.mt-badge-banktransfer, .mt-badge-banktransaction { background: #fdf4e3; color: #c08a1e; }
.mt-badge-invoice { background: #e8f4fb; color: #2f7dbd; }
.mt-date { display: block; font-weight: 600; color: #33333f; }
.mt-overdue { display: block; font-size: 10px; font-weight: 600; color: #e5484d; margin-top: 1px; }
.mt-freq { display: inline-flex; align-items: center; gap: 6px; color: #55556a; }
.mt-freq i { color: #9a9ab0; font-size: 12px; }
.mt-prop { display: inline-flex; align-items: center; gap: 6px; color: #55556a; }
.mt-prop i { color: #b0b0c0; font-size: 12px; }
.mt-amt { font-weight: 700; }
.mt-amt.neg { color: #e5484d; }
/* ---- inline editing: fields that read as plain text, reveal as a field on hover/focus ---- */
.mt-ui .mt-edit {
font: inherit !important; font-size: 12.5px !important; font-weight: 600; color: #33333f;
border: 1px solid transparent !important; background: transparent !important; border-radius: 6px !important;
padding: 3px 6px !important; margin: 0 !important; width: 100%; max-width: 100%; box-sizing: border-box !important;
height: auto !important; min-width: 0 !important; line-height: 1.3 !important; float: none !important;
box-shadow: none !important; outline: none !important; transition: border-color .12s, background .12s;
-webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: visible !important; position: static !important; top: 0 !important;
}
.mt-row:hover .mt-edit, .mt-ui .mt-edit:hover { border-color: #dcdbe6 !important; background: #fff !important; }
.mt-ui .mt-edit:focus { border-color: var(--pink1, #3bb273) !important; background: #fff !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink1, #3bb273) 18%, #fff) !important; }
.mt-ui .mt-edit::placeholder { color: #b5b5c4; font-weight: 500; font-style: italic; }
.mt-edit-name { font-weight: 600; }
.mt-edit-date { font-weight: 600; max-width: 118px; }
.mt-edit-amt { text-align: right; font-weight: 700; }
.mt-edit-amt.neg { color: #e5484d; }
.mt-freq-wrap { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.mt-freq-wrap i { color: #9a9ab0; font-size: 12px; flex: 0 0 auto; }
.mt-ui select.mt-edit { color: #55556a; cursor: pointer; background-image: none !important; padding-right: 6px !important; }
/* auto toggle */
.mt-auto-toggle { display: inline-flex; align-items: center; cursor: pointer; margin: 0; position: relative; }
.mt-auto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mt-auto-track { position: relative; width: 38px; height: 20px; border-radius: 20px; background: #d8d7e3; transition: background .15s; display: inline-block; }
.mt-auto-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.mt-auto-toggle.is-on .mt-auto-track { background: #2fa96a; }
.mt-auto-toggle.is-on .mt-auto-thumb { left: 20px; }
/* row actions */
.mt-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: #b0b0c0; font-size: 12px; transition: all .12s; }
.mt-act:hover { background: #f3f2f9; }
.mt-del:hover { background: #fdeaea; color: #e5484d; }
/* checkbox (scoped) */
.mt-ui .checkbox { position: relative; display: inline-block; cursor: pointer; margin: 0; line-height: 0; }
.mt-ui .checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.mt-ui .checkbox .input { position: relative; display: inline-block; width: 16px; height: 16px; border: 1.5px solid #ccccdb; border-radius: 4px; background: #fff; transition: all .12s; }
.mt-ui .checkbox.active .input { background: var(--pink1, #c2329a); border-color: var(--pink1, #c2329a); }
.mt-ui .checkbox.active .input:after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* footer */
.mt-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid #eceaf3; background: #fff; flex: 0 0 auto; }
.mt-foot-left { font-size: 12.5px; color: #6c6c85; }
.mt-selected-raw { display: none; }
.mt-foot-sel { display: none; }
.mt-foot-sel.show { display: inline; }
.mt-foot-sel b { color: #2b2b3a; font-weight: 700; }
.mt-foot-right { display: flex; align-items: center; gap: 10px; }
.mt-ui .mt-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; line-height: 1.2; transition: all .12s;
position: static !important; top: 0 !important; float: none !important; min-width: 0 !important; box-shadow: none !important; overflow: visible !important; height: auto !important; margin: 0 !important; }
.mt-ui .mt-btn i { font-size: 12px; }
.mt-btn-primary { background: var(--pink1, #c2329a); color: #fff; }
.mt-btn-primary:hover { filter: brightness(.94); color: #fff; }
.mt-btn-danger { background: #fff; border-color: #f0c6c6 !important; color: #d9484d; }
.mt-btn-danger:hover { background: #fdeaea; }
/* empty state */
.mt-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 0; color: #b0b0c0; }
.mt-empty i { font-size: 30px; }
/* ββ Entities page (general mode, properties/entities-index.php) βββββββββββ */
.ent-page { padding: 24px 28px; max-width: 1100px; }
.ent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ent-head h1 { font-size: 22px; margin: 0; }
.ent-add-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 6px; background: #2e6da4; color: #fff !important; cursor: pointer; font-size: 14px; border: none; }
.ent-add-btn:hover { background: #245a8c; text-decoration: none; }
.ent-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; }
.ent-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6f7782; padding: 10px 14px; border-bottom: 2px solid #e3e6ea; background: #f7f8fa; }
.ent-table td { padding: 12px 14px; border-bottom: 1px solid #eef0f3; font-size: 14px; vertical-align: middle; }
.ent-table tbody tr { cursor: pointer; }
.ent-table tbody tr:hover { background: #f5f9fd; }
.ent-logo { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; background: #e9ecf0; }
.ent-logo-ph { width: 42px; height: 42px; border-radius: 6px; background: #e9ecf0; display: inline-flex; align-items: center; justify-content: center; color: #9aa3ad; font-weight: 600; font-size: 16px; }
.ent-name { font-weight: 600; }
.ent-sub { color: #8a929b; font-size: 12px; }
.ent-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; }
.ent-badge.on { background: #e2f4e5; color: #1e7d32; }
.ent-badge.off { background: #f0f1f3; color: #8a929b; }
.ent-empty { padding: 48px; text-align: center; color: #8a929b; background: #fff; border: 1px dashed #d6dade; border-radius: 8px; }
/* logo block inside the entity modal flows in-column (module.css pins .submit
absolutely to the section's top-right, which overlaps the fields) */
.ent-logo-block .input-file { margin-top: 10px; }
.ent-logo-block .check-a.a label { text-align: left; padding: 0; }
/* Entity modal: custom logo upload block (theme-neutral β .input-file/.submit
have absolute-position rules in module.css that break this layout) */
.ent-logo-upload { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; }
.ent-logo-preview { width: 96px; height: 96px; object-fit: contain; border: 1px solid #e3e6ea; border-radius: 8px; background: #fafbfc; }
.ent-logo-btn { display: inline-block; padding: 8px 14px; border-radius: 6px; background: #2e6da4; color: #fff !important; cursor: pointer; font-size: 13px; }
.ent-logo-btn:hover { background: #245a8c; }
.ent-logo-btn input[type=file] { display: none; }
.ent-active-row input[type=checkbox] { width: auto; }
/* Entities page: left list column next to standard right panel */
.ent-list-side .ent-head { padding: 4px 2px 12px; }
.ent-list-side .ent-head h1 { font-size: 19px; }
.ent-list-side .ent-table td { padding: 10px 10px; }
.ent-edit-ico { color: #9aa3ad; }
.ent-table tbody tr:hover .ent-edit-ico { color: #2e6da4; }
/* Entities left column: fit the narrow left-side aside + search box */
.ent-list-side { width: 100%; }
.ent-list-side .ent-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; }
.ent-list-side .ent-table { table-layout: fixed; }
.ent-list-side .ent-table td { padding: 9px 8px; overflow: hidden; text-overflow: ellipsis; }
.ent-list-side .ent-name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-list-side .ent-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-search { position: relative; margin-bottom: 10px; }
.ent-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9aa3ad; font-size: 12px; }
.ent-search input { width: 100%; padding: 8px 10px 8px 30px; border: 1px solid #e3e6ea; border-radius: 6px; font-size: 13px; background: #fff; }
.ent-search input:focus { outline: none; border-color: #2e6da4; }
.ent-badge.off { margin-left: 6px; }
/* =========================================================================
User Activity Log modal redesign (.ual-modal / .ual-ui)
========================================================================= */
.ual-modal .modal-dialog { max-width: 620px; width: calc(100vw - 40px); margin: 30px auto !important; }
.ual-modal .modal-content.ual-ui { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.28);
display: flex; flex-direction: column; max-height: calc(100vh - 60px);
font-family: Montserrat, "Segoe UI", Arial, Helvetica, sans-serif; }
/* header */
.ual-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #f0eff5; flex: 0 0 auto; }
.ual-user { display: flex; align-items: center; gap: 12px; }
.ual-avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
background: var(--pink1, #6b46c1); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.ual-title { font-size: 16px; font-weight: 700; color: #2b2b3a; line-height: 1.2; }
.ual-email { font-size: 12px; color: #9a9ab0; }
.ual-close { width: 30px; height: 30px; border: 1px solid #e5e4ee; border-radius: 8px; background: #fff; color: #9a9ab0;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: all .12s;
min-width: 0 !important; float: none !important; box-shadow: none !important; padding: 0 !important; position: static !important; top: 0 !important; overflow: visible !important; }
.ual-close:hover { background: #f3f2f9; color: #55556a; }
/* tabs */
.ual-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid #f0eff5; background: #faf9fc; flex: 0 0 auto; }
.ual-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid #e5e4ee; border-radius: 20px;
background: #fff; font-size: 12.5px; font-weight: 600; color: #6c6c85; white-space: nowrap; transition: all .12s; }
.ual-tab i { font-size: 11px; color: #a3a3b5; }
.ual-tab b { font-weight: 700; color: #9a9ab0; }
.ual-tab.is-active { border-color: var(--pink1, #3bb273); color: var(--pink1, #3bb273); background: color-mix(in srgb, var(--pink1, #3bb273) 8%, #fff); }
.ual-tab.is-active i, .ual-tab.is-active b { color: var(--pink1, #3bb273); }
.ual-tab:hover { border-color: #d3d2df; }
.ual-tabs { border-bottom: none; padding-bottom: 4px; }
.ual-searchrow { padding: 10px 20px 12px; border-bottom: 1px solid #f0eff5; background: #faf9fc; flex: 0 0 auto; }
.ual-search { display: flex; align-items: center; gap: 7px; width: 100%; margin: 0; padding: 4px 12px; border: 1px solid #e5e4ee; border-radius: 16px; background: #fff; }
.ual-search i { font-size: 11px; color: #a3a3b5; }
.ual-search input { border: none; outline: none; background: none; font-size: 12.5px; color: #333; flex: 1; width: auto; padding: 0; height: 22px; }
/* timeline body */
.ual-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 22px 14px; }
.ual-group { margin-top: 10px; }
.ual-group-head { display: flex; align-items: center; gap: 12px; padding: 10px 0 6px; }
.ual-date { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #9a9ab0; }
.ual-group-head:after { content: ""; flex: 1 1 auto; height: 1px; background: #f0eff5; }
.ual-gcount { font-size: 10px; color: #b5b5c4; }
.ual-item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; position: relative; }
.ual-ico { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.ual-ico-reports { background: #e8f4fb; color: #2f7dbd; }
.ual-ico-signins { background: #e8f7ef; color: #2fa96a; }
.ual-ico-changes { background: #fef2e6; color: #d1852b; }
.ual-item-body { min-width: 0; flex: 1 1 auto; }
.ual-action { font-size: 13px; color: #33333f; line-height: 1.35; }
.ual-action a, .ual-action .reportLink { color: var(--pink1, #2fa96a); font-weight: 600; text-decoration: none; }
.ual-action a:hover, .ual-action .reportLink:hover { text-decoration: underline; }
.ual-action b { color: var(--pink1, #2fa96a); font-weight: 600; }
.ual-meta { font-size: 11px; color: #a3a3b5; margin-top: 2px; }
.ual-ip { font-variant-numeric: tabular-nums; }
.ual-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 0; color: #b5b5c4; }
.ual-empty i { font-size: 28px; }
/* footer */
.ual-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-top: 1px solid #f0eff5; background: #faf9fc; flex: 0 0 auto; }
.ual-showing { font-size: 12px; color: #9a9ab0; }
.ual-showing b { color: #55556a; font-weight: 700; }
.ual-export { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid #dcdbe6; border-radius: 9px;
background: #fff; font-size: 12.5px; font-weight: 600; color: #55556a; text-decoration: none; transition: all .12s; }
.ual-export i { font-size: 11px; }
.ual-export:hover { border-color: var(--pink1, #3bb273); color: var(--pink1, #3bb273); }
/* ββ Transaction-form reconcile/match status indicators (shared by bank trans,
check, deposit, credit card forms). Rendered from line_status_badge() +
JS.lineStatusIcon(). βββββββββββββββββββββββββββββββββββββββββββββββββββ */
.detailLockedBadge {
display: inline-block; margin: 6px 0 0; padding: 3px 11px; border-radius: 12px;
background: #e9f6ee; border: 1px solid #bfe6cd; color: #1b7a47;
font-size: 12px; font-weight: 600; cursor: help;
}
.detailLockedBadge i { color: #04a904; margin-right: 5px; }
.formGridTable tr.lineLocked td { background: #eef7f0; }
.formGridTable tr.lineOnRec td { background: #fffdf0; }
.formGridTable td[total="debit"] { position: relative; }
.lineStatusIcon {
position: absolute; right: 14px; top: 40%; transform: translateY(-50%);
font-size: 15px; color: #04a904; cursor: pointer; z-index: 3; padding: 6px;
}
.lineStatusIcon.open { color: #f9bd11; cursor: default; }
/* Delete-match button: a plain red trash icon (no button chrome). Overrides the
global button rule (min-width/float/shadow) and the "#menucontainer li i"
circle treatment (border-radius:50%; background:#f9f8f8). */
#menucontainer .deleteMatchLi { background: transparent !important; border: none !important; text-align: right !important; padding: 6px 6px 2px 0 !important; }
#menucontainer .btnDeleteMatch {
display: inline-flex !important; align-items: center; justify-content: center;
width: auto !important; min-width: 0 !important; height: auto !important;
padding: 4px !important; margin: 0 !important; float: none !important; top: 0 !important;
overflow: visible !important; position: relative !important;
border: none !important; border-radius: 0 !important; background: transparent !important;
box-shadow: none !important; cursor: pointer; -webkit-appearance: none; appearance: none;
}
#menucontainer .btnDeleteMatch i {
background: transparent !important; border-radius: 0 !important; padding: 0 !important;
margin: 0 !important; color: #d64550 !important; font-size: 17px !important; font-weight: 400 !important;
}
#menucontainer .btnDeleteMatch:hover i { background: transparent !important; color: #b83440 !important; }
.detailLockedBadge.matchinfo { cursor: pointer; }
/* =========================================================================
Invoice Import "Review Bill" redesign (.invoice-import-modal / .ii-ui)
(the Expenses/Items formgrid keeps its own inline styles)
========================================================================= */
.invoice-import-modal .modal-content.ii-ui { padding: 0 !important; margin: auto; height: 92vh; display: flex; flex-direction: column;
overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 24px 64px rgba(0,0,0,.30);
font-family: Montserrat, "Segoe UI", Arial, Helvetica, sans-serif; }
.invoice-import-modal button { min-width: 0 !important; float: none !important; overflow: visible !important; box-shadow: none !important; position: static !important; top: 0 !important; height: auto !important; }
/* ---- header ---- */
.invoice-import-modal .ii-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 12px 16px !important; border-bottom: 1px solid #eceaf3; background: #fff; cursor: move; flex: 0 0 auto;
margin: 0 !important; zoom: 1 !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0; }
.invoice-import-modal .ii-head-left { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.invoice-import-modal .ii-head-icon { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--pink1, #3bb273) 16%, #fff); color: var(--pink1, #3bb273); font-size: 14px; }
.invoice-import-modal .ii-head-title { font-size: 15px; font-weight: 700; color: #2b2b3a; }
.invoice-import-modal .ii-hash { font-size: 10px; font-weight: 600; color: #9a9ab0; background: #f2f1f7; border-radius: 6px; padding: 3px 8px; letter-spacing: .02em; text-transform: uppercase; }
.invoice-import-modal .ii-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.invoice-import-modal .ii-badge-conf.conf-high { background: #e8f7ef; color: #1f9d57; }
.invoice-import-modal .ii-badge-conf.conf-review { background: #fdf4e3; color: #c08a1e; }
.invoice-import-modal .ii-badge-conf.conf-low { background: #fdecec; color: #d9484d; }
.invoice-import-modal .ii-badge-ai { background: #ede9fe; color: #6d28d9; }
.invoice-import-modal .ii-badge-ocr { background: #f3f4f6; color: #6b7280; }
.invoice-import-modal .ii-badge-status.ok { background: #e8f7ef; color: #1f9d57; }
.invoice-import-modal .ii-badge-status.no { background: #f3f4f6; color: #6b7280; }
/* ---- header right (pager + close) ---- */
.invoice-import-modal .ii-head-right { display: flex; align-items: center; gap: 12px; }
.invoice-import-modal .ii-pager { display: inline-flex; align-items: center; gap: 4px; }
.invoice-import-modal .ii-pager-btn { width: 28px; height: 28px; border: 1px solid #e5e4ee; border-radius: 8px; background: #fff; color: #6c6c85;
display: inline-flex; align-items: center; justify-content: center; font-size: 11px; text-decoration: none; transition: all .12s; }
.invoice-import-modal .ii-pager-btn:hover { background: #f3f2f9; color: var(--pink1, #3bb273); }
.invoice-import-modal .ii-pager-label { font-size: 12.5px; font-weight: 600; color: #55556a; white-space: nowrap; }
.invoice-import-modal .ii-win-close { width: 30px; height: 30px; border: 1px solid #f0c6c6; border-radius: 8px; background: #fff; color: #d9484d;
display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all .12s; }
.invoice-import-modal .ii-win-close:hover { background: #fdeaea; }
/* ---- split body ---- */
.invoice-import-modal .ii-body { flex: 1 1 0; display: flex; overflow: hidden; min-height: 0; }
.invoice-import-modal .ii-pdf-pane { flex: 0 0 48%; display: flex; flex-direction: column; background: #2b2f38; min-width: 0; }
.invoice-import-modal .ii-pdf-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #22262e; border-bottom: 1px solid #1a1d24; flex: 0 0 auto; }
.invoice-import-modal .ii-pdf-name { font-size: 12px; font-weight: 600; color: #cdd2da; display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-import-modal .ii-pdf-name i { color: #e5484d; }
.invoice-import-modal .ii-reextract { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; border: none;
background: #6d28d9; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter .12s; }
.invoice-import-modal .ii-reextract:hover { filter: brightness(1.1); }
.invoice-import-modal .ii-pdf-tools { margin-left: auto; display: inline-flex; gap: 4px; }
.invoice-import-modal .ii-pdf-tool { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
color: #aeb4bf; font-size: 12px; text-decoration: none; transition: all .12s; }
.invoice-import-modal .ii-pdf-tool:hover { background: rgba(120,130,150,.25); color: #fff; }
.invoice-import-modal .ii-pdf-frame { width: 100%; flex: 1 1 auto; border: 0; display: block; background: #3a3f49; }
.invoice-import-modal .ii-form-pane { flex: 1 1 0; overflow-y: auto; padding: 18px 22px 24px; background: #fff; min-width: 0; }
/* ---- header fields ---- */
.invoice-import-modal .ii-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.invoice-import-modal .ii-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.invoice-import-modal .ii-field > label { font-size: 12px; font-weight: 600; color: #55556a; margin: 0; display: flex; align-items: center; gap: 7px; }
.invoice-import-modal .ii-field .req { color: #d9484d; }
.invoice-import-modal .ii-conf { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 1px 7px; }
.invoice-import-modal .ii-conf-high { background: #e8f7ef; color: #1f9d57; }
.invoice-import-modal .ii-conf-review { background: #fdf4e3; color: #c08a1e; }
.invoice-import-modal .ii-conf-low { background: #fdecec; color: #d9484d; }
.invoice-import-modal input.ii-input, .invoice-import-modal .ii-input input, .invoice-import-modal .ii-input .es-input {
width: 100% !important; box-sizing: border-box; border: 1px solid #dfe3e8 !important; border-radius: 9px !important;
padding: 9px 12px !important; font-size: 13px !important; background: #fff !important; color: #2b2b3a; height: auto !important; float: none !important; }
.invoice-import-modal input.ii-input:focus, .invoice-import-modal .ii-input input:focus, .invoice-import-modal .ii-input .es-input:focus {
outline: none !important; border-color: var(--pink1, #3bb273) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink1, #3bb273) 14%, #fff) !important; }
.invoice-import-modal .ii-input.is-high, .invoice-import-modal .ii-input.is-high input, .invoice-import-modal .ii-input.is-high .es-input { border-color: #bfe6cf !important; background: #f4fbf7 !important; }
.invoice-import-modal .ii-input.is-review, .invoice-import-modal .ii-input.is-review input, .invoice-import-modal .ii-input.is-review .es-input { border-color: #efdcae !important; background: #fdfaf0 !important; }
.invoice-import-modal .ii-input.is-low, .invoice-import-modal .ii-input.is-low input, .invoice-import-modal .ii-input.is-low .es-input { border-color: #f0c9c9 !important; background: #fdf5f5 !important; }
.invoice-import-modal .ii-input.select { padding: 0 !important; border: none !important; background: none !important; display: block; }
/* ---- confidence legend ---- */
.invoice-import-modal .ii-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 6px; padding: 9px 14px; background: #faf9fc; border: 1px solid #f0eff5; border-radius: 10px; }
.invoice-import-modal .ii-legend-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #9a9ab0; }
.invoice-import-modal .ii-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6c6c85; }
.invoice-import-modal .ii-dot { width: 9px; height: 9px; border-radius: 50%; }
.invoice-import-modal .ii-dot.high { background: #1f9d57; }
.invoice-import-modal .ii-dot.review { background: #e0a92b; }
.invoice-import-modal .ii-dot.low { background: #d9484d; }
/* ---- grid wrapper spacing ---- */
.invoice-import-modal .ii-grid-wrap { margin-top: 14px; }
/* ---- vendor match banner ---- */
.invoice-import-modal .ii-banner { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
.invoice-import-modal .ii-banner.ok { background: #f0fbf5; border: 1px solid #cbecd8; color: #1f7a48; }
.invoice-import-modal .ii-banner.warn { background: #fdf8ec; border: 1px solid #f0e2b8; color: #97701c; }
.invoice-import-modal .ii-banner i { margin-top: 1px; }
.invoice-import-modal .ii-banner.ok i { color: #2fa96a; }
/* ---- extraction details ---- */
.invoice-import-modal .ii-details { margin-top: 16px; border: 1px solid #f0eff5; border-radius: 10px; overflow: hidden; }
.invoice-import-modal .ii-details-toggle { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; font-size: 13px; font-weight: 600; color: #55556a; text-decoration: none; background: #faf9fc; cursor: pointer; }
.invoice-import-modal .ii-details-toggle span { display: inline-flex; align-items: center; gap: 8px; }
.invoice-import-modal .ii-details-toggle span i { color: #8b5cf6; }
.invoice-import-modal .ii-details-toggle:hover { color: #2b2b3a; text-decoration: none; }
.invoice-import-modal .ii-details-caret { transition: transform .15s; }
.invoice-import-modal .ii-details-toggle.collapsed .ii-details-caret { transform: rotate(180deg); }
.invoice-import-modal #ii-extract-details { padding: 4px 14px 14px; }
.invoice-import-modal .ii-details-note { font-size: 11.5px; color: #9a9ab0; margin: 8px 0; line-height: 1.5; }
.invoice-import-modal .ii-details-note strong { color: #55556a; }
.invoice-import-modal .ii-details-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.invoice-import-modal .ii-details-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9a9ab0; padding: 8px 8px; border-bottom: 1px solid #eceaf3; }
.invoice-import-modal .ii-details-table td { padding: 9px 8px; border-bottom: 1px solid #f4f3f8; vertical-align: middle; }
.invoice-import-modal .ii-t-field { font-weight: 600; color: #44445a; white-space: nowrap; }
.invoice-import-modal .ii-star { color: #e0a92b; }
.invoice-import-modal .ii-t-val { color: #55556a; word-break: break-word; }
.invoice-import-modal .ii-t-conf { width: 120px; white-space: nowrap; text-align: right; }
.invoice-import-modal .ii-details-table th.ii-t-conf { text-align: right; }
.invoice-import-modal .ii-bar { display: inline-block; width: 62px; height: 5px; border-radius: 4px; background: #eceaf3; vertical-align: middle; overflow: hidden; margin-right: 7px; }
.invoice-import-modal .ii-bar-fill { display: block; height: 100%; border-radius: 4px; }
.invoice-import-modal .ii-bar-fill.high { background: #1f9d57; }
.invoice-import-modal .ii-bar-fill.review { background: #e0a92b; }
.invoice-import-modal .ii-bar-fill.low { background: #d9484d; }
.invoice-import-modal .ii-bar-fill.none { background: #d5d4e2; }
.invoice-import-modal .ii-bar-pct { font-size: 11px; font-weight: 700; }
.invoice-import-modal .ii-bar-pct.high { color: #1f9d57; }
.invoice-import-modal .ii-bar-pct.review { color: #c08a1e; }
.invoice-import-modal .ii-bar-pct.low { color: #d9484d; }
.invoice-import-modal .ii-bar-pct.none { color: #b5b5c4; }
.invoice-import-modal .ii-raw { display: block; font-size: 11px; max-height: 160px; overflow-y: auto; white-space: pre-wrap; background: #f7f7fb; border: 1px solid #eceaf3; border-radius: 8px; padding: 10px; margin-top: 8px; color: #55556a; }
/* ---- footer ---- */
.invoice-import-modal .ii-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid #eceaf3; background: #fff; flex: 0 0 auto; }
.invoice-import-modal .ii-foot-hint { font-size: 11.5px; color: #9a9ab0; display: inline-flex; align-items: center; gap: 7px; }
.invoice-import-modal .ii-foot-hint i { color: #e0a92b; }
.invoice-import-modal .ii-foot-hint kbd { background: #f2f1f7; border: 1px solid #e5e4ee; border-radius: 5px; padding: 0 6px; font-size: 11px; color: #6c6c85; }
.invoice-import-modal .ii-foot-btns { display: flex; align-items: center; gap: 10px; }
.invoice-import-modal .ii-created { font-size: 12.5px; font-weight: 600; color: #1f7a48; background: #f0fbf5; border: 1px solid #cbecd8; border-radius: 8px; padding: 7px 12px; }
.invoice-import-modal .ii-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .12s; margin: 0 !important; line-height: 1.2; }
.invoice-import-modal .ii-btn i { font-size: 12px; }
.invoice-import-modal .ii-btn-ghost { background: #fff; border-color: #dcdbe6 !important; color: #55556a; }
.invoice-import-modal .ii-btn-ghost:hover { background: #f6f5fb; }
.invoice-import-modal .ii-btn-reject { background: #fff; border-color: #f0c6c6 !important; color: #d9484d; }
.invoice-import-modal .ii-btn-reject:hover { background: #fdeaea; }
.invoice-import-modal .ii-btn-accept { background: var(--pink1, #3bb273); color: #fff; }
.invoice-import-modal .ii-btn-accept:hover { filter: brightness(.94); }
@media (max-width: 1000px) {
.invoice-import-modal .ii-fields { grid-template-columns: 1fr; }
.invoice-import-modal .ii-pdf-pane { flex-basis: 40%; }
}
/* footer: force buttons to the right regardless of the global .form-entry footer floats */
.invoice-import-modal .ii-foot { flex-direction: row !important; }
.invoice-import-modal .ii-foot .ii-foot-hint { order: 0 !important; float: none !important; margin: 0 !important; }
.invoice-import-modal .ii-foot .ii-foot-btns { order: 1 !important; float: none !important; margin-left: auto !important; }
/* ββ General-mode dashboard widgets (pl-card, expense-donut, bills-to-pay) ββ */
.stat-trend { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.stat-trend.up { background: #e2f4e5; color: #1e7d32; }
.stat-trend.down { background: #fdecea; color: #c0392b; }
pl-card, expense-donut, bills-to-pay { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.pl-headline { display: flex; align-items: baseline; gap: 10px; padding: 4px 14px 0; }
.pl-net { font-size: 24px; font-weight: 700; }
.pl-sub { color: #8a929b; font-size: 12px; }
.pl-chart { flex: 1; min-height: 0; padding: 6px 12px 12px; position: relative; }
.xd-body { display: flex; align-items: center; gap: 14px; flex: 1; min-height: 0; padding: 8px 14px 12px; }
.xd-chart { position: relative; width: 45%; height: 100%; min-height: 120px; }
.xd-total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.xd-total span { font-size: 17px; font-weight: 700; }
.xd-total em { font-style: normal; font-size: 10.5px; color: #8a929b; }
.xd-legend { flex: 1; list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.xd-legend li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.xd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.xd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xd-amt { font-weight: 600; }
.xd-empty, .btp-empty { color: #8a929b; font-size: 13px; padding: 12px 0; }
.btp-list { flex: 1; list-style: none; margin: 0; padding: 4px 14px; overflow-y: auto; }
.btp-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f2f4; cursor: pointer; }
.btp-row:last-child { border-bottom: none; }
.btp-avatar { width: 30px; height: 30px; border-radius: 6px; background: #2e6da4; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: none; }
.btp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.btp-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btp-sub { font-size: 11px; color: #8a929b; }
.btp-amt { font-weight: 700; font-size: 13px; }
.btp-pay { margin: 6px 14px 12px; padding: 8px; border: 1px solid #d6dade; border-radius: 6px; background: #f7f8fa; cursor: pointer; font-size: 13px; }
.btp-pay:hover { background: #eef2f6; }
/* invoice-import formgrid: smaller cell font (cosmetic only) */
.invoice-import-modal .biExpenseTable td, .invoice-import-modal .biItemTable td,
.invoice-import-modal .biExpenseTable input, .invoice-import-modal .biItemTable input,
.invoice-import-modal .biExpenseTable select, .invoice-import-modal .biItemTable select,
.invoice-import-modal .biExpenseTable .es-input, .invoice-import-modal .biItemTable .es-input,
.invoice-import-modal .biExpenseTable .editable-select, .invoice-import-modal .biItemTable .editable-select {
font-size: 11px !important; }
.invoice-import-modal .biExpenseTable input, .invoice-import-modal .biItemTable input,
.invoice-import-modal .biExpenseTable .es-input, .invoice-import-modal .biItemTable .es-input {
padding: 4px 6px !important; }
.invoice-import-modal .biExpenseTable thead th, .invoice-import-modal .biItemTable thead th { font-size: 9.5px !important; padding: 7px 8px !important; }
/* breakdown donut tabs + recent transactions/activity widgets */
recent-transactions, recent-activity { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.xd-tabs { display: flex; gap: 6px; padding: 4px 14px 0; }
.xd-tab { padding: 5px 12px; border: 1px solid #d6dade; border-radius: 14px; background: #fff; cursor: pointer; font-size: 12px; }
.xd-tab.active { background: #2e6da4; border-color: #2e6da4; color: #fff; }
.rtx-list { flex: 1; list-style: none; margin: 0; padding: 4px 14px; overflow-y: auto; }
.rtx-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f2f4; cursor: pointer; }
.rtx-row:last-child { border-bottom: none; }
.rtx-row:hover { background: #f5f9fd; }
.rtx-type { flex: none; min-width: 82px; padding: 3px 8px; border-radius: 10px; background: #eef2f6; color: #4a5560; font-size: 11px; text-align: center; text-transform: capitalize; }
.rtx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rtx-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtx-sub { font-size: 11px; color: #8a929b; }
.rtx-date { flex: none; color: #8a929b; font-size: 12px; }
.rtx-amt { flex: none; min-width: 90px; text-align: right; font-weight: 700; font-size: 13px; }
.ract-list { flex: 1; list-style: none; margin: 0; padding: 4px 14px; overflow-y: auto; }
.ract-row { padding: 7px 0; border-bottom: 1px solid #f0f2f4; font-size: 12.5px; }
.ract-row:last-child { border-bottom: none; }
.ract-text a { color: #2e6da4; }
.ract-time { display: block; font-size: 11px; color: #8a929b; margin-top: 2px; }
/* ββ Altrix-style restyle: recent activity / transactions / breakdown ββββββ */
/* activity: avatar rows grouped by day */
.ract-day { padding: 8px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa3ad; border-bottom: none !important; }
.ract-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f2f4; }
.ract-row:last-child { border-bottom: none; }
.ract-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e8eef5; color: #2e6da4; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: none; margin-top: 1px; }
.ract-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ract-user { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.ract-action { font-size: 12px; color: #8a929b; overflow: hidden; text-overflow: ellipsis; }
.ract-action a { color: #2e6da4; }
.ract-time { flex: none; font-size: 11px; color: #9aa3ad; margin-top: 2px; }
/* transactions: searchable table */
.rtx-toolbar { position: relative; margin: 6px 14px 8px; }
.rtx-toolbar i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9aa3ad; font-size: 12px; }
.rtx-search { width: 100%; padding: 7px 10px 7px 30px; border: 1px solid #e3e6ea; border-radius: 8px; font-size: 12.5px; background: #fff; }
.rtx-search:focus { outline: none; border-color: #2e6da4; }
.rtx-scroll { flex: 1; overflow-y: auto; padding: 0 14px 10px; }
.rtx-table { width: 100%; border-collapse: collapse; }
.rtx-table th { position: sticky; top: 0; background: #fff; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa3ad; padding: 6px 8px; border-bottom: 1px solid #e3e6ea; }
.rtx-table td { padding: 9px 8px; border-bottom: 1px solid #f0f2f4; font-size: 13px; vertical-align: middle; }
.rtx-table tr.rtx-row { cursor: pointer; }
.rtx-table tr.rtx-row:hover { background: #f5f9fd; }
.rtx-namecell { display: flex; align-items: center; gap: 10px; }
.rtx-ico { width: 32px; height: 32px; border-radius: 50%; background: #eef2f6; color: #4a5560; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.rtx-ico.in { background: #e2f4e5; color: #1e7d32; }
.rtx-ico.out { background: #fdecea; color: #c0392b; }
.rtx-amt { font-weight: 700; white-space: nowrap; }
.rtx-amt.in { color: #1e7d32; }
.rtx-amt.out { color: #c0392b; }
.rtx-note { color: #8a929b; font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* breakdown: underline tabs, centered donut, 2-col legend */
.xd-tabs { display: flex; gap: 0; padding: 0 14px; border-bottom: 1px solid #eef0f3; }
.xd-tab { flex: 1; padding: 7px 0; border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; cursor: pointer; font-size: 12.5px; color: #8a929b; }
.xd-tab.active { background: none; color: #1d2530; border-bottom-color: #2e6da4; font-weight: 600; }
.xd-body { justify-content: center; padding: 10px 14px 4px; }
.xd-chart { width: 62%; min-height: 130px; }
.xd-legend { list-style: none; margin: 0; padding: 2px 14px 12px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.xd-legend li { display: flex; flex-direction: column; padding: 4px 0; font-size: 12.5px; }
.xd-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.xd-legend .xd-amt { padding-left: 16px; color: #8a929b; font-weight: 600; font-size: 12px; }
/* widget fixes after first visual pass (later rules override earlier ones) */
/* transactions: flex belongs on an inner wrapper, not the td β flex on a td
collapses the table's column layout */
.rtx-namecell { display: table-cell; width: 42%; }
.rtx-nameflex { display: flex; align-items: center; gap: 10px; }
.rtx-table th { z-index: 2; }
.rtx-table th:nth-child(2), .rtx-table td.rtx-date { width: 18%; white-space: nowrap; }
.rtx-table th:nth-child(3), .rtx-table td.rtx-amt { width: 16%; }
.rtx-table td, .rtx-table th { text-align: left; }
.rtx-info { text-align: left; }
/* breakdown tabs: kill the theme's button chrome */
#root .xd-tabs .xd-tab, .xd-tabs .xd-tab { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; outline: none; margin: 0; padding: 7px 0; float: none; width: auto; color: #8a929b; font-size: 12.5px; }
#root .xd-tabs .xd-tab.active, .xd-tabs .xd-tab.active { color: #1d2530; border-bottom-color: #2e6da4; font-weight: 600; background: none; }
/* bills + activity: left-align text (theme centers some list content) */
.btp-info, .btp-info span, .ract-body, .ract-body span { text-align: left; }
.btp-list li, .ract-list li { text-align: left; }
/* transactions table: force real table layout β theme CSS switches table
elements to block display, which made every row lay out independently */
.rtx-table { display: table !important; width: 100%; table-layout: fixed; border-collapse: collapse; }
.rtx-table thead { display: table-header-group !important; }
.rtx-table tbody { display: table-row-group !important; }
.rtx-table tr { display: table-row !important; width: auto !important; }
.rtx-table th, .rtx-table td { display: table-cell !important; float: none !important; }
.rtx-table th:nth-child(1) { width: 40%; }
.rtx-table th:nth-child(2) { width: 17%; }
.rtx-table th:nth-child(3) { width: 16%; }
.rtx-table td { overflow: hidden; text-overflow: ellipsis; }
/* breakdown: period select in the tabs row */
.xd-tabs { align-items: center; gap: 8px; }
.xd-tabs .xd-tab { flex: 0 0 auto; padding: 7px 10px; }
.xd-period { margin-left: auto; padding: 4px 6px; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; font-size: 11.5px; color: #4a5560; max-width: 46%; }
/* bills-to-pay: neutralize theme hover chrome on clickable rows */
.btp-list li.btp-row, .btp-list li.btp-row:hover { box-shadow: none !important; transform: none !important; border-radius: 0; }
.btp-list li.btp-row:hover { background: #f5f9fd; }
/* breakdown header polish: compact period select, roomier tabs, center-label wrap */
#root .xd-tabs { padding: 2px 14px 0; }
#root .xd-tabs select.xd-period, .xd-tabs select.xd-period { height: 26px; line-height: 1; padding: 2px 6px; margin: 0 0 4px auto; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; font-size: 11.5px; color: #4a5560; width: auto; max-width: 120px; box-shadow: none; float: none; appearance: auto; }
.xd-total { padding: 0 12%; }
.xd-total span { font-size: 18px; font-weight: 700; }
.xd-total em { font-style: normal; font-size: 10px; color: #8a929b; text-align: center; white-space: normal; line-height: 1.25; }
.xd-chart { min-height: 150px; }
/* =========================================================================
Maintenance ticket modal redesign (.maintenance-modal / .mnt-ui)
========================================================================= */
.maintenance-modal .modal-dialog.modal-lg { max-width: 880px; }
.maintenance-modal .modal-content { border: none !important; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.32);
display: flex; flex-direction: column; max-height: calc(100vh - 40px); background: #fff;
font-family: Montserrat, "Segoe UI", Arial, Helvetica, sans-serif; padding: 0 !important; }
.maintenance-modal form[type="maintenance"] { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 40px); }
.maintenance-modal button { min-width: 0 !important; float: none !important; overflow: visible !important; box-shadow: none !important; position: static !important; top: 0 !important; height: auto !important; }
/* ---- dark header ---- */
.maintenance-modal .mnt-head { display: block !important; background: #232a37; padding: 16px 20px 0 !important; border: none !important; margin: 0 !important; zoom: 1 !important; flex: 0 0 auto; cursor: move; }
.maintenance-modal .mnt-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.maintenance-modal .mnt-head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.maintenance-modal .mnt-tnum { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #8a93a3; }
.maintenance-modal .mnt-title-input { background: transparent !important; border: none !important; color: #fff !important; font-size: 20px !important; font-weight: 700 !important; padding: 0 !important; width: 100%; height: auto !important; box-shadow: none !important; }
.maintenance-modal .mnt-title-input::placeholder { color: #6b7383; }
.maintenance-modal .mnt-parent-link { font-size: 11px; color: #6ea8fe; }
.maintenance-modal .mnt-head-ctrls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* header status/priority dropdowns (light chips on dark) */
.maintenance-modal .mnt-hd-dd { position: relative; }
.maintenance-modal .mnt-head .custom-dropdown-trigger { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e5ea; border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: #2b2b3a; cursor: pointer; white-space: nowrap; }
.maintenance-modal .mnt-head .custom-dropdown-trigger i { color: #9aa4b2; font-size: 10px; }
.maintenance-modal .mnt-win { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #3a4150; background: #2b3342; color: #aab2c0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all .12s; padding: 0 !important; }
.maintenance-modal .mnt-win:hover { background: #333c4d; color: #fff; }
.maintenance-modal .mnt-win-close { border-color: #7a3b3b; background: #3a2b2f; color: #f0a3a3; }
.maintenance-modal .mnt-win-close:hover { background: #e5484d; color: #fff; border-color: #e5484d; }
/* meta row */
.maintenance-modal .mnt-head-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 0 10px; }
.maintenance-modal .mnt-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #9aa3b2; }
.maintenance-modal .mnt-meta-item i { color: #6b7484; font-size: 12px; }
.maintenance-modal .mnt-meta-item b { color: #dfe3ea; font-weight: 600; }
.maintenance-modal .mnt-complete-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 1px solid #3a4150; border-radius: 8px; background: #2b3342; color: #aab2c0; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.maintenance-modal .mnt-complete-btn:hover { background: #333c4d; color: #fff; }
.maintenance-modal .mnt-complete-btn.is-on { background: #1f7a48; border-color: #1f7a48; color: #fff; }
/* attention badge */
.maintenance-modal .mnt-attention { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid #4a3f1e; background: #33301f; color: #d8b357; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.maintenance-modal .mnt-attention.is-on { background: #4a3a12; border-color: #7a5f1e; color: #f0c65a; }
.maintenance-modal .mnt-attention:hover { border-color: #7a5f1e; }
/* tabs */
.maintenance-modal .mnt-tabs { display: flex; align-items: center; gap: 26px; }
.maintenance-modal .mnt-tab { position: relative; padding: 12px 2px; font-size: 13.5px; font-weight: 600; color: #8a93a3; text-decoration: none; }
.maintenance-modal .mnt-tab:hover { color: #cdd3dd; text-decoration: none; }
.maintenance-modal .mnt-tab.is-active { color: #fff; }
.maintenance-modal .mnt-tab.is-active:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--pink1, #3bb273); }
/* ---- body ---- */
.maintenance-modal .modal-body.mnt-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px !important; background: #fff; min-height: 0; }
.maintenance-modal .box-inset { padding: 0; }
/* fields grid */
.maintenance-modal .mnt-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 18px; }
.maintenance-modal .mnt-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.maintenance-modal .mnt-field > label { font-size: 11.5px; font-weight: 600; color: #55556a; margin: 0; }
/* inputs / selects / custom-dropdowns in the body */
.maintenance-modal .mnt-input,
.maintenance-modal .mnt-fields .custom-dropdown-trigger,
.maintenance-modal .mnt-select .es-input,
.maintenance-modal .mnt-select input,
.maintenance-modal .mnt-fields .selectize-input {
width: 100% !important; box-sizing: border-box; border: 1px solid #e0e2e8 !important; border-radius: 9px !important;
padding: 8px 11px !important; font-size: 12.5px !important; background: #fff !important; color: #2b2b3a !important; height: auto !important; min-height: 38px; float: none !important; }
.maintenance-modal .mnt-fields .custom-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.maintenance-modal .mnt-fields .custom-dropdown-trigger i { color: #9aa4b2; font-size: 10px; }
.maintenance-modal .mnt-input:focus,
.maintenance-modal .mnt-select .es-input:focus,
.maintenance-modal .mnt-select input:focus { outline: none !important; border-color: var(--pink1, #3bb273) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink1, #3bb273) 14%, #fff) !important; }
.maintenance-modal .mnt-fields .selectize-input { box-shadow: none !important; }
.maintenance-modal .mnt-input[readonly] { background: #f5f5f9 !important; color: #9a9ab0 !important; }
/* cards / blocks */
.maintenance-modal .mnt-card { margin-top: 16px; border: 1px solid #eceaf3; border-radius: 12px; padding: 14px; }
.maintenance-modal .mnt-card-head { display: flex; align-items: center; justify-content: space-between; }
.maintenance-modal .mnt-card-title { font-size: 13px; font-weight: 700; color: #2b2b3a; display: inline-flex; align-items: center; gap: 8px; }
.maintenance-modal .mnt-card-title i { color: var(--pink1, #3bb273); }
.maintenance-modal .mnt-add-task { font-size: 12.5px; font-weight: 600; color: var(--pink1, #3bb273); }
.maintenance-modal .mnt-tasks-card .tasks-container { margin-top: 10px; }
.maintenance-modal .mnt-tasks-card .tasks-container:empty:before,
.maintenance-modal .mnt-tasks-card .rightslick-table-modal:empty:before { content: "No tasks yet β click + Add task"; font-size: 12px; color: #a3a3b5; }
.maintenance-modal .mnt-block { margin-top: 16px; }
.maintenance-modal .mnt-block-label { display: block; font-size: 11.5px; font-weight: 600; color: #55556a; margin-bottom: 6px; }
.maintenance-modal .mnt-textarea { width: 100%; border: 1px solid #e0e2e8 !important; border-radius: 10px !important; padding: 11px 13px !important; font-size: 13px !important; min-height: 96px; resize: vertical; background: #fff !important; color: #2b2b3a; box-shadow: none !important; }
.maintenance-modal .mnt-textarea:focus { outline: none !important; border-color: var(--pink1, #3bb273) !important; }
.maintenance-modal .mnt-inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6c6c85; margin-top: 8px; }
/* attachments */
.maintenance-modal .mnt-attach-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.maintenance-modal .mnt-attach-list:empty { display: none; }
.maintenance-modal .attachment-wrapper { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid #eceaf3; }
.maintenance-modal .attachment-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.maintenance-modal .attachment-wrapper i { position: absolute; top: 3px; right: 3px; color: #e5484d; background: #fff; border-radius: 50%; cursor: pointer; }
.maintenance-modal .mnt-dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; border: 1.5px dashed #d8d7e3; border-radius: 12px; color: #9a9ab0; font-size: 12.5px; font-weight: 600; cursor: pointer; background: #faf9fc; transition: all .12s; }
.maintenance-modal .mnt-dropzone:hover { border-color: var(--pink1, #3bb273); color: var(--pink1, #3bb273); }
/* ---- activity timeline ---- */
.maintenance-modal .mnt-timeline .message-wrapper { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #eceaf3; border-radius: 12px; margin-bottom: 12px; background: #fff; }
.maintenance-modal .mnt-timeline .message-wrapper.tenant { background: #f5f9ff; border-color: #dfe9fb; }
.maintenance-modal .mnt-timeline .message-header { display: flex; align-items: center; justify-content: space-between; }
.maintenance-modal .mnt-timeline .message-header > div:first-child { font-size: 13px; font-weight: 700; color: #2b2b3a; }
.maintenance-modal .mnt-timeline .message-header > div:last-child { font-size: 11px; color: #9a9ab0; }
.maintenance-modal .mnt-timeline .message-body { font-size: 13px; color: #44445a; line-height: 1.45; }
.maintenance-modal .mnt-composer { border: 1px solid #e0e2e8; border-radius: 12px; padding: 12px; background: #fff; }
.maintenance-modal .mnt-composer-input { width: 100%; border: none !important; outline: none !important; resize: vertical; min-height: 60px; font-size: 13px; background: none !important; box-shadow: none !important; padding: 0 !important; color: #2b2b3a; }
.maintenance-modal .mnt-composer-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
/* ---- billing ---- */
.maintenance-modal .mnt-billing { padding: 4px 0; }
.maintenance-modal .mnt-billed { font-size: 13px; color: #44445a; margin-bottom: 14px; }
.maintenance-modal .mnt-billed.muted { color: #9a9ab0; }
.maintenance-modal .mnt-billed a { color: var(--pink1, #3bb273); font-weight: 700; }
.maintenance-modal .mnt-billing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* ---- buttons ---- */
.maintenance-modal .mnt-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: all .12s; margin: 0 !important; line-height: 1.2; white-space: nowrap; }
.maintenance-modal .mnt-btn i { font-size: 12px; }
.maintenance-modal .mnt-btn-ghost { background: #fff; border-color: #dcdbe6 !important; color: #55556a; }
.maintenance-modal .mnt-btn-ghost:hover { background: #f6f5fb; text-decoration: none; color: #2b2b3a; }
.maintenance-modal .mnt-btn-danger { color: #d9484d; }
.maintenance-modal .mnt-btn-danger:hover { background: #fdeaea; border-color: #f0c6c6 !important; color: #d9484d; }
.maintenance-modal .mnt-btn-save { background: var(--pink1, #3bb273); color: #fff; }
.maintenance-modal .mnt-btn-save:hover { filter: brightness(.94); color: #fff; }
.maintenance-modal .mnt-btn-send { background: var(--pink1, #3bb273); color: #fff; }
.maintenance-modal .mnt-btn-note { background: #fff; border-color: #dcdbe6 !important; color: #55556a; }
/* ---- footer ---- */
.maintenance-modal .modal-footer.mnt-foot { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px !important; border-top: 1px solid #eceaf3; background: #fff; flex: 0 0 auto; }
.maintenance-modal .mnt-foot-left { display: flex; align-items: center; gap: 8px; }
.maintenance-modal .mnt-foot-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (max-width: 820px) {
.maintenance-modal .mnt-fields { grid-template-columns: repeat(2, 1fr); }
}
/* ββ Business Overview page (dashboard/overview) β Ledgerly-style alternative ββ */
.ovd-page { display: flex; gap: 20px; padding: 22px 26px; background: #faf8ff; min-height: calc(100vh - 120px); align-items: flex-start; font-family: Montserrat, "Segoe UI", Arial, sans-serif; }
.ovd-page b { font-weight: 600; }
.ovd-rail { flex: 0 0 190px; position: sticky; top: 10px; }
.ovd-rail-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #b98adf; margin: 4px 0 10px; text-align: left; }
.ovd-snap { margin-bottom: 16px; text-align: left; }
.ovd-snap-num { display: block; font-size: 19px; font-weight: 700; color: #1d1633; }
.ovd-snap-sub { display: block; font-size: 11.5px; color: #8b83a3; margin-top: 1px; }
.ovd-trend { font-size: 11px; font-weight: 700; }
.ovd-trend.up { color: #16a34a; } .ovd-trend.down { color: #dc2626; }
.ovd-ring-wrap { margin: 26px 0 18px; text-align: center; }
.ovd-ring { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; }
.ovd-ring:before { content: ""; position: absolute; inset: 10px; background: #faf8ff; border-radius: 50%; }
.ovd-ring span { position: relative; font-size: 17px; font-weight: 700; color: #1d1633; }
.ovd-ring-sub { font-size: 11px; color: #8b83a3; margin-top: 6px; }
.ovd-new-entry { width: 100%; padding: 10px; border: 0; border-radius: 10px; background: #a855f7; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 16px rgba(168,85,247,.35); }
.ovd-new-entry:hover { background: #9333ea; }
.ovd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ovd-card { background: #fff; border: 1px solid #f0eaf9; border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(80,40,140,.05); }
.ovd-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.ovd-card-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: #1d1633; text-align: left; }
.ovd-card-head a { font-size: 12px; color: #7c3aed; }
.ovd-muted { color: #8b83a3; font-weight: 400; font-size: 12px; }
.ovd-pl { background: linear-gradient(180deg, #f6f0ff, #fdfbff); }
.ovd-legend-note { font-size: 11px; color: #8b83a3; }
.ovd-sw { display: inline-block; width: 9px; height: 9px; background: #a78bfa; border-radius: 2px; margin-right: 4px; }
.ovd-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 4px 4px 0; }
.ovd-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ovd-bar { width: 100%; max-width: 44px; background: linear-gradient(180deg, #a855f7, #c4b5fd); border-radius: 8px 8px 4px 4px; }
.ovd-bar-col span { font-size: 10px; color: #8b83a3; margin-top: 5px; }
.ovd-actions { display: flex; gap: 14px; }
.ovd-action { flex: 1; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #f0eaf9; border-radius: 12px; padding: 13px 15px; box-shadow: 0 1px 3px rgba(80,40,140,.05); }
.ovd-action-ico { width: 34px; height: 34px; border-radius: 9px; background: #f3ecfe; color: #7c3aed; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.ovd-action b { display: block; font-size: 13px; color: #1d1633; text-align: left; }
.ovd-action em { display: block; font-style: normal; font-size: 11px; color: #8b83a3; letter-spacing: .03em; text-transform: uppercase; text-align: left; }
.ovd-cols { display: flex; gap: 16px; }
.ovd-cols .ovd-card { flex: 1; min-width: 0; }
.ovd-banks { list-style: none; margin: 0; padding: 0; }
.ovd-banks li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f5f1fb; cursor: pointer; box-shadow: none !important; }
.ovd-banks li:last-child { border-bottom: 0; }
.ovd-bank-ico { width: 30px; height: 30px; border-radius: 8px; background: #f3ecfe; color: #7c3aed; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.ovd-bank-info { flex: 1; min-width: 0; text-align: left; }
.ovd-bank-info b { display: block; font-size: 12.5px; color: #1d1633; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovd-bank-info em { display: block; font-style: normal; font-size: 10.5px; color: #8b83a3; }
.ovd-bank-info em.bad { color: #dc2626; font-weight: 600; }
.ovd-bank-info em.ok { color: #16a34a; }
.ovd-bank-bal { font-weight: 700; font-size: 13px; color: #1d1633; white-space: nowrap; }
.ovd-bank-bal.bad { color: #dc2626; }
.ovd-exp { display: flex; align-items: center; gap: 16px; }
.ovd-donut { width: 110px; height: 110px; border-radius: 50%; position: relative; flex: none; }
.ovd-donut:before { content: ""; position: absolute; inset: 26px; background: #fff; border-radius: 50%; }
.ovd-exp-legend { flex: 1; list-style: none; margin: 0; padding: 0; }
.ovd-exp-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.ovd-exp-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ovd-exp-legend span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1d1633; }
.ovd-exp-legend b { color: #1d1633; }
.ovd-tx { display: table !important; width: 100%; table-layout: fixed; border-collapse: collapse; }
.ovd-tx thead { display: table-header-group !important; } .ovd-tx tbody { display: table-row-group !important; }
.ovd-tx tr { display: table-row !important; } .ovd-tx th, .ovd-tx td { display: table-cell !important; float: none !important; text-align: left; }
.ovd-tx th { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #b3a9c9; background: #faf8ff; padding: 7px 10px; border: 0; }
.ovd-tx th:nth-child(2) { width: 14%; } .ovd-tx th:nth-child(3) { width: 17%; } .ovd-tx th:nth-child(1) { width: 40%; }
.ovd-tx td { padding: 10px; border-bottom: 1px solid #f5f1fb; font-size: 13px; color: #1d1633; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovd-tx tbody tr { cursor: pointer; } .ovd-tx tbody tr:hover td { background: #faf7ff; }
.ovd-tx-type { font-style: normal; font-size: 11px; color: #a78bfa; margin-left: 4px; }
.ovd-tx-amt { font-weight: 700; } .ovd-tx-amt.in { color: #16a34a; } .ovd-tx-amt.out { color: #dc2626; }
.ovd-tx-note { color: #b3a9c9; font-size: 12px; }
.ovd-side { flex: 0 0 235px; position: sticky; top: 10px; }
.ovd-side-block { margin-bottom: 22px; }
.ovd-bills, .ovd-ents, .ovd-act { list-style: none; margin: 0; padding: 0; }
.ovd-bills li { display: flex; align-items: center; gap: 9px; padding: 7px 0; cursor: pointer; box-shadow: none !important; }
.ovd-av { width: 30px; height: 30px; border-radius: 50%; background: #a855f7; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.ovd-av.sm { width: 26px; height: 26px; font-size: 10.5px; background: #e9defa; color: #7c3aed; }
.ovd-bill-info { flex: 1; min-width: 0; text-align: left; }
.ovd-bill-info b { display: block; font-size: 12.5px; color: #1d1633; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovd-bill-info em { display: block; font-style: normal; font-size: 10.5px; color: #8b83a3; }
.ovd-bill-amt { font-weight: 700; font-size: 13px; }
.ovd-pay { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #e5d9f7; border-radius: 9px; background: #fff; color: #7c3aed; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.ovd-pay:hover { background: #f8f4fe; }
.ovd-count { color: #b98adf; }
.ovd-ents li { display: flex !important; align-items: center; justify-content: space-between; padding: 6px 0 !important; font-size: 12.5px; cursor: pointer; background: none !important; border-bottom: 0 !important; }
.ovd-ents li b { color: #1d1633; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.ovd-ents li .ok { color: #16a34a; font-weight: 700; white-space: nowrap; }
.ovd-ents li .bad { color: #dc2626; font-weight: 700; white-space: nowrap; }
.ovd-act li { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; }
.ovd-act-body { flex: 1; min-width: 0; text-align: left; font-size: 12px; }
.ovd-act-body b { color: #1d1633; } .ovd-act-body em { font-style: normal; font-size: 10.5px; color: #b3a9c9; margin-left: 4px; }
.ovd-act-text { display: block; color: #8b83a3; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.ovd-act-text a { color: #7c3aed; }
@media (max-width: 1250px) { .ovd-page { flex-wrap: wrap; } .ovd-side, .ovd-rail { position: static; flex: 1 1 100%; } }
/* overview: the theme's global article{flex-direction:column} needs an explicit row */
article.ovd-page { flex-direction: row; }
article.ovd-page { flex-direction: row; overflow-y: auto; max-height: calc(100vh - 90px); min-height: 0; }
/* ββ Business Overview v2 β exact build of Claude Design "Accounting Dashboard
Explorations" variant 2a (lavender). Fonts: DM Sans + Material Symbols
Rounded, loaded from the view. βββββββββββββββββββββββββββββββββββββββββββββ */
.lg-mso { font-family: 'Material Symbols Rounded'; line-height: 1; font-variation-settings: 'FILL' 0,'wght' 400,'opsz' 24; font-size: 16px; }
article.lg-canvas { display: block; flex-direction: row; overflow-y: auto; max-height: calc(100vh - 90px); min-height: 0; background: var(--lg-canvasbg); border-radius: 18px; padding: 32px; margin: 4px 0 12px; font-family: 'DM Sans', sans-serif; }
.lg-app { background: var(--lg-card); border-radius: 0px; box-shadow: 0 24px 60px var(--lg-shadc); overflow: hidden; min-width: 1020px; }
.lg-spacer { flex: 1; }
.lg-empty { font-size: 11px; color: var(--lg-mut); }
/* header */
.lg-head { height: 58px; display: flex; align-items: center; padding: 0 24px; gap: 20px; border-bottom: 1px solid var(--lg-bdr); }
.lg-brand { font-size: 17px; font-weight: 700; background: linear-gradient(90deg, var(--lg-acc1), var(--lg-acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-search { display: flex; align-items: center; gap: 8px; border-bottom: 1.5px solid var(--lg-bdr2); padding: 6px 4px; width: 240px; }
.lg-search .lg-mso { color: var(--lg-acc1); }
.lg-search input { border: 0; outline: none; background: none; font-size: 12px; font-family: 'DM Sans', sans-serif; color: #5A4B75; width: 100%; padding: 0; }
.lg-search input::placeholder { color: var(--lg-faint); }
.lg-datepill { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lg-mut); border: 1px solid var(--lg-bdr); border-radius: 18px; padding: 6px 14px; white-space: nowrap; }
.lg-datepill .lg-mso { font-size: 14px; color: var(--lg-acc1); }
.lg-company { font-size: 12.5px; color: var(--lg-mut); white-space: nowrap; }
.lg-bell { position: relative; }
.lg-bell .lg-mso { font-size: 20px; color: var(--lg-mut); }
.lg-bell-badge { position: absolute; top: -4px; right: -6px; background: var(--lg-acc2); color: #fff; font-size: 8.5px; font-weight: 700; border-radius: 8px; padding: 1px 5px; }
.lg-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--lg-acc1), var(--lg-acc2)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.lg-body { display: flex; align-items: stretch; }
/* left rail */
.lg-rail { width: 200px; flex: none; padding: 22px 24px; border-right: 1px solid var(--lg-bdr); display: flex; flex-direction: column; }
.lg-rail-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--lg-acc2); margin-bottom: 12px; text-transform: uppercase; text-align: left; }
.lg-snaps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; text-align: left; }
.lg-snap-num { font-size: 16px; font-weight: 700; color: var(--lg-ink); }
.lg-snap-sub { font-size: 10.5px; color: var(--lg-mut); }
.lg-trend { font-size: 10px; color: var(--lg-acc2); font-weight: 700; }
.lg-menu { display: flex; flex-direction: column; gap: 11px; font-size: 12.5px; text-align: left; }
.lg-menu a { color: #5A4B75; }
.lg-menu a:hover { color: var(--lg-acc1); }
.lg-menu a.active { font-weight: 700; color: var(--lg-acc1); }
.lg-ring-wrap { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lg-ring { width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--lg-acc1) 0 0%, var(--lg-track) 0% 100%); display: flex; align-items: center; justify-content: center; }
.lg-ring-hole { width: 72px; height: 72px; border-radius: 50%; background: var(--lg-card); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lg-ring-hole span { font-size: 16px; font-weight: 700; color: var(--lg-ink); }
.lg-ring-hole em { font-style: normal; font-size: 8.5px; color: var(--lg-mut); text-align: center; }
.lg-new-entry { background: linear-gradient(90deg, var(--lg-acc1), var(--lg-acc2)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 9px 24px; border-radius: 8px; box-shadow: 0 8px 18px var(--lg-glowc2); margin-top: 8px; border: 0; cursor: pointer; text-transform: uppercase; font-family: 'DM Sans', sans-serif; }
.lg-new-entry:hover { filter: brightness(1.06); }
/* main column */
.lg-main { flex: 1; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.lg-pl { border-radius: 12px; background: linear-gradient(180deg, var(--lg-plbg1), var(--lg-lbg)); padding: 16px 18px 8px; }
.lg-pl-head { display: flex; align-items: center; }
.lg-pl-head span:first-child { font-size: 13px; font-weight: 700; color: var(--lg-ink); }
.lg-pl-note { font-size: 11px; color: var(--lg-mut); }
.lg-pl-bars { display: flex; align-items: flex-end; gap: 6px; height: 122px; margin-top: 10px; }
.lg-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.lg-bar { width: 100%; background: linear-gradient(180deg, var(--lg-bar1), var(--lg-acc1)); border-radius: 8px 8px 0 0; }
.lg-bar-col span { font-size: 9px; color: var(--lg-mut); margin-top: 3px; }
.lg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lg-tile { border: 1px solid var(--lg-bdr); border-radius: 12px; padding: 14px 16px; background: #fff; box-shadow: 0 10px 24px var(--lg-glowc); display: flex; align-items: center; gap: 12px; text-align: left; }
.lg-tile-ico { font-size: 24px; background: linear-gradient(135deg, var(--lg-acc1), var(--lg-acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-tile-title { font-size: 12.5px; font-weight: 700; color: var(--lg-ink); }
.lg-tile-sub { font-size: 10px; color: var(--lg-mut); letter-spacing: 0.06em; text-transform: uppercase; }
.lg-grid2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.lg-card { border: 1px solid var(--lg-bdr); border-radius: 12px; background: #fff; padding: 14px 16px; text-align: left; }
.lg-card-head { display: flex; align-items: center; margin-bottom: 10px; }
.lg-card-head span { font-size: 12.5px; font-weight: 700; color: var(--lg-ink); }
.lg-card-head a { font-size: 10.5px; font-weight: 700; color: var(--lg-acc1); }
.lg-banks { display: flex; flex-direction: column; gap: 10px; }
.lg-bank { display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: none !important; }
.lg-bank-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--lg-lbg); display: flex; align-items: center; justify-content: center; flex: none; }
.lg-bank-ico .lg-mso { font-size: 15px; color: var(--lg-acc1); }
.lg-bank-info { flex: 1; min-width: 0; }
.lg-bank-name { font-size: 11.5px; font-weight: 700; color: var(--lg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-bank-sub { font-size: 9.5px; color: var(--lg-mut); }
.lg-bank-sub.bad { color: var(--lg-acc2); font-weight: 700; }
.lg-bank-bal { font-size: 12px; font-weight: 700; white-space: nowrap; }
.lg-exp { display: flex; align-items: center; gap: 12px; }
.lg-donut { width: 78px; height: 78px; border-radius: 50%; flex: none; background: conic-gradient(#F1E8FA 0 100%); display: flex; align-items: center; justify-content: center; }
.lg-donut-hole { width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.lg-exp-legend { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; color: #5A4B75; }
.lg-exp-row { display: flex; gap: 6px; align-items: center; }
.lg-exp-row b { color: var(--lg-ink); }
.lg-exp-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.lg-tx-card { padding: 0; overflow: hidden; }
.lg-tx-head { padding: 12px 16px; margin-bottom: 0; }
.lg-tx-cols { display: flex; padding: 7px 16px; background: var(--lg-plbg1); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--lg-faint); text-transform: uppercase; }
.lg-tx-row { display: flex; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--lg-rowline); font-size: 11.5px; cursor: pointer; }
.lg-tx-row:last-child { border-bottom: 0; }
.lg-tx-row:hover { background: var(--lg-plbg1); }
.lg-tx-name { font-weight: 700; color: var(--lg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-tx-name span { font-weight: 400; color: var(--lg-faint); margin-left: 3px; }
.lg-tx-date { color: var(--lg-mut); }
.lg-tx-note { color: var(--lg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* right rail */
.lg-side { width: 230px; flex: none; padding: 20px; border-left: 1px solid var(--lg-bdr); text-align: left; }
.lg-bills { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.lg-bill { display: flex; align-items: center; gap: 9px; cursor: pointer; box-shadow: none !important; }
.lg-bill-av { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--lg-acc1), var(--lg-acc2)); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex: none; }
.lg-bill-av.alt { background: var(--lg-av2); }
.lg-bill-info { flex: 1; min-width: 0; }
.lg-bill-name { font-size: 11px; font-weight: 700; color: var(--lg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-bill-sub { font-size: 9.5px; color: var(--lg-mut); }
.lg-bill-amt { font-size: 11.5px; font-weight: 700; color: var(--lg-ink); }
.lg-paybills { width: 100%; border: 1px solid var(--lg-bdr2); border-radius: 8px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--lg-acc1); padding: 8px; background: #fff; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.lg-paybills:hover { background: var(--lg-plbg1); }
.lg-ents { display: flex; flex-direction: column; gap: 9px; }
.lg-ent { align-items: center; font-size: 11px; cursor: pointer; background: none !important; }
.lg-ent-name { font-weight: 700; color: var(--lg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.lg-act { display: flex; flex-direction: column; gap: 11px; }
.lg-act-row { display: flex; gap: 9px; }
.lg-act-av { width: 26px; height: 26px; border-radius: 50%; background: var(--lg-lbg); display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--lg-acc1); flex: none; }
.lg-act-user { font-size: 10.5px; font-weight: 700; color: var(--lg-ink); }
.lg-act-user span { font-weight: 400; color: var(--lg-mut); margin-left: 3px; }
.lg-act-text { font-size: 10px; color: var(--lg-mut); overflow: hidden; text-overflow: ellipsis; }
.lg-act-text a, .lg-act-text b { color: var(--lg-acc1); font-weight: 700; }
@media (max-width: 1350px) { .lg-app { min-width: 0; } .lg-side { display: none; } }
/* ββ Business Overview v2 (dashboard/overview2) β Claude Design variant 2b
monochrome, full screen: the app shell (#top header + #aside sidebar) is
hidden while this page is present. ββββββββββββββββββββββββββββββββββββββββ */
body:has(article.mn-page) #top, body:has(article.mn-page) #aside { display: none !important; }
body:has(article.mn-page) #root { padding: 0 !important; }
article.mn-page { display: block; flex-direction: column; background: #fff; min-height: 100vh; max-height: 100vh; overflow-y: auto; font-family: 'DM Sans', sans-serif; color: #111; text-align: left; }
.mn-spacer { flex: 1; }
.mn-dim { color: #888; }
.mn-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* top bar */
.mn-head { height: 60px; border-bottom: 1px solid #111; display: flex; align-items: center; padding: 0 26px; gap: 32px; position: sticky; top: 0; background: #fff; z-index: 5; }
.mn-brand { font-size: 16px; font-weight: 700; color: #111; letter-spacing: -0.02em; }
.mn-nav { font-size: 12px; color: #888; text-transform: uppercase; padding: 21px 0; letter-spacing: 0.02em; }
.mn-nav:hover { color: #111; }
.mn-nav.active { font-weight: 700; color: #111; border-bottom: 2px solid #111; }
.mn-meta { font-size: 11px; color: #888; letter-spacing: 0.06em; white-space: nowrap; }
.mn-search-ico { font-size: 19px; color: #111; cursor: pointer; }
.mn-runreports { background: #111; color: #fff !important; font-size: 11.5px; font-weight: 700; padding: 9px 20px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.mn-runreports:hover { background: #333; }
.mn-exit { font-size: 22px; color: #888; line-height: 1; padding: 4px 2px; }
.mn-exit:hover { color: #111; }
/* KPI strip */
.mn-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-bottom: 1px solid #111; }
.mn-kpi { padding: 22px 26px; border-right: 1px solid #E5E5E5; }
.mn-kpi:last-child { border-right: 0; }
.mn-kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: #888; text-transform: uppercase; }
.mn-kpi-num { font-size: 30px; font-weight: 700; color: #111; letter-spacing: -0.03em; margin-top: 6px; }
.mn-kpi-sub { font-size: 11px; color: #888; margin-top: 2px; }
.mn-kpi-sub.strong { color: #111; font-weight: 700; }
.mn-kpi.dark { background: #111; }
.mn-kpi.dark .mn-kpi-label { color: #999; }
.mn-kpi.dark .mn-kpi-num { color: #fff; }
.mn-kpi.dark .mn-kpi-sub { color: #BBB; }
/* grids */
.mn-mid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; border-bottom: 1px solid #111; }
.mn-bottom { display: grid; grid-template-columns: 2fr 1fr; }
.mn-cell { padding: 22px 26px; border-right: 1px solid #E5E5E5; min-width: 0; }
.mn-mid .mn-cell:last-child, .mn-bottom .mn-cell:last-child { border-right: 0; }
.mn-sect { font-size: 13px; font-weight: 700; color: #111; letter-spacing: 0.06em; text-transform: uppercase; }
.mn-sect-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.mn-note { font-size: 10.5px; color: #888; }
.mn-count { font-size: 10.5px; color: #888; }
.mn-viewall { font-size: 10.5px; font-weight: 700; color: #111 !important; border-bottom: 1px solid #111; text-transform: uppercase; }
/* P&L paired bars */
.mn-pl { display: flex; align-items: flex-end; gap: 14px; height: 150px; border-bottom: 1px solid #111; }
.mn-pl-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; }
.mn-pl-bar { width: 20px; }
.mn-pl-bar.fill { background: #111; }
.mn-pl-bar.line { border: 1px solid #111; background: #fff; }
.mn-pl-bar.fill.last { background: #DDD; }
.mn-pl-bar.line.last { border-color: #DDD; }
.mn-pl-labels { display: flex; gap: 14px; margin-top: 8px; }
.mn-pl-labels div { flex: 1; text-align: center; font-size: 10px; color: #888; letter-spacing: 0.08em; }
/* expense stacked bar */
.mn-expbar { display: flex; height: 16px; border: 1px solid #111; overflow: hidden; }
.mn-explegend { display: flex; gap: 18px; margin-top: 8px; font-size: 10.5px; flex-wrap: wrap; }
/* generic rows (banks / bills / entities) */
.mn-row { padding: 12px 0; border-bottom: 1px solid #E5E5E5; cursor: pointer; box-shadow: none !important; background: none !important; }
.mn-row:last-child { border-bottom: 0; }
.mn-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mn-row-name { font-size: 12.5px; font-weight: 700; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-row-amt { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; }
.mn-row-sub { font-size: 10.5px; color: #888; margin-top: 2px; }
.mn-paybills { width: 100%; border: 1px solid #111; background: #fff; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: #111; padding: 10px; margin-top: 10px; cursor: pointer; text-transform: uppercase; font-family: 'DM Sans', sans-serif; border-radius: 0; }
.mn-paybills:hover { background: #111; color: #fff; }
.mn-todo { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.mn-todo-box { width: 14px; height: 14px; border: 1.5px solid #111; flex: none; }
.mn-todo-title { font-size: 12px; font-weight: 700; color: #111; }
/* transactions + activity */
.mn-tx-cols { display: flex; padding: 8px 0; border-bottom: 1px solid #111; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #888; text-transform: uppercase; }
.mn-tx-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #E5E5E5; font-size: 12px; cursor: pointer; gap: 6px; }
.mn-tx-row:last-child { border-bottom: 0; }
.mn-tx-row:hover { background: #FAFAFA; }
.mn-act-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #E5E5E5; }
.mn-act-row:last-child { border-bottom: 0; }
.mn-act-time { font-size: 10.5px; color: #888; width: 62px; flex: none; }
.mn-act-text { font-size: 11.5px; color: #111; min-width: 0; }
.mn-act-text b { font-weight: 700; }
.mn-act-text a { color: #111; font-weight: 700; text-decoration: underline; }
@media (max-width: 1150px) { .mn-mid { grid-template-columns: 1fr 1fr; } .mn-kpis { grid-template-columns: 1fr 1fr; } .mn-bottom { grid-template-columns: 1fr; } }
/* lavender overview goes full screen: hide the app shell, canvas fills viewport */
body:has(article.lg-canvas) #top, body:has(article.lg-canvas) #aside { display: none !important; }
body:has(article.lg-canvas) #root { padding: 0 !important; }
article.lg-canvas { margin: 0; border-radius: 0; min-height: 100vh; max-height: 100vh; padding: 0px; }
.lg-hico { font-size: 20px; color: var(--lg-mut); cursor: pointer; }
.lg-hico:hover { color: var(--lg-acc1); }
.lg-bell { cursor: pointer; }
.lg-avatar { text-decoration: none; }
.lg-exit { font-size: 22px; color: var(--lg-faint); line-height: 1; padding: 2px 0 2px 2px; }
.lg-exit:hover { color: var(--lg-acc1); }
/* =========================================================================
Pay Bills redesign (.vendorPayBill-modal / .pb-ui) + approval workflow
========================================================================= */
.vendorPayBill-modal .modal-dialog.modal-xl { max-width: 1200px; width: 96vw; }
.vendorPayBill-modal .modal-content.pb-ui { padding: 0 !important; border: none !important; border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,.30); display: flex; flex-direction: column; height: 90vh; background: #fff;
font-family: Montserrat, "Segoe UI", Arial, Helvetica, sans-serif; }
.vendorPayBill-modal form[type="paybills"] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.vendorPayBill-modal button { min-width: 0 !important; float: none !important; overflow: visible !important; box-shadow: none !important; position: static !important; top: 0 !important; height: auto !important; }
/* header */
.vendorPayBill-modal .pb-head { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 16px 20px !important; border-bottom: 1px solid #eceaf3; background: #fff; margin: 0 !important; zoom: 1 !important; flex: 0 0 auto; }
.vendorPayBill-modal .pb-head-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vendorPayBill-modal .pb-title { font-size: 18px; font-weight: 700; color: #2b2b3a; margin: 0 !important; }
.vendorPayBill-modal .pb-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6c6c85; background: #f2f4f8; border: 1px solid #e6e9ef; border-radius: 20px; padding: 5px 13px; }
.vendorPayBill-modal .pb-rule i { color: #8a93a3; }
.vendorPayBill-modal .pb-rule b { color: #2b2b3a; font-weight: 700; }
.vendorPayBill-modal .pb-rule-edit { margin-left: 6px; color: var(--pink1, #3bb273); font-weight: 600; }
.vendorPayBill-modal .pb-head-right { display: flex; align-items: center; gap: 8px; }
.vendorPayBill-modal .pb-hd-select select, .vendorPayBill-modal .pb-hd-date input { border: 1px solid #e0e2e8 !important; border-radius: 8px !important; padding: 7px 11px !important; font-size: 12.5px !important; background: #fff !important; height: auto !important; }
.vendorPayBill-modal .pb-hd-date { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e0e2e8; border-radius: 8px; padding: 0 10px; color: #9a9ab0; }
.vendorPayBill-modal .pb-hd-date input { border: none !important; padding: 7px 4px !important; width: 100px; }
.vendorPayBill-modal .pb-hd-close { width: 30px; height: 30px; border: 1px solid #f0c6c6; border-radius: 8px; color: #d9484d; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; }
.vendorPayBill-modal .pb-hd-close:hover { background: #fdeaea; }
/* rule editor */
.vendorPayBill-modal .pb-rule-editor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; background: #f7f9fc; border-bottom: 1px solid #eceaf3; font-size: 13px; color: #55556a; }
.vendorPayBill-modal .pb-re-amt input, .vendorPayBill-modal .pb-rule-editor select { border: 1px solid #dcdbe6 !important; border-radius: 7px !important; padding: 6px 9px !important; font-size: 13px !important; height: auto !important; }
.vendorPayBill-modal .pb-re-amt input { width: 90px; }
/* body: sidebar + main */
.vendorPayBill-modal .pb-body { display: flex; flex: 1 1 auto; min-height: 0; }
.vendorPayBill-modal .pb-sidebar { width: 258px; flex: 0 0 auto; border-right: 1px solid #eceaf3; overflow-y: auto; padding: 16px; background: #faf9fc; }
.vendorPayBill-modal .pb-side-block { margin-bottom: 20px; }
.vendorPayBill-modal .pb-side-title { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #9a9ab0; text-transform: uppercase; margin-bottom: 10px; }
.vendorPayBill-modal .pb-duedate ul { list-style: none; margin: 0; padding: 0; }
.vendorPayBill-modal .pb-duedate li { margin: 0 0 8px; }
.vendorPayBill-modal .pb-duedate .radio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #44445a; cursor: pointer; }
.vendorPayBill-modal .pb-duedate-input input { border: 1px solid #dcdbe6; border-radius: 7px; padding: 6px 9px; font-size: 12px; width: 100%; margin-top: 6px; }
.vendorPayBill-modal .pb-checkgroup { font-size: 13px; }
.vendorPayBill-modal .pb-checkgroup input[type="search"], .vendorPayBill-modal .pb-checkgroup input[type="text"] { width: 100%; border: 1px solid #dcdbe6; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; margin-bottom: 8px; }
.vendorPayBill-modal .pb-checkgroup label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #44445a; padding: 3px 0; cursor: pointer; }
/* main */
.vendorPayBill-modal .pb-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px; }
.vendorPayBill-modal .pb-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vendorPayBill-modal .pb-tabs { display: inline-flex; align-items: center; gap: 8px; }
.vendorPayBill-modal .pb-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; color: #6c6c85; background: #f2f4f8; text-decoration: none; }
.vendorPayBill-modal .pb-tab b { font-weight: 700; }
.vendorPayBill-modal .pb-tab.is-active { background: var(--pink1, #3bb273); color: #fff; }
.vendorPayBill-modal .pb-tab:not(.is-active):nth-child(2) { background: #fdf4e3; color: #c08a1e; }
.vendorPayBill-modal .pb-tab:not(.is-active):nth-child(3) { background: #fdecec; color: #d9484d; }
.vendorPayBill-modal .pb-match { font-size: 12px; color: #9a9ab0; }
.vendorPayBill-modal .pb-grid { flex: 1 1 auto; min-height: 220px; }
/* approval badges (rendered inside grid cells) */
.pb-appr { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.pb-appr i { font-size: 10px; }
.pb-appr-auto { background: #eef1f5; color: #5b6b7c; }
.pb-appr-ok { background: #e8f7ef; color: #1f9d57; }
.pb-appr-wait { background: #fdf4e3; color: #c08a1e; }
.pb-appr-no { background: #fdecec; color: #d9484d; }
.pb-appr-need { background: #fff3e0; color: #c9700f; }
.pb-appr-act { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--pink1, #3bb273); text-decoration: none; }
.pb-appr-act:hover { text-decoration: underline; }
.pb-appr-act.pb-reject { color: #d9484d; }
/* dark footer */
.vendorPayBill-modal .pb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px; background: #232a37; flex: 0 0 auto; }
.vendorPayBill-modal .pb-foot-left { display: flex; align-items: center; gap: 16px; }
.vendorPayBill-modal .pb-print { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #c7ccd5; cursor: pointer; margin: 0; }
.vendorPayBill-modal .pb-foot-sel { font-size: 12.5px; color: #8a93a3; }
.vendorPayBill-modal .pb-foot-right { display: flex; align-items: center; gap: 12px; }
.vendorPayBill-modal .pb-foot-total { font-size: 18px; font-weight: 800; color: #fff; }
.vendorPayBill-modal .pb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; margin: 0 !important; line-height: 1.2; }
.vendorPayBill-modal .pb-btn-pay { background: var(--pink1, #3bb273); color: #fff; }
.vendorPayBill-modal .pb-btn-pay:hover { filter: brightness(.94); }
.vendorPayBill-modal .pb-btn-request { background: transparent; border-color: #4a5262 !important; color: #cdd3dd; }
.vendorPayBill-modal .pb-btn-request:hover { background: #2b3342; }
.vendorPayBill-modal .pb-btn-ghost { background: #fff; border-color: #dcdbe6 !important; color: #55556a; }
.vendorPayBill-modal .pb-btn-save { background: var(--pink1, #3bb273); color: #fff; }
/* ββ Pay Bills styling fixes (override form-bills/modal-h/header-th globals) ββ */
.vendorPayBill-modal .modal-content.pb-ui header.pb-head { position: static !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; zoom: 1 !important; min-height: 0 !important; padding: 16px 20px !important; background: #fff !important; }
.vendorPayBill-modal .pb-head h2.pb-title { position: static !important; left: auto !important; top: auto !important; right: auto !important; transform: none !important; float: none !important; width: auto !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 18px !important; color: #2b2b3a !important; margin: 0 !important; }
.vendorPayBill-modal .pb-head > div { margin: 0 !important; }
.vendorPayBill-modal .pb-head select, .vendorPayBill-modal .pb-head input[type="text"] { float: none !important; width: auto !important; border: 1px solid #e0e2e8 !important; border-radius: 8px !important; padding: 7px 11px !important; height: auto !important; background: #fff !important; color: #2b2b3a !important; font-size: 12.5px !important; box-shadow: none !important; }
.vendorPayBill-modal .pb-head .select:before, .vendorPayBill-modal .pb-head .select:after { display: none !important; }
.vendorPayBill-modal .pb-hd-date input { border: none !important; }
/* sidebar CheckboxBlock header (.header-th is globally themed) */
.vendorPayBill-modal .pb-checkgroup .header-th { background: transparent !important; color: #44445a !important; padding: 0 !important; margin: 0 0 8px !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 600 !important; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; position: static !important; box-shadow: none !important; line-height: 1.4 !important; }
.vendorPayBill-modal .pb-checkgroup .header-th .check-a, .vendorPayBill-modal .pb-checkgroup .header-th .custom-checkbox { position: static !important; float: none !important; top: 0 !important; }
.vendorPayBill-modal .pb-checkgroup .header-th > span { flex: 1 1 100%; }
.vendorPayBill-modal .pb-checkgroup .paybillfilter { width: 100% !important; border: 1px solid #dcdbe6 !important; border-radius: 8px !important; padding: 6px 9px !important; font-size: 12px !important; background: #fff !important; margin-top: 2px; }
.vendorPayBill-modal .pb-checkgroup .cbgroup { max-height: 170px; overflow-y: auto; margin-top: 4px; }
.vendorPayBill-modal .pb-checkgroup .cbgroup .custom-checkbox { display: flex !important; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: #44445a; float: none !important; position: static !important; }
/* grid: light header + rows, hide the built-in footer (dark footer replaces it) */
.vendorPayBill-modal .pb-grid .slick-header, .vendorPayBill-modal .pb-grid .slick-header-columns { background: #f5f6f9 !important; border: none !important; }
.vendorPayBill-modal .pb-grid .slick-header-column { background: #f5f6f9 !important; color: #8a93a3 !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: .03em; text-transform: uppercase !important; border-right: 1px solid #eceaf3 !important; }
.vendorPayBill-modal .pb-grid .slick-cell { border-color: #f2f1f7 !important; font-size: 12.5px; color: #33343e; }
.vendorPayBill-modal .pb-grid .slick-row.odd { background: #fafafd; }
.vendorPayBill-modal .pb-grid .slick-footerrow { display: none !important; }
/* ββ Pay Bills: containment + grid sizing + sidebar select-all ββ */
.vendorPayBill-modal .modal-dialog.modal-xl { width: 1160px !important; max-width: 96vw !important; margin: 20px auto !important; }
.vendorPayBill-modal #root, .vendorPayBill-modal .modal-content.pb-ui { width: 100% !important; }
.vendorPayBill-modal .pb-main { min-width: 0 !important; overflow: hidden; }
.vendorPayBill-modal .pb-grid { min-width: 0 !important; width: 100% !important; overflow: hidden; }
.vendorPayBill-modal .pb-grid .slick-viewport { overflow-x: auto !important; }
.vendorPayBill-modal .pb-foot { width: 100%; box-sizing: border-box; }
/* sidebar select-all header text β force dark + no truncation */
.vendorPayBill-modal .pb-checkgroup .header-th, .vendorPayBill-modal .pb-checkgroup .header-th a, .vendorPayBill-modal .pb-checkgroup .header-th label { color: #55556a !important; white-space: normal !important; }
.vendorPayBill-modal .pb-checkgroup .header-th { text-indent: 0 !important; }
/* overview theme variables: lavender (2a, default) + blue (2c) with a toggle */
article.lg-canvas { --lg-acc1:#9B59D0; --lg-acc2:#C455B8; --lg-ink:#3A2D4E; --lg-mut:#8A7BA5; --lg-faint:#B9A8CE; --lg-bdr:#F1ECF8; --lg-bdr2:#E4DBF2; --lg-lbg:#F5EEFC; --lg-card:#FDFCFF; --lg-track:#EFE8F8; --lg-plbg1:#FBF8FF; --lg-rowline:#F8F4FD; --lg-bar1:#C08BE8; --lg-av2:#DCC5F0; --lg-glowc:rgba(155,89,208,0.12); --lg-glowc2:rgba(155,89,208,0.4); --lg-shadc:rgba(90,60,140,0.35); --lg-canvasbg:linear-gradient(135deg,#CBB4E8,#E3C4E5 50%,#C0AEE6); }
article.lg-canvas.blue { --lg-acc1:#3E6FCB; --lg-acc2:#3F9BD8; --lg-ink:#2B3A4E; --lg-mut:#7B8CA5; --lg-faint:#A6B5CE; --lg-bdr:#E9EFF8; --lg-bdr2:#D9E2F2; --lg-lbg:#E9F0FA; --lg-card:#FCFDFF; --lg-track:#E9EFF8; --lg-plbg1:#F7FAFF; --lg-rowline:#F3F7FD; --lg-bar1:#7FA6E8; --lg-av2:#C3D4F0; --lg-glowc:rgba(62,111,203,0.12); --lg-glowc2:rgba(62,111,203,0.4); --lg-shadc:rgba(43,58,78,0.35); --lg-canvasbg:linear-gradient(135deg,#AFC7EA,#C6D9EE 50%,#A9C1E8); }
/* wide-screen extras: receivables card (3rd column β₯1500px), to-dos in right rail */
.lg-grid2 .lg-wide { display: none; }
@media (min-width: 1500px) { .lg-grid2 { grid-template-columns: 1.25fr 1fr 1fr; } .lg-grid2 .lg-wide { display: block; } }
.lg-recv { display: flex; flex-direction: column; gap: 8px; }
.lg-recv-row { display: flex; align-items: baseline; gap: 8px; font-size: 11px; cursor: pointer; }
.lg-recv-name { font-weight: 700; color: var(--lg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-recv-sub { font-size: 9.5px; color: var(--lg-mut); }
.lg-recv-amt { margin-left: auto; font-weight: 700; color: var(--lg-ink); white-space: nowrap; }
.lg-todo-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.lg-todo-box { width: 13px; height: 13px; border: 1.5px solid var(--lg-acc1); border-radius: 4px; flex: none; }
.lg-todo-title { font-size: 11px; font-weight: 700; color: var(--lg-ink); }
.lg-todo-sub { font-size: 9.5px; color: var(--lg-mut); }
/* entity switcher + theme toggle in the card header */
.lg-entsel { border: 0; background: none; font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--lg-mut); cursor: pointer; outline: none; max-width: 170px; padding: 2px; box-shadow: none; }
.lg-entsel:focus { color: var(--lg-ink); }
/* ββ Pay Bills: backdrop, card, date field, sidebar polish ββ */
/* dim the page behind (this modal opens with backdrop:false) */
.vendorPayBill-modal.show, .vendorPayBill-modal[style*="display: block"], .vendorPayBill-modal[style*="display:block"] { background: rgba(22,26,36,.45) !important; }
/* make the card stand out + clean rounded bottom */
.vendorPayBill-modal .modal-content.pb-ui { box-shadow: 0 30px 90px rgba(0,0,0,.45) !important; border: 1px solid rgba(0,0,0,.05) !important; }
.vendorPayBill-modal .pb-foot { border-radius: 0 0 13px 13px; }
/* header date field β single clean box (kill the inner input border) */
.vendorPayBill-modal .pb-head .pb-hd-date { border: 1px solid #e0e2e8; border-radius: 8px; padding: 0 10px; height: 36px; display: inline-flex; align-items: center; gap: 6px; background: #fff; }
.vendorPayBill-modal .pb-head .pb-hd-date input, .vendorPayBill-modal .pb-head .pb-hd-date input[type="text"] { border: 0 !important; border-bottom: 0 !important; background: none !important; box-shadow: none !important; padding: 0 2px !important; width: 96px; height: auto !important; }
.vendorPayBill-modal .pb-head .pb-hd-select select { min-width: 150px; }
/* sidebar filter blocks β match the mockup (list in a bordered box, subtle select-all) */
.vendorPayBill-modal .pb-side-block { background: #fff; border: 1px solid #eceaf3; border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.vendorPayBill-modal .pb-duedate { }
.vendorPayBill-modal .pb-checkgroup .header-th { background: transparent !important; margin: 0 0 8px !important; padding: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #6c6c85 !important; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.vendorPayBill-modal .pb-checkgroup .header-th > span { flex: 1 1 100%; order: 2; }
.vendorPayBill-modal .pb-checkgroup .paybillfilter { width: 100% !important; border: 1px solid #dcdbe6 !important; border-radius: 8px !important; padding: 7px 10px !important; font-size: 12.5px !important; background: #faf9fc !important; }
.vendorPayBill-modal .pb-checkgroup .cbgroup { border: 1px solid #eceaf3; border-radius: 10px; padding: 6px 10px; max-height: 168px; overflow-y: auto; background: #fff; margin-top: 8px; }
.vendorPayBill-modal .pb-checkgroup .cbgroup .custom-checkbox { padding: 4px 0; }
/* DUE DATE block: keep it a plain card, not nested white-on-white */
.vendorPayBill-modal .pb-side-block .pb-duedate .list-choose { border: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
/* ββ Pay Bills: wider modal + de-cluttered sidebar (override earlier card boxing) ββ */
.vendorPayBill-modal .modal-dialog.modal-xl { width: 1380px !important; max-width: 97vw !important; }
/* remove the outer card border I put on every side block (caused double-boxing) */
.vendorPayBill-modal .pb-sidebar { width: 270px; }
.vendorPayBill-modal .pb-side-block { background: none !important; border: none !important; padding: 0 !important; margin-bottom: 22px !important; }
/* DUE DATE keeps a card look */
.vendorPayBill-modal .pb-side-block .pb-duedate { border: 1px solid #eceaf3 !important; border-radius: 12px !important; padding: 12px 14px !important; background: #fff !important; }
.vendorPayBill-modal .pb-side-block .pb-duedate li { margin: 0 0 6px !important; }
/* Properties / Vendors: subtle select-all + full search + list box (no outer card) */
.vendorPayBill-modal .pb-checkgroup .header-th { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }
.vendorPayBill-modal .pb-checkgroup .header-th label:first-of-type { font-size: 11px !important; font-weight: 600 !important; color: #9a9ab0 !important; }
.vendorPayBill-modal .pb-checkgroup .header-th > span { flex: 1 1 100%; order: 2; }
.vendorPayBill-modal .pb-checkgroup .paybillfilter { width: 100% !important; border: 1px solid #dcdbe6 !important; border-radius: 8px !important; padding: 7px 10px !important; font-size: 12.5px !important; background: #faf9fc !important; }
.vendorPayBill-modal .pb-checkgroup .cbgroup { border: 1px solid #eceaf3 !important; border-radius: 10px !important; padding: 6px 10px !important; max-height: 190px; overflow-y: auto; background: #fff; margin-top: 8px; }
.vendorPayBill-modal .pb-checkgroup .cbgroup .custom-checkbox { display: flex !important; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: #44445a; }
/* ββ Pay Bills: filter select-all cleanup + approval rule sidebar ββ */
.vendorPayBill-modal .pb-checkgroup .header-th .custom-checkbox { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; font-weight: 600 !important; color: #55556a !important; margin: 0 !important; order: 1; white-space: nowrap; }
.vendorPayBill-modal .pb-checkgroup .header-th .custom-checkbox .input { flex: 0 0 auto; }
.vendorPayBill-modal .pb-checkgroup .cbgroup .custom-checkbox { color: #44445a !important; }
/* approval rule sidebar (reuses .bank-rule-sidebar__*) */
.pb-rule-sidebar { z-index: 100060 !important; }
.pb-rule-sidebar .bank-rule-sidebar__form { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
.pb-rule-sidebar .bank-rule-sidebar__section { margin-bottom: 18px; }
.pb-rule-sidebar .bank-rule-sidebar__label { display: block; font-size: 12px; font-weight: 600; color: #55556a; margin-bottom: 7px; }
.pb-rule-sidebar .bank-rule-sidebar__input, .pb-rule-sidebar .bank-rule-sidebar__select { width: 100%; border: 1px solid #dcdbe6; border-radius: 9px; padding: 9px 12px; font-size: 13.5px; background: #fff; box-shadow: none; }
.pb-rule-sidebar .pb-re-amt-wrap { display: flex; align-items: center; gap: 8px; }
.pb-rule-sidebar .pb-re-amt-wrap > span { font-size: 16px; font-weight: 700; color: #55556a; }
.pb-rule-sidebar .pb-re-amt-wrap input { max-width: 160px; }
.pb-rule-sidebar .pb-re-hint { font-size: 11.5px; color: #9a9ab0; margin: 8px 0 0; line-height: 1.5; }
.pb-rule-sidebar .pb-rule-sb-foot { margin-top: auto; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #eceaf3; flex: 0 0 auto; }
.pb-rule-sidebar .pb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.pb-rule-sidebar .pb-btn-ghost { background: #fff; border-color: #dcdbe6; color: #55556a; }
.pb-rule-sidebar .pb-btn-save { background: var(--pink1, #3bb273); color: #fff; }
/* overview loading state: card fills the viewport from first paint + skeletons */
.lg-app { min-height: 100%; display: flex; flex-direction: column; }
.lg-app > .lg-body { flex: 1; }
@keyframes lgSkelPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.lg-skel { height: 13px; border-radius: 7px; margin: 10px 0; background: var(--lg-lbg); animation: lgSkelPulse 1.2s infinite ease-in-out; }
.lg-skel.w80 { width: 80%; } .lg-skel.w60 { width: 60%; } .lg-skel.w40 { width: 40%; }
.lg-skel-bar { flex: 1; border-radius: 8px 8px 0 0; background: var(--lg-lbg); animation: lgSkelPulse 1.2s infinite ease-in-out; }
.lg-skel-tile { height: 58px; border-radius: 12px; background: var(--lg-lbg); animation: lgSkelPulse 1.2s infinite ease-in-out; }
.lg-donut { background: var(--lg-lbg); }
/* ββ Pay Bills sidebar: flatten to match the mockup (remove boxes, add search icon) ββ */
.vendorPayBill-modal .pb-sidebar { background: #fff; padding: 18px 18px 18px 20px; }
.vendorPayBill-modal .pb-side-block { margin-bottom: 24px !important; }
.vendorPayBill-modal .pb-side-title { font-size: 10px; letter-spacing: .07em; color: #9a9ab0; margin-bottom: 12px; }
/* DUE DATE β flat radios, no card */
.vendorPayBill-modal .pb-side-block .pb-duedate { border: none !important; background: none !important; padding: 0 !important; }
.vendorPayBill-modal .pb-duedate .radio { padding: 5px 0 !important; font-size: 13.5px !important; color: #33343e; }
.vendorPayBill-modal .pb-duedate-input input { margin-top: 4px; }
/* PROPERTIES / VENDORS β subtle select-all, search w/ icon, plain list (no box) */
.vendorPayBill-modal .pb-checkgroup .header-th { margin: 0 0 8px !important; }
.vendorPayBill-modal .pb-checkgroup .header-th .custom-checkbox { font-size: 11.5px !important; font-weight: 500 !important; color: #9a9ab0 !important; }
.vendorPayBill-modal .pb-checkgroup .header-th > span { position: relative; }
.vendorPayBill-modal .pb-checkgroup .header-th > span::before { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #b0b0c0; font-size: 12px; pointer-events: none; }
.vendorPayBill-modal .pb-checkgroup .paybillfilter { padding: 8px 10px 8px 32px !important; background: #f4f5f8 !important; border: 1px solid #eceef2 !important; border-radius: 9px !important; }
.vendorPayBill-modal .pb-checkgroup .cbgroup { border: none !important; background: none !important; padding: 2px 0 0 !important; max-height: 210px; margin-top: 6px; }
.vendorPayBill-modal .pb-checkgroup .cbgroup .custom-checkbox { padding: 5px 0 !important; font-size: 13.5px !important; color: #33343e !important; }
/* grid payment cell β bordered input box like the mockup */
.vendorPayBill-modal .pb-grid .slick-cell input[type="text"] { border: 1px solid #dcdbe6 !important; border-radius: 7px !important; padding: 4px 9px !important; background: #fff !important; height: 28px; }
/* ββ Pay Bills DUE DATE radios: fix the overlapping custom radio circle ββ */
.vendorPayBill-modal .pb-duedate .radio { display: flex !important; align-items: center; padding: 6px 0 !important; margin: 0 !important; cursor: pointer; font-size: 13.5px !important; color: #33343e; position: static !important; }
.vendorPayBill-modal .pb-duedate .radio .hidden { display: none !important; }
.vendorPayBill-modal .pb-duedate .radio .input { position: static !important; left: auto !important; top: auto !important; margin: 0 11px 0 0 !important; flex: 0 0 auto; }
.vendorPayBill-modal .pb-duedate .radio span { display: none; }
/* ββ Pay Bills radios: FIX the exploded radio dot (::before fills its .input β
it must stay position:relative, never static) + green theme ββ */
.vendorPayBill-modal .pb-duedate .radio .input {
position: relative !important; left: auto !important; top: auto !important;
display: inline-block !important; flex: 0 0 auto; width: 18px !important; height: 18px !important;
margin: 0 10px 0 0 !important; border-radius: 50% !important; border: 2px solid #cfd4dd !important;
opacity: 1 !important; background: #fff !important; box-sizing: border-box;
}
.vendorPayBill-modal .pb-duedate .radio .input:before {
left: 3px !important; right: 3px !important; top: 3px !important; bottom: 3px !important;
margin: 0 !important; width: auto !important; height: auto !important; border-radius: 50% !important;
}
.vendorPayBill-modal .pb-duedate input[type="radio"]:checked ~ .input { border-color: var(--pink1, #3bb273) !important; }
.vendorPayBill-modal .pb-duedate input[type="radio"]:checked ~ .input:before { background-color: var(--pink1, #3bb273) !important; }
.vendorPayBill-modal .pb-duedate input[type="radio"]:not(:checked) ~ .input:before { background: transparent !important; }
/* ββ Pay Bills sidebar: mockup parity pass ββ */
/* section separators */
.vendorPayBill-modal .pb-side-block { border: none !important; border-bottom: 1px solid #e8ebf1 !important; padding: 0 0 18px !important; margin-bottom: 18px !important; position: relative; }
.vendorPayBill-modal .pb-side-block:last-child { border-bottom: none !important; }
/* DUE DATE: radio + inline date input on one line */
.vendorPayBill-modal .pb-duedate #dueDateLi { display: flex; align-items: center; gap: 8px; }
.vendorPayBill-modal .pb-duedate #dueDateLi .radio { flex: 0 0 auto; }
.vendorPayBill-modal .pb-duedate-input { flex: 1 1 auto; }
.vendorPayBill-modal .pb-duedate-input input { width: 100px !important; margin: 0 !important; border: none !important; border-bottom: 1px dashed #c9cfda !important; border-radius: 0 !important; background: none !important; padding: 2px 2px !important; font-size: 12.5px !important; color: #55607a; box-shadow: none !important; height: auto !important; }
.vendorPayBill-modal .pb-duedate-input input::placeholder { color: #aab2c2; }
.vendorPayBill-modal .pb-duedate .radio { font-size: 13px !important; color: #23324f; font-weight: 600; }
/* select-all: pin to the section-title row (top-right), small + subtle */
.vendorPayBill-modal .pb-checkgroup .header-th .custom-checkbox { position: absolute !important; top: -2px; right: 0; margin: 0 !important; font-size: 10.5px !important; font-weight: 600 !important; color: #7c8698 !important; display: inline-flex !important; align-items: center; gap: 6px; z-index: 2; }
/* search inputs: mockup typography */
.vendorPayBill-modal .pb-checkgroup .paybillfilter { height: 32px; font-size: 12.5px !important; color: #33415e !important; font-weight: 500; }
.vendorPayBill-modal .pb-checkgroup .paybillfilter::placeholder { color: #9aa3b2; font-weight: 400; }
/* checkbox lists: smaller text, deep-blue mockup checkboxes */
.vendorPayBill-modal .pb-checkgroup .cbgroup .custom-checkbox { gap: 9px !important; padding: 4px 0 !important; font-size: 13px !important; color: #23324f !important; font-weight: 500; }
.vendorPayBill-modal .pb-checkgroup .custom-checkbox .input { width: 16px !important; height: 16px !important; min-width: 16px; border-radius: 4px !important; border: 1.5px solid #c9cfda !important; background: #fff !important; position: relative !important; flex: 0 0 auto; margin: 0 !important; box-sizing: border-box; opacity: 1 !important; }
.vendorPayBill-modal .pb-checkgroup .custom-checkbox input:checked ~ .input { background: #2f6fed !important; border-color: #2f6fed !important; }
.vendorPayBill-modal .pb-checkgroup .custom-checkbox .input:before { content: none !important; }
.vendorPayBill-modal .pb-checkgroup .custom-checkbox input:checked ~ .input:after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* section titles a touch darker like the mockup */
.vendorPayBill-modal .pb-side-title { font-size: 10.5px; letter-spacing: .08em; color: #8a93a3; font-weight: 700; }
/* ββ Pay Bills: final parity fixes ββ */
/* clean shadow: kill stray backgrounds/shadows on wrapper layers */
.vendorPayBill-modal .modal-dialog, .vendorPayBill-modal #root { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
.vendorPayBill-modal .modal-content.pb-ui { box-shadow: 0 18px 60px rgba(15,23,42,.28) !important; border: none !important; }
/* header selects/date: mockup pill style */
.vendorPayBill-modal .pb-head select { height: 38px !important; min-width: 130px; border: 1px solid #dfe3ea !important; border-radius: 9px !important; padding: 7px 12px !important; font-size: 13px !important; font-weight: 600; color: #23324f !important; background: #fff !important; box-shadow: none !important; }
.vendorPayBill-modal .pb-hd-date { height: 38px; border-radius: 9px; }
/* sidebar select-all: pin top-right for real (earlier rule had top:0 !important) */
.vendorPayBill-modal .pb-checkgroup .header-th .custom-checkbox { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; }
/* due-date: tighter spacing + baseline-aligned inline input */
.vendorPayBill-modal .pb-side-block { padding: 0 0 14px !important; margin-bottom: 14px !important; }
.vendorPayBill-modal .pb-duedate ul, .vendorPayBill-modal .pb-duedate li { margin: 0 !important; padding: 0 !important; }
.vendorPayBill-modal .pb-duedate #dueDateLi { align-items: baseline; }
.vendorPayBill-modal .pb-duedate .radio { padding: 4px 0 !important; }
/* multi-select list text: smaller like the mockup */
.vendorPayBill-modal .pb-checkgroup .cbgroup .custom-checkbox { font-size: 12.5px !important; line-height: 1.35 !important; padding: 3px 0 !important; }
.vendorPayBill-modal .pb-checkgroup .cbgroup { max-height: 172px; }
/* grid checkboxes (select-all + rows): deep blue, not theme light-blue */
.vendorPayBill-modal .pb-grid .custom-checkbox .input { width: 16px !important; height: 16px !important; border-radius: 4px !important; border: 1.5px solid #c9cfda !important; background: #fff !important; opacity: 1 !important; box-sizing: border-box; }
.vendorPayBill-modal .pb-grid .custom-checkbox input:checked ~ .input { background: #2f6fed !important; border-color: #2f6fed !important; }
.vendorPayBill-modal .pb-grid .custom-checkbox .input:before { content: none !important; }
.vendorPayBill-modal .pb-grid .custom-checkbox input:checked ~ .input:after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vendorPayBill-modal .pb-grid .custom-checkbox { position: relative; }
/* footer: correct order (globals flip it) + mockup-blue pay button + native print checkbox */
.vendorPayBill-modal .pb-foot { flex-direction: row !important; }
.vendorPayBill-modal .pb-foot-left { order: 0 !important; float: none !important; margin: 0 !important; }
.vendorPayBill-modal .pb-foot-right { order: 1 !important; float: none !important; margin-left: auto !important; }
.vendorPayBill-modal button.pb-btn-pay { background: #2f6fed !important; color: #fff !important; border: none !important; }
.vendorPayBill-modal button.pb-btn-pay:hover { filter: brightness(1.08); }
.vendorPayBill-modal .pb-btn-request { border-color: #4a5262 !important; }
.vendorPayBill-modal .pb-print input { width: 15px; height: 15px; accent-color: #2f6fed; margin: 0; }
/* ββ Pay Bills sidebar: user-tuned styles (scoped to this modal only) ββ */
/* white sidebar (devtools tweak) */
.vendorPayBill-modal .pb-sidebar { background: #fff !important; }
/* search fields per devtools: solid #e9eaeb pill */
.vendorPayBill-modal .pb-checkgroup .paybillfilter { background: #e9eaeb !important; border: 1px solid #e9eaeb !important; padding: 8px 10px 8px 32px !important; border-radius: 9px !important; }
/* list cells per devtools: comfy padding + smaller font (rowHeight is already 32) */
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-cell { padding: 7px 14px !important; font-size: small !important; cursor: pointer; }
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-row,
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-viewport,
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-pane { background: #fff !important; box-shadow: none !important; }
/* select-all checkbox -> "All Β· None" links */
.vendorPayBill-modal .pb-checkgroup .header-th .custom-checkbox { display: none !important; }
.vendorPayBill-modal .pb-allnone { position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.vendorPayBill-modal .pb-allnone a { color: #2f6fed; text-decoration: none; }
.vendorPayBill-modal .pb-allnone a:hover { text-decoration: underline; }
.vendorPayBill-modal .pb-allnone i { font-style: normal; color: #c3c9d4; }
/* scrollbars only on hover for the two filter lists */
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-viewport { overflow-y: hidden !important; }
.vendorPayBill-modal .pb-checkgroup:hover .cbgroup .slick-viewport { overflow-y: auto !important; }
/* bank-feed widget: scroll only the table body (same shell as recent-transactions),
match chips + Add-as button */
bank-feed { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.bkf-table th:nth-child(4) { width: 15%; }
.bkf-matchcell { overflow: visible !important; }
.bkf-chip { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.bkf-chip.pending { background: #f0f1f3; color: #8a929b; }
.bkf-chip.match { background: #e2f4e5; color: #1e7d32; }
.bkf-addas { padding: 4px 12px; border: 1px solid #2e6da4; border-radius: 6px; background: #fff; color: #2e6da4; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.bkf-addas:hover { background: #2e6da4; color: #fff; }
/* ββ Pay Bills sidebar: title-row AllΒ·None, grid-header color, tight spacing ββ */
/* AllΒ·None sits on the title row */
.vendorPayBill-modal .pb-side-title { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 8px !important; }
.vendorPayBill-modal .pb-side-title .pb-allnone { position: static !important; }
/* sidebar + lists share the grid-header color */
.vendorPayBill-modal .pb-sidebar { background: #f5f6f9 !important; padding: 12px 14px 12px 16px !important; }
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-row,
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-viewport,
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-pane { background: #f5f6f9 !important; }
.vendorPayBill-modal .pb-checkgroup .paybillfilter { background: #e9eaeb !important; }
/* tighter vertical rhythm so the sidebar fits without scrolling */
.vendorPayBill-modal .pb-side-block { padding: 0 0 10px !important; margin-bottom: 10px !important; }
.vendorPayBill-modal .pb-checkgroup .header-th { margin: 0 0 6px !important; }
.vendorPayBill-modal .pb-checkgroup .cbgroup { margin-top: 4px !important; max-height: 150px; padding: 0 !important; border: none !important; }
.vendorPayBill-modal .pb-duedate .radio { padding: 3px 0 !important; }
/* due-before: solid underline + label snug to the toggle */
.vendorPayBill-modal .pb-duedate-input input { border-bottom: 1px solid #c9cfda !important; }
.vendorPayBill-modal .pb-duedate .radio .input { margin: 0 7px 0 0 !important; }
/* header selects: cap width so they can't overlap the date */
.vendorPayBill-modal .pb-head-right { flex-wrap: nowrap; }
.vendorPayBill-modal .pb-head select { max-width: 190px !important; min-width: 110px; flex: 0 1 auto; text-overflow: ellipsis; }
/* Pay Bills: kill the slickgrid container shadow on the sidebar filter lists */
.vendorPayBill-modal .pb-checkgroup .cbgroup,
.vendorPayBill-modal .pb-checkgroup .cbgroup .slick-pane,
.vendorPayBill-modal .pb-checkgroup .cbgroup .grid-canvas { box-shadow: none !important; outline: 0 !important; border: none !important; }
/* ββ Pay Bills footer: mockup styling ββ */
.vendorPayBill-modal .pb-foot { background: #1f2735 !important; padding: 12px 20px !important; gap: 18px; }
.vendorPayBill-modal .pb-print { font-size: 13px; color: #cbd2dd; gap: 9px; font-weight: 500; }
.vendorPayBill-modal .pb-print input { width: 16px; height: 16px; accent-color: #2f6fed; }
.vendorPayBill-modal .pb-foot-sel { color: #8a93a3; font-size: 12.5px; }
.vendorPayBill-modal .pb-foot-sel b { color: #cbd2dd; }
.vendorPayBill-modal .pb-foot-total { font-family: 'Consolas', 'Courier New', monospace; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.vendorPayBill-modal button.pb-btn-pay { border-radius: 8px !important; padding: 10px 20px !important; font-size: 13.5px !important; font-weight: 600 !important; }
.vendorPayBill-modal .pb-btn-request { color: #cdd3dd !important; border: 1px solid #3d4657 !important; border-radius: 8px !important; background: transparent !important; padding: 10px 18px !important; }
.vendorPayBill-modal .pb-btn-request:hover { background: #2a3444 !important; }
/* ββ Pay Bills: latest round of fixes ββ */
/* no page backdrop β behave like every other modal (keep only the card shadow) */
.vendorPayBill-modal.show, .vendorPayBill-modal[style*="display: block"], .vendorPayBill-modal[style*="display:block"] { background: transparent !important; }
/* min / max window buttons beside the close */
.vendorPayBill-modal .pb-hd-win { width: 30px; height: 30px; border: 1px solid #e5e4ee; border-radius: 8px; background: #fff; color: #8a93a3; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: all .12s; }
.vendorPayBill-modal .pb-hd-win:hover { background: #f3f2f9; color: #33415e; }
/* payment inputs: match Open column font + stop the right-edge clipping */
.vendorPayBill-modal .pb-grid .slick-cell input[type="text"] { box-sizing: border-box !important; width: 90% !important; max-width: 120px; font-family: inherit !important; font-size: 12.5px !important; color: #33343e !important; height: 27px !important; }
/* select column: pointer cursor + ghost check on hover */
.vendorPayBill-modal .pb-grid .slick-row .slick-cell:first-child { cursor: pointer; text-align: center; }
.vendorPayBill-modal .pb-grid .slick-row .slick-cell:first-child:hover:empty::before {
content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #c8cdd7; font-size: 14px; }
/* print-checks checkbox: mockup style (outlined on dark, blue when checked) */
.vendorPayBill-modal .pb-print input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid #4a5568; border-radius: 4px; background: transparent; cursor: pointer; position: relative; margin: 0; }
.vendorPayBill-modal .pb-print input:checked { background: #2f6fed; border-color: #2f6fed; }
.vendorPayBill-modal .pb-print input:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* ββ Pay Bills: wider + shadow + column picker ββ */
.vendorPayBill-modal .modal-dialog.modal-xl { width: 1500px !important; max-width: 98vw !important; }
.vendorPayBill-modal .modal-content.pb-ui { box-shadow: 3px 1px 20px 0px #bebed1 !important; }
.vendorPayBill-modal .pb-checkgroup .cbgroup { border-radius: 0 !important; }
.vendorPayBill-modal .pb-tabs-right { display: inline-flex; align-items: center; gap: 14px; }
.vendorPayBill-modal .pb-colpick-wrap { position: relative; }
.vendorPayBill-modal .pb-col-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #dcdbe6; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; color: #55556a; text-decoration: none; }
.vendorPayBill-modal .pb-col-btn:hover { border-color: #2f6fed; color: #2f6fed; }
.vendorPayBill-modal .pb-colpick { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; background: #fff; border: 1px solid #e5e4ee; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 10px 14px; min-width: 170px; }
.vendorPayBill-modal .pb-colpick label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #33343e; padding: 4px 0; margin: 0; cursor: pointer; white-space: nowrap; }
.vendorPayBill-modal .pb-colpick input { width: 15px; height: 15px; accent-color: #2f6fed; margin: 0; }
/* Pay Bills: user-requested width */
.vendorPayBill-modal .modal-dialog.modal-xl { width: 1650px !important; }
/* Pay Bills: shadow must live on #root or it gets clipped */
.vendorPayBill-modal #root { box-shadow: 3px 1px 20px 0px #bebed1 !important; border-radius: 14px; }
.vendorPayBill-modal .modal-content.pb-ui { box-shadow: none !important; }
/* Pay Bills: natural height instead of forced 90vh */
/* fixed height (not content-driven): with the entity filter hidden in
single-entity mode the sidebar no longer props the modal open */
.vendorPayBill-modal .modal-content.pb-ui { height: calc(100vh - 60px) !important; max-height: calc(100vh - 60px); }
/* vendors block stretches to fill the sidebar; its list scrolls internally */
.vendorPayBill-modal .pb-sidebar { display: flex; flex-direction: column; }
.vendorPayBill-modal .pb-side-block { flex: 0 0 auto; }
.vendorPayBill-modal .pb-side-block:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vendorPayBill-modal .pb-side-block:last-child .pb-checkgroup { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vendorPayBill-modal .pb-side-block:last-child .pb-checkgroup .cbgroup { max-height: none !important; flex: 1 1 auto; min-height: 0; }
/* ββ Entities page redesign (general mode): left list + detail panel βββββββββ */
.enx-list { width: 100%; text-align: left; font-family: 'DM Sans', Montserrat, "Segoe UI", sans-serif; display: flex; flex-direction: column; max-height: calc(100vh - 135px); }
.enx-list-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; }
.enx-list-head h1 { font-size: 18px; font-weight: 700; margin: 0; color: #1d2939; }
.enx-count { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 11px; background: #eef2f7; color: #5b6b7f; font-size: 12px; font-weight: 700; vertical-align: middle; }
.enx-add { padding: 7px 14px; border: 0; border-radius: 8px; background: var(--primary, #2563eb); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.enx-add:hover { background: var(--primary, #1d4fd7); filter: brightness(.92); }
.enx-search { position: relative; margin: 0 2px 10px; flex: none; }
.enx-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa6b4; font-size: 11px; }
.enx-search input { width: 100%; padding: 7px 12px 7px 31px; border: 1px solid transparent; border-radius: 9px; font-size: 12.5px; background: #eef1f6; color: #1d2939; }
.enx-search input::placeholder { color: #9aa6b4; }
.enx-search input:focus { outline: none; border-color: var(--primary, #2563eb); background: #fff; }
.enx-pills { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.enx-pill { padding: 5px 12px; border: 0; border-radius: 14px; background: #eef2f7; color: #5b6b7f; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.enx-pill.active { background: var(--primary, #2563eb); color: #fff; }
.enx-rows { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.enx-list-head, .enx-pills { flex: none; }
.enx-foot { flex: none; }
.enx-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 7px; border-bottom: 1px solid #eef1f5; border-left: 3px solid transparent; cursor: pointer; border-radius: 0 8px 8px 0; box-shadow: none !important; }
.enx-row:hover { background: #f6f8fa; }
.enx-row.active { background: var(--primary-10, #eef4fe); border-left-color: var(--primary, #2563eb); }
.enx-row.active .enx-row-info b { color: var(--primary, #1d4fd7); }
.enx-row.enx-hidden { display: none; }
.enx-badge { width: 34px; height: 34px; border-radius: 8px; background: var(--primary-10, #e8effc); color: var(--primary, #2563eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.enx-badge.lg { width: 46px; height: 46px; border-radius: 11px; background: var(--primary, #2563eb); color: #fff; font-size: 16px; }
.enx-row-info { flex: 1; min-width: 0; }
.enx-row-info b { display: block; font-size: 13px; font-weight: 700; color: #1d2939; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enx-row-info em { display: block; font-style: normal; font-size: 11px; color: #8a96a5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enx-row-bal { text-align: right; flex: none; }
.enx-row-bal b { display: block; font-size: 13px; font-weight: 700; color: #1d2939; font-family: 'DM Mono', Consolas, monospace; }
.enx-row-bal em { display: block; font-style: normal; font-size: 10.5px; }
.enx-row-bal .bad, .enx-kpi .bad, .enx-row-bal em.bad { color: #dc2626; }
.enx-row-bal em.dim, .enx-dim { color: #9aa6b4; }
.enx-more { display: block; padding: 10px 8px; font-size: 12.5px; color: var(--primary, #2563eb); font-weight: 600; }
.enx-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px; border-top: 2px solid #e4e9f0; margin-top: 4px; }
.enx-foot span { font-size: 11.5px; color: #8a96a5; }
.enx-foot b { font-size: 14px; font-weight: 700; color: #1d2939; }
/* detail panel */
.enx-panel { text-align: left; font-family: 'DM Sans', Montserrat, "Segoe UI", sans-serif; }
.enx-head { display: flex; align-items: flex-start; gap: 14px; padding: 4px 2px 14px; }
.enx-head-info { flex: 1; min-width: 0; }
.enx-head-name { font-size: 19px; font-weight: 700; color: #1d2939; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.enx-chip { padding: 3px 10px; border-radius: 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.enx-chip.good { background: #dcf5e5; color: #15803d; }
.enx-chip.off { background: #eef1f5; color: #8a96a5; }
.enx-head-meta { font-size: 12px; color: #64748b; margin-top: 3px; }
.enx-head-actions { display: flex; gap: 8px; flex: none; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.enx-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #dbe3ee; border-radius: 9px; background: #fff; color: var(--primary, #2563eb) !important; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.enx-btn:hover { background: var(--primary-10, #f2f7ff); }
.enx-btn.primary { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff !important; }
.enx-btn.primary:hover { background: var(--primary, #1d4fd7); filter: brightness(.92); }
.enx-btn.icon { padding: 8px 11px; color: #64748b !important; }
.enx-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; }
.enx-kpi { border: 1px solid #e8edf4; border-radius: 12px; background: #fff; padding: 12px 14px; min-width: 0; }
.enx-kpi em { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a96a5; margin-bottom: 5px; }
.enx-kpi b { display: block; font-size: 19px; font-weight: 700; color: #1d2939; font-family: 'DM Mono', Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enx-kpi b.good { color: #15803d; }
.enx-kpi span { display: block; font-size: 10.5px; color: #8a96a5; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enx-mini { display: flex; align-items: flex-end; gap: 5px; height: 36px; margin-top: 2px; }
.enx-mini span { flex: 1; max-width: 18px; border-radius: 3px 3px 0 0; background: var(--primary-10, #c4d5f5); background: color-mix(in srgb, var(--primary, #2563eb) 30%, #fff); }
.enx-mini span.neg { background: #f3b3ae; }
.enx-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #fef7e6; border: 1px solid #f6e3b8; margin-bottom: 10px; font-size: 12.5px; color: #6b5518; }
.enx-banner i { color: #d99e1b; }
.enx-banner a { font-weight: 700; color: var(--primary, #2563eb); }
.enx-spacer { flex: 1; }
.enx-tab-count { display: inline-block; margin-left: 5px; padding: 1px 8px; border-radius: 10px; background: var(--primary, #2563eb); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.5; }
@media (max-width: 1500px) { .enx-kpis { grid-template-columns: repeat(3, 1fr); } }
/* mockup-style underline tabs on the entity panel */
.enx-panel .enx-tabs { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8edf4; background: none; padding: 0 2px; }
.enx-panel .enx-tabs .list-horizontal.nav { display: flex; gap: 26px; float: none; margin: 0; }
.enx-panel .enx-tabs .tablinks { float: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.enx-panel .enx-tabs .tablinks a { display: inline-flex; align-items: center; padding: 11px 1px 12px; margin-bottom: -1px; font-family: 'DM Sans', Montserrat, "Segoe UI", sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #7c8798 !important; background: none !important; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; }
.enx-panel .enx-tabs .tablinks a:hover { color: #1d2939 !important; }
.enx-panel .enx-tabs .tablinks.active a { color: #1d2939 !important; border-bottom-color: var(--primary, #2563eb); font-weight: 700; }
/* mini line-icon actions (columns / pdf / excel / print) */
.enx-panel .enx-tabs .list-square.enx-actions { display: flex; gap: 2px; align-items: center; float: none; margin: 0; }
.enx-panel .enx-tabs .enx-actions li { float: none; width: auto; height: auto; margin: 0; padding: 6px 8px; border: 0; background: none; box-shadow: none; border-radius: 7px; cursor: pointer; line-height: 1; }
.enx-panel .enx-tabs .enx-actions li i { font-size: 13.5px; color: #8a96a5; }
.enx-panel .enx-tabs .enx-actions li:hover { background: #f2f5f9; }
.enx-panel .enx-tabs .enx-actions li:hover i { color: #1d2939; }
/* ββ Pay Bills approval rules: list + detail views ββ */
.pb-rule-sidebar .pb-rules-list-view, .pb-rule-sidebar .pb-rule-detail-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pb-rule-sidebar .pb-rule-row { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border: 1px solid #eceaf3; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all .12s; background: #fff; }
.pb-rule-sidebar .pb-rule-row:hover { border-color: #2f6fed; box-shadow: 0 2px 8px rgba(47,111,237,.10); }
.pb-rule-sidebar .pb-rule-row.is-off { opacity: .55; }
.pb-rule-sidebar .pb-rule-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-rule-sidebar .pb-rule-row-main b { font-size: 13px; color: #23324f; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-rule-sidebar .pb-rule-row-main span { font-size: 11.5px; color: #8a93a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-rule-sidebar .pb-rule-badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: #e8f7ef; color: #1f9d57; }
.pb-rule-sidebar .pb-rule-row.is-off .pb-rule-badge { background: #eef0f4; color: #8a93a3; }
.pb-rule-sidebar .pb-rule-row > .fa-chevron-right { color: #c3c9d4; font-size: 11px; }
.pb-rule-sidebar .pb-rules-empty { font-size: 12.5px; color: #9aa3b2; padding: 16px 4px; }
.pb-rule-sidebar .pb-rule-add { width: 100%; justify-content: center; margin-top: 4px; }
.pb-rule-sidebar .pb-rule-active { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #33415e; font-weight: 500; cursor: pointer; }
.pb-rule-sidebar .pb-rule-active input { width: 15px; height: 15px; accent-color: #2f6fed; margin: 0; }
.pb-rule-sidebar .pb-btn-danger-o { color: #d9484d !important; border-color: #f0c6c6 !important; }
.pb-rule-sidebar .pb-btn-danger-o:hover { background: #fdeaea !important; }
#root .enx-head-actions .enx-btn, #root .enx-list .enx-add, #root .enx-pill { float: none; width: auto; min-width: 0; margin: 0; box-shadow: none; line-height: 1.2; height: auto; position: static; top: auto; font-family: 'DM Sans', Montserrat, "Segoe UI", sans-serif; }
/* entity panel: restore the flex height chain the transactions grid expects */
.enx-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.enx-head, .enx-kpis, .enx-banner { flex: none; }
.enx-panel .tabFunction { flex: 1 1 auto; min-height: 0; }
/* full height chain: .right-side (flex col) β .enx-panel β .tabFunction β tabcontent,
so the transactions grid gets a bounded height and its scrollbars stay visible */
/* #content overshoots the viewport by ~20px in this theme, so cap the panel to
the real visible height (top bar 52 + content offset/padding β 128 + gap) or
the grid's bottom scrollbar lands just off-screen */
.right-side > .enx-panel { flex: 1 1; display: flex; flex-direction: column; min-height: 0; overflow: visible; max-height: calc(100vh - 138px); }
.enx-panel .enx-head, .enx-panel .enx-kpis, .enx-panel .enx-banner { flex: 0 0 auto; }
.enx-panel > .tabFunction { flex: 1 1; display: flex; flex-direction: column; min-height: 0; overflow: visible; }
.enx-panel > .tabFunction > nav { flex: 0 0 auto; }
/* grids + popups inside the panel keep the app's standard font (DM Sans is only
for the enx chrome: header, KPIs, tabs, left list) */
.enx-panel .tabFunction .tabcontent, .enx-panel .cpopup { font-family: Segoe_UI, "Segoe UI", Arial, Helvetica, sans-serif; }
/* the slick columns popup positions itself off the trigger's offset parent, which
lands past the card edge here β pin it to the panel's right instead */
.enx-panel .cpopup { left: auto !important; right: 14px !important; max-height: 55vh; z-index: 60; }
/* the theme's .right-side > .tabFunction > .tabcontent chain is direct-child;
replicate it under the entity panel wrapper so the grid gets its height */
.enx-panel > .tabFunction > .tabcontent { flex: 1 1; min-height: 0; }
.enx-badge-img { object-fit: cover; padding: 0; background: #eef2f7; }
/* Pay Bills rule sidebar: fastSelect fields */
.pb-rule-sidebar .pb-fs { position: relative; }
.pb-rule-sidebar .pb-fs .select { display: block; width: 100%; }
.pb-rule-sidebar .pb-fs .select:before, .pb-rule-sidebar .pb-fs .select:after { display: none !important; }
.pb-rule-sidebar .pb-fs input.fes, .pb-rule-sidebar .pb-fs input.es-input {
width: 100% !important; box-sizing: border-box !important; border: 1px solid #dcdbe6 !important; border-radius: 9px !important;
padding: 9px 26px 9px 12px !important; font-size: 13.5px !important; background: #fff !important; color: #23324f !important;
height: auto !important; float: none !important; box-shadow: none !important; position: static !important; }
.pb-rule-sidebar .pb-fs input.fes:focus, .pb-rule-sidebar .pb-fs input.es-input:focus { border-color: #2f6fed !important; outline: none !important; }
.pb-rule-sidebar .pb-fs input.fes::placeholder, .pb-rule-sidebar .pb-fs input.es-input::placeholder { color: #9aa3b2; }
/* Pay Bills: #root must hug the card (flexmodal gives it height:100%, leaving a ghost strip below) */
.vendorPayBill-modal .modal-dialog #root { height: auto !important; min-height: 0 !important; }
.vendorPayBill-modal .modal-dialog { height: auto !important; }
/* ---- Tasks kanban board (maintenance-right board view) ---- */
.mnt-view-toggle { display: flex; gap: 6px; align-items: center; }
.mnt-view-toggle .mnt-view-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid #d7dce3; color: #5a6572; font-size: 12px; font-weight: 600; text-decoration: none; background: #fff; }
.mnt-view-toggle .mnt-view-btn.active { background: #2f3e4e; border-color: #2f3e4e; color: #fff; }
.mnt-view-toggle .mnt-view-btn i { margin-right: 4px; }
.mnt-board { height: calc(100vh - 185px); display: flex; gap: 12px; padding: 12px; overflow-x: auto; align-items: flex-start; background: #f4f6f9; border-radius: 10px; }
.mnt-col { flex: 0 0 240px; max-width: 240px; display: flex; flex-direction: column; max-height: 100%; background: #eceff3; border-radius: 10px; border: 1px solid #e1e6ec; }
.mnt-col.dragover { outline: 2px dashed #7c93f5; outline-offset: -2px; }
.mnt-col-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 12px; font-weight: 700; color: #38424d; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e1e6ec; }
.mnt-col-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: #98a3af; }
.mnt-col-head.s1::before { background: #fbb03b; }
.mnt-col-head.s2::before { background: #3f8cff; }
.mnt-col-head.s3::before { background: #2fbf71; }
.mnt-col-head.s4::before { background: #9b6cf0; }
.mnt-col-head.s5::before { background: #98a3af; }
.mnt-col-head span:first-of-type { flex: 1 1; }
.mnt-col-count { background: #dde3ea; color: #55606b; border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.mnt-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; }
.mnt-card { background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 10px 11px; cursor: grab; box-shadow: 0 1px 2px rgba(20,30,50,.05); }
.mnt-card.dragging { opacity: .45; }
.mnt-card-title { font-size: 13px; font-weight: 600; color: #222b35; cursor: pointer; line-height: 1.35; }
.mnt-card-title:hover { color: #3f8cff; }
.mnt-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 7px; flex-wrap: wrap; }
.mnt-card-ent { font-size: 11px; color: #6a7481; background: #f0f3f7; border-radius: 5px; padding: 2px 7px; }
.mnt-card-prio { font-size: 10px; font-weight: 700; border-radius: 5px; padding: 2px 7px; text-transform: uppercase; letter-spacing: .03em; }
.mnt-card-prio.p0 { background: #eef2f6; color: #7a8794; }
.mnt-card-prio.p1 { background: #e8f1ff; color: #2f6fd0; }
.mnt-card-prio.p2 { background: #fdeaea; color: #c94747; }
.mnt-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: #7a8794; }
.mnt-card-due i, .mnt-card-sub i { margin-right: 3px; }
.mnt-card-sub { margin-right: 8px; }
.mnt-card-due.late { color: #c94747; font-weight: 700; }
/* entity panel tasks tab */
.enx-tasks-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px 2px; }
.enx-late { color: #c94747 !important; font-weight: 700; }
.bkf-chip.s1 { background: #fdf3e2; color: #b57b16; }
.bkf-chip.s2 { background: #e8f1ff; color: #2f6fd0; }
.bkf-chip.s4 { background: #f1eafd; color: #7a4fd0; }
/* ββ header entity-scope switcher (general mode) ββ */
#nav #entityModeSwitch { position: relative; }
#nav #entityModeSwitch a.ems-btn { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 6px 13px; border-radius: 17px; background: #eef1f6; color: #3b4756; font-size: 12px; font-weight: 600; text-indent: 0; line-height: 1.3; white-space: nowrap; }
#nav #entityModeSwitch a.ems-btn:hover { background: #e3e9f2; }
#nav #entityModeSwitch a.ems-btn i { position: static; display: inline-block; width: auto; margin: 0; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; color: var(--primary, #2563eb); text-indent: 0; line-height: 1; }
#nav #entityModeSwitch a.ems-btn i.ems-caret { color: #8a96a5; font-size: 9px; }
/* defeat the theme's green notification-badge styling on nav-link spans */
#nav > ul > li#entityModeSwitch > a .ems-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; background: none; color: #3b4756; position: static; display: inline; width: auto; height: auto; padding: 0; margin: 0; border-radius: 0; font-size: 12px; line-height: 1.3; text-indent: 0; box-shadow: none; }
.ems-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; background: #fff; border: 1px solid #e3e8ee; border-radius: 11px; box-shadow: 0 12px 32px rgba(20,30,50,.14); padding: 8px; z-index: 3000; text-align: left; font-family: 'DM Sans', Montserrat, "Segoe UI", sans-serif; }
.ems-filter { width: 100%; padding: 6px 10px; border: 1px solid #e4e9f0; border-radius: 7px; font-size: 12px; margin-bottom: 6px; background: #f7f9fc; }
.ems-filter:focus { outline: none; border-color: var(--primary, #2563eb); background: #fff; }
.ems-list { max-height: 300px; overflow-y: auto; }
.ems-item { padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: #2b3644; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ems-item:hover { background: #f2f5f9; }
.ems-item.current { background: var(--primary-10, #e8effc); color: var(--primary, #1d4fd7); font-weight: 700; }
.ems-item.all { margin-bottom: 5px; border-bottom: 1px solid #eef1f5; border-radius: 7px 7px 0 0; font-weight: 600; }
.ems-item.all i { color: var(--primary, #2563eb); margin-right: 5px; font-size: 11px; }
/* Maintenance ticket modal: fixed height so tab switching doesn't resize the card */
.maintenance-modal .modal-content { height: calc(100vh - 80px) !important; max-height: 860px !important; }
.maintenance-modal form[type="maintenance"] { height: 100%; }
.maintenance-modal .modal-body.mnt-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
/* Maintenance modal: fix the close button (bootstrap .close injects float/opacity/margins) */
.maintenance-modal .mnt-win-close.close {
float: none !important; margin: 0 !important; padding: 0 !important;
width: 30px !important; height: 30px !important; display: inline-flex !important;
align-items: center !important; justify-content: center !important;
font-size: 17px !important; font-weight: 400 !important; line-height: 1 !important;
opacity: 1 !important; text-shadow: none !important; box-shadow: none !important;
position: static !important; top: 0 !important; min-width: 0 !important; overflow: visible !important; }
.maintenance-modal .mnt-win { font-size: 15px; line-height: 1; }
/* =========================================================================
NEW Bank transactions match window (.bank-match-modal / .bm-ui)
========================================================================= */
.bank-match-modal .modal-dialog.modal-xl { width: 1650px !important; max-width: 98vw !important; height: auto !important; }
.bank-match-modal #root { background: transparent !important; border: none !important; padding: 0 !important; height: auto !important; min-height: 0 !important; box-shadow: 3px 1px 20px 0px #bebed1 !important; border-radius: 14px; }
.bank-match-modal .modal-content.bm-ui { padding: 0 !important; border: none !important; border-radius: 14px; overflow: hidden; background: #fff;
display: flex; flex-direction: column; height: calc(100vh - 90px); max-height: 900px; box-shadow: none !important;
font-family: Montserrat, "Segoe UI", Arial, Helvetica, sans-serif; }
.bank-match-modal button { min-width: 0 !important; float: none !important; box-shadow: none !important; position: static !important; top: 0 !important; height: auto !important; overflow: visible !important; }
/* header */
.bank-match-modal .bm-head { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px !important;
border-bottom: 1px solid #eceaf3; background: #fff !important; margin: 0 !important; zoom: 1 !important; flex: 0 0 auto; cursor: move;
border-radius: 0 !important; box-shadow: none !important; position: static !important; min-height: 0 !important; }
.bank-match-modal .bm-head-left { display: flex; align-items: center; gap: 12px; }
.bank-match-modal h2.bm-title { position: static !important; transform: none !important; float: none !important; text-transform: none !important;
letter-spacing: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #2b2b3a !important; margin: 0 !important; }
.bank-match-modal .bm-sub { font-size: 12.5px; color: #8a93a3; font-weight: 600; }
.bank-match-modal .bm-beta { font-size: 9px; font-weight: 800; letter-spacing: .06em; background: #ede9fe; color: #6d28d9; border-radius: 20px; padding: 3px 8px; }
.bank-match-modal .bm-head-right { display: flex; align-items: center; gap: 8px; }
.bank-match-modal .bm-search { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e0e2e8; border-radius: 9px; padding: 0 12px; height: 38px; background: #fff; color: #9aa3b2; }
.bank-match-modal .bm-search input { border: none !important; outline: none !important; background: none !important; font-size: 13px; width: 200px; padding: 0 !important; height: auto !important; box-shadow: none !important; }
.bank-match-modal .bm-win { width: 30px; height: 30px; border: 1px solid #e5e4ee; border-radius: 8px; background: #fff; color: #8a93a3;
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: all .12s; }
.bank-match-modal .bm-win:hover { background: #f3f2f9; color: #33415e; }
.bank-match-modal .bm-close { border-color: #f0c6c6; color: #d9484d; }
.bank-match-modal .bm-close:hover { background: #fdeaea; }
/* body */
.bank-match-modal .bm-body { display: flex; flex: 1 1 auto; min-height: 0; }
.bank-match-modal .bm-sidebar { width: 270px; flex: 0 0 auto; border-right: 1px solid #eceaf3; overflow-y: auto; padding: 14px; background: #f5f6f9; }
.bank-match-modal .bm-side-title { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8a93a3; margin-bottom: 10px; }
/* bank cards */
.bank-match-modal .bm-bank-card { background: #fff; border: 1px solid #e5e7ee; border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; cursor: pointer; transition: all .12s; }
.bank-match-modal .bm-bank-card:hover { border-color: #b9c5e8; }
.bank-match-modal .bm-bank-card.is-active { border-color: #2f6fed; box-shadow: 0 2px 10px rgba(47,111,237,.14); }
.bank-match-modal .bm-bank-top { display: flex; align-items: center; gap: 9px; }
.bank-match-modal .bm-bank-ico { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: #eef2fd; color: #2f6fed; font-size: 12px; }
.bank-match-modal .bm-bank-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: #23324f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-match-modal .bm-bank-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #2f6fed; background: #eef2fd; border-radius: 20px; padding: 1px 8px; min-width: 14px; text-align: center; }
.bank-match-modal .bm-bank-count:empty { display: none; }
.bank-match-modal .bm-bank-prop { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #edeff4; font-size: 11.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bank-match-modal .bm-prop-label { color: #55607a; display: inline-flex; align-items: center; gap: 6px; }
.bank-match-modal .bm-prop-label i { color: #9aa3b2; font-size: 11px; }
.bank-match-modal .bm-prop-edit { color: #9aa3b2; font-size: 10px; }
.bank-match-modal .bm-prop-edit:hover { color: #2f6fed; }
.bank-match-modal .bm-prop-set { color: #2f6fed; font-weight: 600; font-size: 11.5px; }
.bank-match-modal .bm-prop-picker { display: block; width: 100%; position: relative; }
.bank-match-modal .bm-prop-picker input.fes, .bank-match-modal .bm-prop-picker input.es-input {
width: 100% !important; box-sizing: border-box !important; border: 1px solid #dcdbe6 !important; border-radius: 8px !important;
padding: 6px 22px 6px 9px !important; font-size: 12px !important; background: #fff !important; height: auto !important; position: static !important; }
/* main + tabs */
.bank-match-modal .bm-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px; overflow: hidden; }
.bank-match-modal .bm-tabs-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bank-match-modal .bm-tabs { display: inline-flex; gap: 8px; }
.bank-match-modal .bm-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; color: #6c6c85; background: #f2f4f8; text-decoration: none; }
.bank-match-modal .bm-tab b { font-weight: 700; }
.bank-match-modal .bm-tab.is-active { background: #2f6fed; color: #fff; }
.bank-match-modal .bm-tab:not(.is-active):nth-child(2) { background: #e8f7ef; color: #1f9d57; }
.bank-match-modal .bm-tab:not(.is-active):nth-child(3) { background: #e8f4fb; color: #2f7dbd; }
.bank-match-modal .bm-grid { flex: 1 1 auto; min-height: 220px; min-width: 0; overflow: hidden; }
.bank-match-modal .bm-grid .slick-viewport { overflow-x: auto !important; }
.bank-match-modal .bm-grid .slick-header, .bank-match-modal .bm-grid .slick-header-columns { background: #f5f6f9 !important; border: none !important; }
.bank-match-modal .bm-grid .slick-header-column { background: #f5f6f9 !important; color: #8a93a3 !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; border-right: 1px solid #eceaf3 !important; }
.bank-match-modal .bm-grid .slick-cell { border-color: #f2f1f7 !important; font-size: 12.5px; }
/* ββ Tabbed expanded modals: expand button turns open modals into tabs βββββ
--mtb-top is set at runtime to the bottom edge of the #top menu */
#modalTabsBar { position: fixed; top: var(--mtb-top, 50px); left: var(--mtb-bar-left, 57px); right: 0; height: 40px;
display: flex; align-items: flex-end; padding: 0 10px; background: #eef1f5;
/* above the page shell (#top/#aside are z 8-9) but below every modal
(JS.maxZindex starts at 20): modal containers are transparent and
click-through, and their dialogs sit below the bar area, so the bar
stays visible β while drawers/popups inside a modal (e.g. the approval
rules sidebar) correctly cover the bar and Restore button */
border-bottom: 2px solid #d7dce3; z-index: 15;
font-family: Montserrat, "Segoe UI", Arial, sans-serif; }
#modalTabsBar .mtb-tabs { display: flex; align-items: flex-end; gap: 4px; flex: 1 1 auto;
min-width: 0; overflow-x: auto; overflow-y: hidden; }
#modalTabsBar .mtb-tab { flex: 0 1 auto; display: flex; align-items: center; gap: 8px;
min-width: 90px; max-width: 240px; padding: 9px 12px; border: 1px solid #d7dce3;
border-bottom: none; border-radius: 8px 8px 0 0; background: #dde3ea; color: #5a6572;
font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; }
#modalTabsBar .mtb-tab:hover { background: #e8ecf1; }
#modalTabsBar .mtb-tab.active { background: #fff; color: #23324f; }
#modalTabsBar .mtb-tab .mtb-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#modalTabsBar .mtb-tab.mtb-page { min-width: 0; }
#modalTabsBar .mtb-tab.mtb-page i { font-size: 12px; }
#modalTabsBar .mtb-tab .mtb-close { flex: 0 0 auto; font-size: 10px; color: #8a94a1; cursor: pointer; padding: 2px; }
#modalTabsBar .mtb-tab .mtb-close:hover { color: #d9534f; }
#modalTabsBar .mtb-restore { flex: 0 0 auto; align-self: center; margin-left: 10px; padding: 5px 12px;
border: 1px solid #d7dce3; border-radius: 6px; background: #fff; color: #5a6572;
font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#modalTabsBar .mtb-restore:hover { color: #23324f; border-color: #b9c2cd; }
/* only the active tab's modal is shown; !important also beats the inline
display styles bootstrap/jquery set on show/hide */
body.modalTabsMode .modal.expanded { display: none !important; }
/* opacity too: a .fade modal bootstrap hasn't (yet) marked shown sits at
opacity 0, which with forced display would render as a see-through hole */
body.modalTabsMode .modal.expanded.mtb-active { display: block !important; opacity: 1 !important; }
/* hover-preview: hovering a tab brings that window forward (like the
open-windows sidebar list); hovering the page tab previews the page */
body.modalTabsMode .modal.expanded.mtb-preview { display: block !important; opacity: 1 !important; }
body.modalTabsMode.mtb-preview-page .modal.expanded.mtb-active { display: none !important; }
/* the active modal fills the screen minus the side menu, top menu and tab bar;
!important also overrides the inline top/left the draggable widget leaves */
body.modalTabsMode .modal.expanded .modal-dialog { position: fixed !important;
top: calc(var(--mtb-top, 50px) + 40px) !important; left: var(--mtb-left, 57px) !important;
right: 0 !important; bottom: 0 !important;
width: auto !important; min-width: 0 !important; max-width: none !important;
height: auto !important; min-height: 0 !important; max-height: none !important;
margin: 0 !important; transform: none !important; }
/* padding-less, square #root: flexmodal gives it 20px padding and some modals
(e.g. Pay Bills) round it, which looks wrong on a full-bleed pane */
body.modalTabsMode .modal.expanded .modal-dialog #root { width: 100% !important;
height: 100% !important; min-height: 0 !important; padding: 0 !important;
border-radius: 0 !important; }
/* several forms' .modal-content is a .popup-a β a position:fixed viewport
overlay β so pin it back inside the dialog */
body.modalTabsMode .modal.expanded .modal-content { position: relative !important;
left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
width: 100% !important; height: 100% !important; max-height: none !important;
margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: auto; }
/* flexmodal's inner .modalContent is hard-coded to 100vh β too tall here */
body.modalTabsMode .modal.expanded .modalContent { height: 100% !important; }
/* tab mode: the modal's own title and window buttons are redundant (tab label
and tab-close replace them); other header content such as balances or
search fields stays visible */
body.modalTabsMode .modal.expanded header:has(nav.window-options) > h2,
body.modalTabsMode .modal.expanded header:has(nav.window-options) > nav.window-options { display: none !important; }
/* redesigned windows with fully-custom chrome headers (no window-options nav):
the whole header is redundant in tab mode β title/subtitle duplicate the tab
label and the buttons duplicate the tab controls */
body.modalTabsMode .modal.expanded .bm-head { display: none !important; }
/* the action-icon nav (prev/next, envelope, brain, attach, audit trail,
related transactions...) is relocated into the tab bar's right side. The
ORIGINAL elements stay in the modal's DOM β not proxies β so their
hover/click tooltip popups anchor and trigger correctly */
body.modalTabsMode .modal.expanded.mtb-active header:has(nav.window-options) { zoom: 1 !important; }
body.modalTabsMode .modal.expanded.mtb-active header:has(nav.window-options) > nav:not(.window-options) {
display: flex !important; position: fixed !important; top: var(--mtb-top, 50px); right: 112px;
height: 40px; align-items: center; margin: 0 !important; padding: 0; z-index: 20; background: transparent; }
body.modalTabsMode .modal.expanded.mtb-active header:has(nav.window-options) > nav:not(.window-options) ul {
display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
body.modalTabsMode .modal.expanded.mtb-active header:has(nav.window-options) > nav:not(.window-options) ul li {
float: none; margin: 0; }
body.modalTabsMode .modal.expanded.mtb-active header:has(nav.window-options) > nav:not(.window-options) ul li a i {
width: 30px !important; height: 30px !important; line-height: 30px !important; margin: 0 !important;
font-size: 14px !important; text-align: center; border-radius: 6px; color: #5a6572; }
body.modalTabsMode .modal.expanded.mtb-active header:has(nav.window-options) > nav:not(.window-options) ul li a:hover i {
background: #dde3ea; color: #23324f; }
/* instant placeholder window shown while a modal's HTML loads */
.modal.modal-loading { display: block; }
.modal.modal-loading .modal-dialog { position: fixed; top: 40%; left: 50%;
transform: translate(-50%, -50%); width: 320px; margin: 0; }
.modal.modal-loading .modal-content { display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 14px; padding: 30px; border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.modal.modal-loading h5 { margin: 0; color: #5a6572; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.modal.modal-loading .mtb-spinner { width: 34px; height: 34px; border: 3px solid #e4e8ee;
border-top-color: var(--pink1, #c2329a); border-radius: 50%; animation: mtbspin .8s linear infinite; }
@keyframes mtbspin { to { transform: rotate(360deg); } }
/* Bank match: sidebar search + uncategorized pill + module-rec wrapper neutralizer */
.bank-match-modal .bm-side-search { display: flex; align-items: center; gap: 8px; border: 1px solid #e0e2e8; border-radius: 9px; background: #fff; padding: 0 10px; height: 32px; margin-bottom: 12px; color: #9aa3b2; }
.bank-match-modal .bm-side-search input { flex: 1; border: none !important; outline: none !important; background: none !important; font-size: 12.5px; padding: 0 !important; height: auto !important; box-shadow: none !important; }
.bank-match-modal .bm-bank-count { background: #fdf4e3 !important; color: #c08a1e !important; } /* uncategorized = amber */
.bank-match-modal .module-rec.bm-modrec { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.bank-match-modal .module-rec.bm-modrec .bm-grid { flex: 1 1 auto; min-height: 220px; }
/* Bank match: replace the dotted loader with a clean spinner */
.bank-match-modal .loadercontainer { display: flex !important; align-items: center; justify-content: center; padding: 60px 0; position: relative; }
.bank-match-modal .loadercontainer > div { display: none !important; }
.bank-match-modal .loadercontainer::after { content: ''; width: 34px; height: 34px; border: 3px solid #e5e7ee; border-top-color: #2f6fed; border-radius: 50%; animation: bmspin .7s linear infinite; }
@keyframes bmspin { to { transform: rotate(360deg); } }
/* formGridSlick empty state (Pay Bills, Collections, and other bulk windows) */
.fgs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 70px 20px; text-align: center; }
.fgs-empty-ico { width: 66px; height: 66px; border-radius: 50%; background: var(--primary-10, #e8f4fd); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.fgs-empty-ico i { font-size: 28px; color: var(--primary, #4ec1fd); }
.fgs-empty b { font-size: 16px; font-weight: 700; color: #2b3644; }
.fgs-empty-msg { font-size: 13px; color: #8a96a5; max-width: 360px; line-height: 1.5; }
/* Bank match: search lives in the tabs row now */
.bank-match-modal .bm-tabs-row .bm-search { height: 34px; margin-left: auto; }
.bank-match-modal .bm-tabs-row .bm-search input { width: 210px; }
/* Bank match: connection status row + alerts must show above the modal */
.bank-match-modal .bm-bank-status { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 11px; }
.bank-match-modal .bm-status { display: inline-flex; align-items: center; gap: 5px; color: #9aa3b2; font-weight: 600; }
.bank-match-modal .bm-status i { font-size: 7px; color: #c3c9d4; }
.bank-match-modal .bm-status.is-on { color: #1f9d57; }
.bank-match-modal .bm-status.is-on i { color: #2fbf71; }
.bank-match-modal .bm-connect, .bank-match-modal .bm-csv { font-size: 11px; font-weight: 600; color: #2f6fed; }
.bank-match-modal .bm-connect:hover, .bank-match-modal .bm-csv:hover { text-decoration: underline; }
.newAlert { z-index: 200010 !important; }
/* =========================================================================
Global search command palette (#search-container-wrapper.sp-overlay)
β reuses the .qa-overlay/.qa-panel shell from the Quick Add palette
========================================================================= */
.sp-overlay .qa-panel.sp-panel { max-width: 1060px; }
/* two-column body: record results left, actions/reports sidebar right */
.sp-body { display: flex; align-items: stretch; max-height: 60vh; }
.sp-maincol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-side { flex: 0 0 218px; width: 218px; border-left: 1px solid #f0eff5; background: #fbfafd; overflow-y: auto; padding: 2px 8px 10px; }
.sp-sideblock + .sp-sideblock { margin-top: 8px; }
.sp-srow { gap: 8px; padding: 6px 8px; border-radius: 8px; }
.sp-sico { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; background: #e8f0fe; color: #3b82c2; }
.sp-srow[data-kind="report"] .sp-sico { background: #e7f6ee; color: #2fa96a; }
.sp-srow-title { font-size: 11.5px; font-weight: 600; color: #33333f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-side-more, .sp-side-empty { font-size: 10.5px; color: #b0b0c0; padding: 7px 10px; line-height: 1.4; }
@media screen and (max-width: 820px) {
.sp-side { display: none; }
}
.sp-search { padding: 14px 18px; }
.sp-search #headerSearchForm { flex: 1; margin: 0; }
#headerSearchInput { width: 100%; border: none; outline: none; font-size: 14px; color: #26263a; background: none; padding: 0; box-shadow: none; }
#headerSearchInput::placeholder { color: #b0b0c0; }
.sp-entity-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #55556a; border: 1px solid #e5e4ee; border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap; background: #faf9fc; }
.sp-entity-chip:hover { border-color: var(--pink1, #3bb273); color: var(--pink1, #3bb273); }
.sp-entity-chip i { font-size: 10px; color: #8a8a9e; }
/* scope pills */
.sp-tabs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid #f0eff5; }
.sp-tab { padding: 4px 12px; border-radius: 999px; background: #f1f0f7; font-size: 11.5px; font-weight: 600; color: #55556a; cursor: pointer; white-space: nowrap; transition: all .12s; }
.sp-tab:hover { background: #e8e6f2; color: #33333f; }
.sp-tab .sp-tab-n { color: #9a9ab0; font-weight: 600; }
.sp-tab .sp-tab-n::before { content: " \00b7 "; }
.sp-tab.is-on { background: var(--pink1, #3bb273); color: #fff; }
.sp-tab.is-on .sp-tab-n { color: rgba(255,255,255,.8); }
/* results */
.sp-results { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 10px; }
.sp-sec-head { display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; color: #9a9ab0; padding: 13px 12px 5px; }
.sp-secall { font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--pink1, #3bb273); cursor: pointer; }
.sp-secall i { font-size: 9px; }
.sp-empty { padding: 44px 20px; text-align: center; color: #b0b0c0; font-size: 13px; line-height: 2; }
.sp-empty i { font-size: 20px; color: #d5d4e0; }
/* rows */
.sp-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.sp-row.sp-active { background: color-mix(in srgb, var(--pink1, #3bb273) 9%, #fff); }
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sp-title { font-size: 13px; font-weight: 600; color: #26263a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sub { font-size: 11.5px; color: #9a9ab0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-title + .sp-sub { margin-top: 0; }
.sp-line2 { font-size: 11.5px; color: #9a9ab0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-line2 .sp-dot, .sp-sub .sp-dot { margin: 0 5px; color: #cfced9; }
.sp-hl { color: var(--pink1, #3bb273); font-weight: 800; }
.sp-tag { display: inline-block; margin-left: 7px; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #3b82c2; background: #e8f0fe; border-radius: 5px; padding: 1px 6px; vertical-align: 1px; }
/* leading icon / avatar */
.sp-ico { --c: #3b82c2; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); }
.sp-av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; }
.sp-av.sp-av-img { background: #f1f0f7; }
.sp-av img { width: 100%; height: 100%; object-fit: cover; }
/* right-side quick-action buttons */
.sp-actions { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.sp-btn { border: 1px solid #dfe3f0; border-radius: 8px; background: #fff; padding: 4px 11px; font-size: 11px; font-weight: 600; color: var(--pink1, #3bb273); white-space: nowrap; cursor: pointer; transition: all .12s; }
.sp-btn:hover { background: color-mix(in srgb, var(--pink1, #3bb273) 10%, #fff); color: var(--pink1, #3bb273); }
/* transaction rows */
.sp-badge { flex: 0 0 auto; min-width: 66px; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 4px 8px; border-radius: 6px; background: #e8f0fe; color: #2f6fed; }
.sp-badge.in { background: #e7f6ee; color: #2fa96a; }
.sp-badge.out { background: #fdeceb; color: #d9484d; }
.sp-meta { flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px; }
.sp-date { font-size: 11.5px; font-weight: 600; color: #2fa96a; }
.sp-amt { font-size: 12.5px; font-weight: 700; color: #26263a; font-variant-numeric: tabular-nums; }
/* hover arrow on action/report rows */
.sp-go { display: none; flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid #dfe3f0; border-radius: 8px; align-items: center; justify-content: center; font-size: 10px; color: #8a8a9e; background: #fff; }
.sp-row.sp-active .sp-go, .sp-row:hover .sp-go { display: inline-flex; }
/* footer */
.sp-foot .sp-advanced { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--pink1, #3bb273); cursor: pointer; float: none; padding: 0; background: none; border-radius: 0; }
.sp-foot .sp-advanced:hover { text-decoration: underline !important; background: none; color: var(--pink1, #3bb273); }
/* Bank match: column picker */
.bank-match-modal .bm-colpick-wrap { position: relative; margin-left: auto; }
.bank-match-modal .bm-tabs-row .bm-search { margin-left: 10px; }
.bank-match-modal .bm-col-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #dcdbe6; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; color: #55556a; text-decoration: none; }
.bank-match-modal .bm-col-btn:hover { border-color: #2f6fed; color: #2f6fed; }
.bank-match-modal .bm-colpick { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: #fff; border: 1px solid #e5e4ee; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 10px 14px; min-width: 170px; }
.bank-match-modal .bm-colpick label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #33343e; padding: 4px 0; margin: 0; cursor: pointer; white-space: nowrap; }
.bank-match-modal .bm-colpick input { width: 15px; height: 15px; accent-color: #2f6fed; margin: 0; }
/* Bank match sidebar: title + search stay fixed, only the card list scrolls */
.bank-match-modal .bm-sidebar { display: flex; flex-direction: column; overflow: hidden !important; }
.bank-match-modal .bm-side-title, .bank-match-modal .bm-side-search { flex: 0 0 auto; }
.bank-match-modal .bm-bank-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px 0 0; padding-right: 4px; }
/* Bank match: dark bulk-entry footer row (matches the Pay Bills footer) */
.bank-match-modal .bm-grid .slick-footerrow,
.bank-match-modal .bm-grid .slick-footerrow-columns { background: #1f2735 !important; }
.bank-match-modal .bm-grid .slick-footerrow-column { background: #1f2735 !important; border-color: #2a3444 !important; color: #cbd2dd !important; font-size: 12.5px; display: flex; align-items: center; }
.bank-match-modal .bm-grid .slick-footerrow-column a { color: #7fb0ff !important; font-weight: 600; }
.bank-match-modal .bm-grid .slick-footerrow-column input,
.bank-match-modal .bm-grid .slick-footerrow-column .es-input,
.bank-match-modal .bm-grid .slick-footerrow-column select { background: #fff !important; border: 1px solid #3d4657 !important; border-radius: 7px !important; color: #23324f !important; font-size: 12px !important; padding: 4px 8px !important; height: 28px !important; }
.bank-match-modal .bm-grid .slick-footerrow-column button { background: #2f6fed !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 7px 14px !important; font-size: 12.5px !important; font-weight: 600 !important; margin: 0 !important; }
.bank-match-modal .bm-grid .slick-footerrow-column button:hover { filter: brightness(1.08); }
/* Bank match dark footer: fix invisible inputs (restore plugin layout, keep colors) */
.bank-match-modal .bm-grid .slick-footerrow-column { display: block !important; }
.bank-match-modal .bm-grid .slick-footerrow-column input,
.bank-match-modal .bm-grid .slick-footerrow-column .es-input,
.bank-match-modal .bm-grid .slick-footerrow-column select {
height: auto !important; padding: 3px 6px !important; position: absolute;
background: #fff !important; border: 1px solid #cfd6e4 !important; border-radius: 6px !important; }
.bank-match-modal .bm-grid .slick-footerrow-column input.slickinput { top: 5px; width: 96%; }
/* Bank match dark footer: center the controls inside the 52px bar */
.bank-match-modal .bm-grid .slick-footerrow-column { line-height: 52px !important; padding: 0 8px !important; overflow: visible !important; }
.bank-match-modal .bm-grid .slick-footerrow-column .select { position: relative !important; display: block !important; height: 100% !important; }
.bank-match-modal .bm-grid .slick-footerrow-column input,
.bank-match-modal .bm-grid .slick-footerrow-column .es-input {
position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
left: 6px !important; right: 6px !important; width: calc(100% - 12px) !important;
height: 30px !important; box-sizing: border-box !important; margin: 0 !important; line-height: normal !important; }
.bank-match-modal .bm-grid .slick-footerrow-column input[type="hidden"] { position: absolute !important; height: 0 !important; }
.bank-match-modal .rec-bulk-label { font-weight: 600; color: #cbd2dd; }
.bank-match-modal .rec-bulk-count { margin-left: 10px; color: #8a93a3; font-size: 12px; }
.bank-match-modal .bm-grid .slick-footerrow-column button.rec-bulk-btn { position: relative; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; }
/* Bank match footer: beat the earlier input.slickinput { top:5px } rule */
.bank-match-modal .bm-grid .slick-footerrow-column input.slickinput,
.bank-match-modal .bm-grid .slick-footerrow-column input.es-input,
.bank-match-modal .bm-grid .slick-footerrow-column input.fes {
top: 50% !important; transform: translateY(-50%) !important; width: calc(100% - 12px) !important; left: 6px !important; }
/* Bank match footer FINAL: the column is flex β make controls static flex items,
centered by align-items (stop fighting absolute positioning) */
.bank-match-modal .bm-grid .slick-footerrow-column { display: flex !important; align-items: center !important; line-height: normal !important; }
.bank-match-modal .bm-grid .slick-footerrow-column .select { position: static !important; height: auto !important; display: block !important; flex: 1 1 auto; width: 100%; }
.bank-match-modal .bm-grid .slick-footerrow-column input.slickinput,
.bank-match-modal .bm-grid .slick-footerrow-column input.es-input,
.bank-match-modal .bm-grid .slick-footerrow-column input.fes,
.bank-match-modal .bm-grid .slick-footerrow-column input[type="text"] {
position: static !important; top: auto !important; left: auto !important; transform: none !important;
width: 100% !important; height: 30px !important; margin: 0 !important; box-sizing: border-box !important; }
.bank-match-modal .bm-grid .slick-footerrow-column button.rec-bulk-btn { position: static !important; top: auto !important; transform: none !important; }
/* Bank match footer: full-height grid + vertically centered footer content */
.bank-match-modal .bm-grid { display: flex; flex-direction: column; }
.bank-match-modal .bm-grid > .slickgrid, .bank-match-modal .bm-grid > div.ui-widget { flex: 1 1 auto; min-height: 0; height: 100% !important; }
.bank-match-modal .bm-grid .slick-footerrow-column { height: 52px !important; }