/*Custom updates*/

.filter_btn{
	margin-top: 10px;
    margin-left: 10px;
}

.login_logo{
	width:300px !important;
}

.invoice_logo{
	font-weight: bold;
    font-size: 25px;
    text-align: center;
}

.hidder{
	display:none !important;
}

.interlogo{
	width: 100px !important;
    margin-left: 20px;
    margin-top: 10px;
}

.clickable{
	cursor:pointer;
}

.link_lookslike{
	color:#131A4D;
	text-decoration:underline;
}

.delete_not_btn{
	z-index: 1000;
    position: absolute;
    cursor: pointer;
    right: 50px;
    top: 15px;
}

@media (max-width: 600px) {
	.custom_h{
		font-size:10px;
	}
}
@media (max-width: 400px) {
	.custom_h{
		font-size:8px;
	}
}

.error_row td{
	color:#C00 !important;
}

/* === Theme switcher hidden (not removed) ===
   Hides the right-side "change theme" panel and its toggle button.
   Markup is kept in utilities/ui/core_header.php; remove these rules to restore. RCZUN */
.right-sidebar,
.right-sidebar-toggler{
	display:none !important;
}



/*--------------*/


/* =========================================================
   SUMPAY LOGIN — split-screen layout (scoped to .sp-login)
   Navy brand panel (left) + light form panel (right).
   Keeps all template JS hooks (#user,#pass,.main_btn,.load_btn,modals).
   ========================================================= */
:root{
	--sp-navy:#131A4D;
	--sp-navy-2:#1d2767;
	--sp-green:#57C84F;
	--sp-green-d:#45A13E;
}

.sp-login{
	display:flex;
	min-height:100vh;
	width:100%;
	background:#ffffff;
	color:#1d2433;
}

