/* =================================================================== SETTINGS WIDGET CSS — Universal Shraddha | Xtremsoft Technologies | 20260430 Updated: Logout button RIGHT-ALIGNED fix for ALL themes HOW TO USE: Add this line inside on every page: =================================================================== */ /* ===== Gear button (fixed bottom-right) ===== */ .settings-btn { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; background-color: #022857; color: white; border: none; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 9999; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* ===== Floating panel ===== */ .settings-panel { display: none; position: fixed; bottom: 80px; right: 20px; background: white; border: 1px solid #ddd; border-radius: 10px; padding: 12px; z-index: 9998; box-shadow: 0 4px 12px rgba(0,0,0,0.25); min-width: 185px; } /* ===== Option buttons inside panel ===== */ .settings-option { display: block; width: 100%; margin-bottom: 6px; padding: 7px 10px; border: 1px solid #ccc; border-radius: 6px; background: white; cursor: pointer; text-align: left; font-size: 13px; } .settings-option:hover { background-color: #f0f0f0; } /* =================================================================== NAVBAR LAYOUT FIX Locks the navbar flex layout so the logout button stays RIGHT-ALIGNED in ALL themes — default, yellow, blue, red, dark. These rules use maximum specificity so no theme can override them. =================================================================== */ /* Main navbar bar — always horizontal flex */ body .navbar, body #navbar { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; width: 100% !important; padding: 5px 0px 10px 0px !important; } /* Navbar brand wrapper — locked to the left */ body .navbar .navbar-brand-wrapper, body .navbar-brand-wrapper { -webkit-box-flex: 0 !important; -ms-flex: 0 0 auto !important; flex: 0 0 auto !important; margin-right: auto !important; margin-left: 0 !important; } /* Collapse wrapper — flex row, pushed to right */ body .navbar-collapse.navbar-menu-wrapper, body .collapse.navbar-collapse { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; float: none !important; } /* Navbar nav list — horizontal row, right side */ body .navbar-nav, body .navbar .navbar-nav { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; margin-left: auto !important; float: none !important; padding-left: 0 !important; list-style: none !important; } /* Logout nav item — always far right */ body .navbar .nav-item.btn-contact-us, body .navbar .nav-item.btn-contact-us.pull-right, body .nav-item.btn-contact-us { margin-left: auto !important; float: none !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } /* Logout image inside the anchor */ body .nav-item.btn-contact-us img { width: 30px !important; height: 30px !important; display: block !important; } /* =================================================================== DARK MODE FIX Dark mode applies filter:invert(1) hue-rotate(180deg) on . Counter-invert header/nav so it looks normal and layout is kept. =================================================================== */ /* Remove any filter bleeding into navbar children */ body header, body header *, body nav, body nav *, body .navbar, body .navbar * { -webkit-filter: none !important; filter: none !important; } /* Counter-invert the navbar itself so dark mode invert cancels out */ body header, body nav, body .navbar { -webkit-filter: invert(1) hue-rotate(180deg) !important; filter: invert(1) hue-rotate(180deg) !important; } /* =================================================================== MOBILE — keep logout right-aligned on small screens =================================================================== */ @media screen and (max-width: 991px) { body .navbar-collapse.navbar-menu-wrapper, body .collapse.navbar-collapse { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } body .navbar-nav { -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; margin-left: auto !important; } body .nav-item.btn-contact-us { margin-left: auto !important; float: none !important; } /* Hide the logo duplicate that appears in mobile collapse menu */ body .navbar-collapse .d-flex.align-items-center { display: none !important; } } /* ===== END SETTINGS WIDGET CSS ===== */