/* ===== Dynamic Theme Styles (CSS Custom Properties / Variables) ===== */ /* --- Buttons --- */ .btn-primary, .btn-primary.disabled { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; box-shadow: 0 2px 6px var(--primary-box-shadow) !important; } .btn-primary:hover, .btn-primary:active, .btn-primary.disabled:hover, .btn-primary.disabled:active { background-color: var(--primary-hover-color) !important; border-color: var(--primary-hover-color) !important; } .btn-primary:focus, .btn-primary:focus:active, .btn-primary.disabled:focus, .btn-primary.disabled:focus:active { background-color: var(--primary-hover-color) !important; border-color: var(--primary-hover-color) !important; box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important; } .btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important; } /* --- Outline Buttons --- */ .btn-outline-primary, .btn-outline-primary.disabled { border-color: var(--primary-color) !important; color: var(--primary-color) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.disabled:hover, .btn-outline-primary.disabled:focus, .btn-outline-primary.disabled:active { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; } /* --- Text & Links --- */ a { color: var(--primary-color); } a:hover { color: var(--primary-hover-color); } .text-primary { color: var(--primary-color) !important; } .bg-primary { background-color: var(--primary-color) !important; } /* --- Loaders & Spinners --- */ .infy-loader svg circle, .live-wire-infy-loader svg circle, .infy-loader .loader-position circle, .spinner-border, .spinner-grow, .page-loader-wrapper .loader, div.dataTables_processing { color: var(--primary-color) !important; fill: var(--primary-color) !important; } .spinner-border { border-top-color: var(--primary-color) !important; border-right-color: var(--primary-color) !important; } /* --- DataTables & Action Icons Fixed Template Colors --- */ .action-btn:hover, [class*=-action-btn] a:hover, table.dataTable td a:hover { opacity: 0.85; } .action-btn.text-info, .action-btn.view-btn, .action-btn.show-btn, [class*=-action-btn] a.text-info, [class*=-action-btn] a.view-btn, [class*=-action-btn] a.show-btn, [class*=-action-btn] button.text-info, [class*=-action-btn] button.view-btn, [class*=-action-btn] button.show-btn { color: #17a2b8 !important; } .action-btn.text-info svg, .action-btn.text-info i, .action-btn.text-info path, .action-btn.text-info circle, .action-btn.text-info polyline, .action-btn.text-info line, .action-btn.text-info rect, .action-btn.view-btn svg, .action-btn.view-btn i, .action-btn.view-btn path, .action-btn.view-btn circle, .action-btn.view-btn polyline, .action-btn.view-btn line, .action-btn.view-btn rect, .action-btn.show-btn svg, .action-btn.show-btn i, .action-btn.show-btn path, .action-btn.show-btn circle, .action-btn.show-btn polyline, .action-btn.show-btn line, .action-btn.show-btn rect, [class*=-action-btn] a.text-info svg, [class*=-action-btn] a.text-info i, [class*=-action-btn] a.text-info path, [class*=-action-btn] a.text-info circle, [class*=-action-btn] a.text-info polyline, [class*=-action-btn] a.text-info line, [class*=-action-btn] a.text-info rect, [class*=-action-btn] a.view-btn svg, [class*=-action-btn] a.view-btn i, [class*=-action-btn] a.view-btn path, [class*=-action-btn] a.view-btn circle, [class*=-action-btn] a.view-btn polyline, [class*=-action-btn] a.view-btn line, [class*=-action-btn] a.view-btn rect, [class*=-action-btn] a.show-btn svg, [class*=-action-btn] a.show-btn i, [class*=-action-btn] a.show-btn path, [class*=-action-btn] a.show-btn circle, [class*=-action-btn] a.show-btn polyline, [class*=-action-btn] a.show-btn line, [class*=-action-btn] a.show-btn rect, [class*=-action-btn] button.text-info svg, [class*=-action-btn] button.text-info i, [class*=-action-btn] button.text-info path, [class*=-action-btn] button.text-info circle, [class*=-action-btn] button.text-info polyline, [class*=-action-btn] button.text-info line, [class*=-action-btn] button.text-info rect, [class*=-action-btn] button.view-btn svg, [class*=-action-btn] button.view-btn i, [class*=-action-btn] button.view-btn path, [class*=-action-btn] button.view-btn circle, [class*=-action-btn] button.view-btn polyline, [class*=-action-btn] button.view-btn line, [class*=-action-btn] button.view-btn rect, [class*=-action-btn] button.show-btn svg, [class*=-action-btn] button.show-btn i, [class*=-action-btn] button.show-btn path, [class*=-action-btn] button.show-btn circle, [class*=-action-btn] button.show-btn polyline, [class*=-action-btn] button.show-btn line, [class*=-action-btn] button.show-btn rect { color: #17a2b8 !important; stroke: #17a2b8 !important; } .action-btn.text-info:hover, .action-btn.text-info:hover svg, .action-btn.text-info:hover i, .action-btn.text-info:hover path, .action-btn.view-btn:hover, .action-btn.view-btn:hover svg, .action-btn.view-btn:hover i, .action-btn.view-btn:hover path, .action-btn.show-btn:hover, .action-btn.show-btn:hover svg, .action-btn.show-btn:hover i, .action-btn.show-btn:hover path, [class*=-action-btn] a.text-info:hover, [class*=-action-btn] a.text-info:hover svg, [class*=-action-btn] a.text-info:hover i, [class*=-action-btn] a.text-info:hover path, [class*=-action-btn] a.view-btn:hover, [class*=-action-btn] a.view-btn:hover svg, [class*=-action-btn] a.view-btn:hover i, [class*=-action-btn] a.view-btn:hover path, [class*=-action-btn] a.show-btn:hover, [class*=-action-btn] a.show-btn:hover svg, [class*=-action-btn] a.show-btn:hover i, [class*=-action-btn] a.show-btn:hover path, [class*=-action-btn] button.text-info:hover, [class*=-action-btn] button.text-info:hover svg, [class*=-action-btn] button.text-info:hover i, [class*=-action-btn] button.text-info:hover path, [class*=-action-btn] button.view-btn:hover, [class*=-action-btn] button.view-btn:hover svg, [class*=-action-btn] button.view-btn:hover i, [class*=-action-btn] button.view-btn:hover path, [class*=-action-btn] button.show-btn:hover, [class*=-action-btn] button.show-btn:hover svg, [class*=-action-btn] button.show-btn:hover i, [class*=-action-btn] button.show-btn:hover path { color: #17a2b8 !important; stroke: #17a2b8 !important; } .action-btn.text-danger, .action-btn.delete-btn, .action-btn[class*=-delete], [class*=-action-btn] a.text-danger, [class*=-action-btn] a.delete-btn, [class*=-action-btn] a[class*=-delete], [class*=-action-btn] button.text-danger, [class*=-action-btn] button.delete-btn, [class*=-action-btn] button[class*=-delete] { color: #dc3545 !important; } .action-btn.text-danger svg, .action-btn.text-danger i, .action-btn.text-danger path, .action-btn.text-danger circle, .action-btn.text-danger polyline, .action-btn.text-danger line, .action-btn.text-danger rect, .action-btn.delete-btn svg, .action-btn.delete-btn i, .action-btn.delete-btn path, .action-btn.delete-btn circle, .action-btn.delete-btn polyline, .action-btn.delete-btn line, .action-btn.delete-btn rect, .action-btn[class*=-delete] svg, .action-btn[class*=-delete] i, .action-btn[class*=-delete] path, .action-btn[class*=-delete] circle, .action-btn[class*=-delete] polyline, .action-btn[class*=-delete] line, .action-btn[class*=-delete] rect, [class*=-action-btn] a.text-danger svg, [class*=-action-btn] a.text-danger i, [class*=-action-btn] a.text-danger path, [class*=-action-btn] a.text-danger circle, [class*=-action-btn] a.text-danger polyline, [class*=-action-btn] a.text-danger line, [class*=-action-btn] a.text-danger rect, [class*=-action-btn] a.delete-btn svg, [class*=-action-btn] a.delete-btn i, [class*=-action-btn] a.delete-btn path, [class*=-action-btn] a.delete-btn circle, [class*=-action-btn] a.delete-btn polyline, [class*=-action-btn] a.delete-btn line, [class*=-action-btn] a.delete-btn rect, [class*=-action-btn] a[class*=-delete] svg, [class*=-action-btn] a[class*=-delete] i, [class*=-action-btn] a[class*=-delete] path, [class*=-action-btn] a[class*=-delete] circle, [class*=-action-btn] a[class*=-delete] polyline, [class*=-action-btn] a[class*=-delete] line, [class*=-action-btn] a[class*=-delete] rect, [class*=-action-btn] button.text-danger svg, [class*=-action-btn] button.text-danger i, [class*=-action-btn] button.text-danger path, [class*=-action-btn] button.text-danger circle, [class*=-action-btn] button.text-danger polyline, [class*=-action-btn] button.text-danger line, [class*=-action-btn] button.text-danger rect, [class*=-action-btn] button.delete-btn svg, [class*=-action-btn] button.delete-btn i, [class*=-action-btn] button.delete-btn path, [class*=-action-btn] button.delete-btn circle, [class*=-action-btn] button.delete-btn polyline, [class*=-action-btn] button.delete-btn line, [class*=-action-btn] button.delete-btn rect, [class*=-action-btn] button[class*=-delete] svg, [class*=-action-btn] button[class*=-delete] i, [class*=-action-btn] button[class*=-delete] path, [class*=-action-btn] button[class*=-delete] circle, [class*=-action-btn] button[class*=-delete] polyline, [class*=-action-btn] button[class*=-delete] line, [class*=-action-btn] button[class*=-delete] rect { color: #dc3545 !important; stroke: #dc3545 !important; } .action-btn.text-danger:hover, .action-btn.text-danger:hover svg, .action-btn.text-danger:hover i, .action-btn.text-danger:hover path, .action-btn.delete-btn:hover, .action-btn.delete-btn:hover svg, .action-btn.delete-btn:hover i, .action-btn.delete-btn:hover path, .action-btn[class*=-delete]:hover, .action-btn[class*=-delete]:hover svg, .action-btn[class*=-delete]:hover i, .action-btn[class*=-delete]:hover path, [class*=-action-btn] a.text-danger:hover, [class*=-action-btn] a.text-danger:hover svg, [class*=-action-btn] a.text-danger:hover i, [class*=-action-btn] a.text-danger:hover path, [class*=-action-btn] a.delete-btn:hover, [class*=-action-btn] a.delete-btn:hover svg, [class*=-action-btn] a.delete-btn:hover i, [class*=-action-btn] a.delete-btn:hover path, [class*=-action-btn] a[class*=-delete]:hover, [class*=-action-btn] a[class*=-delete]:hover svg, [class*=-action-btn] a[class*=-delete]:hover i, [class*=-action-btn] a[class*=-delete]:hover path, [class*=-action-btn] button.text-danger:hover, [class*=-action-btn] button.text-danger:hover svg, [class*=-action-btn] button.text-danger:hover i, [class*=-action-btn] button.text-danger:hover path, [class*=-action-btn] button.delete-btn:hover, [class*=-action-btn] button.delete-btn:hover svg, [class*=-action-btn] button.delete-btn:hover i, [class*=-action-btn] button.delete-btn:hover path, [class*=-action-btn] button[class*=-delete]:hover, [class*=-action-btn] button[class*=-delete]:hover svg, [class*=-action-btn] button[class*=-delete]:hover i, [class*=-action-btn] button[class*=-delete]:hover path { color: #dc3545 !important; stroke: #dc3545 !important; } .action-btn.text-warning, .action-btn.assign-btn, [class*=-action-btn] a.text-warning, [class*=-action-btn] a.assign-btn, [class*=-action-btn] button.text-warning, [class*=-action-btn] button.assign-btn { color: #ffc107 !important; } .action-btn.text-warning svg, .action-btn.text-warning i, .action-btn.text-warning path, .action-btn.text-warning circle, .action-btn.text-warning polyline, .action-btn.text-warning line, .action-btn.text-warning rect, .action-btn.assign-btn svg, .action-btn.assign-btn i, .action-btn.assign-btn path, .action-btn.assign-btn circle, .action-btn.assign-btn polyline, .action-btn.assign-btn line, .action-btn.assign-btn rect, [class*=-action-btn] a.text-warning svg, [class*=-action-btn] a.text-warning i, [class*=-action-btn] a.text-warning path, [class*=-action-btn] a.text-warning circle, [class*=-action-btn] a.text-warning polyline, [class*=-action-btn] a.text-warning line, [class*=-action-btn] a.text-warning rect, [class*=-action-btn] a.assign-btn svg, [class*=-action-btn] a.assign-btn i, [class*=-action-btn] a.assign-btn path, [class*=-action-btn] a.assign-btn circle, [class*=-action-btn] a.assign-btn polyline, [class*=-action-btn] a.assign-btn line, [class*=-action-btn] a.assign-btn rect, [class*=-action-btn] button.text-warning svg, [class*=-action-btn] button.text-warning i, [class*=-action-btn] button.text-warning path, [class*=-action-btn] button.text-warning circle, [class*=-action-btn] button.text-warning polyline, [class*=-action-btn] button.text-warning line, [class*=-action-btn] button.text-warning rect, [class*=-action-btn] button.assign-btn svg, [class*=-action-btn] button.assign-btn i, [class*=-action-btn] button.assign-btn path, [class*=-action-btn] button.assign-btn circle, [class*=-action-btn] button.assign-btn polyline, [class*=-action-btn] button.assign-btn line, [class*=-action-btn] button.assign-btn rect { color: #ffc107 !important; stroke: #ffc107 !important; } .action-btn.text-warning:hover, .action-btn.text-warning:hover svg, .action-btn.text-warning:hover i, .action-btn.text-warning:hover path, .action-btn.assign-btn:hover, .action-btn.assign-btn:hover svg, .action-btn.assign-btn:hover i, .action-btn.assign-btn:hover path, [class*=-action-btn] a.text-warning:hover, [class*=-action-btn] a.text-warning:hover svg, [class*=-action-btn] a.text-warning:hover i, [class*=-action-btn] a.text-warning:hover path, [class*=-action-btn] a.assign-btn:hover, [class*=-action-btn] a.assign-btn:hover svg, [class*=-action-btn] a.assign-btn:hover i, [class*=-action-btn] a.assign-btn:hover path, [class*=-action-btn] button.text-warning:hover, [class*=-action-btn] button.text-warning:hover svg, [class*=-action-btn] button.text-warning:hover i, [class*=-action-btn] button.text-warning:hover path, [class*=-action-btn] button.assign-btn:hover, [class*=-action-btn] button.assign-btn:hover svg, [class*=-action-btn] button.assign-btn:hover i, [class*=-action-btn] button.assign-btn:hover path { color: #ffc107 !important; stroke: #ffc107 !important; } .action-btn.text-success, .action-btn.reminder-btn, [class*=-action-btn] a.text-success, [class*=-action-btn] a.reminder-btn, [class*=-action-btn] button.text-success, [class*=-action-btn] button.reminder-btn { color: #28a745 !important; } .action-btn.text-success svg, .action-btn.text-success i, .action-btn.text-success path, .action-btn.text-success circle, .action-btn.text-success polyline, .action-btn.text-success line, .action-btn.text-success rect, .action-btn.reminder-btn svg, .action-btn.reminder-btn i, .action-btn.reminder-btn path, .action-btn.reminder-btn circle, .action-btn.reminder-btn polyline, .action-btn.reminder-btn line, .action-btn.reminder-btn rect, [class*=-action-btn] a.text-success svg, [class*=-action-btn] a.text-success i, [class*=-action-btn] a.text-success path, [class*=-action-btn] a.text-success circle, [class*=-action-btn] a.text-success polyline, [class*=-action-btn] a.text-success line, [class*=-action-btn] a.text-success rect, [class*=-action-btn] a.reminder-btn svg, [class*=-action-btn] a.reminder-btn i, [class*=-action-btn] a.reminder-btn path, [class*=-action-btn] a.reminder-btn circle, [class*=-action-btn] a.reminder-btn polyline, [class*=-action-btn] a.reminder-btn line, [class*=-action-btn] a.reminder-btn rect, [class*=-action-btn] button.text-success svg, [class*=-action-btn] button.text-success i, [class*=-action-btn] button.text-success path, [class*=-action-btn] button.text-success circle, [class*=-action-btn] button.text-success polyline, [class*=-action-btn] button.text-success line, [class*=-action-btn] button.text-success rect, [class*=-action-btn] button.reminder-btn svg, [class*=-action-btn] button.reminder-btn i, [class*=-action-btn] button.reminder-btn path, [class*=-action-btn] button.reminder-btn circle, [class*=-action-btn] button.reminder-btn polyline, [class*=-action-btn] button.reminder-btn line, [class*=-action-btn] button.reminder-btn rect { color: #28a745 !important; stroke: #28a745 !important; } .action-btn.text-success:hover, .action-btn.text-success:hover svg, .action-btn.text-success:hover i, .action-btn.text-success:hover path, .action-btn.reminder-btn:hover, .action-btn.reminder-btn:hover svg, .action-btn.reminder-btn:hover i, .action-btn.reminder-btn:hover path, [class*=-action-btn] a.text-success:hover, [class*=-action-btn] a.text-success:hover svg, [class*=-action-btn] a.text-success:hover i, [class*=-action-btn] a.text-success:hover path, [class*=-action-btn] a.reminder-btn:hover, [class*=-action-btn] a.reminder-btn:hover svg, [class*=-action-btn] a.reminder-btn:hover i, [class*=-action-btn] a.reminder-btn:hover path, [class*=-action-btn] button.text-success:hover, [class*=-action-btn] button.text-success:hover svg, [class*=-action-btn] button.text-success:hover i, [class*=-action-btn] button.text-success:hover path, [class*=-action-btn] button.reminder-btn:hover, [class*=-action-btn] button.reminder-btn:hover svg, [class*=-action-btn] button.reminder-btn:hover i, [class*=-action-btn] button.reminder-btn:hover path { color: #28a745 !important; stroke: #28a745 !important; } .action-btn.edit-btn, .action-btn[class*=-edit], [class*=-action-btn] a.edit-btn, [class*=-action-btn] a[class*=-edit], [class*=-action-btn] button.edit-btn, [class*=-action-btn] button[class*=-edit] { color: #fb160a !important; } .action-btn.edit-btn svg, .action-btn.edit-btn i, .action-btn.edit-btn path, .action-btn.edit-btn circle, .action-btn.edit-btn polyline, .action-btn.edit-btn line, .action-btn.edit-btn rect, .action-btn[class*=-edit] svg, .action-btn[class*=-edit] i, .action-btn[class*=-edit] path, .action-btn[class*=-edit] circle, .action-btn[class*=-edit] polyline, .action-btn[class*=-edit] line, .action-btn[class*=-edit] rect, [class*=-action-btn] a.edit-btn svg, [class*=-action-btn] a.edit-btn i, [class*=-action-btn] a.edit-btn path, [class*=-action-btn] a.edit-btn circle, [class*=-action-btn] a.edit-btn polyline, [class*=-action-btn] a.edit-btn line, [class*=-action-btn] a.edit-btn rect, [class*=-action-btn] a[class*=-edit] svg, [class*=-action-btn] a[class*=-edit] i, [class*=-action-btn] a[class*=-edit] path, [class*=-action-btn] a[class*=-edit] circle, [class*=-action-btn] a[class*=-edit] polyline, [class*=-action-btn] a[class*=-edit] line, [class*=-action-btn] a[class*=-edit] rect, [class*=-action-btn] button.edit-btn svg, [class*=-action-btn] button.edit-btn i, [class*=-action-btn] button.edit-btn path, [class*=-action-btn] button.edit-btn circle, [class*=-action-btn] button.edit-btn polyline, [class*=-action-btn] button.edit-btn line, [class*=-action-btn] button.edit-btn rect, [class*=-action-btn] button[class*=-edit] svg, [class*=-action-btn] button[class*=-edit] i, [class*=-action-btn] button[class*=-edit] path, [class*=-action-btn] button[class*=-edit] circle, [class*=-action-btn] button[class*=-edit] polyline, [class*=-action-btn] button[class*=-edit] line, [class*=-action-btn] button[class*=-edit] rect { color: #fb160a !important; stroke: #fb160a !important; } .action-btn.edit-btn:hover, .action-btn.edit-btn:hover svg, .action-btn.edit-btn:hover i, .action-btn.edit-btn:hover path, .action-btn[class*=-edit]:hover, .action-btn[class*=-edit]:hover svg, .action-btn[class*=-edit]:hover i, .action-btn[class*=-edit]:hover path, [class*=-action-btn] a.edit-btn:hover, [class*=-action-btn] a.edit-btn:hover svg, [class*=-action-btn] a.edit-btn:hover i, [class*=-action-btn] a.edit-btn:hover path, [class*=-action-btn] a[class*=-edit]:hover, [class*=-action-btn] a[class*=-edit]:hover svg, [class*=-action-btn] a[class*=-edit]:hover i, [class*=-action-btn] a[class*=-edit]:hover path, [class*=-action-btn] button.edit-btn:hover, [class*=-action-btn] button.edit-btn:hover svg, [class*=-action-btn] button.edit-btn:hover i, [class*=-action-btn] button.edit-btn:hover path, [class*=-action-btn] button[class*=-edit]:hover, [class*=-action-btn] button[class*=-edit]:hover svg, [class*=-action-btn] button[class*=-edit]:hover i, [class*=-action-btn] button[class*=-edit]:hover path { color: #fb160a !important; stroke: #fb160a !important; } /* --- Navbar Top Links --- */ .navbar-bg { background-color: var(--primary-color) !important; } .navbar > .navbar-nav > li > a.nav-link, .navbar .nav-link-user, .navbar .nav-link-lg, .navbar-right > li > a.nav-link { color: #ffffff !important; } .navbar > .navbar-nav > li > a.nav-link i, .navbar > .navbar-nav > li > a.nav-link svg, .navbar > .navbar-nav > li > a.nav-link div, .navbar > .navbar-nav > li > a.nav-link span, .navbar .nav-link-user i, .navbar .nav-link-user svg, .navbar .nav-link-user div, .navbar .nav-link-user span, .navbar .nav-link-lg i, .navbar .nav-link-lg svg, .navbar .nav-link-lg div, .navbar .nav-link-lg span, .navbar-right > li > a.nav-link i, .navbar-right > li > a.nav-link svg, .navbar-right > li > a.nav-link div, .navbar-right > li > a.nav-link span { color: #ffffff !important; } .navbar > .navbar-nav > li > a.nav-link:hover, .navbar > .navbar-nav > li > a.nav-link:focus, .navbar > .navbar-nav > li > a.nav-link:active, .navbar .nav-link-user:hover, .navbar .nav-link-user:focus, .navbar .nav-link-user:active, .navbar .nav-link-lg:hover, .navbar .nav-link-lg:focus, .navbar .nav-link-lg:active, .navbar-right > li > a.nav-link:hover, .navbar-right > li > a.nav-link:focus, .navbar-right > li > a.nav-link:active { color: rgba(255, 255, 255, 0.9) !important; } .navbar > .navbar-nav > li > a.nav-link:hover i, .navbar > .navbar-nav > li > a.nav-link:hover svg, .navbar > .navbar-nav > li > a.nav-link:hover div, .navbar > .navbar-nav > li > a.nav-link:hover span, .navbar > .navbar-nav > li > a.nav-link:focus i, .navbar > .navbar-nav > li > a.nav-link:focus svg, .navbar > .navbar-nav > li > a.nav-link:focus div, .navbar > .navbar-nav > li > a.nav-link:focus span, .navbar > .navbar-nav > li > a.nav-link:active i, .navbar > .navbar-nav > li > a.nav-link:active svg, .navbar > .navbar-nav > li > a.nav-link:active div, .navbar > .navbar-nav > li > a.nav-link:active span, .navbar .nav-link-user:hover i, .navbar .nav-link-user:hover svg, .navbar .nav-link-user:hover div, .navbar .nav-link-user:hover span, .navbar .nav-link-user:focus i, .navbar .nav-link-user:focus svg, .navbar .nav-link-user:focus div, .navbar .nav-link-user:focus span, .navbar .nav-link-user:active i, .navbar .nav-link-user:active svg, .navbar .nav-link-user:active div, .navbar .nav-link-user:active span, .navbar .nav-link-lg:hover i, .navbar .nav-link-lg:hover svg, .navbar .nav-link-lg:hover div, .navbar .nav-link-lg:hover span, .navbar .nav-link-lg:focus i, .navbar .nav-link-lg:focus svg, .navbar .nav-link-lg:focus div, .navbar .nav-link-lg:focus span, .navbar .nav-link-lg:active i, .navbar .nav-link-lg:active svg, .navbar .nav-link-lg:active div, .navbar .nav-link-lg:active span, .navbar-right > li > a.nav-link:hover i, .navbar-right > li > a.nav-link:hover svg, .navbar-right > li > a.nav-link:hover div, .navbar-right > li > a.nav-link:hover span, .navbar-right > li > a.nav-link:focus i, .navbar-right > li > a.nav-link:focus svg, .navbar-right > li > a.nav-link:focus div, .navbar-right > li > a.nav-link:focus span, .navbar-right > li > a.nav-link:active i, .navbar-right > li > a.nav-link:active svg, .navbar-right > li > a.nav-link:active div, .navbar-right > li > a.nav-link:active span { color: rgba(255, 255, 255, 0.9) !important; } /* --- Header Dropdown Menus (Notifications & Profile) --- */ .dropdown-menu { /* Notification Icon Circle Avatars (Bell Icon White Fix) */ /* Remove Hover Text Color Change on Notifications */ } .dropdown-menu a.dropdown-item, .dropdown-menu .dropdown-item, .dropdown-menu .dropdown-title, .dropdown-menu .dropdown-header, .dropdown-menu .change-pass-wrap, .dropdown-menu .notification-content, .dropdown-menu .notification-title, .dropdown-menu .notification-item, .dropdown-menu .dropdown-list-content, .dropdown-menu .dropdown-list-content div, .dropdown-menu .dropdown-list-content span, .dropdown-menu .dropdown-list-content p, .dropdown-menu .dropdown-list-content h6, .dropdown-menu .dropdown-list-content small, .dropdown-menu .dropdown-list-content time { color: #34395e !important; } .dropdown-menu .dropdown-item i, .dropdown-menu .dropdown-item svg, .dropdown-menu .dropdown-list-content i, .dropdown-menu .dropdown-list-content svg { color: #6c757d !important; stroke: #6c757d !important; } .dropdown-menu .dropdown-item-icon i, .dropdown-menu .dropdown-item-icon svg, .dropdown-menu .dropdown-item-icon span, .dropdown-menu .dropdown-item-icon div, .dropdown-menu .dropdown-list-image i, .dropdown-menu .dropdown-list-image svg, .dropdown-menu .dropdown-list-image span, .dropdown-menu .dropdown-list-image div, .dropdown-menu .dropdown-item-icon.bg-primary i, .dropdown-menu .dropdown-item-icon.bg-primary svg, .dropdown-menu .dropdown-item-icon.bg-primary span, .dropdown-menu .dropdown-item-icon.bg-primary div, .dropdown-menu .dropdown-item-icon.bg-info i, .dropdown-menu .dropdown-item-icon.bg-info svg, .dropdown-menu .dropdown-item-icon.bg-info span, .dropdown-menu .dropdown-item-icon.bg-info div, .dropdown-menu .dropdown-item-icon.bg-success i, .dropdown-menu .dropdown-item-icon.bg-success svg, .dropdown-menu .dropdown-item-icon.bg-success span, .dropdown-menu .dropdown-item-icon.bg-success div, .dropdown-menu .dropdown-item-icon.bg-warning i, .dropdown-menu .dropdown-item-icon.bg-warning svg, .dropdown-menu .dropdown-item-icon.bg-warning span, .dropdown-menu .dropdown-item-icon.bg-warning div, .dropdown-menu .dropdown-item-icon.bg-danger i, .dropdown-menu .dropdown-item-icon.bg-danger svg, .dropdown-menu .dropdown-item-icon.bg-danger span, .dropdown-menu .dropdown-item-icon.bg-danger div { color: #ffffff !important; stroke: #ffffff !important; fill: #ffffff !important; } .dropdown-menu a.dropdown-item:hover, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background-color: var(--primary-light-bg) !important; color: var(--primary-color) !important; } .dropdown-menu a.dropdown-item:hover i, .dropdown-menu a.dropdown-item:hover svg, .dropdown-menu a.dropdown-item:hover span, .dropdown-menu a.dropdown-item:hover div, .dropdown-menu a.dropdown-item:hover p, .dropdown-menu a.dropdown-item:hover h6, .dropdown-menu a.dropdown-item:hover .change-pass-wrap, .dropdown-menu .dropdown-item:hover i, .dropdown-menu .dropdown-item:hover svg, .dropdown-menu .dropdown-item:hover span, .dropdown-menu .dropdown-item:hover div, .dropdown-menu .dropdown-item:hover p, .dropdown-menu .dropdown-item:hover h6, .dropdown-menu .dropdown-item:hover .change-pass-wrap, .dropdown-menu .dropdown-item:focus i, .dropdown-menu .dropdown-item:focus svg, .dropdown-menu .dropdown-item:focus span, .dropdown-menu .dropdown-item:focus div, .dropdown-menu .dropdown-item:focus p, .dropdown-menu .dropdown-item:focus h6, .dropdown-menu .dropdown-item:focus .change-pass-wrap { color: var(--primary-color) !important; stroke: var(--primary-color) !important; } .dropdown-menu.dropdown-list a.dropdown-item:hover, .dropdown-menu.dropdown-list .dropdown-item:hover, .dropdown-menu.dropdown-list a.dropdown-item:focus, .dropdown-menu.dropdown-list .dropdown-item:focus, .dropdown-menu .dropdown-list-content a.dropdown-item:hover, .dropdown-menu .dropdown-list-content .dropdown-item:hover, .dropdown-menu .dropdown-list-content a.dropdown-item:focus, .dropdown-menu .dropdown-list-content .dropdown-item:focus, .dropdown-menu .notification-content a.dropdown-item:hover, .dropdown-menu .notification-content .dropdown-item:hover, .dropdown-menu .notification-content a.dropdown-item:focus, .dropdown-menu .notification-content .dropdown-item:focus { background-color: var(--primary-light-bg) !important; color: #34395e !important; } .dropdown-menu.dropdown-list a.dropdown-item:hover .dropdown-item-desc, .dropdown-menu.dropdown-list a.dropdown-item:hover .notification-title, .dropdown-menu.dropdown-list a.dropdown-item:hover div, .dropdown-menu.dropdown-list a.dropdown-item:hover p, .dropdown-menu.dropdown-list a.dropdown-item:hover h6, .dropdown-menu.dropdown-list .dropdown-item:hover .dropdown-item-desc, .dropdown-menu.dropdown-list .dropdown-item:hover .notification-title, .dropdown-menu.dropdown-list .dropdown-item:hover div, .dropdown-menu.dropdown-list .dropdown-item:hover p, .dropdown-menu.dropdown-list .dropdown-item:hover h6, .dropdown-menu.dropdown-list a.dropdown-item:focus .dropdown-item-desc, .dropdown-menu.dropdown-list a.dropdown-item:focus .notification-title, .dropdown-menu.dropdown-list a.dropdown-item:focus div, .dropdown-menu.dropdown-list a.dropdown-item:focus p, .dropdown-menu.dropdown-list a.dropdown-item:focus h6, .dropdown-menu.dropdown-list .dropdown-item:focus .dropdown-item-desc, .dropdown-menu.dropdown-list .dropdown-item:focus .notification-title, .dropdown-menu.dropdown-list .dropdown-item:focus div, .dropdown-menu.dropdown-list .dropdown-item:focus p, .dropdown-menu.dropdown-list .dropdown-item:focus h6, .dropdown-menu .dropdown-list-content a.dropdown-item:hover .dropdown-item-desc, .dropdown-menu .dropdown-list-content a.dropdown-item:hover .notification-title, .dropdown-menu .dropdown-list-content a.dropdown-item:hover div, .dropdown-menu .dropdown-list-content a.dropdown-item:hover p, .dropdown-menu .dropdown-list-content a.dropdown-item:hover h6, .dropdown-menu .dropdown-list-content .dropdown-item:hover .dropdown-item-desc, .dropdown-menu .dropdown-list-content .dropdown-item:hover .notification-title, .dropdown-menu .dropdown-list-content .dropdown-item:hover div, .dropdown-menu .dropdown-list-content .dropdown-item:hover p, .dropdown-menu .dropdown-list-content .dropdown-item:hover h6, .dropdown-menu .dropdown-list-content a.dropdown-item:focus .dropdown-item-desc, .dropdown-menu .dropdown-list-content a.dropdown-item:focus .notification-title, .dropdown-menu .dropdown-list-content a.dropdown-item:focus div, .dropdown-menu .dropdown-list-content a.dropdown-item:focus p, .dropdown-menu .dropdown-list-content a.dropdown-item:focus h6, .dropdown-menu .dropdown-list-content .dropdown-item:focus .dropdown-item-desc, .dropdown-menu .dropdown-list-content .dropdown-item:focus .notification-title, .dropdown-menu .dropdown-list-content .dropdown-item:focus div, .dropdown-menu .dropdown-list-content .dropdown-item:focus p, .dropdown-menu .dropdown-list-content .dropdown-item:focus h6, .dropdown-menu .notification-content a.dropdown-item:hover .dropdown-item-desc, .dropdown-menu .notification-content a.dropdown-item:hover .notification-title, .dropdown-menu .notification-content a.dropdown-item:hover div, .dropdown-menu .notification-content a.dropdown-item:hover p, .dropdown-menu .notification-content a.dropdown-item:hover h6, .dropdown-menu .notification-content .dropdown-item:hover .dropdown-item-desc, .dropdown-menu .notification-content .dropdown-item:hover .notification-title, .dropdown-menu .notification-content .dropdown-item:hover div, .dropdown-menu .notification-content .dropdown-item:hover p, .dropdown-menu .notification-content .dropdown-item:hover h6, .dropdown-menu .notification-content a.dropdown-item:focus .dropdown-item-desc, .dropdown-menu .notification-content a.dropdown-item:focus .notification-title, .dropdown-menu .notification-content a.dropdown-item:focus div, .dropdown-menu .notification-content a.dropdown-item:focus p, .dropdown-menu .notification-content a.dropdown-item:focus h6, .dropdown-menu .notification-content .dropdown-item:focus .dropdown-item-desc, .dropdown-menu .notification-content .dropdown-item:focus .notification-title, .dropdown-menu .notification-content .dropdown-item:focus div, .dropdown-menu .notification-content .dropdown-item:focus p, .dropdown-menu .notification-content .dropdown-item:focus h6 { color: #34395e !important; } .dropdown-menu.dropdown-list a.dropdown-item:hover .notification-for-text, .dropdown-menu.dropdown-list a.dropdown-item:hover span, .dropdown-menu.dropdown-list .dropdown-item:hover .notification-for-text, .dropdown-menu.dropdown-list .dropdown-item:hover span, .dropdown-menu.dropdown-list a.dropdown-item:focus .notification-for-text, .dropdown-menu.dropdown-list a.dropdown-item:focus span, .dropdown-menu.dropdown-list .dropdown-item:focus .notification-for-text, .dropdown-menu.dropdown-list .dropdown-item:focus span, .dropdown-menu .dropdown-list-content a.dropdown-item:hover .notification-for-text, .dropdown-menu .dropdown-list-content a.dropdown-item:hover span, .dropdown-menu .dropdown-list-content .dropdown-item:hover .notification-for-text, .dropdown-menu .dropdown-list-content .dropdown-item:hover span, .dropdown-menu .dropdown-list-content a.dropdown-item:focus .notification-for-text, .dropdown-menu .dropdown-list-content a.dropdown-item:focus span, .dropdown-menu .dropdown-list-content .dropdown-item:focus .notification-for-text, .dropdown-menu .dropdown-list-content .dropdown-item:focus span, .dropdown-menu .notification-content a.dropdown-item:hover .notification-for-text, .dropdown-menu .notification-content a.dropdown-item:hover span, .dropdown-menu .notification-content .dropdown-item:hover .notification-for-text, .dropdown-menu .notification-content .dropdown-item:hover span, .dropdown-menu .notification-content a.dropdown-item:focus .notification-for-text, .dropdown-menu .notification-content a.dropdown-item:focus span, .dropdown-menu .notification-content .dropdown-item:focus .notification-for-text, .dropdown-menu .notification-content .dropdown-item:focus span { color: #6c757d !important; } .dropdown-menu.dropdown-list a.dropdown-item:hover .notification-time, .dropdown-menu.dropdown-list a.dropdown-item:hover small, .dropdown-menu.dropdown-list a.dropdown-item:hover time, .dropdown-menu.dropdown-list .dropdown-item:hover .notification-time, .dropdown-menu.dropdown-list .dropdown-item:hover small, .dropdown-menu.dropdown-list .dropdown-item:hover time, .dropdown-menu.dropdown-list a.dropdown-item:focus .notification-time, .dropdown-menu.dropdown-list a.dropdown-item:focus small, .dropdown-menu.dropdown-list a.dropdown-item:focus time, .dropdown-menu.dropdown-list .dropdown-item:focus .notification-time, .dropdown-menu.dropdown-list .dropdown-item:focus small, .dropdown-menu.dropdown-list .dropdown-item:focus time, .dropdown-menu .dropdown-list-content a.dropdown-item:hover .notification-time, .dropdown-menu .dropdown-list-content a.dropdown-item:hover small, .dropdown-menu .dropdown-list-content a.dropdown-item:hover time, .dropdown-menu .dropdown-list-content .dropdown-item:hover .notification-time, .dropdown-menu .dropdown-list-content .dropdown-item:hover small, .dropdown-menu .dropdown-list-content .dropdown-item:hover time, .dropdown-menu .dropdown-list-content a.dropdown-item:focus .notification-time, .dropdown-menu .dropdown-list-content a.dropdown-item:focus small, .dropdown-menu .dropdown-list-content a.dropdown-item:focus time, .dropdown-menu .dropdown-list-content .dropdown-item:focus .notification-time, .dropdown-menu .dropdown-list-content .dropdown-item:focus small, .dropdown-menu .dropdown-list-content .dropdown-item:focus time, .dropdown-menu .notification-content a.dropdown-item:hover .notification-time, .dropdown-menu .notification-content a.dropdown-item:hover small, .dropdown-menu .notification-content a.dropdown-item:hover time, .dropdown-menu .notification-content .dropdown-item:hover .notification-time, .dropdown-menu .notification-content .dropdown-item:hover small, .dropdown-menu .notification-content .dropdown-item:hover time, .dropdown-menu .notification-content a.dropdown-item:focus .notification-time, .dropdown-menu .notification-content a.dropdown-item:focus small, .dropdown-menu .notification-content a.dropdown-item:focus time, .dropdown-menu .notification-content .dropdown-item:focus .notification-time, .dropdown-menu .notification-content .dropdown-item:focus small, .dropdown-menu .notification-content .dropdown-item:focus time { color: #98a6ad !important; } .dropdown-menu.dropdown-list a.dropdown-item:hover .dropdown-item-icon i, .dropdown-menu.dropdown-list a.dropdown-item:hover .dropdown-item-icon svg, .dropdown-menu.dropdown-list .dropdown-item:hover .dropdown-item-icon i, .dropdown-menu.dropdown-list .dropdown-item:hover .dropdown-item-icon svg, .dropdown-menu.dropdown-list a.dropdown-item:focus .dropdown-item-icon i, .dropdown-menu.dropdown-list a.dropdown-item:focus .dropdown-item-icon svg, .dropdown-menu.dropdown-list .dropdown-item:focus .dropdown-item-icon i, .dropdown-menu.dropdown-list .dropdown-item:focus .dropdown-item-icon svg, .dropdown-menu .dropdown-list-content a.dropdown-item:hover .dropdown-item-icon i, .dropdown-menu .dropdown-list-content a.dropdown-item:hover .dropdown-item-icon svg, .dropdown-menu .dropdown-list-content .dropdown-item:hover .dropdown-item-icon i, .dropdown-menu .dropdown-list-content .dropdown-item:hover .dropdown-item-icon svg, .dropdown-menu .dropdown-list-content a.dropdown-item:focus .dropdown-item-icon i, .dropdown-menu .dropdown-list-content a.dropdown-item:focus .dropdown-item-icon svg, .dropdown-menu .dropdown-list-content .dropdown-item:focus .dropdown-item-icon i, .dropdown-menu .dropdown-list-content .dropdown-item:focus .dropdown-item-icon svg, .dropdown-menu .notification-content a.dropdown-item:hover .dropdown-item-icon i, .dropdown-menu .notification-content a.dropdown-item:hover .dropdown-item-icon svg, .dropdown-menu .notification-content .dropdown-item:hover .dropdown-item-icon i, .dropdown-menu .notification-content .dropdown-item:hover .dropdown-item-icon svg, .dropdown-menu .notification-content a.dropdown-item:focus .dropdown-item-icon i, .dropdown-menu .notification-content a.dropdown-item:focus .dropdown-item-icon svg, .dropdown-menu .notification-content .dropdown-item:focus .dropdown-item-icon i, .dropdown-menu .notification-content .dropdown-item:focus .dropdown-item-icon svg { color: #ffffff !important; stroke: #ffffff !important; fill: #ffffff !important; } /* --- Sidebar Main & Submenu Tabs --- */ .main-sidebar .sidebar-menu li a svg { color: var(--primary-color); stroke: var(--primary-color); } .main-sidebar .sidebar-menu li.active > a { color: var(--primary-color) !important; } .main-sidebar .sidebar-menu li.active > a i, .main-sidebar .sidebar-menu li.active > a svg, .main-sidebar .sidebar-menu li.active > a svg path, .main-sidebar .sidebar-menu li.active > a svg circle, .main-sidebar .sidebar-menu li.active > a svg polyline, .main-sidebar .sidebar-menu li.active > a svg line, .main-sidebar .sidebar-menu li.active > a svg rect { color: var(--primary-color) !important; stroke: var(--primary-color) !important; } .main-sidebar .sidebar-menu li.active > a.has-dropdown:after { color: var(--primary-color) !important; } .main-sidebar .sidebar-menu li a:hover { color: var(--primary-color) !important; } .main-sidebar .sidebar-menu li a:hover i, .main-sidebar .sidebar-menu li a:hover svg, .main-sidebar .sidebar-menu li a:hover svg path, .main-sidebar .sidebar-menu li a:hover svg circle, .main-sidebar .sidebar-menu li a:hover svg polyline, .main-sidebar .sidebar-menu li a:hover svg line, .main-sidebar .sidebar-menu li a:hover svg rect { color: var(--primary-color) !important; stroke: var(--primary-color) !important; } .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a { color: var(--primary-color) !important; font-weight: 600; } .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a i, .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a svg, .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a svg path, .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a svg circle, .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a svg polyline, .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a svg line, .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a svg rect { color: var(--primary-color) !important; stroke: var(--primary-color) !important; } .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover { color: var(--primary-color) !important; } .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover i, .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover svg, .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover svg path, .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover svg circle, .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover svg polyline, .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover svg line, .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover svg rect { color: var(--primary-color) !important; stroke: var(--primary-color) !important; } body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a { color: var(--primary-color) !important; } body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a svg, body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a svg path, body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a svg circle, body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a svg polyline, body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a svg line, body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a svg rect { color: var(--primary-color) !important; stroke: var(--primary-color) !important; } /* --- Collapsed Mini Sidebar (body.sidebar-mini) --- */ body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a { background-color: var(--primary-color) !important; color: #fff !important; box-shadow: 0 4px 8px var(--primary-box-shadow) !important; } body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a i, body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a svg, body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a svg path, body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a svg circle, body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a svg polyline, body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a svg line, body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a svg rect { color: #fff !important; stroke: #fff !important; } /* --- Edit Profile & User Profile --- */ .profile-tabs .nav-link.active, .profile-tabs .nav-link.active:hover, .profile-tabs .nav-link.active:focus, .profile-tabs #personal-tab.active, .profile-tabs #security-tab.active, .profile-tabs #calendar-tab.active, #profileTabs .nav-link.active, #profileTabs .nav-link.active:hover, #profileTabs .nav-link.active:focus, #profileTabs #personal-tab.active, #profileTabs #security-tab.active, #profileTabs #calendar-tab.active, #profileTabs.nav-pills .nav-link.active, #profileTabs.nav-pills .nav-link.active:hover, #profileTabs.nav-pills .nav-link.active:focus, #profileTabs.nav-pills #personal-tab.active, #profileTabs.nav-pills #security-tab.active, #profileTabs.nav-pills #calendar-tab.active { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; } .profile-tabs .nav-link.active i, .profile-tabs .nav-link.active svg, .profile-tabs .nav-link.active span, .profile-tabs .nav-link.active:hover i, .profile-tabs .nav-link.active:hover svg, .profile-tabs .nav-link.active:hover span, .profile-tabs .nav-link.active:focus i, .profile-tabs .nav-link.active:focus svg, .profile-tabs .nav-link.active:focus span, .profile-tabs #personal-tab.active i, .profile-tabs #personal-tab.active svg, .profile-tabs #personal-tab.active span, .profile-tabs #security-tab.active i, .profile-tabs #security-tab.active svg, .profile-tabs #security-tab.active span, .profile-tabs #calendar-tab.active i, .profile-tabs #calendar-tab.active svg, .profile-tabs #calendar-tab.active span, #profileTabs .nav-link.active i, #profileTabs .nav-link.active svg, #profileTabs .nav-link.active span, #profileTabs .nav-link.active:hover i, #profileTabs .nav-link.active:hover svg, #profileTabs .nav-link.active:hover span, #profileTabs .nav-link.active:focus i, #profileTabs .nav-link.active:focus svg, #profileTabs .nav-link.active:focus span, #profileTabs #personal-tab.active i, #profileTabs #personal-tab.active svg, #profileTabs #personal-tab.active span, #profileTabs #security-tab.active i, #profileTabs #security-tab.active svg, #profileTabs #security-tab.active span, #profileTabs #calendar-tab.active i, #profileTabs #calendar-tab.active svg, #profileTabs #calendar-tab.active span, #profileTabs.nav-pills .nav-link.active i, #profileTabs.nav-pills .nav-link.active svg, #profileTabs.nav-pills .nav-link.active span, #profileTabs.nav-pills .nav-link.active:hover i, #profileTabs.nav-pills .nav-link.active:hover svg, #profileTabs.nav-pills .nav-link.active:hover span, #profileTabs.nav-pills .nav-link.active:focus i, #profileTabs.nav-pills .nav-link.active:focus svg, #profileTabs.nav-pills .nav-link.active:focus span, #profileTabs.nav-pills #personal-tab.active i, #profileTabs.nav-pills #personal-tab.active svg, #profileTabs.nav-pills #personal-tab.active span, #profileTabs.nav-pills #security-tab.active i, #profileTabs.nav-pills #security-tab.active svg, #profileTabs.nav-pills #security-tab.active span, #profileTabs.nav-pills #calendar-tab.active i, #profileTabs.nav-pills #calendar-tab.active svg, #profileTabs.nav-pills #calendar-tab.active span { color: #ffffff !important; stroke: #ffffff !important; } .profile-tabs .nav-link:not(.active), #profileTabs .nav-link:not(.active), #profileTabs.nav-pills .nav-link:not(.active) { color: #495057 !important; } .profile-tabs .nav-link:not(.active) i, .profile-tabs .nav-link:not(.active) svg, .profile-tabs .nav-link:not(.active) span, #profileTabs .nav-link:not(.active) i, #profileTabs .nav-link:not(.active) svg, #profileTabs .nav-link:not(.active) span, #profileTabs.nav-pills .nav-link:not(.active) i, #profileTabs.nav-pills .nav-link:not(.active) svg, #profileTabs.nav-pills .nav-link:not(.active) span { color: #495057 !important; stroke: #495057 !important; } .profile-tabs .nav-link:not(.active):hover, .profile-tabs .nav-link:not(.active):focus, #profileTabs .nav-link:not(.active):hover, #profileTabs .nav-link:not(.active):focus, #profileTabs.nav-pills .nav-link:not(.active):hover, #profileTabs.nav-pills .nav-link:not(.active):focus { color: var(--primary-hover-color) !important; } .profile-tabs .nav-link:not(.active):hover i, .profile-tabs .nav-link:not(.active):hover svg, .profile-tabs .nav-link:not(.active):hover span, .profile-tabs .nav-link:not(.active):focus i, .profile-tabs .nav-link:not(.active):focus svg, .profile-tabs .nav-link:not(.active):focus span, #profileTabs .nav-link:not(.active):hover i, #profileTabs .nav-link:not(.active):hover svg, #profileTabs .nav-link:not(.active):hover span, #profileTabs .nav-link:not(.active):focus i, #profileTabs .nav-link:not(.active):focus svg, #profileTabs .nav-link:not(.active):focus span, #profileTabs.nav-pills .nav-link:not(.active):hover i, #profileTabs.nav-pills .nav-link:not(.active):hover svg, #profileTabs.nav-pills .nav-link:not(.active):hover span, #profileTabs.nav-pills .nav-link:not(.active):focus i, #profileTabs.nav-pills .nav-link:not(.active):focus svg, #profileTabs.nav-pills .nav-link:not(.active):focus span { color: var(--primary-hover-color) !important; stroke: var(--primary-hover-color) !important; } .profile-tabs .nav-link:hover:not(.active), .profile-tabs .nav-link:focus:not(.active), #profileTabs .nav-link:hover:not(.active), #profileTabs .nav-link:focus:not(.active), #profileTabs.nav-pills .nav-link:hover:not(.active), #profileTabs.nav-pills .nav-link:focus:not(.active) { color: var(--primary-hover-color) !important; } .profile-tabs .nav-link:hover:not(.active) i, .profile-tabs .nav-link:hover:not(.active) svg, .profile-tabs .nav-link:hover:not(.active) span, .profile-tabs .nav-link:focus:not(.active) i, .profile-tabs .nav-link:focus:not(.active) svg, .profile-tabs .nav-link:focus:not(.active) span, #profileTabs .nav-link:hover:not(.active) i, #profileTabs .nav-link:hover:not(.active) svg, #profileTabs .nav-link:hover:not(.active) span, #profileTabs .nav-link:focus:not(.active) i, #profileTabs .nav-link:focus:not(.active) svg, #profileTabs .nav-link:focus:not(.active) span, #profileTabs.nav-pills .nav-link:hover:not(.active) i, #profileTabs.nav-pills .nav-link:hover:not(.active) svg, #profileTabs.nav-pills .nav-link:hover:not(.active) span, #profileTabs.nav-pills .nav-link:focus:not(.active) i, #profileTabs.nav-pills .nav-link:focus:not(.active) svg, #profileTabs.nav-pills .nav-link:focus:not(.active) span { color: var(--primary-hover-color) !important; stroke: var(--primary-hover-color) !important; } #personal-tab.active, #security-tab.active, #calendar-tab.active { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; } .profile-badge i, .profile-badge span { color: var(--primary-color) !important; } .profile-name { color: var(--primary-color) !important; } .calendar-btn-reconnect { border-color: var(--primary-color) !important; color: var(--primary-color) !important; } .calendar-btn-reconnect:hover { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; } /* --- Pagination --- */ .page-item.active .page-link { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .page-item.disabled .page-link { color: var(--primary-color) !important; } .page-link { color: var(--primary-color) !important; } .page-link:hover { color: var(--primary-hover-color) !important; } /* --- DataTables Pagination --- */ .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--primary-light-bg) !important; border-color: var(--primary-color) !important; color: var(--primary-color) !important; } /* --- DataTables Sorting Indicators --- */ table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { background-image: none !important; } table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc:before { color: var(--primary-color) !important; opacity: 0.9 !important; } table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_desc:after { color: var(--primary-color) !important; opacity: 0.9 !important; } /* --- Badges --- */ .badge-primary { background-color: var(--primary-color) !important; } /* --- Universal Nav Tabs & Nav Pills (Lead Followups, Data Rotation, Lead Details, etc.) --- */ .followup-tabs .nav-link.active, .followup-tabs .nav-item.show .nav-link, .alloc-tabs .nav-link.active, .alloc-tabs .nav-item.show .nav-link, .alloc-sub-tabs .nav-link.active, .alloc-sub-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--primary-color) !important; border-bottom-color: var(--primary-color) !important; font-weight: 600; } .followup-tabs .nav-link.active i, .followup-tabs .nav-link.active svg, .followup-tabs .nav-item.show .nav-link i, .followup-tabs .nav-item.show .nav-link svg, .alloc-tabs .nav-link.active i, .alloc-tabs .nav-link.active svg, .alloc-tabs .nav-item.show .nav-link i, .alloc-tabs .nav-item.show .nav-link svg, .alloc-sub-tabs .nav-link.active i, .alloc-sub-tabs .nav-link.active svg, .alloc-sub-tabs .nav-item.show .nav-link i, .alloc-sub-tabs .nav-item.show .nav-link svg, .nav-tabs .nav-link.active i, .nav-tabs .nav-link.active svg, .nav-tabs .nav-item.show .nav-link i, .nav-tabs .nav-item.show .nav-link svg { color: var(--primary-color) !important; stroke: var(--primary-color) !important; } .followup-tabs .nav-link:not(.active), .alloc-tabs .nav-link:not(.active), .alloc-sub-tabs .nav-link:not(.active), .nav-tabs .nav-link:not(.active) { color: #495057 !important; } .followup-tabs .nav-link:not(.active) i, .followup-tabs .nav-link:not(.active) svg, .alloc-tabs .nav-link:not(.active) i, .alloc-tabs .nav-link:not(.active) svg, .alloc-sub-tabs .nav-link:not(.active) i, .alloc-sub-tabs .nav-link:not(.active) svg, .nav-tabs .nav-link:not(.active) i, .nav-tabs .nav-link:not(.active) svg { color: #6c757d !important; stroke: #6c757d !important; } .followup-tabs .nav-link:not(.active):hover, .followup-tabs .nav-link:not(.active):focus, .alloc-tabs .nav-link:not(.active):hover, .alloc-tabs .nav-link:not(.active):focus, .alloc-sub-tabs .nav-link:not(.active):hover, .alloc-sub-tabs .nav-link:not(.active):focus, .nav-tabs .nav-link:not(.active):hover, .nav-tabs .nav-link:not(.active):focus { color: var(--primary-hover-color) !important; border-bottom-color: var(--primary-hover-color) !important; } .followup-tabs .nav-link:not(.active):hover i, .followup-tabs .nav-link:not(.active):hover svg, .followup-tabs .nav-link:not(.active):focus i, .followup-tabs .nav-link:not(.active):focus svg, .alloc-tabs .nav-link:not(.active):hover i, .alloc-tabs .nav-link:not(.active):hover svg, .alloc-tabs .nav-link:not(.active):focus i, .alloc-tabs .nav-link:not(.active):focus svg, .alloc-sub-tabs .nav-link:not(.active):hover i, .alloc-sub-tabs .nav-link:not(.active):hover svg, .alloc-sub-tabs .nav-link:not(.active):focus i, .alloc-sub-tabs .nav-link:not(.active):focus svg, .nav-tabs .nav-link:not(.active):hover i, .nav-tabs .nav-link:not(.active):hover svg, .nav-tabs .nav-link:not(.active):focus i, .nav-tabs .nav-link:not(.active):focus svg { color: var(--primary-hover-color) !important; stroke: var(--primary-hover-color) !important; } .nav-pills .nav-link.active, .show > .nav-pills .nav-link { background-color: var(--primary-color) !important; color: #fff !important; } .nav-pills .nav-link:not(.active):hover { color: var(--primary-hover-color) !important; } .settings-nav-pills .nav-link.tabText:not(.active) { color: #78828a !important; font-weight: 500; } .settings-nav-pills .nav-link.tabText:not(.active) i, .settings-nav-pills .nav-link.tabText:not(.active) svg { color: #78828a !important; } .settings-nav-pills .nav-link.tabText:not(.active):hover { color: var(--primary-color) !important; background-color: rgba(0, 0, 0, 0.04) !important; } .settings-nav-pills .nav-link.tabText:not(.active):hover i, .settings-nav-pills .nav-link.tabText:not(.active):hover svg { color: var(--primary-color) !important; } .settings-nav-pills .nav-link.tabText.active { background-color: var(--primary-color) !important; color: #ffffff !important; font-weight: 600; } .settings-nav-pills .nav-link.tabText.active i, .settings-nav-pills .nav-link.tabText.active svg { color: #ffffff !important; } /* --- Form Controls --- */ .form-control:focus, .custom-select:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important; } /* --- Custom Checkboxes & Radios --- */ .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important; } /* --- Select2 Full Dynamic Theme Integration --- */ .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--multiple:focus, .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple { border-color: #e4e6fc !important; box-shadow: none !important; outline: none !important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected=true], .select2-container--default .select2-results__option--highlighted, .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option--selected { background-color: var(--primary-color) !important; color: #ffffff !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove { color: #ffffff !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover { color: #ffffff !important; } .custom-select:focus, select:focus { border-color: #e4e6fc !important; box-shadow: none !important; outline: none !important; } /* --- File Upload "Choose" Option Buttons (Dynamic Primary Color Palette) --- */ .image__file-upload, .custom-file-label::after, .btn-file { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #ffffff !important; font-weight: 600; font-size: 12px !important; padding: 5px 7px !important; transition: all 0.2s ease; } .image__file-upload:hover, .image__file-upload:focus, .image__file-upload:active, .custom-file-label::after:hover, .custom-file-label::after:focus, .custom-file-label::after:active, .btn-file:hover, .btn-file:focus, .btn-file:active { background-color: var(--primary-hover-color) !important; border-color: var(--primary-hover-color) !important; color: #ffffff !important; } .image__file-upload i, .image__file-upload svg, .custom-file-label::after i, .custom-file-label::after svg, .btn-file i, .btn-file svg { color: #ffffff !important; stroke: #ffffff !important; } /* --- Media Preview Attachment Action Icons (Datatable Action Icons without hover) --- */ .attachments-view, .kyc-remove-attachment, .remove-attachment { display: inline-block; vertical-align: middle; } .attachments-view.text-info, .attachments-view.text-primary, .attachments-view:not(.text-danger), .kyc-remove-attachment.text-info, .kyc-remove-attachment.text-primary, .kyc-remove-attachment:not(.text-danger), .remove-attachment.text-info, .remove-attachment.text-primary, .remove-attachment:not(.text-danger) { color: #17a2b8 !important; } .attachments-view.text-info i, .attachments-view.text-info svg, .attachments-view.text-info path, .attachments-view.text-primary i, .attachments-view.text-primary svg, .attachments-view.text-primary path, .attachments-view:not(.text-danger) i, .attachments-view:not(.text-danger) svg, .attachments-view:not(.text-danger) path, .kyc-remove-attachment.text-info i, .kyc-remove-attachment.text-info svg, .kyc-remove-attachment.text-info path, .kyc-remove-attachment.text-primary i, .kyc-remove-attachment.text-primary svg, .kyc-remove-attachment.text-primary path, .kyc-remove-attachment:not(.text-danger) i, .kyc-remove-attachment:not(.text-danger) svg, .kyc-remove-attachment:not(.text-danger) path, .remove-attachment.text-info i, .remove-attachment.text-info svg, .remove-attachment.text-info path, .remove-attachment.text-primary i, .remove-attachment.text-primary svg, .remove-attachment.text-primary path, .remove-attachment:not(.text-danger) i, .remove-attachment:not(.text-danger) svg, .remove-attachment:not(.text-danger) path { color: #17a2b8 !important; stroke: #17a2b8 !important; } .attachments-view.text-danger, .kyc-remove-attachment.text-danger, .remove-attachment.text-danger { color: #dc3545 !important; } .attachments-view.text-danger i, .attachments-view.text-danger svg, .attachments-view.text-danger path, .kyc-remove-attachment.text-danger i, .kyc-remove-attachment.text-danger svg, .kyc-remove-attachment.text-danger path, .remove-attachment.text-danger i, .remove-attachment.text-danger svg, .remove-attachment.text-danger path { color: #dc3545 !important; stroke: #dc3545 !important; } .custom-file-input:focus ~ .custom-file-label { border-color: #e4e6fc !important; box-shadow: none !important; } /* --- Dropdowns --- */ .dropdown-item.active, .dropdown-item:active { background-color: var(--primary-color) !important; } /* --- Cards & Auth Pages --- */ .card.card-primary { border-top: 3px solid var(--primary-color) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important; } .form-control:focus, .custom-select:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 0.2rem var(--primary-focus-shadow) !important; } /* --- Sidebar Search Box --- */ .sidebar-search-box .input-group-text { color: var(--primary-color) !important; } /* --- Wizard Steps & Progress --- */ .wizard-steps .wizard-step.wizard-step-active .wizard-step-icon { background-color: var(--primary-color) !important; color: #fff !important; } /* --- iziToast Links --- */ .iziToast a { color: var(--primary-color) !important; } /* --- Sweetalert Confirm Button --- */ .swal-button--confirm { background-color: var(--primary-color) !important; } .swal-button--confirm:hover { background-color: var(--primary-hover-color) !important; } /* --- Loading Spinner --- */ .infy-loader .spinner-border { color: var(--primary-color) !important; } /* --- Custom Scrollbar Thumb (Sidebar) --- */ .main-sidebar::-webkit-scrollbar-thumb { background-color: var(--primary-color) !important; }