/* Fonts are loaded from layout to avoid @import waterfalls. */ :root { --font-body: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-display: "Fraunces", "Times New Roman", serif; --text-strong: #0f172a; --text-body: #111827; --text-muted: #4b5563; --text-subtle: #6b7280; --link-color: #1d4ed8; --link-hover: #1e40af; } html, body { font-family: var(--font-body); color: var(--text-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .panel-title, .page-title, .content-header > h1 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: -0.01em; } p, label, input, button, select, textarea, .btn, .form-control { font-family: var(--font-body); color: inherit; } a { color: var(--link-color); } a:hover, a:focus { color: var(--link-hover); } .text-muted, .help-block, small, .small { color: var(--text-muted); } .form-control::placeholder { color: var(--text-subtle); } .navbar-default .navbar-nav > li > a, .navbar-default .navbar-brand, .sidebar-menu > li > a, .main-sidebar, .main-footer, .content-wrapper, .main-header .logo { color: inherit; } .table > thead > tr > th, .table > tbody > tr > td { color: var(--text-body); } .footer-row { display: flex; align-items: center; gap: 12px; } .footer-col { flex: 1 1 0; } .footer-col-left, .footer-col-center, .footer-col-right { text-align: left; } .footer-col-right { text-align: right; } .footer-academic-line { font-size: 14px; color: var(--text-muted); white-space: nowrap; } .footer-academic-days { font-weight: 700; color: #0f766e; margin-left: 8px; } @media (max-width: 768px) { .main-footer { position: static !important; margin-left: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100%; } .footer-row { flex-direction: column; align-items: flex-start; } .rk-breadcrumb-action-row > [class*="col-"] { width: 100%; float: none; text-align: left !important; margin-bottom: 8px; } .rk-breadcrumb-action-row > [class*="col-"]:last-child { margin-bottom: 0; } } /* Keep mobile headers compact across backend themes. */ body > .header .navbar-left .shcool-name { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 812px) { body > .header .logo { display: none !important; } body > .header .navbar { margin-left: 0 !important; } } @media (max-width: 767px) { body > .header .navbar-left { display: none !important; } body > .header .navbar-right { float: right !important; max-width: calc(100% - 52px); overflow: visible !important; } body > .header .navbar-right .navbar-nav { float: right; display: block; white-space: nowrap; margin: 0; } body > .header .navbar-right .navbar-nav > li { float: left; } body > .header .navbar .nav > li > a { padding: 12px 8px; } body > .header .navbar .nav > li.user > a { padding: 10px 8px; } body > .header .navbar-nav > .user-menu > a > span { display: none; } /* Keep topbar dropdown panels inside the mobile viewport. */ body > .header .navbar-nav > .notifications-menu > .dropdown-menu, body > .header .navbar-nav > .messages-menu > .dropdown-menu, body > .header .navbar-nav > .tasks-menu > .dropdown-menu { left: auto !important; right: 0 !important; width: min(76vw, 300px); max-width: calc(100vw - 12px); } body > .header .navbar-nav > .user-menu > .dropdown-menu { left: auto !important; right: 0 !important; width: min(92vw, 320px); max-width: calc(100vw - 12px); } /* School switcher sits near the left in mobile; anchor dropdown from left edge. */ body > .header .navbar-nav > .school-switch-menu > .dropdown-menu { position: fixed !important; top: 50px !important; left: 6px !important; right: 6px !important; width: auto !important; max-width: none !important; } } @media (max-width: 560px) { body > .header { max-height: 50px; } body > .header .navbar { width: 100%; float: none; margin: 0 !important; position: relative !important; min-height: 50px; } body.fixed > .wrapper, body.fixed .sidebar-offcanvas { margin-top: 50px !important; } } /* Center login controls on mobile for admin and SaaS sign-in layouts. */ @media (max-width: 768px) { body.white-bg-login .wrap-login100 { justify-content: center; } body.white-bg-login .wrap-login100 .login100-form-shell { width: 100%; display: flex; justify-content: center; } body.white-bg-login .wrap-login100 .login100-form-shell .login100-form { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; } body.white-bg-login .wrap-login100 .login100-form-shell .container-login100-form-btn { justify-content: center; } }