/* Themes were creating using the Simmons Primary Color from the Simmons Branding Page and the url below. https://www.realtimecolors.com/?colors=0d0802-ffffff-0045ad-5eb5e4-009adb&fonts=Poppins-Aktiv :root is a css pseudo-class that selects the root element of the document which is in our case. --* is a custom property that can be declared with a value for reusability var() is a function that inserts the value of a custom property (CSS variable) Bootstrap5 classes have their color and background color properties overridden */ /* ------------------------------- Theme Variables --------------------------------- */ :root { --grey: #525b75; --dark-grey: #cbd0dd; --text-success: #3FC185FF; /* Typography & Layout */ --font-weight: 500; --sidebar-width-expanded: 225px; --sidebar-width-collapsed: 80px; --topnavbar-height: 65px; --transition-speed: 0.15s; --card-dark-bg: #2b2f34; --card-light-bg: #ffffff; --font-family: 'font-family: Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif'; /* General Elements - Overriding Common Bootstrap Classes */ .content, .dropdown-menu, .modal, .offcanvas, .popover, .toast, .accordion, .list-group, .form-control, .input-group, .breadcrumb, .pagination, .progress, .bs-body-bg, #top-navbar, .tooltip { background-color: var(--background-50); color: var(--accent-950); } /* Form Elements */ .form-control, .form-select { background-color: var(--background-50); border-color: var(--text-300); } .input-group .form-control:focus { outline: none; border: none; box-shadow: none; /* Removes the shadow that might be applied */ } #theme-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; transition: background-color 0.3s ease, color 0.3s ease; } /* Button Variations */ .btn-primary { background-color: var(--primary-500); } .btn-secondary { background-color: var(--secondary-500); } .btn-tertiary { background-color: var(--accent-500); } .btn-grey { background-color: var(--grey); color: #ffffff; } /* Alert Variations */ .alert-primary { background-color: var(--primary-50); border-color: var(--primary-200); color: var(--primary-900); } .alert-secondary { background-color: var(--secondary-50); border-color: var(--secondary-200); color: var(--secondary-900); } .alert-tertiary { background-color: var(--secondary-300); border-color: var(--secondary-500); color: var(--secondary-900); } /* Dropdown */ .dropdown-menu { width: 300px; border-color: var(--text-200); } .dropdown-item { padding-left: 1rem; } .dropdown-item, .dropdown-content, .dropdown-content ul, .dropdown-content a, .nav-link, .nav-link-text, .nav-link-icon { color: var(--text-800); } .dropdown-item:hover, .dropdown-content:hover, .dropdown-content ul:hover, .dropdown-content a:hover, .nav-link:hover, .nav-link-text:hover, .nav-link-icon:hover { color: var(--primary-600); } .search-bar.nav, .search-bar.nav .input-group-text, .search-bar.nav .fas, .search-bar.nav .form-control, .search-bar.nav .form-control::placeholder { background-color: var(--background-100); color: var(--text-800); } .search-bar.not-nav { border: 1px solid var(--accent-900) } .search-bar:focus-within { box-shadow: 0 0 8px 1px var(--accent-900); } .filter-toggle-button { padding: 0 50px; } .pill-filter .filter-buttons { display: inline-flex; border: 1px solid var(--primary-500); border-radius: 50px; overflow: hidden; background-color: transparent; color: var(--text-900); } .pill-filter .btn-secondary { border: none; border-radius: 0; padding: 10px 20px; font-size: 14px; background-color: transparent; transition: background-color 0.3s ease, color 0.3s ease; color: var(--text-900); } .pill-filter .btn-secondary.active { background-color: var(--primary-500); color: whitesmoke; font-weight: bold; } .pill-filter .btn-secondary:hover { background-color: var(--primary-400); color: whitesmoke; } @media (max-width: 932px) { .pill-filter .btn-secondary { padding: 4px 8px; font-size: 14px; } .filter-toggle-button { padding: 0 20px; } } /* Custom button styles for "Assignment Pending" and "Assigned" */ .pill-filter .filter-buttons.assignment-status{ border: none; border-radius: 0; /* Reset border-radius */ } .pill-filter .filter-buttons.assignment-status .btn-pending { border-top-left-radius: 50px; border-bottom-left-radius: 50px; } .pill-filter .filter-buttons.assignment-status .btn-assigned { border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .user-initials { font-size: 1rem !important; } .card.table-card { margin-top: 2rem; padding-top: 1rem; border: none; box-shadow: 0 0 4px 0 var(--secondary-100); } .table, table th { background-color: var(--secondary-50); color: var(--text-900); border-radius: 0; border: none; overflow-x: hidden; } .thick-border-right { border-right: 4px solid var(--grey); } /* #orders-table.table tbody tr.bg-warning {*/ /* --bs-table-bg: var(--secondary-50) !important; !* Override Bootstrap table background *!*/ /* background-color: var(--secondary-50) !important; !* Fallback for extra security *!*/ /*}*/ .table.table-modal th { background-color: var(--secondary-50); color: var(--text-900); border-radius: 0; } .paginate_button.current { border-radius: 50%; background: var(--secondary-100)!important; color: var(--text-50) !important; border: none!important; box-shadow: 0 0 4px 0 var(--secondary-500); margin: .5rem; } .paginate_button:hover { border-radius: 50%; background: var(--secondary-300)!important; color: var(--text-50) !important; border: none!important; box-shadow: 0 0 4px 0 var(--secondary-500); margin: .5rem; } #raTable_previous, #raTable_next { border-radius: 15%; border: none!important; margin: .5rem; color: var(--text-900);!important background: transparent!important; } #raTable_previous, #raTable_next { border: none!important; margin: .5rem; color: var(--text-900)!important; background: transparent!important; } /* Add grey vertical lines between table columns */ .table-grey-lines td, .table-grey-lines th { border-left: 2px solid var(--accent-300); border-right: 2px solid var(--accent-300); } } @media (max-width: 767px) { .card.table-card, .paginate_button.current, .paginate_button:hover { margin-top: 0; padding-top: 0; } } :root[data-bs-theme="light"] { --text-50: #eff0f6; --text-100: #dee2ed; --text-200: #bdc5db; --text-300: #9ca7c9; --text-400: #7b8ab7; --text-500: #5b6da4; --text-600: #485784; --text-700: #364163; --text-800: #242c42; --text-900: #121621; --text-950: #090b10; --background-50: #f2f3f7; --background-100: #dde4ee; --background-200: #bbc9dd; --background-300: #99adcc; --background-400: #7792bb; --background-500: #5577aa; --background-600: #445f88; --background-700: #334766; --background-800: #223044; --background-900: #111822; --background-950: #090c11; --primary-50: #e5f0ff; --primary-100: #cce0ff; --primary-200: #99c2ff; --primary-300: #66a3ff; --primary-400: #3385ff; --primary-500: #0066ff; --primary-600: #0052cc; --primary-700: #003d99; --primary-800: #002966; --primary-900: #001433; --primary-950: #000a1a; --secondary-50: #e5edff; --secondary-100: #ccdbff; --secondary-200: #99b8ff; --secondary-300: #6694ff; --secondary-400: #3370ff; --secondary-500: #004cff; --secondary-600: #003dcc; --secondary-700: #002e99; --secondary-800: #001f66; --secondary-900: #000f33; --secondary-950: #00081a; --accent-50: #eff0f6; --accent-100: #dfe1ec; --accent-200: #bec3da; --accent-300: #9ea5c7; --accent-400: #7d88b5; --accent-500: #5d6aa2; --accent-600: #4a5582; --accent-700: #383f61; --accent-800: #252a41; --accent-900: #131520; --accent-950: #090b10; /* Theme Icon */ .bi-sun-fill { color: #e5780b; } .bi-sun-fill:hover { color: var(--background-50); } #theme-icon { background-color: #fff3e3; } #theme-icon:hover { background-color: #e5780b; } /* Simmons Seal */ #an_nutr_seal { fill: var(--primary-600); stroke: var(--primary-600); } /* Disable form-control, form-select styles */ .form-control.disabled, .form-select.disabled { background-color: var(--background-100); border-color: var(--background-100); } @media (max-width: 767px) { #top-navbar { background-color: white !important; } } #loading-overlay { background: rgba(30, 32, 40, 0.25); /* subtle dark for light mode */ backdrop-filter: blur(1.5px); } } :root[data-bs-theme="dark"] { --text-50: #090b10; --text-100: #121621; --text-200: #242c42; --text-300: #364163; --text-400: #485784; --text-500: #5b6da4; --text-600: #7b8ab7; --text-700: #9ca7c9; --text-800: #bdc5db; --text-900: #dee2ed; --text-950: #eff0f6; --background-50: #090c11; --background-100: #111822; --background-200: #223044; --background-300: #334766; --background-400: #445f88; --background-500: #5577aa; --background-600: #7792bb; --background-700: #99adcc; --background-800: #bbc9dd; --background-900: #dde4ee; --background-950: #eef1f6; --primary-50: #000a1a; --primary-100: #001433; --primary-200: #002966; --primary-300: #003d99; --primary-400: #0052cc; --primary-500: #0066ff; --primary-600: #3385ff; --primary-700: #66a3ff; --primary-800: #99c2ff; --primary-900: #cce0ff; --primary-950: #e5f0ff; --secondary-50: #00081a; --secondary-100: #000f33; --secondary-200: #001f66; --secondary-300: #002e99; --secondary-400: #003dcc; --secondary-500: #004cff; --secondary-600: #3370ff; --secondary-700: #6694ff; --secondary-800: #99b8ff; --secondary-900: #ccdbff; --secondary-950: #e5edff; --accent-50: #090b10; --accent-100: #131520; --accent-200: #252a41; --accent-300: #383f61; --accent-400: #4a5582; --accent-500: #5d6aa2; --accent-600: #7d88b5; --accent-700: #9ea5c7; --accent-800: #bec3da; --accent-900: #dfe1ec; --accent-950: #eff0f6; .navbar, footer { background-color: var(--background-100); } /* Theme Icon */ .bi-moon-fill { color: var(--secondary-800); } .bi-moon-fill:hover { color: var(--secondary-950) } #theme-icon { background-color: var(--secondary-200); } #theme-icon:hover { background-color: var(--secondary-300); } /* Disable form-control, form-select styles */ .form-control.disabled, .form-select.disabled { background-color: var(--background-300); border-color: var(--background-300); } /* Simmons Seal */ #an_nutr_seal { fill: var(--primary-950); stroke: var(--primary-950); } @media (max-width: 767px) { #top-navbar { background-color: var(--background-200) !important; } } #loading-overlay { background: rgba(10, 12, 20, 0.85); /* more opaque for dark mode */ backdrop-filter: blur(2.5px); } } /* Show only the correct monogram logo for the current theme */ .monogram-logo-light { display: block; } .monogram-logo-dark { display: none; } .monogram-logo-light, .monogram-logo-dark { width: 50px; height: 50px; object-fit: contain; } .monogram-logo-checkin, .monogram-logo-light, .monogram-logo-dark { width: 300px; height: 100px; object-fit: contain; } [data-bs-theme="dark"] .monogram-logo-light { display: none; } [data-bs-theme="dark"] .monogram-logo-dark { display: block; } [data-bs-theme="light"] .monogram-logo-light { display: block; } [data-bs-theme="light"] .monogram-logo-dark { display: none; } /* Responsive Font Sizing */ @media (max-width: 932px) { body, p, ul, ol, li, h1, h2, h3, h4, h5, h6, a, .nav-link, .btn, input, select, textarea, .form-control, .dropdown-menu, .form-select, .form-input, .pill-filter, .filter-buttons, .btn-primary, .btn-secondary, .btn-success { font-size: 0.875rem; } } /* Top Navbar: Starts next to sidebar */ #top-navbar { height: var(--topnavbar-height); position: absolute; left: var(--sidebar-width-collapsed); /* Initial left position */ width: calc(100% - var(--sidebar-width-collapsed)); /* Initial width */ z-index: 3; transition: left var(--transition-speed) ease, width var(--transition-speed) ease; } .image-show { display: none; } /* Adjust the top navbar on small screens */ @media (max-width: 767px) { #top-navbar { left: 0; width: 100%; } #top-navbar .image-show { display: flex; } /* Adjust Top Navbar when Sidebar is Minimized */ #top-navbar.show { position: initial; left: 0; width: 100% !important; } } /* Show image-show when sidebar is collapsed */ #top-navbar.show .image-show { display: flex; } /* Adjust Top Navbar when Sidebar is Minimized */ #top-navbar.show { left: var(--sidebar-width-expanded); width: calc(100% - var(--sidebar-width-expanded)); } /* Top Navbar: Starts next to sidebar */ #top-navbar-reset-password { height: var(--topnavbar-height); position: absolute; z-index: 3; width: 100%; } /* Adjust the top navbar on small screens */ @media (max-width: 767px) { #top-navbar-reset-password { position: initial; left: 0; width: 100%; } } #sideBarImg { display: flex; justify-content: start; margin-left: 0.5rem; } /* ------------------------------- Sidebar Styles --------------------------------- */ .side-navbar { display: flex; flex-wrap: wrap; position: fixed; overflow-y: auto; height: 100vh; z-index: 2; align-content: start; width: var(--sidebar-width-collapsed); } .side-navbar.show { width: var(--sidebar-width-expanded); } /* Simmons Seal */ #an_nutr_seal { min-width: 65px; max-width: 90px; justify-content: center; } .side-navbar.show #an_nutr_seal { margin-left: 4rem; } /* ------------------------------- Navlink Styles --------------------------------- */ .nav-link-text { opacity: 0; /* Initially hide text */ transition: opacity 0.3s ease; /* Smooth transition for text */ } .nav-item { position: relative; } .nav-link { padding: 0.75rem 1rem; margin-left: 0.25rem; transition: all 0.2s ease-in-out; display: flex; align-items: center; background-color: transparent; } /* Dropdown Styling */ .dropdown-content { display: none; background-color: transparent; border: none; box-shadow: none; margin: 0; padding-left: .75rem; padding-top: 0; border-left: 3rem; } .dropdown-content ul { list-style: none; padding: 0; margin-left: 2.5rem; background-color: transparent; } .dropdown-content li a { background-color: transparent; color: var(--primary-400); display: block; padding: 0.25rem 0.5rem; text-decoration: none; transition: all 0.2s ease-in-out; border-radius: 0.25rem; } .side-navbar.show .nav-link-text { opacity: 1; } /* Show text on hover */ .icon-wrapper:hover .nav-link-text { opacity: 1; } /* Dropdown content hidden by default */ .dropdown-content, .ms-auto, .nav-link-text { display: none; border-radius: 0; box-shadow: none; z-index: 1; } .dropdown-content ul { list-style-type: none; } .side-navbar.show .ms-auto, .side-navbar.show .nav-link-text, .dropdown-content.show, .ms-auto.show, .side-navbar.fullscreen .ms-auto { display: inline-block; } /* Sidebar Footer (for Overflow Handling) */ .side-navbar-footer { position: absolute; bottom: 0; width: 100%; border-top: 1px solid var(--grey); } /* Responsive Sidebar for Mobile */ @media (max-width: 767px) { .side-navbar { display: none; } .side-navbar.fullscreen { top: 65px; display: block; width: 100%; height: 100vh; z-index: 3; background-color: var(--background-50); overflow-y: auto; /* Enables vertical scrolling */ position: fixed; /* Ensures it stays in place when scrolling */ } .side-navbar.fullscreen .nav-link-text { opacity: 1; display: inline-block; } .content { margin-left: 0 !important; padding: 1rem; } .btn-toggle-sidebar { display: none; } } /* ------------------------------- Content Layout --------------------------------- */ html, body, main { font-size: 14px; height: 100%; min-height: 100vh; display: flex; flex-direction: column; } .content { margin-top: var(--topnavbar-height); flex: 1; padding: 2rem; transition: margin-left var(--transition-speed) ease; } /* Lock Content When Sidebar is Fullscreen */ .lock-content { position: fixed; overflow: hidden; width: 100%; } /* Margin Adjustments for Expanded and Minimized Sidebar */ .side-navbar.show ~ .content { margin-left: var(--sidebar-width-expanded); } .side-navbar ~ .content { margin-left: var(--sidebar-width-collapsed); } /* ------------------------------- Footer Styles --------------------------------- */ .footer { padding: 0.45rem; width: 100%; text-align: right; background-color: transparent; position: relative; bottom: 0; } /* ------------------------------- SweetAlert Popup Adjustments --------------------------------- */ .swal2-popup { width: 100vw; } @media (max-width: 576px) { .swal2-title, .swal2-text, .swal2-popup, .swal2-html-container a { font-size: 0.875rem !important; } } /* Define the moving border animation */ @keyframes moving-border { 0% { box-shadow: 0 0 0 3px var(--primary-600), 0 0 0 6px transparent, 0 0 0 9px transparent, 0 0 0 12px transparent; } 25% { box-shadow: 3px 0 0 3px var(--primary-600), 6px 0 0 6px transparent, 9px 0 0 9px transparent, 12px 0 0 12px transparent; } 50% { box-shadow: 3px 3px 0 3px var(--primary-600), 6px 6px 0 6px transparent, 9px 9px 0 9px transparent, 12px 12px 0 12px transparent; } 75% { box-shadow: 0 3px 0 3px var(--primary-600), 0 6px 0 6px transparent, 0 9px 0 9px transparent, 0 12px 0 12px transparent; } 100% { box-shadow: 0 0 0 3px var(--primary-600), 0 0 0 6px transparent, 0 0 0 9px transparent, 0 0 0 12px transparent; } } .racing-border { position: relative; border-radius: 10px; animation: none; padding: 10px; } .racing-border.active { animation: moving-border 4s linear infinite; } tr.clickable-row { cursor: pointer; transition: background-color 0.3s ease; /* Smooth hover effect */ } /* Exclude the + / - controls from the pointer cursor */ td.dtr-control { cursor: default; /* Default cursor for non-clickable areas */ } .notification-link { word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; } .notification-message { white-space: normal; overflow: hidden; } #notification-count { font-size: 12px; position: relative; top: 0; right: 0; transform: translate(-30%, 50%); padding: 0.1rem 0.3rem; } /* This is for the detention countdowns on the Order Schedule page*/ .highlight-yellow { background-color: goldenrod !important; --bs-table-bg: goldenrod; --bs-table-color-state: black; } .highlight-red { background-color: firebrick !important; --bs-table-color-state: white !important; --bs-table-bg: firebrick; } #loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2000; align-items: center; justify-content: center; display: flex; } /* For the Order Scheduling Weekly View */ /* Highlight gold for today's rows */ .highlight-gold { background-color: gold !important; color: black !important; } /* Faint thin border for columns after Load Status */ .faint-border-right { border-right: 1px dotted var(--grey, #e9ecef) !important; opacity: 1; }