@font-face { font-family: 'Exo 2'; src: url("/fonts/Exo2-Regular.woff2") format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Inconsolata'; src: url("/fonts/Inconsolata-Regular.woff2") format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- COLOR TOKENS --------------------------------------------------------------------------- Light values here match this file's previous hardcoded colors exactly. The dark theme below overrides these same names - every rule in this file and in app_booking/app_modal resolves its colors through these tokens, so nothing outside this block needs to change. Brand navy/blue and the derivation approach (fold near-black surfaces into a narrow dark band instead of pure black; invert body text to near-white; lighten - not darken - saturated status colors for contrast on dark surfaces; compress borders toward the middle so they read either way) match www.myweblog.se's own shipped dark theme, which uses the same two brand colors. --------------------------------------------------------------------------- */ :root { color-scheme: light; --mwl-bg-page:#ffffff; --mwl-text-page:#202020; --mwl-text-muted:#666666; --mwl-bg-brand-dark:#002959; --mwl-border-brand-dark:#002959; --mwl-bg-brand:#336699; --mwl-text-brand:#336699; --mwl-text-success:green; --mwl-text-danger:red; --mwl-text-danger-strong:#CC3333; --mwl-text-brand-strong:#002959; --mwl-text-warning:#F4BA0B; --mwl-text-confirm:#229922; --mwl-icon-disabled:#b0b0c0; --mwl-bg-surface:#F5F5FF; --mwl-border-surface:#cccccc; --mwl-border-soft:#ccccee; --mwl-bg-panel:#ffffff; --mwl-bg-bottombar:#eeeeee; --mwl-bg-row-alt:#f7f7ff; --mwl-bg-table-2:#fafafa; --mwl-placeholder:#B0B0BB; --mwl-shadow-1:#bbbbbb; --mwl-shadow-2:#888888; --mwl-bg-warning:#FCFFB9; --mwl-status-danger-bg:red; --mwl-status-warning-bg:#F0F060; --mwl-status-danger-tint:#FFE8E8; --mwl-status-warning-tint:#FFFFE8; --mwl-modal-overlay:rgba(0,0,0,0.4); --mwl-modal-bg:#ffffff; --mwl-modal-border:#222222; --mwl-modal-divider:#a0a0c0; --mwl-booking-own:#44cc44; --mwl-booking-ownsch:#44eeee; --mwl-booking-otr:#8899ee; --mwl-booking-otrsch:#dd88dd; --mwl-booking-maint:#dd5555; --mwl-booking-stud:#eeee44; --mwl-booking-border:#225522; --mwl-booking-old-bg:#eeeeee; --mwl-booking-old-border:#888888; --mwl-booking-frame-bg:#f5f5f5; --mwl-booking-frame-border:#555555; --mwl-daylight-1:#CCE; --mwl-daylight-2:#DDF; --mwl-daylight-3:#FDFDFF; --mwl-ticker-minor:#666666; --mwl-ticker-major:#333333; --mwl-timeline-now:red; --mwl-past-text:#cccccc; --mwl-queue-text:#888888; } /* Dark theme. data-theme is set on by the script in appPage's : either the user's own choice, or the device setting when they chose "system". Screen only, so printing always uses the light palette. */ @media screen { :root[data-theme="dark"] { color-scheme: dark; --mwl-bg-page:#1b1c1e; --mwl-text-page:#eff0f1; --mwl-text-muted:#9a9fa7; --mwl-bg-brand-dark:#193f6b; --mwl-border-brand-dark:#5686b5; --mwl-bg-brand:#2f5070; --mwl-text-brand:#9fbcd8; --mwl-text-success:#5dd446; --mwl-text-danger:#f07a7a; --mwl-text-danger-strong:#e57373; --mwl-text-brand-strong:#c3d6ea; --mwl-text-warning:#f5c842; --mwl-text-confirm:#5dd446; --mwl-icon-disabled:#6d737e; --mwl-bg-surface:#2b2f38; --mwl-border-surface:#3a3e43; --mwl-border-soft:#33363b; --mwl-bg-panel:#26282b; --mwl-bg-bottombar:#242528; --mwl-bg-row-alt:#202329; --mwl-bg-table-2:#24262b; --mwl-placeholder:#7c838d; --mwl-shadow-1:rgba(0,0,0,0.6); --mwl-shadow-2:rgba(0,0,0,0.5); --mwl-bg-warning:#3c3c1a; --mwl-status-danger-bg:#e57373; --mwl-status-warning-bg:#d4d449; --mwl-status-danger-tint:#3c1a1a; --mwl-status-warning-tint:#3c3c1a; --mwl-modal-overlay:rgba(0,0,0,0.6); --mwl-modal-bg:#26282b; --mwl-modal-border:#46494f; --mwl-modal-divider:#40434a; --mwl-booking-own:#5dd446; --mwl-booking-ownsch:#5ddddd; --mwl-booking-otr:#9aa8f2; --mwl-booking-otrsch:#e0a0e0; --mwl-booking-maint:#e57373; --mwl-booking-stud:#d4d449; --mwl-booking-border:rgba(0,0,0,0.45); --mwl-booking-old-bg:#33363b; --mwl-booking-old-border:#51555d; --mwl-booking-frame-bg:#26282b; --mwl-booking-frame-border:#4a4e57; --mwl-daylight-1:#17202b; --mwl-daylight-2:#1e2c3d; --mwl-daylight-3:#2a3b52; --mwl-ticker-minor:#6d737e; --mwl-ticker-major:#9a9fa7; --mwl-timeline-now:#f07a7a; --mwl-past-text:#555a62; --mwl-queue-text:#8b919a; } } html { scroll-behavior: smooth; } body { color:var(--mwl-text-page); background-color:var(--mwl-bg-page); font-size:1.1em; margin:0; padding:calc(11vh + env(safe-area-inset-top, 0px)) 0 calc(12vh + env(safe-area-inset-bottom, 0px)) 0; padding:calc(11dvh + env(safe-area-inset-top, 0px)) 0 calc(12dvh + env(safe-area-inset-bottom, 0px)) 0; text-align:left; font-family: "Exo 2","Helvetica Neue", Verdana, Arial, sans-serif; } @media print { body { padding:0; margin:0 10mm 0 20mm; } } body.sky { background-image: url("/images/frontpage.jpg"); background-size: cover; background-color:var(--mwl-bg-brand-dark); } @media screen { [data-theme="dark"] body.sky { background-image: url("/images/frontpage_night.jpg"); } } h1 { font-size:1.6em; padding-left:3vw; padding-right:3vw; } h1.c { text-align:center; } h2 { font-size:1.3em; color:var(--mwl-text-success); padding-left:3vw; padding-right:3vw; } h3 { color:var(--mwl-text-success); padding-left:3vw; padding-right:3vw; } a { text-decoration:none; color:var(--mwl-text-success); } p { padding-left:3vw; padding-right:3vw; } input, select { width:80vw; max-width:80vw; /* height:30px; */ height:2.1em; font-size:16px; margin:0 auto 0 auto; display:block; /* padding:10px; */ padding:0.3em; background-color:var(--mwl-bg-surface); border:1px solid var(--mwl-border-brand-dark); border-radius:3px; font-family: "Exo 2","Helvetica Neue", Verdana, Arial, sans-serif; color:var(--mwl-text-page); -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } /*select { width:75vw; height:2.3em; margin:auto; display:block; background-color:#F5F5FF; border:1px solid #002959; padding:0.4em; border-radius:3px; font-size:16px; color:black; }*/ option:checked { background-color:var(--mwl-bg-brand); color:white; } ::placeholder { color:var(--mwl-placeholder); font-size:16px; } table { border-collapse:collapse; } td { padding: 1vh; } button { color:white; font-size:1em; font-weight:normal; margin:auto; display:block; background-color:var(--mwl-bg-brand); border:1px solid var(--mwl-border-brand-dark); border-radius:1vw; padding:0.4em 0.8em 0.4em 0.8em; } button:active { background-color:var(--mwl-bg-brand-dark); } button i { margin-right:0.8em; font-size:0.9em; } div.formDiv { width:80vw; margin:0 auto 0 auto; text-align:left; } div.formDiv label { color:var(--mwl-text-brand); font-size:0.8em; margin-top:1vh; display:block; } div.formDiv label:first-of-type { margin-top:0; } div.formDiv select, div.formDiv input { width:100%; } /* ERROR PAGE FORMATTING */ h1.e404, h2.e404 { color:var(--mwl-text-danger); text-align:center; } p.e404 { text-align:center; } img.e404 { display: block; margin-left: auto; margin-right: auto; max-width:50vw; max-height:40vh; } #cookieDisclaimer { position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:black; z-index:10; opacity:0.6; visibility:visible; } #cookieDisclaimer.accepted, #cookieText.accepted { visibility:hidden; z-index:-10; } div#cookieText { margin:auto; display:block; color:var(--mwl-text-page); background-color:var(--mwl-bg-panel); border:2px solid var(--mwl-text-success); border-radius:1vw; width:80vw; opacity:1; z-index:20; position:fixed; left:10vw; top:20vh; text-align:left; } #cookieText #cookieButton { cursor:pointer; background-color:var(--mwl-text-success); width:40vw; max-width:80vw; margin:auto; display:block; margin-bottom:20px; text-align:center; color:white; padding:10px; border-radius:1vw; } #cookieText #cookieButton i { padding-right:10px; } #cookieText div:last-of-type { text-align:center; padding-bottom:1em; padding-top:1.5em; } #cookieText div:last-of-type > a { padding:0.5em; } .navbar-menu { position:fixed; right:5px; top: calc(9vh + env(safe-area-inset-top, 0px)); top: calc(9dvh + env(safe-area-inset-top, 0px)); background-color:var(--mwl-bg-panel); border:1px solid var(--mwl-border-brand-dark); border-top:none; max-width:80vw; min-width:50vw; visibility:hidden; opacity:0; transition: visibility 1s, opacity 0.3s linear; box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2); -moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); -webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); padding:0;margin:0; z-index:11; } .navbar-menu.active { visibility:visible; opacity:1; } .navbar-menu a { display: block; background-color:var(--mwl-bg-surface); color:var(--mwl-text-brand); padding:12px 15px 12px 15px; border-bottom:1px solid var(--mwl-border-soft); } .navbar-menu a:last-of-type { border-bottom:none; } .navbar-menu a.logout { color:var(--mwl-text-danger); } .navbar-menu i { margin-right:0.8em; font-size:0.9em; opacity:0.7; } /* Light / dark / system row, last in the hamburger menu */ .navbar-menu .themeChooser { display:flex; gap:6px; padding:8px; background-color:var(--mwl-bg-surface); border-top:1px solid var(--mwl-border-soft); } /* Each button is a centered column: icon above its label */ .navbar-menu .themeChooser div { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; font-size:0.8em; color:var(--mwl-text-brand); border-radius:6px; cursor:pointer; } /* svg too, in case the Font Awesome kit swaps the for an */ .navbar-menu .themeChooser i, .navbar-menu .themeChooser svg { margin:0; font-size:1.4em; } .navbar-menu .themeChooser div.selected { background-color:var(--mwl-bg-brand); color:white; } .navbar-menu .themeChooser div.selected i, .navbar-menu .themeChooser div.selected svg { opacity:1; } .bottombar-menu { position:fixed; right:5px; bottom: calc(7vh + env(safe-area-inset-bottom, 0px)); bottom: calc(7dvh + env(safe-area-inset-bottom, 0px)); background-color:var(--mwl-bg-panel); border:1px solid var(--mwl-border-brand-dark); max-width:80vw; min-width:50vw; visibility:hidden; opacity:0; transition: visibility 1s, opacity 0.3s linear; box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2); -moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); -webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); padding:0;margin:0; z-index:11; } .bottombar-menu.active { visibility:visible; opacity:1; } .bottombar-menu a { display: block; background-color:var(--mwl-bg-surface); color:var(--mwl-text-brand); padding:12px 15px 12px 15px; border-bottom:1px solid var(--mwl-border-soft); } .bottombar-menu a:last-of-type { border-bottom:none; } .bottombar-menu a.current_lang { color:var(--mwl-text-danger); } .bottombar-menu img { padding-right:10px; position:relative;top:2px;} #pageContents { max-width:100vw; } div.frontpage, div.forgotpage { text-align:center; } div.frontpage:first-child, div.forgotpage:first-child { margin-top:12vh; } div.frontpage > p:nth-of-type(2) > i { font-size:2em; padding:0.15em; margin-bottom:1em; color:var(--mwl-text-brand); } div.frontpage > p:first-of-type > i { font-size:7em; margin-left:0.2em; color:white; text-shadow: 0px 3px 6px #888; } /* div.frontpage > div:last-of-type { position:fixed; margin:auto; width:100vw; background-color:white; top:50vh; left:0; color:black; height:4vh; opacity:0.5; line-height:4vh; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } */ div.forgotpage > i:first-of-type { font-size:5em; margin-bottom:0.2em; color:var(--mwl-text-success); } #burger { cursor:pointer; } div#topbar { background-color:var(--mwl-bg-brand-dark); color:white; box-shadow: 0px 3px 6px 1px var(--mwl-shadow-1); -moz-box-shadow:0px 3px 6px 1px var(--mwl-shadow-1); -webkit-box-shadow:0px 3px 6px 1px var(--mwl-shadow-1); position:fixed;top:0;left:0; width:100vw; height:calc(9vh + env(safe-area-inset-top, 0px)); height:calc(9dvh + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); box-sizing:border-box; z-index:10; } div#topbar a { color:white; text-decoration:none; padding-left:5px;} div#topbar a:hover { color:#b0b0b0; } div#topbar a:visited { color:white; } div#topbar table { width:100%; height:100%; } div#topbar table img { max-height:7vh; vertical-align:middle;} div#topbar table td:last-of-type { text-align:right; padding-right:20px;font-size:1.3em;width:35px;} div#topbar a.loginbutton { border:1px solid white; padding:3px 15px 4px 15px;border-radius:2px;} div#topbar.loggedin table td:first-of-type { width:35px;} div#topbar.loggedin table td:nth-of-type(2) { padding-left:10px;text-align:left;} div#topbar table td:nth-of-type(2) { padding-right:10px;text-align:right;} div#topbar div#fullName { font-size:0.9em; } div#topbar div#orgName { font-size:0.7em; } div#bottombar { position:fixed;bottom:-1px;left:0; width:100vw; height:calc(7vh + env(safe-area-inset-bottom, 0px)); height:calc(7dvh + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); box-sizing:border-box; text-align:right; box-shadow: 0px -3px 6px -1px var(--mwl-shadow-1); -moz-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1); -webkit-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1); background-color:var(--mwl-bg-bottombar); color:var(--mwl-text-muted); display: table; z-index:10; } @media print { div#topbar { display:none; } div#bottombar { display:none; } } div#bottombar > div { display: table-cell; text-align:center; font-size:1.3em; vertical-align:middle; } div#bottomlinks { width:100vw; text-align:right; box-shadow: 0px -3px 6px -1px var(--mwl-shadow-1); -moz-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1); -webkit-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1); background-color:var(--mwl-bg-bottombar); color:#777; } #transactionList { font-size:0.75em; border-collapse:collapse; width:100%; /*border:1px solid #336699;*/ } .neg { color:var(--mwl-text-danger); } #transactionList tr:nth-child(odd) { background-color:var(--mwl-bg-row-alt); } #transactionList tr:last-of-type { color:var(--mwl-text-brand); font-weight:bold; } #transactionList td { border-bottom:1px solid var(--mwl-border-soft); padding:0.8em 0.2em 0.8em 0.2em; letter-spacing:-0.05em; white-space: nowrap; height:4vh; } #transactionList th { background-color:var(--mwl-bg-brand); padding:0.8em 0.3em 0.8em 0.3em; height:4vh; vertical-align:middle; color:white; font-weight:normal; letter-spacing:0.1em; } #transactionList td:nth-of-type(1) { white-space: nowrap; } #transactionList td:nth-of-type(2) { text-align:left; padding-right:0.2em; max-width: 135px; overflow: hidden; text-overflow: ellipsis;} #transactionList td:nth-of-type(3), #transactionList td:nth-of-type(4) { white-space: nowrap; text-align:right; width:8vw; padding-left:10px; } #transactionList td:nth-of-type(5) { text-align:center;color:var(--mwl-text-brand);font-size:1.1em; width:2vw;} #transactionList th:nth-of-type(3), #transactionList th:nth-of-type(4) { text-align:right; } #transactionList tr.initialBalance td:nth-of-type(2) { text-align:right; font-weight:normal;} #transactionList tr.initialBalance td { border-bottom:1px solid var(--mwl-bg-brand);letter-spacing:0.1em;} div.transactionsSummary { margin-left:3vw; margin-right:3vw; } div.transactionsSummary > div { float:left; width:46vw; margin-bottom:1em; } div.transactionsSummary > div:last-of-type { float:right; text-align:right; } div.transactionsSummary > div > span { font-weight:bold; } .lobbyContents > div { padding:1em; margin-left:3vw; margin-right:3vw; border:1px solid var(--mwl-border-surface); border-radius:0.5em; background-color:var(--mwl-bg-surface); margin-top:2vh; } .lobbyContents > div.red { background-color:var(--mwl-status-danger-bg); color:white; } .eachRemarkList { /**/ } .eachRemarkList > div { margin-left:3vw; margin-right:3vw; border:1px solid #777; background-color:var(--mwl-bg-surface); margin-top:2vh; clear:both; box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2); -moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); -webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); padding:0; } .eachRemarkList > div > table { width:100%; background-color:var(--mwl-bg-table-2); } .eachRemarkList > div > table td { padding:1em; } .eachRemarkList > div > table td:first-of-type{ width:2vw; height:100%; padding:0; } .eachRemarkList > div.remCat_2 > table td:first-of-type{ background-color:var(--mwl-status-danger-bg); } .eachRemarkList > div.remCat_1 > table td:first-of-type{ background-color:var(--mwl-status-warning-bg); border-right:1px solid var(--mwl-booking-stud); } .eachRemarkList > div > table td div:last-of-type { font-size:0.7em; text-align:right; width:100%; margin-top:1em; } .remarkAircraftList { width:100%; letter-spacing:-0.03em; } .remarkAircraftList i { padding:0.5em; font-size:0.7em; } .remarkAircraftList td { height:6vh; border-top:1px solid var(--mwl-text-muted); box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.2); white-space:nowrap; text-align:left; } .remarkAircraftList tr:last-of-type td { border-bottom:1px solid var(--mwl-text-muted); } .remarkAircraftList td:last-of-type { text-align:right; } .remarkAircraftList td:first-of-type { width:1vw; padding:0; } .remarkAircraftList tr.objStatus_2 > td:first-of-type { background-color:var(--mwl-status-danger-bg); background: linear-gradient(to bottom, color-mix(in srgb, var(--mwl-status-danger-bg) 75%, black), color-mix(in srgb, var(--mwl-status-danger-bg) 75%, white), color-mix(in srgb, var(--mwl-status-danger-bg) 75%, black)); } .remarkAircraftList tr.objStatus_2 > td:nth-of-type(2), .remarkAircraftList tr.objStatus_2 > td:nth-of-type(3) { background-color:var(--mwl-status-danger-tint); } .remarkAircraftList tr.objStatus_1 > td:nth-of-type(2), .remarkAircraftList tr.objStatus_1 > td:nth-of-type(3) { background-color:var(--mwl-status-warning-tint); } /*.remarkAircraftList tr.objStatus_ > td:nth-of-type(2), .remarkAircraftList tr.objStatus_ > td:nth-of-type(3), .remarkAircraftList tr.objStatus_0 > td:nth-of-type(2), .remarkAircraftList tr.objStatus_0 > td:nth-of-type(3) { background-color:#F2FFF2; } */ .remarkAircraftList tr.objStatus_1 > td:first-of-type { background-color:var(--mwl-status-warning-bg); background: linear-gradient(to bottom, color-mix(in srgb, var(--mwl-status-warning-bg) 75%, black), color-mix(in srgb, var(--mwl-status-warning-bg) 75%, white), color-mix(in srgb, var(--mwl-status-warning-bg) 75%, black)); } /* .remarkAircraftList tr.objStatus_ > td:first-of-type, .remarkAircraftList tr.objStatus_0 > td:first-of-type { background-color:green; background: linear-gradient(to bottom, #559955, #33dd33, #559955); } */ div.supportText { margin-bottom:3em; } div.supportText h2>i:last-of-type { margin-right:0.8em; } div.supportText p:last-of-type > a { margin-left:0.5em; letter-spacing:-1px; } .fa-external-link { margin-left:0.5em; } div.logout { text-align:center; margin-top:20vw; } div.logout > p:first-of-type { color:var(--mwl-text-danger-strong); font-size:2em; } div.loginErrors > p { color:var(--mwl-text-danger); text-align:center; } div.login > div:last-of-type { text-align:center; margin-top:3em; font-size:0.8em; } div.login label.rememberMe { display:flex; align-items:center; gap:0.6em; width:80vw; margin:0.5em auto 1.5em auto; font-size:0.85em; cursor:pointer; } div.login label.rememberMe input { width:1.3em; height:1.3em; margin:0; padding:0; flex-shrink:0; } div.errorMessage { color:var(--mwl-text-danger); margin:auto; width:80vw; background-color:var(--mwl-bg-warning); border:3px solid var(--mwl-text-danger); border-radius:2vw; text-align:center; padding:1em; margin-top:20vh; box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2); -moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); -webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2); } div.errorMessage > div:first-of-type { font-size:3em; margin-bottom:3vh; } div.windowConfirmationContents { text-align:center; margin-top:4vh; } div.windowConfirmationContents > p.caution { color:var(--mwl-text-danger); font-weight:bold; font-size:1.2em; margin-bottom:5vh; } .touch { cursor:pointer; } .touch:hover, .touch:active { background-color:var(--mwl-bg-brand); color:#ffffff; } #navSpinner { position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.35); z-index:100; visibility:hidden; opacity:0; pointer-events:none; transition: visibility 0.5s, opacity 0.3s linear; display:flex; align-items:center; justify-content:center; } @media screen { [data-theme="dark"] #navSpinner { background-color:rgba(0,0,0,0.6); } } #navSpinner.active { visibility:visible; opacity:1; pointer-events:auto; } #navSpinner i { font-size:3em; color:white; } /* --------------------------------------------------------------------------- COLOR UTILITY CLASSES --------------------------------------------------------------------------- For the PHP pages' one-off colored text and icons, instead of inline style='color:...' which can't follow the dark theme. --------------------------------------------------------------------------- */ .text-brand-strong { color:var(--mwl-text-brand-strong); } .text-brand { color:var(--mwl-text-brand); } .text-danger { color:var(--mwl-text-danger); } .text-success { color:var(--mwl-text-success); } .text-warning { color:var(--mwl-text-warning); } .text-confirm { color:var(--mwl-text-confirm); } .icon-disabled { color:var(--mwl-icon-disabled); } .status-bar-danger { background-color:var(--mwl-status-danger-bg); } .status-bar-warning { background-color:var(--mwl-status-warning-bg); }