/* --- ANIMASI LOGIN PAGE (Updated) --- */ .login-body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 15s ease infinite; /* Centering Magic */ min-height: 100vh; display: flex; align-items: center; /* Tengah Vertikal */ justify-content: center; /* Tengah Horizontal */ margin: 0; padding: 20px; /* Jarak aman biar gak nempel tepi layar HP */ } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .login-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 16px; /* Lebih membulat dikit */ border: 1px solid rgba(255, 255, 255, 0.5); /* Ukuran Pas (Gak Kegedean) */ width: 100%; /* Di HP dia full width */ max-width: 400px; /* Di Laptop mentok segini (Ukuran ideal) */ /* Shadow Soft */ box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* 3D Props */ transform-style: preserve-3d; transform: perspective(1000px); } /* Khusus Register boleh lebih lebar dikit biar muat 2 kolom */ .register-card { max-width: 450px; } /* --- 1. GLOBAL SETTINGS (Color Logic) --- */ body { font-family: 'Poppins', sans-serif; transition: background 0.5s ease, color 0.5s ease; overflow-x: hidden; /* Hilangkan scroll samping */ } /* When navbar is fixed, add top padding so page content is not hidden underneath it. We add the class `has-fixed-navbar` to only when the navbar is included. */ .has-fixed-navbar { padding-top: 70px; /* default for small devices */ } @media (min-width: 768px) { .has-fixed-navbar { padding-top: 56px; } } /* DEFAULT (MODE MALAM) */ body { color: #fff; /* Default teks putih */ } /* MODE SIANG */ body.day-mode { color: #333; /* Default teks hitam */ } /* --- 2. BACKGROUND UTAMA (Langit) --- */ .page-bg { min-height: 100vh; width: 100%; position: fixed; /* Supaya background diam di belakang */ top: 0; left: 0; z-index: -1; /* Di belakang konten */ background: linear-gradient(180deg,#001b33 0%, #00264d 40%, #003366 100%); transition: background 1s ease; } .page-bg::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15), transparent 25%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1), transparent 25%); pointer-events:none; } /* Background Mode Siang */ body.day-mode .page-bg { background: linear-gradient(180deg,#bfe8ff 0%, #e9f7ff 40%, #ffffff 100%); } body.day-mode .page-bg::before { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4), transparent 40%); } /* --- 3. ELEMEN DEKORASI (Bintang & Awan) --- */ .page-stars .star { position:absolute; width:3px; height:3px; border-radius:50%; background: rgba(255,255,255,0.95); box-shadow:0 0 8px rgba(255,255,255,0.7); transition: opacity 1s; } .comet { position: absolute; top: -50px; left: -200px; width: 4px; height: 4px; background: white; border-radius: 50%; box-shadow: 0 0 10px white, 0 0 20px white; opacity: 0; transform: rotate(45deg); z-index: -1; } /* Sembunyikan Bintang saat Siang */ body.day-mode .page-stars .star, body.day-mode .comet { opacity: 0 !important; } /* Awan (Muncul saat Siang) */ .cloud-layer { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:-1; } .cloud { position:absolute; background: white; border-radius: 50px; filter: blur(2px); opacity: .9; } /* Animasi */ @keyframes cometFly { 0% { opacity: 0; transform: translate(-100px, -100px) scale(0.6) rotate(45deg); } 5% { opacity: 1; } 40% { transform: translate(800px, 600px) scale(1.2) rotate(45deg); opacity: 1; } 60% { opacity: 0; } 100% { transform: translate(900px, 700px) scale(1.2) rotate(45deg); } } @keyframes cloudMove { from { transform: translateX(-200px); } to { transform: translateX(140vw); } } /* --- 4. NAVBAR GLASS EFFECT --- */ .navbar { background: rgba(0, 27, 51, 0.8) !important; /* Biru gelap transparan */ backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.1); transition: background 0.5s ease; } body.day-mode .navbar { background: rgba(255, 255, 255, 0.8) !important; /* Putih transparan saat siang */ border-bottom: 1px solid rgba(0,0,0,0.05); } body.day-mode .navbar-brand, body.day-mode .nav-link { color: #333 !important; /* Menu jadi hitam saat siang */ } /* --- 5. COMPONENT OVERRIDES (Card & Input) --- */ .card { background: rgba(255, 255, 255, 0.1); /* Glass effect default */ border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; backdrop-filter: blur(5px); } body.day-mode .card { background: #fff; color: #333; border: 1px solid rgba(0,0,0,0.1); } /* Form Input Fix */ .form-control, .form-select { /* Default (dark) form look: subtle translucent dark background */ background-color: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; } /* Day mode overrides for forms */ body.day-mode .form-control, body.day-mode .form-select { background-color: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0,0,0,0.08); color: #333; } /* Ensure muted and helper text is readable in both modes */ .text-muted { color: rgba(255,255,255,0.72) !important; } body.day-mode .text-muted { color: rgba(0,0,0,0.6) !important; } /* Navbar/link visibility */ .navbar .nav-link, .navbar .navbar-brand, .nav-link { color: rgba(255,255,255,0.95) !important; } body.day-mode .navbar .nav-link, body.day-mode .navbar .navbar-brand, body.day-mode .nav-link { color: #333 !important; } /* Badges readable */ .badge { color: #fff !important; } body.day-mode .badge { color: #000 !important; } /* Tables and small text inside cards */ .card small, .card .small, .table th { color: rgba(255,255,255,0.9) !important; } body.day-mode .card small, body.day-mode .card .small, body.day-mode .table th { color: rgba(0,0,0,0.85) !important; } /* --- Dark mode fixes for elements that explicitly use white backgrounds --- */ body:not(.day-mode) .bg-white, body:not(.day-mode) .bg-light, body:not(.day-mode) .card.bg-white, body:not(.day-mode) .card.bg-light { /* Turn explicit white backgrounds into subtle dark surfaces */ background-color: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; color: #fff !important; } /* If elements inside still force dark text, override to readable light in dark mode */ body:not(.day-mode) .bg-white .text-dark, body:not(.day-mode) .bg-light .text-dark, body:not(.day-mode) .card.bg-white .text-dark, body:not(.day-mode) .card.bg-light .text-dark { color: rgba(255,255,255,0.95) !important; } /* Ensure links and buttons on converted surfaces are readable */ body:not(.day-mode) .bg-white a, body:not(.day-mode) .bg-light a, body:not(.day-mode) .card.bg-white a, body:not(.day-mode) .card.bg-light a, body:not(.day-mode) .bg-white .btn, body:not(.day-mode) .bg-light .btn { color: #fff !important; } /* Buttons with light backgrounds should invert in dark mode */ body:not(.day-mode) .btn.btn-light { background-color: rgba(255,255,255,0.06) !important; color: #fff !important; border-color: rgba(255,255,255,0.06) !important; } /* Finally, elements that explicitly set white text on light backgrounds will now be visible because the background is darkened */ /* Broad dark-mode surface conversions for remaining components */ body:not(.day-mode) .card, body:not(.day-mode) .card-body, body:not(.day-mode) .list-group-item, body:not(.day-mode) .alert, body:not(.day-mode) .dropdown-menu, body:not(.day-mode) .modal-content, body:not(.day-mode) .toast, body:not(.day-mode) .popover, body:not(.day-mode) .breadcrumb, body:not(.day-mode) .accordion-item, body:not(.day-mode) .accordion-body, body:not(.day-mode) .table, body:not(.day-mode) .table thead, body:not(.day-mode) .table-hover tbody tr:hover, body:not(.day-mode) .card .card-header, body:not(.day-mode) .card .card-footer { background-color: rgba(255,255,255,0.03) !important; color: #fff !important; border-color: rgba(255,255,255,0.06) !important; } /* Override explicit dark text inside these surfaces */ body:not(.day-mode) .list-group-item .text-dark, body:not(.day-mode) .alert .text-dark, body:not(.day-mode) .modal-content .text-dark, body:not(.day-mode) .dropdown-menu .text-dark, body:not(.day-mode) .toast .text-dark { color: rgba(255,255,255,0.95) !important; } /* EXCEPTION: Keep table td.text-dark hitam di mode malam */ body:not(.day-mode) table tbody td.text-dark, body:not(.day-mode) .table-responsive tbody td.text-dark { color: #000000 !important; } /* Additional rules untuk semua child elements dalam table td.text-dark */ body:not(.day-mode) table tbody td.text-dark *, body:not(.day-mode) .table-responsive tbody td.text-dark * { color: #000000 !important; } /* Specifically override text-muted dalam table */ body:not(.day-mode) table tbody td.text-dark .text-muted, body:not(.day-mode) .table-responsive tbody td.text-dark .text-muted, body:not(.day-mode) table tbody td.text-dark small, body:not(.day-mode) .table-responsive tbody td.text-dark small { color: #000000 !important; } /* Make form elements on these surfaces readable */ body:not(.day-mode) .card .form-control, body:not(.day-mode) .modal-content .form-control, body:not(.day-mode) .dropdown-menu .form-control { background-color: rgba(255,255,255,0.04) !important; color: #fff !important; border-color: rgba(255,255,255,0.06) !important; } /* Ensure list-group links/buttons are visible */ body:not(.day-mode) .list-group-item a, body:not(.day-mode) .list-group-item button { color: #fff !important; } /* Breadcrumb separators and links */ body:not(.day-mode) .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.6) !important; } body:not(.day-mode) .breadcrumb a { color: #fff !important; } /* Accordion header/buttons */ body:not(.day-mode) .accordion-button { color: #fff !important; } /* Tables: ensure readable rows and headers */ body:not(.day-mode) .table thead th { color: rgba(255,255,255,0.95) !important; } /* Safety: override any .text-white on light surfaces to remain white in dark mode */ body:not(.day-mode) .bg-white .text-white, body:not(.day-mode) .bg-light .text-white { color: #fff !important; } /* End of broad dark-mode overrides */ /* .text-dark should remain dark/readable - do NOT override to white */ /* Dark mode table cells will handle their own styling via view-scoped CSS */ /* Ensure form labels are readable in dark mode */ body:not(.day-mode) .form-label, body:not(.day-mode) label { color: rgba(255,255,255,0.9) !important; } /* Fix table text in dark mode cards */ body:not(.day-mode) .card.bg-transparent th, body:not(.day-mode) .table th { color: rgba(255,255,255,0.95) !important; } /* Make cards have subtle dark background in dark mode instead of transparent */ body:not(.day-mode) .card.bg-transparent { background-color: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; } /* Fix table text in dark mode cards */ body:not(.day-mode) .card.bg-transparent th, body:not(.day-mode) .table th { color: rgba(255,255,255,0.95) !important; } /* Add visible border and subtle background to table rows in dark mode */ body:not(.day-mode) .table { border-collapse: collapse; } body:not(.day-mode) .table thead th { background-color: rgba(255,255,255,0.08) !important; border-bottom: 2px solid rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.95) !important; } body:not(.day-mode) .table tbody tr { background-color: rgba(255,255,255,0.01) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } body:not(.day-mode) .table tbody tr:hover { background-color: rgba(255,255,255,0.06) !important; } /* Ensure strong text in tables is visible */ body:not(.day-mode) .table strong { color: rgba(255,255,255,0.95) !important; } /* Make links in tables readable */ body:not(.day-mode) .table a { color: #fff !important; } /* Day mode: ensure text is dark on light backgrounds */ body.day-mode .card.bg-transparent th, body.day-mode .table th { color: #333 !important; } /* ============ COMPREHENSIVE DARK MODE TEXT COLOR FIXES ============ */ /* Fix .text-muted to be readable in dark mode */ body:not(.day-mode) .text-muted, body:not(.day-mode) small.text-muted { color: rgba(255,255,255,0.7) !important; } body.day-mode .text-muted, body.day-mode small.text-muted { color: #6c757d !important; } /* Fix .text-secondary */ body:not(.day-mode) .text-secondary { color: rgba(255,255,255,0.75) !important; } body.day-mode .text-secondary { color: #6c757d !important; } /* Fix opacity-50 and opacity-75 text color in dark mode */ body:not(.day-mode) .opacity-50, body:not(.day-mode) .opacity-75 { color: rgba(255,255,255,0.9) !important; opacity: 1 !important; } body.day-mode .opacity-50, body.day-mode .opacity-75 { color: rgba(0,0,0,0.85) !important; opacity: 1 !important; } /* Fix form help text */ body:not(.day-mode) .form-text { color: rgba(255,255,255,0.75) !important; } body.day-mode .form-text { color: #6c757d !important; } /* Fix icon colors in dark mode when used with text-muted */ body:not(.day-mode) .bi-search.text-muted, body:not(.day-mode) i.text-muted { color: rgba(255,255,255,0.7) !important; } /* Fix small text color */ body:not(.day-mode) small { color: rgba(255,255,255,0.85) !important; } body.day-mode small { color: #6c757d !important; } /* Fix text inside cards in dark mode */ body:not(.day-mode) .card p, body:not(.day-mode) .card small, body:not(.day-mode) .card label { color: rgba(255,255,255,0.9) !important; } /* Ensure links in muted context are still clickable */ body:not(.day-mode) .text-muted a, body:not(.day-mode) small a { color: #64b5f6 !important; text-decoration: underline !important; } body.day-mode .text-muted a, body.day-mode small a { color: #0056b3 !important; } /* Fix placeholder and helper text */ body:not(.day-mode) ::placeholder { color: rgba(255,255,255,0.6) !important; opacity: 1 !important; } body.day-mode ::placeholder { color: #adb5bd !important; opacity: 1 !important; } /* Fix text in list items */ body:not(.day-mode) .list-group-item p, body:not(.day-mode) .list-group-item small { color: rgba(255,255,255,0.9) !important; } /* Fix text in modals and overlays */ body:not(.day-mode) .modal-body, body:not(.day-mode) .offcanvas-body { color: rgba(255,255,255,0.95) !important; } /* Fix dropdown text */ body:not(.day-mode) .dropdown-item { color: rgba(255,255,255,0.9) !important; } body:not(.day-mode) .dropdown-item:hover, body:not(.day-mode) .dropdown-item:focus { background-color: rgba(255,255,255,0.08) !important; color: #fff !important; } /* Ensure badge text is readable */ body:not(.day-mode) .badge { color: #fff !important; } body:not(.day-mode) .badge a { color: rgba(255,255,255,0.9) !important; } /* End dark mode text fixes */ /* ============ FIX FOR FORCED TEXT-WHITE AND TEXT-WHITE-50 ============ */ /* These classes were hardcoded in HTML to stay white in light mode, but they make text invisible on dark backgrounds, so we force readable colors in day mode only */ body.day-mode .text-white { color: #000 !important; } body.day-mode .text-white-50 { color: rgba(0,0,0,0.5) !important; } /* DAY MODE: Custom system (.day-mode class on body) */ body.day-mode .text-black { color: #000 !important; } body.day-mode .text-black-50 { color: rgba(0,0,0,0.5) !important; } /* NIGHT MODE: Custom system (body:not(.day-mode)) */ body:not(.day-mode) .text-white { color: rgba(255,255,255,0.95) !important; } body:not(.day-mode) .text-white-50 { color: rgba(255,255,255,0.7) !important; } /* BOOTSTRAP LIGHT MODE (data-bs-theme="light" on html) */ html[data-bs-theme="light"] .text-black { color: #000 !important; } html[data-bs-theme="light"] .text-black-50 { color: rgba(0,0,0,0.5) !important; } html[data-bs-theme="light"] table .text-black { color: #000 !important; } /* BOOTSTRAP DARK MODE (data-bs-theme="dark" on html) */ html[data-bs-theme="dark"] .text-white { color: rgba(255,255,255,0.95) !important; } html[data-bs-theme="dark"] .text-white-50 { color: rgba(255,255,255,0.7) !important; } html[data-bs-theme="dark"] table .text-white { color: rgba(255,255,255,0.95) !important; } /* Fix for opacity-75 text-white combinations */ body.day-mode .opacity-75.text-white { color: #000 !important; opacity: 0.75 !important; } body:not(.day-mode) .opacity-75.text-white { color: rgba(255,255,255,0.95) !important; opacity: 0.75 !important; } /* Fix for opacity-50 combinations */ body.day-mode .opacity-50.text-white { color: #000 !important; opacity: 0.5 !important; } body:not(.day-mode) .opacity-50.text-white { color: rgba(255,255,255,0.95) !important; opacity: 0.5 !important; } body.day-mode .opacity-50.text-white-50 { color: rgba(0,0,0,0.5) !important; opacity: 0.5 !important; } body:not(.day-mode) .opacity-50.text-white-50 { color: rgba(255,255,255,0.7) !important; opacity: 0.5 !important; } /* Fix headings with text-white in day mode */ body.day-mode h1.text-white, body.day-mode h2.text-white, body.day-mode h3.text-white, body.day-mode h4.text-white, body.day-mode h5.text-white, body.day-mode h6.text-white { color: #000 !important; } /* Fix badges with text-white in day mode */ body.day-mode .badge.text-white { color: #fff !important; } /* Fix buttons with text-white in day mode */ body.day-mode .btn.text-white { color: #fff !important; } /* Fix table cells with text-white */ body.day-mode table .text-white, body.day-mode th.text-white { color: #000 !important; } /* End forced text-white fixes */ /* ============ FIX FOR BG-WHITE WITH OPACITY IN DAY/NIGHT MODE ============ */ /* Badges and other elements with bg-white bg-opacity-10 should adapt to theme */ body.day-mode .bg-white.bg-opacity-10 { background-color: rgba(0,0,0,0.1) !important; } body:not(.day-mode) .bg-white.bg-opacity-10 { background-color: rgba(255,255,255,0.1) !important; } /* Fix for badge styling with border-light */ body.day-mode .border-light { border-color: rgba(0,0,0,0.2) !important; } body:not(.day-mode) .border-light { border-color: rgba(255,255,255,0.2) !important; } /* Fix info colored backgrounds for headers in day mode */ body.day-mode .bg-info { background-color: #0d6efd !important; } body.day-mode .bg-info.text-white { color: #fff !important; } body:not(.day-mode) .bg-info { background-color: #0d6efd !important; } body:not(.day-mode) .bg-info.text-white { color: #fff !important; } /* End bg-white opacity fixes */ /* ============ FIX FOR COLORED BADGES AND OPACITY BORDERS ============ */ /* Badge styling should be readable in both modes */ body.day-mode .badge.bg-success { background-color: #198754 !important; color: #fff !important; } body.day-mode .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; } body.day-mode .badge.bg-danger { background-color: #dc3545 !important; color: #fff !important; } body.day-mode .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; } body:not(.day-mode) .badge.bg-success { background-color: #198754 !important; color: #fff !important; } body:not(.day-mode) .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; } body:not(.day-mode) .badge.bg-danger { background-color: #dc3545 !important; color: #fff !important; } body:not(.day-mode) .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; } /* Icon box styling with opacity backgrounds */ body.day-mode .icon-box.bg-success { background-color: rgba(25, 135, 84, 0.15) !important; } body.day-mode .icon-box.bg-primary { background-color: rgba(13, 110, 253, 0.15) !important; } body.day-mode .icon-box.bg-warning { background-color: rgba(255, 193, 7, 0.15) !important; } body.day-mode .icon-box.bg-info { background-color: rgba(13, 202, 240, 0.15) !important; } body:not(.day-mode) .icon-box.bg-success { background-color: rgba(25, 135, 84, 0.15) !important; } body:not(.day-mode) .icon-box.bg-primary { background-color: rgba(13, 110, 253, 0.15) !important; } body:not(.day-mode) .icon-box.bg-warning { background-color: rgba(255, 193, 7, 0.15) !important; } body:not(.day-mode) .icon-box.bg-info { background-color: rgba(13, 202, 240, 0.15) !important; } /* Ensure icon box text colors are maintained */ body.day-mode .icon-box.text-success { color: #198754 !important; } body.day-mode .icon-box.text-primary { color: #0d6efd !important; } body.day-mode .icon-box.text-warning { color: #ffc107 !important; } body.day-mode .icon-box.text-info { color: #0dcaf0 !important; } /* Border opacity styling */ body.day-mode .border-white { border-color: rgba(0,0,0,0.1) !important; } body.day-mode .border-white.border-opacity-10 { border-color: rgba(0,0,0,0.05) !important; } body:not(.day-mode) .border-white { border-color: rgba(255,255,255,0.1) !important; } body:not(.day-mode) .border-white.border-opacity-10 { border-color: rgba(255,255,255,0.05) !important; } /* End colored elements fixes */ /* ============ FIX FOR NAVBAR AND TOGGLE BUTTON ============ */ /* Navbar should adapt to day/night mode */ body.day-mode .navbar.navbar-dark { background-color: #f8f9fa !important; border-bottom: 1px solid rgba(0,0,0,0.1); } body.day-mode .navbar.navbar-dark .navbar-brand, body.day-mode .navbar.navbar-dark .nav-link { color: #000 !important; } body.day-mode .navbar.navbar-dark .nav-link:hover { color: #0d6efd !important; } body.day-mode .navbar.navbar-dark .navbar-toggler { background-color: rgba(0,0,0,0.1); } body.day-mode .navbar.navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Dark mode navbar should remain dark */ body:not(.day-mode) .navbar.navbar-dark { background-color: #212529 !important; border-bottom: 1px solid rgba(255,255,255,0.1); } body:not(.day-mode) .navbar.navbar-dark .navbar-brand, body:not(.day-mode) .navbar.navbar-dark .nav-link { color: #fff !important; } body:not(.day-mode) .navbar.navbar-dark .nav-link:hover { color: #64b5f6 !important; } /* Toggle button should have proper contrast */ body.day-mode #modeToggle { color: #000 !important; } body:not(.day-mode) #modeToggle { color: #fff !important; } /* Dropdown menu styling in both modes */ body.day-mode .dropdown-menu { background-color: #f8f9fa !important; border-color: rgba(0,0,0,0.1) !important; } body.day-mode .dropdown-menu .dropdown-item { color: #000 !important; } body.day-mode .dropdown-menu .dropdown-item:hover, body.day-mode .dropdown-menu .dropdown-item:focus { background-color: rgba(0,0,0,0.05) !important; color: #0d6efd !important; } body.day-mode .dropdown-divider { border-color: rgba(0,0,0,0.1) !important; } body:not(.day-mode) .dropdown-menu { background-color: #2b2d31 !important; border-color: rgba(255,255,255,0.1) !important; } body:not(.day-mode) .dropdown-menu .dropdown-item { color: #fff !important; } body:not(.day-mode) .dropdown-menu .dropdown-item:hover, body:not(.day-mode) .dropdown-menu .dropdown-item:focus { background-color: rgba(255,255,255,0.08) !important; color: #64b5f6 !important; } body:not(.day-mode) .dropdown-divider { border-color: rgba(255,255,255,0.1) !important; } /* End navbar and toggle button fixes */