/** * Overwrite */ div.bx-std-menu-top-wrp { position: fixed; top: 0; z-index: 1000; } /**-- For Single Column mode --**/ /**-- For Dual Columns mode --**/ .bx-std-page-launcher div.bx-std-page-columns-cnt, .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu, .bx-std-page-launcher .bx-std-page-column.bx-std-page-content { background-color: transparent; } .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu { border-width: 0; } /** * Page Menu (Left Side) */ .bx-std-page-launcher div.bx-std-pmen-item a, .bx-std-page-launcher div.bx-std-pmen-item .sys-icon { color: rgba(255, 255, 255, 0.7); } .bx-std-page-launcher div.bx-std-pmen-item svg g { opacity: 0.7; } .bx-std-page-launcher div.bx-std-pmen-item:hover a, .bx-std-page-launcher div.bx-std-pmen-item:hover .sys-icon, .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active a, .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active .sys-icon { color: rgba(255, 255, 255, 0.85); } .bx-std-page-launcher div.bx-std-pmen-item:hover svg g, .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active svg g { opacity: 0.85; } /** * Launcher */ div.bx-std-launcher { position: relative; float: left; clear: both; width: 100%; left: 0px; } /** * Widget */ div.bx-std-widgets-wrp { position: relative; top: 0px; width: 100%; } div.bx-std-widgets { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } div.bx-std-widgets-highlight { background-color: red; } div.bx-std-widget, div.bx-std-widget-cont { position: relative; } div.bx-std-widget-empty { width: 4.5rem; height: 6.25rem; /* icon 4.5rem + caption gap 0.75rem + caption 1rem */ } .bx-std-widget-dragging { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .bx-std-widget-icon { position: relative; top: 0px; width: 4.5rem; height: 4.5rem; background-color: transparent; line-height: 4.5rem; } .bx-std-widget-icon i.sys-icon { position: absolute; z-index: 2; left: 0px; width: 4.5rem; font-size: 48px; text-align: center; text-shadow: none; color: white; } .bx-std-widget-icon-disabled { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: 0.4; } .bx-std-widget-link > img { position: relative; z-index: -1; width: 4.5rem; height: 4.5rem; border-radius: 1rem; /* matches rounded-2xl on the link, so its ring/shadow hugs the icon without clipping the wrapper */ background-color: transparent; background-position: 0px 0px; background-repeat: no-repeat; } div.bx-std-widget-icon-jitter { position: absolute; top: 0; left: 0; width: 4.5rem; height: 4.5rem; z-index: 5; background-color: transparent; cursor: move; } div.bx-std-widget-notices { position: absolute; z-index: 3; box-sizing: content-box; top: -1rem; right: -1rem; width: 2rem; height: 2rem; background-color: #ff3b38; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 1.25rem; line-height: 2rem; text-align: center; font-weight: 600; font-size: 1.0rem; color: #fff; overflow:visible; } .bx-std-widgets.bx-std-jitter .bx-std-widget-notices { display: none; } div.bx-std-widget-actions { position: absolute; display: none; top: -1rem; z-index: 10; } div.bx-std-widget-actions.left { left: -1rem; } div.bx-std-widget-actions.right { right: -1rem; } div.bx-std-widget-actions-cnt { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } div.bx-std-widget-action { box-sizing: content-box; margin-top: 0.25rem; } div.bx-std-widget-action:first-child { margin-top: 0; } div.bx-std-widget-action, div.bx-std-widget-action > a, div.bx-std-widget-action > button { position: relative; display: block; float: none; width: 2rem; height: 2rem; } div.bx-std-widget-action > a, div.bx-std-widget-action > button { display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } div.bx-std-widget-action > a img, div.bx-std-widget-action > button img { width: 1.5rem; height: 1.5rem; } div.bx-std-widget-action i.sys-icon { font-size: 20px; text-shadow: none; color: #323c46; } .bx-std-widget-loading { display: none; position: absolute; top: 100%; left: 0; width: 4.5rem; height: 1rem; /* the caption's row: same 0.75rem gap under the tile and the same 1rem line */ margin-top: 0.75rem; /* a two-row animated tile wave (the SVG carries its own keyframes, so it animates as a background image); loading.svg is the single-row sibling for other loaders */ background-image: url(../images/loading-double.svg); background-repeat: no-repeat; background-position: center center; background-size: 40px 10px; } div.bx-std-widget-caption { position: relative; width: 4.5rem; height: 1rem; margin-top: 0.75rem; line-height: 1rem; white-space: nowrap; text-align: center; text-overflow: ellipsis; overflow: hidden; font-weight: 400; font-size: 0.875rem; } div.bx-std-widget-caption > .bx-std-widget-link { cursor: pointer; } div.bx-std-widget-caption-jitter { position: absolute; top: 0px; left: 0px; width: 5rem; height: 1rem; } /** * Widgets animation */ .bx-std-widgets.bx-std-jitter .bx-std-widget:not(.bx-std-widget-dragging):nth-child(2n) { animation-name: keyframes1; animation-iteration-count: infinite; transform-origin: 50% 10%; } .bx-std-widgets.bx-std-jitter .bx-std-widget:not(.bx-std-widget-dragging):nth-child(2n-1) { animation-name: keyframes2; animation-iteration-count: infinite; animation-direction: alternate; transform-origin: 30% 5%; } @keyframes keyframes1 { 0% { transform: rotate(-1deg); animation-timing-function: ease-in; } 50% { transform: rotate(1.5deg); animation-timing-function: ease-out; } } @keyframes keyframes2 { 0% { transform: rotate(1deg); animation-timing-function: ease-in; } 50% { transform: rotate(-1.5deg); animation-timing-function: ease-out; } } @media (prefers-reduced-motion: reduce) { .bx-std-widgets.bx-std-jitter .bx-std-widget:not(.bx-std-widget-dragging):nth-child(2n), .bx-std-widgets.bx-std-jitter .bx-std-widget:not(.bx-std-widget-dragging):nth-child(2n-1) { animation: none; } } /** * Launcher Browser */ #bx-std-launcher-browser { overflow: visible; } #bx-std-launcher-browser::before { position: absolute; display: block; content: ''; top: -0.125rem; left: 1.5rem; width: 0.5rem; height: 0.5rem; box-shadow: inset 1px 1px 0px rgba(240, 240, 240, 0.2); background: #001529; transform: rotate(45deg); } #bx-std-launcher-browser .bx-popup { margin: 0; box-shadow: inset -1px -1px 0px rgba(240, 240, 240, 0.2), inset 1px 1px 0px rgba(240, 240, 240, 0.2); background-color: #001529; } .bx-std-launcher-browser { position: relative; width: 42rem; } .bx-std-launcher-browser .bx-std-lb-cnt { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .bx-std-launcher-browser .bx-std-lb-menu, .bx-std-launcher-browser .bx-std-lb-content-cnt { position: relative; height: 30rem; overflow-x: hidden; overflow-y: auto; } .bx-std-launcher-browser .bx-std-lb-menu { -webkit-flex: 0 0 12rem; flex: 0 0 12rem; box-shadow: inset -1px 0px 0px rgba(240, 240, 240, 0.2) } .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo { padding-left: 1rem; line-height: 3.75rem; } .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo, .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo a, .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item a { color: rgba(255, 255, 255, 0.7); } .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item:hover a, .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item:hover .sys-icon, .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item.bx-menu-tab-active a, .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item.bx-menu-tab-active .sys-icon { color: rgba(255, 255, 255, 0.85); } .bx-std-launcher-browser .bx-std-lb-content { -webkit-flex-grow: 1; flex-grow: 1; } .bx-std-lb-widgets { position: relative; display: none; width: 100%; height: 100%; } .bx-std-lb-widgets.bx-std-lbw-active { display: block; } .bx-std-lb-widgets-cnt { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } .bx-std-launcher-browser .bx-std-widget-icon { width: 4rem; height: 4rem; line-height: 4rem; } .bx-std-launcher-browser .bx-std-widget-link > img, .bx-std-launcher-browser div.bx-std-widget-icon-jitter { width: 4rem; height: 4rem; } .bx-std-launcher-browser .bx-std-widget-loading, .bx-std-launcher-browser div.bx-std-widget-caption { width: 4rem; } /** * Mobile Views */ .bx-media-tablet .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu, .bx-media-phone .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu { -webkit-flex-basis: 3.5rem; flex-basis: 3.5rem; width: 3.5rem; } .bx-media-tablet .bx-std-page-launcher div.bx-std-pmen-item .bx-std-pmen-item-cnt, .bx-media-phone .bx-std-page-launcher div.bx-std-pmen-item .bx-std-pmen-item-cnt { padding-left: 3.5rem; } .bx-media-tablet .bx-std-page-launcher div.bx-std-pmen-item a span, .bx-media-phone .bx-std-page-launcher div.bx-std-pmen-item a span { display: none; } #bx-informer{ position: fixed; z-index: 10; bottom: 0px; width: calc(100% - 2.5rem); left: 1.25rem; } /* The informer floats over the tiles, so each message sits on a near-opaque base of the page colour; the type tint (the site's bg-blue/yellow/red-50 and their dark 10% washes) goes on top as a background image, and the text colours stay the site's. */ #bx-informer .bx-informer-msg { display: none; background-color: rgb(255 255 255 / 0.95); } .dark #bx-informer .bx-informer-msg { background-color: rgb(17 24 39 / 0.95); } #bx-informer .bx-informer-msg-info { background-image: linear-gradient(rgb(239 246 255), rgb(239 246 255)); } #bx-informer .bx-informer-msg-alert { background-image: linear-gradient(rgb(254 252 232), rgb(254 252 232)); } #bx-informer .bx-informer-msg-error { background-image: linear-gradient(rgb(254 242 242), rgb(254 242 242)); } .dark #bx-informer .bx-informer-msg-info { background-image: linear-gradient(rgb(59 130 246 / 0.1), rgb(59 130 246 / 0.1)); } .dark #bx-informer .bx-informer-msg-alert { background-image: linear-gradient(rgb(234 179 8 / 0.1), rgb(234 179 8 / 0.1)); } .dark #bx-informer .bx-informer-msg-error { background-image: linear-gradient(rgb(239 68 68 / 0.1), rgb(239 68 68 / 0.1)); } #bx-informer #sys-module-discontinued.bx-informer-msg, #bx-informer #sys-account-need-to-change-password.bx-informer-msg{ display: flex; } /* Introduction tour (Shepherd): its stylesheet paints the primary button white at 75% on #3288e6 (3.6:1); blue-600 with white text gives 5.2:1. */ .shepherd-button:not(.shepherd-button-secondary) { background: rgb(37 99 235); color: #fff; } .shepherd-button:not(.shepherd-button-secondary):not(:disabled):hover { background: rgb(29 78 216); color: #fff; }