/* BusMgr Control - Main stylesheet. */ /* Global variables */ :root { --color-OliveGreen: #808000; --color-Purple: #76448a; /* Colour analysis: https://www.colorhexa.com/ */ /* #4b0082 - Indigo. Ref. https://www.crispedge.com/color/4b0082 */ --color-primary: #4b0082; --color-light: #9b71b9; --color-pale: #ebe2f1; /* Data panels */ --color-panel-data: var(--color-Purple); --color-panel-data-background: var(--color-Purple); --color-panel-data-border: var(--color-Purple); } /* Document */ html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 14px; } } body { font-family: Arial, Verdana, Helvetica, Lucida, sans-serif; } @media screen and (max-height: 399px) { #sbc-page-body { min-height: 240px; } } @media screen and (min-height: 400px) { html { height: 100vh; } body.sbc-layout-flex { height: 100vh; display: flex; flex-direction: column; } body.sbc-layout-flex #sbc-page-body { flex: 1; min-height: 0; overflow-y: auto; } } /* Responsive */ body > .container, header > .container, footer > .container { padding: 0 0.5%; } @media (min-width: 992px) { .container { max-width: 1200px; } } @media (min-width: 768px) { .container { max-width: 1200px; } } @media (min-width: 576px) { .container { max-width: 1200px; } } /* Header */ #sbc-page-header { } a.navbar-brand { white-space: normal; text-align: center; word-break: break-all; } .border-top { border-top: 1px solid #e5e5e5; } .border-bottom { border-bottom: 1px solid #e5e5e5; } .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } button.accept-policy { font-size: 1rem; line-height: inherit; } /* Information */ .sbc-para { margin: 8px 0; } /* Footer */ #sbc-page-footer { padding: 4px 0; } #sbc-page-footer, #sbc-page-footer div { font-size: .8rem; } /* Page caption */ .sbc-page-caption { margin: 0; padding: 16px 24px; font-size: 48px; font-weight: bold; color: #000; } /* Actions */ a, a:hover { text-decoration: underline; color: #d4af37; } a:focus { outline-color: #b0b0b0; outline-width: thin; } .sbc-action, .sbc-action-text { cursor: pointer; } .sbc-action-text:hover { text-decoration: underline; } .sbc-action-link { display: inline-block; font-size: 1rem; font-weight: bold; color: #000; cursor: pointer; } .sbc-action-link:hover { opacity: .7; transition: all .4s ease-in-out; } .sbc-link-text { font-size: 18px; font-weight: bold; } /* Buttons */ .sbc-button-cta, .sbc-button-action { display: inline-block; padding: 12px 12px; min-width: 100px; color: #404040; background-color: #e0e0e0; font-size: 16px; font-weight: bold; text-align: center; border-radius: 20px; cursor: pointer; transition: all .5s ease-in-out; outline: none; } .sbc-button-action { } .sbc-button-action:hover { background-color: #b0b0b0; } .sbc-button-action:focus { outline: none; box-shadow: 0 0 4px 2px #808080; } .sbc-button-cta:hover { background: #808080 !important; } /* --- Notification --- */ #sbc-notification { display: none; position: fixed; top: 0; right: 0; min-width: 180px; margin-right: 12px; z-index: 1000; border: 1px solid #808080; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; overflow: hidden; } #sbc-notification .content { background-color: #fbfbfb; overflow: hidden; } #sbc-notification .heading { font-size: 16px; font-weight: bold; background-color: #f0f0f0; border-bottom: 1px solid #808080; } #sbc-notification .heading:after { content: ""; display: table; clear: both; } #sbc-notification .title { float: left; padding: 4px 8px; white-space: nowrap; } #sbc-notification .close { float: right; padding: 4px; font-size: 14px; font-weight: bold; cursor: pointer; } #sbc-notification .message { clear: both; padding: 8px; font-size: 14px; } /* --- Modal Please wait --- */ #sbc-please-wait { display: none; cursor: progress; position: fixed; z-index: 1001; top: 0; left: 0; height: 100%; width: 100%; background: rgba(250,250,250,.25) url('../img/animated/InProgress-01.gif') 50% 50% no-repeat; } /* Drop down menus */ .dropdown-toggle.caret-off::before, .dropdown-toggle.caret-off::after { display: none !important; } /* Dialogs */ .sbc-dialog { display: none; } .ui-dialog { position: fixed; padding: 0; } .ui-dialog .ui-dialog-titlebar { padding: 6px 12px; } .ui-dialog .ui-dialog-content { padding: 6px 12px; } .ui-dialog.ui-widget.ui-widget-content { border-width: 1px; border-color: #d4af37; -moz-box-shadow: 4px 4px 6px #ccc; -webkit-box-shadow: 4px 4px 6px #ccc; overflow: hidden; } .ui-dialog.ui-widget.ui-widget-content.ui-corner-all { border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ui-dialog.ui-widget .ui-widget-header { font-size: 1.1rem; color: #fff; background-color: #d4af37; border-color: #d4af37; } .ui-widget-content { font-size: 16px; color: #000; } .ui-dialog .ui-dialog-titlebar.ui-corner-all { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ui-dialog.no-close .ui-dialog-titlebar-close { display: none; } .ui-dialog .ui-dialog-buttonpane { padding: 4px 8px; border-color: #d4af37; } .ui-dialog .ui-dialog-buttonpane button { min-width: 80px; margin: 4px 8px 4px 0; color: #fff; background-color: #d4af37; border-color: #d4af37; outline: none; } .ui-dialog .ui-dialog-buttonpane button:disabled { color: #e0e0e0; background-color: #d5be70; border-color: #d5be70; } .ui-widget-overlay { background-color: #b0b0b0; opacity: 0.25; } /* Date Picker */ .ui-datepicker { } .ui-datepicker .ui-datepicker-header { background-color: #fff; border: 1px solid #d4af37; } /* The End */