ni
nightfox
#1
Hello CyberPanel Community,
I’ve developed a modern CSS theme for CyberPanel 2.4 to replace the default interface, which many find a bit outdated and visually tiring.
This theme focuses purely on the appearance — it doesn’t alter any functionality, but it completely refreshes the look with a cleaner, more readable, and modern design.
Features:
- Lightweight and minimalist design
- Modern and eye-friendly color palette
- Fully compatible with CyberPanel 2.4
- Easy installation (just add the CSS file)
Purpose:
This is the first release (v1.0) of the theme.
My initial goal was to quickly eliminate the eye strain caused by the default 2.4 layout.
In the future, I might integrate JavaScript libraries to evolve this into a more dynamic, interactive theme.
Contribute & Feedback:
I’d love to hear your thoughts, suggestions, or color scheme ideas.
This theme is an open, community-driven project, and I plan to improve it with your feedback.
Note:
If you encounter a 500 Internal Server Error while adding the CSS code under the Design section, try minifying the CSS before saving.
I’ve already included the minified version of the theme below for that reason.
Screenshot:
Changelog:
v1.0.1: Updated login page.
V1.0.2: Bugfixes
Download and try it out:
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);.info-text{display:none}.logo .brand{visibility:hidden;position:relative}.logo .brand::after{content:"Altelca Panel";visibility:visible;position:absolute;left:0;top:0;font-weight:700;font-size:18px}:root{--primary-color:#2563eb;--primary-hover:#1d4ed8;--primary-light:#3b82f6;--primary-ultra-light:#dbeafe;--bg-primary:#f8fafc!important;--bg-secondary:#ffffff;--bg-sidebar:#f1f5f9;--bg-hover:#e0f2fe;--bg-active:#bae6fd;--text-primary:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--text-white:#ffffff;--border-color:#e2e8f0;--border-light:#f1f5f9;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px rgba(0,0,0,0.07);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px rgba(0,0,0,0.1);--success-color:#16a34a;--success-light:#dcfce7;--warning-color:#ea580c;--warning-light:#ffedd5;--danger-color:#dc2626;--danger-light:#fee2e2;--info-color:#0891b2;--info-light:#cffafe;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important;background:var(--bg-primary)!important;color:var(--text-primary)!important;line-height:1.6;font-size:15px;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#header{background:#252b36!important;height:70px!important;display:flex!important;align-items:center!important;padding:0 25px!important;box-shadow:var(--shadow-sm)!important;border-bottom:1px solid var(--border-light)!important;position:fixed!important;top:0!important;left:260px!important;right:0!important;z-index:1000!important;transition:var(--transition)!important}#header .logo{display:none!important;align-items:center!important;gap:12px!important}#header .logo-icon{width:45px!important;height:45px!important;border-radius:var(--radius-md)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:var(--primary-ultra-light)!important;border:2px solid var(--primary-color)!important}#header .logo-icon img{width:100%!important;height:100%!important;object-fit:contain!important}#header .logo-text .brand{font-size:22px!important;font-weight:700!important;color:var(--text-primary)!important;letter-spacing:-0.5px!important}#header .logo-text .tagline{font-size:13px!important;color:var(--text-secondary)!important;font-weight:400!important}#header-right{margin-left:auto!important;display:flex!important;align-items:center!important;gap:20px!important}#header-right .info-text{color:var(--text-secondary)!important;font-size:13px!important;font-weight:500!important}#header-right .social-links{display:flex!important;gap:10px!important}#header-right .social-links a{width:38px!important;height:38px!important;border-radius:var(--radius-md)!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--bg-primary)!important;color:var(--text-secondary)!important;text-decoration:none!important;transition:var(--transition)!important;border:1px solid var(--border-color)!important}#header-right .social-links a:hover{background:var(--primary-color)!important;color:var(--text-white)!important;border-color:var(--primary-color)!important;transform:translateY(-2px)!important;box-shadow:var(--shadow-md)!important}#header-right .logout-btn{background:var(--bg-primary)!important;color:var(--primary-color)!important;border:1px solid var(--border-color)!important;padding:9px 20px!important;border-radius:var(--radius-md)!important;font-weight:600!important;cursor:pointer!important;transition:var(--transition)!important;font-size:14px!important}#header-right .logout-btn:hover{background:var(--primary-color)!important;color:var(--text-white)!important;border-color:var(--primary-color)!important;box-shadow:var(--shadow-md)!important;transform:translateY(-1px)!important}.theme-toggle{width:38px!important;height:38px!important;border-radius:var(--radius-md)!important;display:none!important;align-items:center!important;justify-content:center!important;background:var(--bg-primary)!important;color:var(--text-secondary)!important;border:1px solid var(--border-color)!important;cursor:pointer!important;transition:var(--transition)!important}.theme-toggle:hover{background:var(--primary-color)!important;color:var(--text-white)!important;border-color:var(--primary-color)!important;transform:translateY(-2px)!important;box-shadow:var(--shadow-md)!important}#sidebar{width:260px!important;background:#252b36!important;height:100vh!important;position:fixed!important;left:0!important;top:0!important;overflow-y:auto!important;z-index:1001!important;border-right:1px solid var(--border-light)!important;transition:var(--transition)!important}#sidebar::-webkit-scrollbar{width:6px!important}#sidebar::-webkit-scrollbar-track{background:transparent!important}#sidebar::-webkit-scrollbar-thumb{background:#6b7280!important;border-radius:10px!important}#sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-muted)!important}.sidebar-logo{padding:18px!important;background:#252b36!important;margin-left:15px!important;margin-top:5px;border-radius:var(--radius-md)!important;box-shadow:var(--shadow-sm)!important;display:flex!important;align-items:center!important;gap:12px!important}.sidebar-logo .logo-icon{width:38px!important;height:38px!important;border-radius:var(--radius-sm)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:var(--primary-ultra-light)!important;border:2px solid var(--primary-color)!important}.sidebar-logo .logo-text .brand{font-size:15px!important;font-weight:700!important;color:var(--text-primary)!important;position:relative;color:#fff!important}.sidebar-logo .logo-text .tagline{font-size:11px!important;color:var(--text-secondary)!important}#sidebar .server-info{padding:14px!important;background:var(--bg-secondary)!important;margin:12px!important;border-radius:var(--radius-md)!important;box-shadow:var(--shadow-sm)!important;display:flex!important;align-items:center!important;gap:12px!important;border:1px solid var(--border-light)!important}#sidebar .server-info .server-icon{width:38px!important;height:38px!important;background:var(--primary-ultra-light)!important;border-radius:var(--radius-sm)!important;align-items:center!important;justify-content:center!important;color:var(--primary-color)!important;font-size:16px!important}#sidebar .server-info .info-line{font-size:12px!important;color:var(--text-secondary)!important}#sidebar .server-info .info-line strong{color:var(--text-primary)!important;font-weight:600!important}#sidebar .server-info .ip-value{color:var(--primary-color)!important;font-weight:600!important;cursor:pointer!important}#sidebar .server-info .ip-value:hover{color:var(--primary-hover)!important;text-decoration:underline!important}#sidebar .section-header{background:transparent!important;color:var(--text-muted)!important;padding:8px 14px!important;margin:20px 12px 4px 12px!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:1.2px!important;font-weight:700!important;border-radius:0!important;text-align:left!important}#sidebar .menu-item{display:flex!important;align-items:center!important;padding:10px 14px!important;color:rgb(255 255 255 / .85)!important;text-decoration:none!important;transition:var(--transition)!important;gap:12px!important;font-size:14px!important;font-weight:500!important;border-radius:var(--radius-sm)!important;margin:4px 12px!important;background:transparent!important;border:none!important}#sidebar .menu-item:hover{background:rgb(255 255 255 / .1)!important;color:rgb(255 255 255)!important;transform:none!important;box-shadow:none!important;border-radius:var(--radius-sm)!important}#sidebar .menu-item.active{background:rgb(255 255 255 / .15)!important;color:#fff!important;border:none!important;box-shadow:none!important;font-weight:600!important;border-radius:var(--radius-sm)!important}#sidebar .menu-item .icon-wrapper{width:24px!important;height:24px!important;background:transparent!important;border-radius:0!important;display:flex!important;align-items:center!important;justify-content:center!important}#sidebar .menu-item:hover .icon-wrapper{background:transparent!important}#sidebar .menu-item.active .icon-wrapper{background:transparent!important}#sidebar .menu-item i{font-size:16px!important;color:rgb(255 255 255 / .7)!important}#sidebar .menu-item:hover i{color:#fff!important}#sidebar .menu-item.active i{color:#fff!important}#sidebar .menu-item .badge{background:var(--warning-color)!important;color:var(--text-white)!important;font-size:10px!important;padding:3px 7px!important;border-radius:var(--radius-sm)!important;font-weight:700!important}#sidebar .menu-item .chevron{margin-left:auto!important;font-size:12px!important;transition:var(--transition)!important;color:var(--text-muted)!important}#sidebar .menu-item[aria-expanded="true"] .chevron{transform:rotate(90deg)!important}#sidebar .menu-item:hover .chevron{color:#fff!important}#sidebar .submenu,#sidebar .collapse,#sidebar .accordion-body,.sidebar-submenu{padding:6px 0!important;margin:4px 12px 8px 19px!important;border-radius:var(--radius-sm)!important}#sidebar .submenu .menu-item,#sidebar .collapse .menu-item,#sidebar .accordion-body .menu-item,.sidebar-submenu .menu-item,#sidebar .submenu a,#sidebar .collapse a,#sidebar .accordion-body a,.sidebar-submenu a{padding:8px 12px 8px 36px!important;margin:6px 9px!important;font-size:13px!important;color:rgb(255 255 255 / .85)!important;background:transparent!important;border-radius:var(--radius-sm)!important}#sidebar .submenu .menu-item:hover,#sidebar .collapse .menu-item:hover,#sidebar .accordion-body .menu-item:hover,.sidebar-submenu .menu-item:hover,#sidebar .submenu a:hover,#sidebar .collapse a:hover,#sidebar .accordion-body a:hover,.sidebar-submenu a:hover{background:rgb(255 255 255 / .1)!important;color:rgb(255 255 255)!important;padding-left:40px!important;transition:all 0.2s ease!important}#sidebar .submenu .menu-item.active,#sidebar .collapse .menu-item.active,#sidebar .accordion-body .menu-item.active,.sidebar-submenu .menu-item.active,#sidebar .submenu a.active,#sidebar .collapse a.active,#sidebar .accordion-body a.active,.sidebar-submenu a.active{background:rgb(255 255 255 / .3)!important;color:rgb(255 255 255)!important;font-weight:600!important;padding-left:37px!important}#sidebar .submenu .menu-item .icon-wrapper,#sidebar .collapse .menu-item .icon-wrapper,#sidebar .accordion-body .menu-item .icon-wrapper,.sidebar-submenu .menu-item .icon-wrapper{display:none!important}#sidebar .menu-item[aria-expanded="true"]{background:var(--bg-primary)!important;color:var(--primary-color)!important}#sidebar .menu-item[aria-expanded="true"] i{color:var(--primary-color)!important}#main-content{margin-left:260px!important;margin-top:70px!important;padding:25px!important;min-height:calc(100vh - 70px)!important;background:#f1f4f9!important}.page-header{margin-bottom:25px!important}.page-header h1,.page-header h2{font-size:28px!important;font-weight:700!important;color:var(--text-primary)!important;margin-bottom:8px!important;letter-spacing:-0.5px!important}.page-header p{color:var(--text-secondary)!important;font-size:15px!important}.overview-section{background:var(--bg-secondary)!important;padding:25px!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;margin-bottom:25px!important;border:1px solid var(--border-light)!important}.overview-section h2{font-size:18px!important;font-weight:700!important;color:var(--text-primary)!important;margin-bottom:20px!important;padding-bottom:12px!important;border-bottom:2px solid var(--border-light)!important}.stats-row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:20px!important}.stat-card{background:var(--bg-secondary)!important;padding:20px!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;border:1px solid var(--border-light)!important;transition:var(--transition)!important}.stat-card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-md)!important;border-color:var(--primary-light)!important}.stat-card h3{font-size:13px!important;color:var(--text-secondary)!important;text-transform:uppercase!important;letter-spacing:0.5px!important;font-weight:600!important;margin-bottom:8px!important}.stat-card .stat-value{font-size:14px!important;color:var(--text-primary)!important;font-weight:500!important;margin-top:8px!important}.progress-bar{height:100%;border-radius:4px;transition:width 0.3s ease;background:rgb(38 166 154 / .7)!important}.stat-card .progress-bar-fill{height:100%!important;background:linear-gradient(90deg,var(--primary-color),var(--primary-light))!important;border-radius:10px!important;transition:width 0.6s ease!important}.stat-card .percentage{font-size:11px!important;color:var(--text-muted)!important;float:right!important;margin-top:4px!important}.insights-section{background:var(--bg-secondary)!important;padding:25px!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;margin-bottom:25px!important;border:1px solid var(--border-light)!important}.insights-section h2{font-size:18px!important;font-weight:700!important;color:var(--text-primary)!important;margin-bottom:20px!important;padding-bottom:12px!important;border-bottom:2px solid var(--border-light)!important}.insights-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;gap:16px!important}.insight-card{background:#f8fafc!important;padding:20px!important;border-radius:var(--radius-md)!important;text-align:center!important;border:1px solid #f1f5f9!important;transition:var(--transition)!important}.insight-card:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-md)!important;border-color:var(--primary-light)!important;background:var(--bg-secondary)!important}.insight-card .icon{width:50px!important;height:50px!important;background:var(--primary-ultra-light)!important;border-radius:var(--radius-md)!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto 15px!important;color:var(--primary-color)!important;font-size:24px!important}.insight-card .count{font-size:32px!important;font-weight:700!important;color:var(--text-primary)!important;margin-bottom:5px!important}.insight-card .label{font-size:13px!important;color:var(--text-secondary)!important;font-weight:500!important}.insight-icon{background:#8e70c1!important}.activity-section{background:var(--bg-secondary)!important;padding:25px!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;border:1px solid var(--border-light)!important}.activity-section h2{font-size:18px!important;font-weight:700!important;color:var(--text-primary)!important;margin-bottom:20px!important;padding-bottom:12px!important;border-bottom:2px solid var(--border-light)!important}.activity-tabs{display:flex!important;gap:10px!important;margin-bottom:20px!important;border-bottom:2px solid var(--border-light)!important;padding-bottom:2px!important}.activity-tab{padding:10px 20px!important;background:transparent!important;border:none!important;color:var(--text-secondary)!important;font-weight:500!important;font-size:14px!important;cursor:pointer!important;transition:var(--transition)!important;border-radius:var(--radius-sm) var(--radius-sm) 0 0!important;position:relative!important}.activity-tab:hover{color:var(--primary-color)!important;background:var(--bg-hover)!important}.activity-tab.active{color:var(--primary-color)!important;font-weight:600!important}.activity-tab.active::after{content:''!important;position:absolute!important;bottom:-2px!important;left:0!important;right:0!important;height:2px!important;background:var(--primary-color)!important}.activity-table{width:100%!important;border-collapse:collapse!important}.activity-table thead{background:var(--bg-primary)!important}.activity-table th{padding:14px 16px!important;text-align:left!important;font-size:12px!important;font-weight:600!important;color:var(--text-secondary)!important;text-transform:uppercase!important;letter-spacing:0.5px!important;border-bottom:2px solid var(--border-color)!important}.activity-table td{padding:14px 16px!important;font-size:14px!important;color:var(--text-primary)!important;border-bottom:1px solid var(--border-light)!important}.activity-table tbody tr{transition:var(--transition)!important}.activity-table tbody tr:hover{background:var(--bg-hover)!important}.activity-table tbody tr:last-child td{border-bottom:none!important}.btn-view{padding:6px 14px!important;background:var(--primary-ultra-light)!important;color:var(--primary-color)!important;border:1px solid var(--primary-light)!important;border-radius:var(--radius-sm)!important;font-size:13px!important;font-weight:600!important;cursor:pointer!important;transition:var(--transition)!important;text-decoration:none!important}.btn-view:hover{background:var(--primary-color)!important;color:var(--text-white)!important;transform:translateY(-1px)!important;box-shadow:var(--shadow-sm)!important}.btn-primary{background:var(--primary-color)!important;color:var(--text-white)!important;border:none!important;padding:11px 24px!important;border-radius:var(--radius-md)!important;font-weight:600!important;font-size:14px!important;cursor:pointer!important;transition:var(--transition)!important}.btn-primary:hover{background:var(--primary-hover)!important;transform:translateY(-2px)!important;box-shadow:var(--shadow-md)!important}.btn-secondary{background:var(--bg-primary)!important;color:var(--text-primary)!important;border:1px solid var(--border-color)!important;padding:11px 24px!important;border-radius:var(--radius-md)!important;font-weight:600!important;font-size:14px!important;cursor:pointer!important;transition:var(--transition)!important}.btn-secondary:hover{background:var(--bg-secondary)!important;border-color:var(--primary-color)!important;color:var(--primary-color)!important;transform:translateY(-2px)!important;box-shadow:var(--shadow-sm)!important}.btn-success{background:var(--success-color)!important;color:var(--text-white)!important;border:none!important;padding:11px 24px!important;border-radius:var(--radius-md)!important;font-weight:600!important;cursor:pointer!important}.btn-danger{background:var(--danger-color)!important;color:var(--text-white)!important;border:none!important;padding:11px 24px!important;border-radius:var(--radius-md)!important;font-weight:600!important;cursor:pointer!important}.form-group{margin-bottom:20px!important}.form-label{display:block!important;font-size:14px!important;font-weight:600!important;color:var(--text-primary)!important;margin-bottom:8px!important}.form-control,input[type="text"],input[type="email"],input[type="password"],input[type="number"],textarea,select{width:100%!important;padding:11px 14px!important;border:1px solid var(--border-color)!important;border-radius:var(--radius-md)!important;font-size:14px!important;color:var(--text-primary)!important;background:var(--bg-secondary)!important;transition:var(--transition)!important}.form-control:focus,input:focus,textarea:focus,select:focus{outline:none!important;border-color:var(--primary-color)!important;box-shadow:0 0 0 3px var(--primary-ultra-light)!important}.card{background:var(--bg-secondary)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;border:1px solid var(--border-light)!important;overflow:hidden!important;transition:var(--transition)!important}.card:hover{box-shadow:var(--shadow-md)!important}.card-header{padding:18px 22px!important;background:var(--bg-primary)!important;border-bottom:1px solid var(--border-light)!important;font-weight:600!important;font-size:16px!important;color:var(--text-primary)!important}.card-body{padding:22px!important}.card-footer{padding:18px 22px!important;background:var(--bg-primary)!important;border-top:1px solid var(--border-light)!important}.alert{padding:14px 18px!important;border-radius:var(--radius-md)!important;margin-bottom:20px!important;border-left:4px solid!important;font-size:14px!important}.alert-success{background:var(--success-light)!important;color:var(--success-color)!important;border-left-color:var(--success-color)!important}.alert-warning{background:var(--warning-light)!important;color:var(--warning-color)!important;border-left-color:var(--warning-color)!important}.alert-danger{background:var(--danger-light)!important;color:var(--danger-color)!important;border-left-color:var(--danger-color)!important}.alert-info{background:var(--info-light)!important;color:var(--info-color)!important;border-left-color:var(--info-color)!important}.badge{display:inline-block!important;padding:4px 10px!important;border-radius:var(--radius-sm)!important;font-size:12px!important;font-weight:600!important}.badge-primary{background:var(--primary-ultra-light)!important;color:var(--primary-color)!important}.badge-success{background:var(--success-light)!important;color:var(--success-color)!important}.badge-warning{background:var(--warning-light)!important;color:var(--warning-color)!important}.badge-danger{background:var(--danger-light)!important;color:var(--danger-color)!important}.tooltip-wrapper{position:relative!important;display:inline-block!important}.tooltip-text{visibility:hidden!important;background:var(--text-primary)!important;color:var(--text-white)!important;text-align:center!important;padding:6px 12px!important;border-radius:var(--radius-sm)!important;position:absolute!important;z-index:9999!important;bottom:125%!important;left:50%!important;transform:translateX(-50%)!important;font-size:12px!important;white-space:nowrap!important;opacity:0!important;transition:opacity 0.3s!important}.tooltip-wrapper:hover .tooltip-text{visibility:visible!important;opacity:1!important}@media (max-width:1024px){#sidebar{transform:translateX(-100%)!important}#sidebar.active{transform:translateX(0)!important}#header{left:0!important}#main-content{margin-left:0!important}.stats-row,.insights-grid{grid-template-columns:1fr!important}}@media (max-width:768px){#header{padding:0 15px!important;height:60px!important}#main-content{padding:15px!important;margin-top:60px!important}.overview-section,.insights-section,.activity-section{padding:18px!important}.activity-table{font-size:13px!important}.activity-table th,.activity-table td{padding:10px 8px!important}}.mt-1{margin-top:0.5rem!important}.mt-2{margin-top:1rem!important}.mt-3{margin-top:1.5rem!important}.mt-4{margin-top:2rem!important}.mb-1{margin-bottom:0.5rem!important}.mb-2{margin-bottom:1rem!important}.mb-3{margin-bottom:1.5rem!important}.mb-4{margin-bottom:2rem!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-grid{display:grid!important}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn 0.4s ease!important}@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.slide-in{animation:slideIn 0.4s ease!important}::-webkit-scrollbar{width:10px!important;height:10px!important}::-webkit-scrollbar-track{background:var(--bg-primary)!important}::-webkit-scrollbar-thumb{background:var(--border-color)!important;border-radius:10px!important}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)!important}::selection{background:var(--primary-ultra-light)!important;color:var(--primary-color)!important}::-moz-selection{background:var(--primary-ultra-light)!important;color:var(--primary-color)!important}[style*="background: #5856d6"],[style*="background:#5856d6"],[style*="background-color: #5856d6"],[style*="background-color:#5856d6"],.bg-purple,.bg-violet{background:var(--primary-color)!important}[style*="color: #5856d6"],[style*="color:#5856d6"],.text-purple,.text-violet{color:var(--primary-color)!important}[style*="border-color: #5856d6"],[style*="border-color:#5856d6"]{border-color:var(--primary-color)!important}.info-text{display:none!important}.logo .brand{visibility:hidden!important;position:relative!important}.logo .brand::after{content:"Altelca Panel"!important;visibility:visible!important;position:absolute!important;left:0!important;top:0!important;font-weight:700!important;font-size:18px!important}#header-right .social-links{display:none!important}#sidebar .server-info{display:none!important}.website-details{background:#f9f9f9!important}select.form-control.form-select.ng-pristine.ng-valid.ng-not-empty.ng-touched{max-width:150px}select.form-control.pagination-select.ng-pristine.ng-valid.ng-not-empty.ng-touched{max-width:150px}.info-box{background:#e0f2fe!important;border:1px solid #e0f2fe!important}.progress-bar-container{width:100%;height:8px;background:var(#e2e8f0,#e8e9ff);border-radius:4px;overflow:hidden}.view-activity-btn{background:#F3F4F6;border:1px solid var(--border-color,#e8e9ff);color:#1F2937;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease}.activity-table tbody tr:hover{background:#f1f3f5!important}.activity-table th{background:#fff;color:#242e3c!important}.activity-table td{padding:14px 16px!important;font-size:13px!important;color:#1f2937!important;border-bottom:1px solid var(--border-light)!important}body:has(.col-login),body:has(.login-changelogs){background:#0b1220!important;background-image:url(/path/bg.jpg);background-size:cover;background-attachment:fixed}body:has(.col-login) h2.text-transform-upr.text-white.my-30.text-bold,body:has(.col-login) h4.text-white,body:has(.col-login) a.login-changelogs,body:has(.col-login) .col-md-6.col-sm-12.hidden-md.col-login.col-login-left{display:none!important}body:has(.col-login) .col-md-6.col-login{width:100%!important;flex:0 0 100%!important;max-width:100%!important}body:has(.col-login) .col-md-6.col-sm-12.col-login.col-login-right.ng-scope{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);min-height:100vh;justify-content:center;padding:20px}body:has(.col-login) .content-box-wrapper.panel-body.my-10.mx-30{max-width:450px}body:has(.col-login) span.input-group-addon.bg-blue{display:none}body:has(.col-login) .content-box-wrapper .panel-body .my-10 .mx-30{width:100%;margin:0 auto}body:has(.col-login) form#loginForm{background:#fff;border:1px solid #e1e5e9;border-radius:12px;padding:40px;box-shadow:0 10px 25px rgb(0 0 0 / .1),0 20px 48px rgb(0 0 0 / .1);position:relative;transition:all 0.3s ease;width:500px;margin:0 auto}button.btn.btn-success.btn-block.btn-login{padding:0px!important}.content-card{background:rgb(255 255 255 / .9)!important;border-radius:calc(0.375rem - (1px)) calc(0.375rem - (1px)) 0 0;border-top-left-radius:calc(-1px + 0.375rem);border-top-right-radius:calc(-1px + 0.375rem);border-bottom-right-radius:0px!important;border-bottom-left-radius:0px!important}