/* ---- Brand panel (left, navy) ---- */
.sp-login__brand{
	position:relative;
	flex:0 0 44%;
	max-width:44%;
	background:linear-gradient(160deg, var(--sp-navy) 0%, #0e1438 100%);
	color:#fff;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:64px 56px;
	overflow:hidden;
}
/* subtle green glow accents */
.sp-login__brand::before{
	content:"";
	position:absolute;
	top:-120px; right:-120px;
	width:340px; height:340px;
	background:radial-gradient(circle, rgba(87,200,79,0.35) 0%, rgba(87,200,79,0) 70%);
}
.sp-login__brand::after{
	content:"";
	position:absolute;
	bottom:-100px; left:-80px;
	width:260px; height:260px;
	background:radial-gradient(circle, rgba(87,200,79,0.18) 0%, rgba(87,200,79,0) 70%);
}
.sp-login__brand-inner{ position:relative; z-index:1; }
.sp-login__logo img{
	width:210px;
	max-width:70%;
	height:auto;
	margin-bottom:40px;
}
.sp-login__headline{
	font-size:34px;
	font-weight:700;
	line-height:1.15;
	margin:0 0 16px 0;
	color:#fff;
}
.sp-login__tagline{
	font-size:16px;
	line-height:1.6;
	color:rgba(255,255,255,0.72);
	max-width:360px;
	margin:0;
}
.sp-login__accent{
	display:block;
	width:64px;
	height:5px;
	border-radius:5px;
	background:var(--sp-green);
	margin-top:32px;
}
.sp-login__brand-foot{
	position:absolute;
	left:56px; bottom:28px;
	margin:0;
	font-size:12px;
	color:rgba(255,255,255,0.45);
	z-index:1;
}

/* ---- Form panel (right, light) ---- */
.sp-login__form{
	flex:1 1 56%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:48px 24px;
}
.sp-login__form-inner{
	width:100%;
	max-width:380px;
}
.sp-login__form-head{ margin-bottom:32px; }
.sp-login__form-head h2{
	font-size:26px;
	font-weight:700;
	color:var(--sp-navy);
	margin:0 0 8px 0;
}
.sp-login__form-head p{
	font-size:14px;
	color:#6c757d;
	margin:0;
}
.sp-login .sp-login__label{
	display:block;
	font-size:12px;
	font-weight:600;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:#5a6478;
	margin-bottom:6px;
}
.sp-login .form-group{ margin-bottom:18px; }
.sp-login .form-control{
	height:48px;
	border-radius:10px;
	border:1px solid #d8dce6;
	background:#fff;
	padding:0 16px;
	font-size:15px;
	transition:border-color .15s, box-shadow .15s;
}
.sp-login .form-control:focus{
	border-color:var(--sp-green);
	box-shadow:0 0 0 3px rgba(87,200,79,0.18);
	background:#fff;
}
.sp-login .main_btn,
.sp-login .load_btn{
	height:48px;
	border-radius:10px;
	font-weight:600;
	font-size:15px;
	margin-top:6px;
}
.sp-login__forgot{
	text-align:right;
	margin-top:14px;
}
.sp-login__forgot a{
	font-size:13px;
	color:var(--sp-navy);
	text-decoration:none;
}
.sp-login__forgot a:hover{
	color:var(--sp-green-d);
	text-decoration:underline;
}
.sp-login__signup{
	margin-top:28px;
	padding-top:22px;
	border-top:1px solid #eceef3;
	display:flex;
	justify-content:center;
	align-items:center;
}
.sp-login__signup p{
	margin:0;
	font-size:14px;
	color:#6c757d;
}
.sp-login__signup a{
	margin-left:8px;
	font-size:14px;
	font-weight:600;
	color:var(--sp-green-d);
	text-decoration:none;
}
.sp-login__signup a:hover{ text-decoration:underline; }

/* hide the shared footer copyright (brand panel has its own) */
.sp-login > .auth_footer{ display:none; }

/* ---- Responsive: stack on tablet/mobile ---- */
@media (max-width: 991.98px){
	.sp-login{ flex-direction:column; }
	.sp-login__brand{
		flex:none;
		max-width:100%;
		padding:48px 32px;
		text-align:center;
	}
	.sp-login__brand-inner{ display:flex; flex-direction:column; align-items:center; }
	.sp-login__tagline{ text-align:center; }
	.sp-login__accent{ margin-left:auto; margin-right:auto; }
	.sp-login__brand-foot{ display:none; }
	.sp-login__form{ padding:40px 24px; }
}
@media (max-width: 575.98px){
	.sp-login__brand{ padding:36px 24px; }
	.sp-login__headline{ font-size:26px; }
	.sp-login__logo img{ width:170px; }
}


/* =========================================================
   BACKEND — account moved to the top-right header dropdown.
   The original left sidebar layout is kept exactly as it was; we only
   hide the old bottom-left account block so the info isn't duplicated.
   (The earlier top-nav-layout experiment was removed.)
   ========================================================= */
.sidebar .sidebar_footer{ display:none !important; }

/* ---- Top-right account dropdown (markup in core_header.php) ---- */
.sp-account .sp-account-toggle{
	display:flex;
	align-items:center;
	gap:8px;
	padding-left:10px;
	padding-right:10px;
}
.sp-account .sp-account-avatar{
	width:34px; height:34px;
	border-radius:50%;
	object-fit:cover;
	border:2px solid #e9ecf2;
}
.sp-account .sp-account-meta{
	display:flex;
	flex-direction:column;
	line-height:1.15;
	text-align:left;
}
.sp-account .sp-account-name{ font-size:13px; font-weight:600; color:var(--sp-navy); }
.sp-account .sp-account-role{ font-size:11px; color:#8a92a6; }
.sp-account .sp-account-caret{ color:#8a92a6; font-size:1rem; }
.sp-account .sp-account-item{ display:flex; align-items:center; padding:10px 18px; }
.sp-account .sp-account-item i{ margin-right:10px; font-size:1.05rem; }
.sp-account .sp-account-logout{ color:#d9534f; }
@media (max-width: 767.98px){
	.sp-account .sp-account-meta{ display:none; }
}


/* =========================================================
   SIDEBAR RESTYLE
   - no menu icons
   - new arrow on collapsible items (filled triangle instead of chevron)
   - more highlighted navy/green colours on hover / active / open
   Overrides the template rules (custom/style.css loads last).
   ========================================================= */

/* 1) Remove the link icons and left-align the labels */
.sidebar .navigation-menu li a .link-icon{ display:none !important; }
.sidebar .navigation-menu li a{
	flex-direction:row;
	justify-content:flex-start;
	font-size:13.5px;
	font-weight:600;
	color:#2b3350;
}

/* 2) Highlighted hover / active / open states */
.sidebar .navigation-menu > li:not(.nav-category-divider){
	border-left:3px solid transparent;
	transition:background .15s ease, border-color .15s ease;
}
.sidebar .navigation-menu > li:not(.nav-category-divider):hover{
	background:rgba(87,200,79,0.12);
	border-left-color:var(--sp-green);
}
.sidebar .navigation-menu > li:not(.nav-category-divider):hover > a,
.sidebar .navigation-menu > li:not(.nav-category-divider):hover > a .link-title{
	color:var(--sp-navy);
}
/* open (expanded) parent */
.sidebar .navigation-menu > li:not(.nav-category-divider) > a[data-toggle="collapse"][aria-expanded="true"]{
	background:rgba(19,26,77,0.06);
}
/* current page */
.sidebar .navigation-menu > li.active{
	background:rgba(19,26,77,0.08);
	border-left-color:var(--sp-navy);
}
.sidebar .navigation-menu li.active a .link-title{
	color:var(--sp-navy);
	font-weight:700;
}

/* "MAIN" category label — greener / bolder */
.sidebar .navigation-menu li.nav-category-divider{
	color:var(--sp-green);
	font-weight:700;
	letter-spacing:.08em;
}

/* 3) New arrow: filled triangle (mdi-menu-right) in green, rotates when open */
.sidebar .navigation-menu > li:not(.nav-category-divider) > a[data-toggle="collapse"]:after{
	content:"\F35F";          /* mdi-menu-right */
	color:var(--sp-green);
	font-size:16px;
}
.sidebar .navigation-menu > li:not(.nav-category-divider) > a[data-toggle="collapse"][aria-expanded="true"]:after{
	color:var(--sp-navy);
	-webkit-transform:rotate(90deg);
	        transform:rotate(90deg);
}

/* submenu items: brighter hover/active (keeps the coloured bullet dots) */
.sidebar .navigation-menu li .navigation-submenu li a:hover,
.sidebar .navigation-menu li .navigation-submenu li a.active{
	color:var(--sp-navy);
	font-weight:600;
	opacity:1;
}


/* =========================================================
   TOP BAR — prominent navy brand bar
   (search + notifications removed in core_header.php; header logo
   switched to the light variant for contrast on navy)
   ========================================================= */
.t-header{
	background:var(--sp-navy) !important;
	border-bottom:3px solid var(--sp-green);
	box-shadow:0 2px 12px rgba(19,26,77,0.28);
}
.t-header .t-header-content-wrapper,
.t-header .t-header-content,
.t-header-brand-wrapper{
	background:transparent !important;
}
@media (min-width: 992px){
	.t-header .t-header-content-wrapper{ border-left:0 !important; }
}

/* light icons on the navy bar */
.t-header .t-header-mobile-toggler .mdi{ color:#fff; }
.t-header .t-header-desk-toggler svg path{ stroke:#cfd6ea; }

/* account dropdown sits on navy now -> light text */
.t-header .sp-account .sp-account-name{ color:#fff; }
.t-header .sp-account .sp-account-role{ color:rgba(255,255,255,0.65); }
.t-header .sp-account .sp-account-caret{ color:rgba(255,255,255,0.75); }
.t-header .sp-account .sp-account-avatar{ border-color:rgba(255,255,255,0.35); }
.t-header .sp-account .sp-account-toggle:hover .sp-account-name{ color:var(--sp-green); }

/* nudge the header logo up so it's vertically centred in the bar
   (the legacy .interlogo rule had margin-top:10px pushing it down) */
.t-header-brand-wrapper .interlogo{ margin-top:0; }


/* =========================================================
   SIDEBAR — subtle item dividers (resting / non-highlighted state)
   ========================================================= */
.sidebar .navigation-menu > li:not(.nav-category-divider){
	border-top:1px solid rgba(19,26,77,0.06);
	border-bottom:1px solid rgba(19,26,77,0.06);
}
/* collapse the doubled border between adjacent items into one hairline */
.sidebar .navigation-menu > li:not(.nav-category-divider) + li:not(.nav-category-divider){
	margin-top:-1px;
}


/* =========================================================
   SECURITY PAGE (account_settings.php) — Password + 2FA cards
   ========================================================= */
.sec-page > [class^="col-"]{ margin-bottom:24px; }
.sec-card{ height:100%; margin:0; }
.sec-card .sec-card-head{
	display:flex;
	align-items:flex-start;
	gap:14px;
	padding:20px 24px;
	border-bottom:1px solid #eef0f5;
}
.sec-card .sec-card-head > i{
	flex:0 0 auto;
	width:46px; height:46px;
	border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	font-size:24px;
	color:var(--sp-navy);
	background:rgba(19,26,77,0.06);
}
.sec-card .sec-head-text{ flex:1 1 auto; }
.sec-card .sec-card-head h3{ margin:0; font-size:18px; font-weight:700; color:var(--sp-navy); }
.sec-card .sec-card-head p{ margin:3px 0 0; font-size:13px; color:#6c757d; }
.sec-badge{
	flex:0 0 auto;
	font-size:11px; font-weight:700;
	text-transform:uppercase; letter-spacing:.04em;
	padding:5px 11px; border-radius:20px; white-space:nowrap;
}
.sec-badge.is-on{ color:#1f8f3a; background:rgba(87,200,79,0.16); }
.sec-badge.is-off{ color:#b26a00; background:rgba(240,130,95,0.16); }
.sec-card .grid-body{ padding:22px 24px; }

.sec-lead{ font-size:13.5px; color:#3a4254; line-height:1.55; margin:0 0 14px; }
.sec-note{ font-size:12.5px; color:#8a92a6; margin:0 0 18px; }

.sec-field{ margin-bottom:16px; }
.sec-field label{
	display:block;
	font-size:12px; font-weight:600;
	color:#5a6478;
	margin-bottom:6px;
}
.sec-card .form-control{ height:44px; border-radius:9px; }
.sec-card .form-control:focus{
	border-color:var(--sp-green);
	box-shadow:0 0 0 3px rgba(87,200,79,0.18);
}
.sec-card .btn{ border-radius:9px; padding:10px 22px; font-weight:600; }

/* activation steps */
.sec-steps{ counter-reset:step; list-style:none; padding:0; margin:0 0 18px; }
.sec-steps li{
	position:relative;
	padding:1px 0 14px 40px;
	font-size:13.5px; color:#3a4254; line-height:1.5;
}
.sec-steps li:last-child{ padding-bottom:0; }
.sec-steps li:before{
	counter-increment:step;
	content:counter(step);
	position:absolute; left:0; top:0;
	width:27px; height:27px;
	border-radius:50%;
	background:var(--sp-navy); color:#fff;
	font-size:12px; font-weight:700;
	display:flex; align-items:center; justify-content:center;
}

/* QR code box */
.sec-qr{
	text-align:center;
	padding:18px;
	margin:0 0 20px;
	border:1px dashed #d4d9e6;
	border-radius:12px;
	background:#fafbfc;
}
.sec-qr img{ max-width:170px; height:auto; }
.sec-qr p{ margin:12px 0 0; font-size:12px; color:#6c757d; }

/* device signature footnote */
.sec-device{ margin-top:6px; text-align:center; font-size:12px; color:#9aa1b2; }
.sec-device mark{ background:#eef0f5; color:#3a4254; padding:2px 7px; border-radius:5px; }


/* =========================================================
   PROCESSING — small fixes
   ========================================================= */
/* anchor-style primary buttons: anchors inherit the navy link colour,
   which made the white btn text look dark — force white text */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active{ color:#fff !important; }

/* masked API key (click to reveal / hide) */
.pc-apikey{
	font-family:"Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
	font-size:13px;
	color:#3a4254;
	white-space:nowrap;
}
/* keep the masked key and the copy icon on one line, side by side */
.pc-keywrap{
	display:inline-flex;
	align-items:center;
	gap:8px;
	white-space:nowrap;
}
.pc-copy,
.pc-regen{
	display:inline-flex;
	align-items:center;
	color:var(--sp-navy);
	font-size:1.05rem;
	line-height:1;
	cursor:pointer;
}
.pc-copy:hover{ color:var(--sp-green-d); }
.pc-copy .mdi-check{ color:var(--sp-green-d); }
.pc-regen:hover{ color:#d9822b; }

/* processor zelle account details (list) */
.pp-details{ font-size:12px; line-height:1.55; }
.pp-details span{ color:#8a92a6; }

/* customer -> processors column */
.pc-proc-list{ margin-bottom:4px; }
.pc-proc-list .badge{ margin:0 3px 3px 0; font-weight:500; }
.pc-manage{ white-space:nowrap; }
.pc-proc-group{
	font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
	color:var(--sp-green-d);
	margin:10px 0 8px;
}
.pc-proc-group:first-child{ margin-top:0; }

/* process modal — transaction detail tables */
.tx-detail th{ width:42%; color:#5a6478; font-weight:600; font-size:13px; border-top:0; }
.tx-detail td{ font-size:13px; border-top:0; }
.tx-section{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--sp-green-d); margin:6px 0 4px; }

/* transaction report — notes cell */
.tx-notes{ max-width:260px; font-size:12px; color:#5a6478; white-space:normal; }

/* dashboard stat boxes (customer index) */
.stat-box{
	display:flex;
	align-items:center;
	gap:16px;
	background:#fff;
	border:1px solid #eaedf3;
	border-radius:12px;
	padding:20px;
	margin-bottom:24px;
	box-shadow:0 2px 8px rgba(19,26,77,.05);
}
.stat-icon{
	flex:0 0 auto;
	width:52px; height:52px;
	border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	font-size:26px; color:#fff;
}
.stat-icon.stat-green{ background:var(--sp-green); }
.stat-icon.stat-navy{ background:var(--sp-navy); }
.stat-icon.stat-teal{ background:#2bb3a3; }
.stat-icon.stat-amber{ background:#e0952b; }
.stat-value{ font-size:22px; font-weight:700; color:var(--sp-navy); line-height:1.1; }
.stat-value small{ font-size:13px; color:#9aa1b2; font-weight:600; }
.stat-label{ font-size:12px; color:#6c757d; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.stat-link{ font-size:12px; color:var(--sp-green-d); }
.stat-link:hover{ color:var(--sp-navy); }

/* customer fees column + inline edit link */
.pc-fees{ font-size:12px; white-space:nowrap; }
.pc-edit-link{ color:var(--sp-navy); white-space:nowrap; }
.pc-edit-link:hover{ color:var(--sp-green-d) !important; }