:root { --bnc-border-color: #e0e0e0; --bnc-text-color-light: #666666; --bnc-text-color: #212121; --bnc-primary: #1976D2; --bnc-primary-hover: #0D47A1; } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; /* 2 */ box-sizing: border-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*------------------------------------*\ #FONT-FACE \*------------------------------------*/ /** * All web fonts are loaded here: * * 1. Symbolset Pika (icon font) * 2. Binocs custom icon font (for Binocs status icons) */ /** * We make sure to use Semibold instead of the rather ugly bold version of Open * Sans. */ @font-face { font-family: "SSPika"; src: url(/public/87fe57e8cda674f74814a75d93947823.woff2) format("woff2"), url(/public/1fcaa4ac54baaca933141dfc7652c0d6.woff) format("woff"); font-weight: normal; font-style: normal; } /** * Custom created icon font for Binocs, holds the Binocs status icons. */ @font-face { font-family: 'binocs'; src: url(/public/e47d6bc65ad41d8dcdce7b6ceb426f2f.woff2) format('woff2'), url(/public/0c98c3bc18f4f5a92303ff9dfffa633a.woff) format('woff'); font-weight: normal; font-style: normal; } /*------------------------------------*\ #BOX-SIZING \*------------------------------------*/ /** * Moving all elements to a more sane box-model of border-box. * Also see: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /*------------------------------------*\ #TYPE \*------------------------------------*/ /** * Typographical base selectors. */ /** * The base typographic settings. * * 1) For a standard font-size of 12px, this resolves to 17px. */ html { font-family: "Inter", sans-serif; font-weight: 400; font-size: 12px; line-height: 1.41666666666; /* [1] */ color: var(--bnc-text-color); } /** * Headings generally shouldn't be bold. Let's also remove margins. */ h1, h2, h3, h4, h5, h6 { font-weight: 400; margin-top: 0; margin-bottom: 0; } /** * Emboldened elements. * * 1) The font-weight of 600 is attributed to Inter Semibold in * _generic.fontface.css. (As opposed to 700 for Inter Bold.) */ strong, b dt { font-weight: 600; /* [1] */ } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background-color: #A9A9A9; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background-color: #808080; } ::-webkit-scrollbar-track { background-color: #F5F5F5; } /*------------------------------------*\ #LINKS \*------------------------------------*/ /** * Links are underlined. * * 1) Links get lighter on hover... * 2) and turn blue when active. * */ a { color: inherit; /*color: var(--bnc-primary);*/ /*text-decoration: none;*/ text-decoration: underline; text-decoration-color: rgba(0, 60, 82, .4); -webkit-text-decoration-color: rgba(0, 60, 82, .4); } a:hover { opacity: .7; /* [1] */ } a:active { color: var(--bnc-primary); /* [2] */ } /*------------------------------------*\ #LISTS \*------------------------------------*/ /** * Base selectors for list elements. */ ul, ol { list-style: none; margin: 0; padding: 0; } /*------------------------------------*\ #FORMS \*------------------------------------*/ /** * Form base selectors. */ fieldset { border: none; padding: 0; margin: 0; } input[type="checkbox"], input[type="radio"] { margin-right: 5px; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance:textfield; } .clickable { cursor: pointer; } .hover--override:hover { color: var(--bnc-primary-hover) !important; opacity: 1 !important; } /*------------------------------------*\ #TABLES \*------------------------------------*/ /** * Table base selectors. */ /** * * 1) Default text-alignment is center. */ thead { text-align: left; /* [1] */ } /*------------------------------------*\ #GRID \*------------------------------------*/ /** * A simple usable-anywhere grid system. It has no looks, just creates all the * rows and columns. * * Requirements * 1. An empty parent element with the grid class. Do not apply dimension or * offset utilities to this element. * 2. One or more children elements with grid__cell class. All content goes * here. These elements should probably have sizing utilities applied to * them (using the _wins.widths.css). If an element has no sizing utility * applied to it, it will grow as wide as its contents. * * Modifiers * 1. o-grid--gutter: grid with spacing between the cells. * 2. o-grid--align-middle: middle-align all immediate children grid cells. * 3. o-grid--align-bottom: bottom-align all immediate children grid cells. * 4. o-grid--align-right: right-align all grid cells. * 5. o-grid--align-center: center-align all grid cells. */ /** * The base o-grid element. * * 1) Remove whitespace between cells that appears between inline-block * elements. It's reset in the cells to whatever is the base font-size (set * in _base.type.css on the html element). * 2) Make cells vertically align to the top of each other. * 3) A cell will be as wide as its contents. Use the _wins.widths.css utilities * to control sizing. */ .o-grid { display: block; list-style: none; margin: 0; padding: 0; font-size: 0; /* [1] */ } .o-grid__cell { display: inline-block; font-size: 12px; /* [1] */ vertical-align: top; /* [2] */ width: auto; /* [3] */ } .o-grid__cell_bottom-align { vertical-align: bottom !important; /* [2] */ } .o-grid__cell--largetext { font-size: 14px; /* [1] */ } .o-grid__cell_ofvis { overflow: visible; } /** * Modifier: grid with gutter. * * 1) Same as padding-left of .grid__cell. To get rid of the first grid cell's * left space, we use this negative margin-left. * 2) We only want the padding added to the immediate cells. This is important * as grids are infinitely nestable. */ .o-grid--gutter { margin-left: -24px; /* [1] */ } .o-grid--gutter > .o-grid__cell { /* [2] */ padding-left: 24px; /* [1] */ } /** * Modifier: grid with small gutter. * * 1) Same as padding-left of .grid__cell. To get rid of the first grid cell's * left space, we use this negative margin-left. * 2) We only want the padding added to the immediate cells. This is important * as grids are infinitely nestable. */ .o-grid--gutter-sm { margin-left: -10px; /* [1] */ } .o-grid--gutter-sm > .o-grid__cell { /* [2] */ padding-left: 10px; /* [1] */ } /** * Modifier: middle align all grid cells * * 1) As grids are infinitely nestable the selector only targets the grid's * immediate cell children. */ .o-grid--align-middle > .o-grid__cell { /* [1] */ vertical-align: middle; } /** * Modifier: bottom align all grid cells * * 1) As grids are infinitely nestable the selector only targets the grid's * immediate cell children. */ .o-grid--align-bottom > .o-grid__cell { /* [1] */ vertical-align: bottom; } /** * Modifier: right align all grid cells */ .o-grid--align-right { text-align: right; } /** * Modifier: center align all grid cells */ .o-grid--align-center { text-align: center; } /*------------------------------------*\ #EMBEDS \*------------------------------------*/ /** * Background-image embeds. No specific image or dimensions are set here. These * will most likely be set at the component level. * * (For now used for the Binocs logo.) */ .o-embed { display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: left top; } /*------------------------------------*\ #SCROLLABLES \*------------------------------------*/ /** * Gives elements an internal scrolling mechanism. * * Requirements * 1. The o-scrollable class must be set on the element that has to receive the * internal scrolling mechanism. Also, a max-height must be set on the * element on the component level. * * Modifiers * 1. o-scrollable--visually: makes it visually clear that an element is * scrollable, by making the scroll bars visible to the user at all times. * 2. o-scrollable--horizontally: makes the scrollbars appears horizontally. * */ /** * The main o-scrollable component. * * 1) Is to be reset by a component. * 2) Only show a vertical scroll bar, never a horizontal one. * 3) Auto-hide the scrollbar in IE. */ .o-scrollable { max-height: 100%; /* [1] */ overflow-y: auto; /* [2] */ overflow-x: hidden; /* [2] */ -ms-overflow-style: -ms-autohiding-scrollbar; /* [3] */ } .o-scrollable--scroll { overflow-y: scroll; } .o-scrollable--scrollbar-padding { padding-right: 7px; } /** * Modifier: * o-scrollable--horizontally * * 1) Resetting or inverting the main component. * 2) Makes sure the child elements don't wrap to the next line. */ .o-scrollable--horizontally { max-height: none; /* [1] */ overflow-y: hidden; /* [1] */ overflow-x: auto; /* [1] */ white-space: nowrap; /* [2] */ } /** * Modifier: * o-scrollable--both-ways */ .o-scrollable--both-ways { overflow-y: auto; overflow-x: auto; white-space: nowrap; } /** * Modifier: * o-scrollable--visually */ .o-scrollable--visually::-webkit-scrollbar { -webkit-appearance: none; width: 7px; height: 7px; } .o-scrollable--visually::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); } .o-scrollable--max-content { width: max-content; min-width: 100%; max-width: 100%; } /*------------------------------------*\ #TEMPLATE \*------------------------------------*/ /** * The template component. It's used for the column layout that makes * up every Binocs page. This works together with the grid object in * _objects.grid.css. */ .c-template { } .c-template__main { width: calc(100% - 400px); } .c-template__side { width: 400px; } /** * One column pages modifier. */ .c-template--single-col { } .c-template--single-col .c-template__main { width: 100%; } .c-template--single-col .c-template__side { display: none; } /*------------------------------------*\ #PAGE \*------------------------------------*/ /** * The main wrapper that controls every page. */ .c-page { /* margin: 0 auto; width: 98%; min-width: 1000px; max-width: 1860px;*/ } .c-page > * { /* max-width: 1112px; max-width: 1860px; margin: auto;*/ } .c-page.c-page--demand.c-page--tree > *, .c-page.c-page--scheduling.c-page--tree > * { /*max-width: 1860px;*/ } .c-page.c-page__narrow, .c-page.c-page__narrow > * { max-width: 1112px !important; } /* modifier for new page layout */ .c-page--data { height: 100vh; width: 100%; } .page-header { color: #212121 !important; padding: 8px 2rem; margin: 0 !important; border-bottom: 1px solid var(--bnc-border-color); } .page-content { padding: 0 1rem !important; } /*------------------------------------*\ #PAGE-BACKGROUND \*------------------------------------*/ /** * The background gradient or color. * * Requirements: * 1. Add c-page-background class to body element. * * Modifiers: * 1. c-page-background--dimmed: the background turns to gray. Most likely * because the user has switched away from the baseline plan. The gray * background is a visual indicator for that. * 2. c-page-background--full-color: just the fallback color, no gradient here. * As used in the styleguide. * */ /** * 1) Blue-ish. * 2) Gray with a subtle touch of blue. */ .c-page-background { background-color: #ffffff; /* [1] */ } .c-page-background--dimmed { background-image: none; background-color: #ffffff; } .c-page-background--dimmed .o-grid.header, .c-page-background--dimmed .o-grid:has(scenario-selector) { background-color: #EDE7F6; } .c-page-background--full-color { background-image: none; } /*------------------------------------*\ #PAGE-HEAD \*------------------------------------*/ /** * The page's head. * * 1) Makes the head break out of c-page which has a max-width. * 2) Makes the icons bigger in the secondary navigation. * 3) IE11 sometimes has a visible gap between the background-color of * c-page-head and the box-shadow. Therefor we position a 1px width white * block element on top of that visible gap. Ugly hack. (Remove as soon as * IE11 is obsolete.) */ .c-page-head.env-localhost { background: #F1F8E9; } .c-page-head.env-test { background: #EFEBE9; } .c-page-head.env-uat { background: #FFF3E0; } .c-page-head.env-app { background: #FFFFFF; } .c-page-head { background-color: white; /*box-shadow: 1000px 0 0 0 white, -1000px 0 0 0 white; !* [1] *!*/ /*margin-bottom: 23px;*/ position: relative; /* [3] */ display: flex; align-items: center; padding: 0 2rem; border-bottom: 1px solid var(--bnc-border-color); } .c-page-head::before { /* [3] */ content: ""; width: 1px; height: 100%; display: block; background-color: white; position: absolute; left: -1px; } .c-page-head__nav { width: auto; } .c-page-head__nav-sec { width: auto; font-size: 14px; /* [2] */ margin-left: auto; text-align: right; position: relative; top: 2px; } .mat-icon { padding: 0.5rem !important; margin: 0 !important; height: 32px !important; width: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* modifier for new page layout */ .c-page--data .c-page-head { margin-bottom: 0; padding: 0 20px; } /*------------------------------------*\ #PAGE-LOGO \*------------------------------------*/ /** * The main logo. */ /** * Removes default margin for h element. */ .c-page-logo__link { display: flex; align-items: center; text-decoration: none; } .c-page-logo--container .env-text { font-size: 18px; font-weight: 500; color: var(--bnc-text-color-light); margin-left: -16px; white-space: nowrap; } .c-page-logo { margin: 0; /* [1] */ } .c-page-logo--disabled:hover { cursor: default; opacity: 1 !important; } .c-page-logo__link:hover { opacity: .8; } .c-page-logo__owl { display: none; } .c-page-logo__txt { width: 106px; height: 30px; right: auto; } :not(.c-login__logo) .c-page-logo__txt { margin-right: 24px; } .c-login__logo .c-page-logo__txt { height: 40px; } .c-page-logo__txt { background: url(/public/285f32a954f4c69b16b838b27aaf886a.svg) no-repeat left center; background-size: contain; } .c-page-logo img { max-width: 100%; } .c-login__logo .c-page-logo__txt { background: url(/public/285f32a954f4c69b16b838b27aaf886a.svg) no-repeat left center; background-size: contain; } /*------------------------------------*\ #PAGE-NAV \*------------------------------------*/ /** * The main page navigation. * There's two of them: the main nav and a secondary nav. * * 1) Resets default link styling from base.links.css. * 2) Same as padding-left of submenu (.c-dropdown--pagenav .c-dropdown__link * in components-dropdown.css) */ .c-page-nav { } .c-page-nav__link { font-weight: 400; display: inline-flex; padding: 16px; margin-right: 0; text-decoration: none; color: var(--bnc-text-color-light); cursor: pointer; font-size: 14px; height: 56px; align-items: center; } .c-page-nav__link--current { color: var(--bnc-primary); border-bottom: 3px solid var(--bnc-primary); font-weight: 600; /* There's an issue where the box sizing is not handling border correctly. Reducing the padding is a workaround. ~ITG */ padding-bottom: 13px; } .c-page-nav__link:hover { color: var(--bnc-primary); opacity: 1; /* [1] */ } .c-page-nav__link:active { opacity: .7; } /** * The secondary navigation. */ .c-page-nav--sec { display: flex; align-items: center; } .c-page-nav--sec .c-page-nav__link { padding: 15px 12px; margin-right: 0; font-size: 14px; } .c-page-nav--sec .c-page-nav__user { font-weight: 400; display: inline-block; padding: 15px 12px; color: var(--bnc-text-color-light); font-size: 14px; cursor: text; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*max-width: 140px;*/ } /** * The teriary (vertical) navigation as used in the style guide and help * documentation. */ .c-page-nav--tert { margin-top: 5px; } .c-page-nav--tert .c-page-nav__link { font-size: 14px; padding-top: 2px; padding-bottom: 2px; padding-left: 12px; padding-right: 12px; display: block; } .c-page-nav--tert .c-page-nav__link--current { color: var(--bnc-primary); border-bottom: none; padding-bottom: 2px; } /** * The subnavigation as currently used in the help documentation. */ .c-page-nav--sub { margin-top: 5px; margin-bottom: 10px; } .c-page-nav--sub .c-page-nav__link { font-weight: normal; padding-left: 20px; padding-top: 4px; padding-bottom: 4px; } .christmasNav { display: flex; padding-left: 34px; color: red; position: relative; } .christmasIcon { background-image: url(/public/bd714119c70ff3e64d691334a96d8274.png); background-size: contain; position: absolute; width: 30px; height: 30px; bottom: 15px; left: 0px; } /*------------------------------------*\ #PAGE WIDTH SIDEBAR \*------------------------------------*/ .c-page-with-sidebar { display: flex; position: absolute; top: 57px; left: 0; right: 0; bottom: 0; background-color: white; } .c-page-with-sidebar__side { border-right: 1px solid #BFBFBF; overflow-y: auto; overflow-x: hidden; } .c-page-with-sidebar__content { padding: 40px 80px; flex: 1; overflow-y: auto; } /*------------------------------------*\ #DROPDOWNS \*------------------------------------*/ /** * The dropdown menus that appear everywhere. Dropdowns require bootstrap's * dropdown.js. The docs for this are at http://getbootstrap.com/javascript/#dropdowns. * * JS requirements: * 1) a data attribute on the .c-dropdown__toggle element: * data-toggle="dropdown". * In the case of the search field, the field itself toggles the dropdown and * the data-toggle is not needed. * * The JavaScript will set an .open class on the .c-dropdown containing element. * We use that .open class to show/hide the dropdown menu. * * HTML requirements: * 1) a container: .c-dropdown * 2) a clickable element: .c-dropdown__toggle * 3) an element that holds the menu (ul?): .c-dropdown__menu * 4) elements for menu items (li?): .c-dropdown__item * 5) if there's no link inside .c-dropdown__item, add .c-dropdown__item-no-link * modifier class. * 6) .c-dropdown__body: wrapper for the main contents of the dropdown menu. * It's important to add the scrollable object to this element. * * HTML not required elements: * 1) inside the .dropdown__item there's a .c-dropdown__link (a) * 2) .c-dropdown__item-desc: a description that can appear next to an item * eg. a key combo. * 3) .c-dropdown__caret: the dropdown icon that can appear next to a button's * label. Should be combined with the icon component. Icon shouuld be * ss-dropdown. * 4) .c-dropdown__title: for those dropdowns that have a title. * 5) .c-dropdown__wrapper: gives left and right padding to elements inside the * dropdown menu. */ /** * This is the base class. * * Can be extended with: * 1) .c-dropdown--lg: for larger menus * 2) .c-dropdown--pagenav: for main navigation menus * 3) .c-dropdown--checkmarks: to have checkmarks appear the the left of * the currently selected item (this requires an icon with the class of * .c-dropdown__icon as a child of .c-dropdown__link) * 4) .c-dropdown--input-field for a dropdown that appears under an input field. * * Bootstrap's dropdown.js will add a .open class to this element when the menu * needs to open. * * CSS comments: * 1. Needs relative positioning so we can position the dropdown__menu itself to * the bottom of this. * 2. In cases where this is a block-level element, we don't want it to fill the * width of its parent as right-aligned dropdowns will visually align to the * parent's right edge. * 3. For those cases where a parent has pointer events disabled. * 4. Sometimes an absolute positioning is used for escaping the overflow of the parent */ .c-dropdown { /* [1] */ position: relative; /* [1] */ display: inline-block; /* [2] */ pointer-events: auto; /* [3] */ } .c-dropdown__toggle .material-symbols-rounded, .c-dropdown__menu .material-symbols-rounded { font-size: 17px !important; } .tree-node-status .c-dropdown__toggle .material-symbols-rounded { font-size: 20px !important; } .c-dropdown--w-200 { width: 200px; } .c-dropdown--autooverflow { overflow: auto !important; } /* * 1. The relative positioning is gone here, to allow the menu to escape from the overflow:hidden parent./*/ .c-dropdown--escapeoverflow { /* [4] */ display: inline-block; /* [2] */ pointer-events: auto; /* [3] */ } /*Dropdown used on availabilities screen monthly filter*/ .c-dropdown-absolute { position: absolute; /* [1] */ pointer-events: auto; /* [3] */ } /*Absolute positioned dropdown with a right aligned button*/ .c-dropdown-absolute--right { position: absolute; /* [1] */ pointer-events: auto; /* [3] */ right:5px; } /** * The clickable element (a, button...) that should open/close the dropdown. * Requires data-toggle="dropdown" for the JavaScript to work. */ .c-dropdown__toggle { } /** * The little arrow icon that indicates the dropdown. Should be combined * with the icon component. The icon should be ss-dropdown. * * 1) This makes sure an eventual text-decoration on a parent element isn't * propagated to this caret icon. (This is important for the button * modifier that adds a text-decoration to the button element.) */ .c-dropdown__caret { font-size: 80%; opacity: .5; position: relative; top: 1px; display: inline-block; /* [1] */ } /** * If the dropdown__toggle is disabled, the dropdown caret should never * display. Disable using the `disabled` attribute, or by adding * `c-btn--disabled` in the case of an a element that looks like a btn. */ .c-dropdown__toggle:disabled .c-dropdown__caret, .c-dropdown__toggle.c-btn--disabled .c-dropdown__caret { display: none; } /** * The element (likely ul) that should show/hide upon clicking * dropdown__toggle. * * Can be extended with: * 1. .dropdown__menu--right to have the menu align to the right edge of the * element. * * CSS comments: * 1) Positioned in regards to .dropdown. * 2) Only visible after js adds the .open class to .dropdown. */ .c-dropdown__menu { position: absolute; /* [1] */ top: 100%; /* [1] */ left: 0; /* [1] */ z-index: 1000; display: none; /* [2] */ /*min-width: 215px;*/ margin: 2px 0 0; list-style: none; text-align: left; background-color: white; padding: 8px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); font-size: 12px; max-width: 750px; } .c-dropdown__menu--mw--250 { min-width: 250px } /** * This will define the scrollable area. Use this for the dropdown menu's * main content. Exclude titles, form elements, footers... from this. * Use in combination with the scrollable object. * Max-height makes sure it only shows scroll bars when needed; for large * dropdowns. */ .c-dropdown__body { max-height: calc(100vh - 500px); } /** * Dropdowns don't have padding so we can use the divider component more * easily. Use this wrapper to apply a left and right padding. */ .c-dropdown__wrapper { padding-left: 10px; padding-right: 10px; } /** * Some dropdowns have a heading element (h1-h5). * Use title component to style. * For prettier spacing inside a dropdown, better add this class too. */ .c-dropdown__title { margin-top: 3px; margin-bottom: 3px; } /** * Bootstrap's dropdown.js will add the .open class to .dropdown on click. * * 1) Now we can show the dropdown menu. * 2) And hide the outline that appears on the toggle in some browsers. */ .open .c-dropdown__menu { display: block; /* [1] */ } .open .c-dropdown__toggle { outline: none; /* [2] */ } /** * Make the menu align to the right edge of the element instead. * 1) Positioned in regards to .dropdown. */ .c-dropdown__menu--right { left: auto; /* [1] */ right: 0; /* [1] */ } /** * Adds 7px of margin when a dropdown is used together with a input field (tags). * 1) Positioned in regards to .dropdown. */ .c-dropdown__menu--right--extraright { left: auto; /* [1] */ right: 7px; /* [1] */ } .c-demand-dtl__addtag .c-dropdown__menu--right--extraright{ right: 0; } /** * We don't want the text to wrap to the next line inside a dropdown menu. */ .c-dropdown__item { white-space: nowrap; } /** * Unless we really want it to... */ .c-dropdown__item--textwrap { white-space: normal; } .c-dropdown__item--disabled { opacity: .5; pointer-events:none; } .c-dropdown__item.selected .c-dropdown__link { color: white; opacity: 1; background-color: var(--bnc-primary); } /** * If there is no link inside the dropdown__item (eg. the team picker), * we want some more spacing between the items. */ .c-dropdown__item--no-link { padding-top: 3px; padding-bottom: 3px; line-height: 1.428571429; } .c-dropdown__item--spacier { padding-top: 5px; padding-bottom: 11px; } .c-dropdown__link { display: flex; padding: 3px 10px; font-weight: normal; position: relative; cursor: pointer; align-items: center; } .c-dropdown__link, .c-dropdown__link:link, .c-dropdown__link:visited, .c-dropdown__link:hover, .c-dropdown__link:active, .c-dropdown__link:focus { color: var(--bnc-text-color); text-decoration: none; } .c-dropdown__link:focus { color: white; opacity: 1; background-color: var(--bnc-primary); } .c-dropdown__link .c-btn--icon { position: absolute; right: 10px; visibility: hidden; } .c-dropdown__link:hover { background: rgba(58, 157, 250,0.17); opacity: 1; } .c-dropdown__link:hover .c-btn--icon { visibility: visible; } .c-dropdown__link--max-width { max-width: 100%; } /** * The description that may appear next to an item, e.g. a key combo */ .c-dropdown__item-desc { font-size: .92em; opacity: .5; margin-left: 8px; } /** * Extends .dropdown. * For these dropdowns that should be larger (eg the scenario dropdowns). */ .c-dropdown--lg .c-dropdown__menu { font-size: 14px; min-width: 350px; } .c-dropdown--lg .c-dropdown__link { padding-top: 6px; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; } .c-dropdown--lg .c-dropdown__icon { margin-right: 2px; top: 2px; } .c-dropdown--lg .c-dropdown__item-desc { font-size: .8em; } .c-dropdown--lg .c-dropdown__title { margin-top: 10px; margin-bottom: 10px; } /** * Extends .dropdown. * Adapt layout a bit so the menu items can include checkmarks. * * This requires an icon with the class of .dropdown__icon as a child of * .dropdown__link. Make sure there's a space between the icon and the text * label. * * (The icon should follow the markup as documented in _components.icons.css.) */ .c-dropdown--checkmarks { } .c-dropdown--checkmarks .c-dropdown__link { padding-left: 32px; padding-right: 20px; display: flex; align-items: center; } .activity-tree__status-icons { width: 100%; display: flex; align-items: center; gap: 4px; } .activity-tree__shift-indicator { flex: 0 0 18px; } .activity-tree__schedule-tags { flex-grow: 1; display: inline-flex; align-self: center; } .activity-tree__lock-container { flex: 0 0 40px; } .activity-tree__locked:empty, .activity-tree__date-locked:empty { display: none; } .activity-tree__locked, .activity-tree__date-locked { display: flex; justify-content: center; flex: 0 0 40px; } .c-dropdown--checkmarks .c-dropdown__link .material-symbols-rounded, .c-dropdown__icon { margin-left: -16px; margin-right: 4px; position: relative; } /*Custom icon class to override any icon changes that exists*/ .dropdown__icon--override { margin-left: unset !important; margin-right: unset !important; } .dropdown__link--override { padding-left: 8px !important; padding-right: 8px !important; } .activity-tree__status-icons .date-firmed-icon { top: 0 !important; height: 28px !important; } .c-dropdown__link .date-firmed-icon .material-symbols-rounded { top: calc(50% - 5px); left: calc(50% - 5px); } .c-dropdown__link .date-firmed-icon .calendar { transform: translate(-3px, -3px); } .c-dropdown__link .date-firmed-icon .lock { transform: translate(3px, 3px); } /** * Extends .dropdown. * For the dropdowns that appear in the main navigation. * * 1. This makes the item's clickable zone full-width as the dropdown__link * inside of it is block-level as well. * 2. Same as padding-left of menu items (c-page-nav__link in c-page-nav). */ .c-dropdown--pagenav .c-dropdown__menu { border: none; min-width: 180px; margin-top: 0; border-radius: 0 0 2px 2px; font-size: 14px; } .c-dropdown--pagenav .c-dropdown__item { display: block; /* [1] */ } .c-dropdown--pagenav .c-dropdown__link { padding: 8px; font-weight: 400; color: var(--bnc-text-color); } .c-dropdown--pagenav .c-dropdown__link:hover, .c-dropdown--pagenav .c-dropdown__link:focus { background-color: transparent; color: var(--bnc-primary); } /** * Only when the dropdown is visible... */ .c-dropdown--pagenav.open .c-dropdown__toggle { color: var(--bnc-primary); background-color: transparent; } /** * Extends .dropdown. * For the dropdowns that appear under the search/input fields. * * These don't require a data-toggle attribute on a clickable element. * JavaScript toggles the .open class based on other things, such as focus or * keyboard input (? Sebastian). */ .c-dropdown--input-field { width: 100%; } /** * 1) Resetting base element min-width. * 2) Same value as .c-search width (in search component). * 3) Resets border radius. * 4) Makes dropdown appear as extension of input field. * 5) Hides border so as to make it seemingly one. * 6) Same color as focused c-form-control. */ .c-dropdown--input-field .c-dropdown__menu { min-width: 0; /* [1] */ width: 100%; border-top-left-radius: 0; /* [3] */ border-top-right-radius: 0; /* [3] */ margin-top: -3px; /* [4] */ border-color: var(--bnc-primary); border-top-width: 1px; /* [5] */ border-top-color: #eee; box-shadow: 0 2px 3px rgba(58, 157, 250, .5); /* [6] */ } .c-dropdown__center--items { display: inline-flex; vertical-align: middle; align-items: center; } /*------------------------------------*\ #ICONS \*------------------------------------*/ /** * There's two icon fonts in use: SSPika and a custom created binocs webfont * that holds the status icons. */ /** * Global icon class * This CSS comes from the ss-pika documentation * We always need to add this class to any element that turns into an icon. */ .c-icon::before { font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */ -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } .material-symbols-rounded { font-size: 20px !important; font-variation-settings: 'GRAD' 200; } .c-icon--spacier { margin-right:.5em; } .c-icon--dimmed { opacity:.4; } .c-icon--lowered-3 { position: relative; top: 3px; } .c-icon--lowered-2 { position: relative; top: 2px; } .c-icon--lowered-1 { position: relative; top: 1px; } /** * A set of classes for icons overlaid on top of one another * Currently used specifically in Demand tree to add a check mark to folders */ .c-tree__line .c-icon--double { position: relative; } .c-tree__line .c-icon--double .c-icon--overlay { color: rgb(248, 251, 252); position: absolute; bottom: 1px; left: 3px; font-size: 10px; } .c-tree__line.is-selected .c-icon--double .c-icon--overlay { color: var(--bnc-primary); } .c-tree__line .c-icon--double .ss-folder+.c-icon--overlay { font-size: 12px; bottom: 0px; left: 1px; } /** * The generated content before every element with a class that starts with * ss- should be in the ss-pika font family. * * The font-face rule for ss-pika resides in _generic.fontface.css. */ [class^="ss-"]:before, [class*=" ss-"]:before, [class^="ss-"].ss-pika:before, [class*=" ss-"].ss-pika:before, [class^="ss-"].right:after, [class*=" ss-"].right:after, [class^="ss-"].ss-pika.right:after, [class*=" ss-"].ss-pika.right:after { font-family: "SSPika"; } /** * The generated content before every element with a class that starts with * ss-binocs should be in the binocs font family. * * The font-face rule for ss-binocs resides in _generic.fontface.css */ [class^="ss-binocs-"]:before, [class*=" ss-binocs-"]:before { font-family: "binocs"; } /** * These are all the ss-pika icons * We don't use the .right feature but it's still included here because that * makes it easier to just copy/paste should a ss-pika update become available */ .ss-cursor:before,.ss-cursor.right:after{content:'\E001'}.ss-crosshair:before,.ss-crosshair.right:after{content:'\2316'}.ss-search:before,.ss-search.right:after{content:'\1F50E'}.ss-zoomin:before,.ss-zoomin.right:after{content:'\E002'}.ss-zoomout:before,.ss-zoomout.right:after{content:'\E003'}.ss-screenshot:before,.ss-screenshot.right:after{content:'\E004'}.ss-binoculars:before,.ss-binoculars.right:after{content:'\E010'}.ss-view:before,.ss-view.right:after{content:'\1F440'}.ss-attach:before,.ss-attach.right:after{content:'\1F4CE'}.ss-link:before,.ss-link.right:after{content:'\1F517'}.ss-move:before,.ss-move.right:after{content:'\E070'}.ss-write:before,.ss-write.right:after{content:'\270E'}.ss-writingdisabled:before,.ss-writingdisabled.right:after{content:'\E071'}.ss-erase:before,.ss-erase.right:after{content:'\2710'}.ss-compose:before,.ss-compose.right:after{content:'\1F4DD'}.ss-draw:before,.ss-draw.right:after{content:'\270F'}.ss-lock:before,.ss-lock.right:after{content:'\1F512'}.ss-unlock:before,.ss-unlock.right:after{content:'\1F513'}.ss-key:before,.ss-key.right:after{content:'\1F511'}.ss-backspace:before,.ss-backspace.right:after{content:'\232B'}.ss-ban:before,.ss-ban.right:after{content:'\1F6AB'}.ss-nosmoking:before,.ss-nosmoking.right:after{content:'\1F6AD'}.ss-trash:before,.ss-trash.right:after{content:'\E0D0'}.ss-target:before,.ss-target.right:after{content:'\25CE'}.ss-new:before,.ss-new.right:after{content:'\1F195'}.ss-tag:before,.ss-tag.right:after{content:'\E100'}.ss-pricetag:before,.ss-pricetag.right:after{content:'\E102'}.ss-flowertag:before,.ss-flowertag.right:after{content:'\E103'}.ss-bookmark:before,.ss-bookmark.right:after{content:'\1F516'}.ss-flag:before,.ss-flag.right:after{content:'\2691'}.ss-like:before,.ss-like.right:after{content:'\1F44D'}.ss-dislike:before,.ss-dislike.right:after{content:'\1F44E'}.ss-heart:before,.ss-heart.right:after{content:'\2665'}.ss-halfheart:before,.ss-halfheart.right:after{content:'\E1A0'}.ss-emptyheart:before,.ss-emptyheart.right:after{content:'\2661'}.ss-star:before,.ss-star.right:after{content:'\22C6'}.ss-halfstar:before,.ss-halfstar.right:after{content:'\E1A1'}.ss-medal:before,.ss-medal.right:after{content:'\E1C1'}.ss-ribbon:before,.ss-ribbon.right:after{content:'\1F380'}.ss-bullseye:before,.ss-bullseye.right:after{content:'\1F3AF'}.ss-sample:before,.ss-sample.right:after{content:'\E200'}.ss-crop:before,.ss-crop.right:after{content:'\E201'}.ss-layers:before,.ss-layers.right:after{content:'\E202'}.ss-gridlines:before,.ss-gridlines.right:after{content:'\E206'}.ss-pen:before,.ss-pen.right:after{content:'\2712'}.ss-feather:before,.ss-feather.right:after{content:'\E220'}.ss-rubbereraser:before,.ss-rubbereraser.right:after{content:'\E221'}.ss-paintroller:before,.ss-paintroller.right:after{content:'\E225'}.ss-rubberstamp:before,.ss-rubberstamp.right:after{content:'\E226'}.ss-checkclipboard:before,.ss-checkclipboard.right:after{content:'\E2B3'}.ss-linechartclipboard:before,.ss-linechartclipboard.right:after{content:'\E2B5'}.ss-clockwise:before,.ss-clockwise.right:after{content:'\2941'}.ss-phone:before,.ss-phone.right:after{content:'\1F4DE'}.ss-phonedisabled:before,.ss-phonedisabled.right:after{content:'\E300'}.ss-headset:before,.ss-headset.right:after{content:'\E302'}.ss-megaphone:before,.ss-megaphone.right:after{content:'\1F4E2'}.ss-rss:before,.ss-rss.right:after{content:'\E310'}.ss-facetime:before,.ss-facetime.right:after{content:'\E320'}.ss-reply:before,.ss-reply.right:after{content:'\21A9'}.ss-send:before,.ss-send.right:after{content:'\E350'}.ss-mail:before,.ss-mail.right:after{content:'\2709'}.ss-inbox:before,.ss-inbox.right:after{content:'\1F4E5'}.ss-outbox:before,.ss-outbox.right:after{content:'\1F4E4'}.ss-wifimail:before,.ss-wifimail.right:after{content:'\E352'}.ss-chat:before,.ss-chat.right:after{content:'\1F4AC'}.ss-user:before,.ss-user.right:after{content:'\1F464'}.ss-femaleuser:before,.ss-femaleuser.right:after{content:'\1F467'}.ss-users:before,.ss-users.right:after{content:'\1F465'}.ss-usergroup:before,.ss-usergroup.right:after{content:'\E400'}.ss-adduser:before,.ss-adduser.right:after{content:'\E401'}.ss-removeuser:before,.ss-removeuser.right:after{content:'\E402'}.ss-deleteuser:before,.ss-deleteuser.right:after{content:'\E404'}.ss-userprofile:before,.ss-userprofile.right:after{content:'\E406'}.ss-businessuser:before,.ss-businessuser.right:after{content:'\E407'}.ss-cart:before,.ss-cart.right:after{content:'\E500'}.ss-addcart:before,.ss-addcart.right:after{content:'\E501'}.ss-removecart:before,.ss-removecart.right:after{content:'\E502'}.ss-deletecart:before,.ss-deletecart.right:after{content:'\E504'}.ss-downloadcart:before,.ss-downloadcart.right:after{content:'\E505'}.ss-emptycart:before,.ss-emptycart.right:after{content:'\E507'}.ss-basket:before,.ss-basket.right:after{content:'\E510'}.ss-gift:before,.ss-gift.right:after{content:'\1F381'}.ss-apple:before,.ss-apple.right:after{content:'\1F34F'}.ss-cashregister:before,.ss-cashregister.right:after{content:'\E530'}.ss-store:before,.ss-store.right:after{content:'\1F3EC'}.ss-searchbarcode:before,.ss-searchbarcode.right:after{content:'\E531'}.ss-notepad:before,.ss-notepad.right:after{content:'\E972'}.ss-creditcard:before,.ss-creditcard.right:after{content:'\1F4B3'}.ss-safe:before,.ss-safe.right:after{content:'\E540'}.ss-digitalsafe:before,.ss-digitalsafe.right:after{content:'\E541'}.ss-atm:before,.ss-atm.right:after{content:'\1F3E7'}.ss-dispensecash:before,.ss-dispensecash.right:after{content:'\E542'}.ss-banknote:before,.ss-banknote.right:after{content:'\1F4B5'}.ss-coins:before,.ss-coins.right:after{content:'\E543'}.ss-bankcheck:before,.ss-bankcheck.right:after{content:'\E544'}.ss-piggybank:before,.ss-piggybank.right:after{content:'\E545'}.ss-moneybag:before,.ss-moneybag.right:after{content:'\1F4B0'}.ss-tip:before,.ss-tip.right:after{content:'\E546'}.ss-calculator:before,.ss-calculator.right:after{content:'\E551'}.ss-percent:before,.ss-percent.right:after{content:'%'}.ss-bank:before,.ss-bank.right:after{content:'\1F3E6'}.ss-scales:before,.ss-scales.right:after{content:'\2696'}.ss-piechart:before,.ss-piechart.right:after{content:'\E570'}.ss-piechartthirds:before,.ss-piechartthirds.right:after{content:'\E571'}.ss-barchart:before,.ss-barchart.right:after{content:'\1F4CA'}.ss-upwardsbarchart:before,.ss-upwardsbarchart.right:after{content:'\E572'}.ss-downwardsbarchart:before,.ss-downwardsbarchart.right:after{content:'\E573'}.ss-horizontalbarchart:before,.ss-horizontalbarchart.right:after{content:'\E574'}.ss-analytics:before,.ss-analytics.right:after{content:'\E575'}.ss-upwardslinechart:before,.ss-upwardslinechart.right:after{content:'\1F4C8'}.ss-downwardslinechart:before,.ss-downwardslinechart.right:after{content:'\1F4C9'}.ss-linecharts:before,.ss-linecharts.right:after{content:'\E576'}.ss-scatterchart:before,.ss-scatterchart.right:after{content:'\E578'}.ss-stock:before,.ss-stock.right:after{content:'\E579'}.ss-form:before,.ss-form.right:after{content:'\E582'}.ss-box:before,.ss-box.right:after{content:'\1F4E6'}.ss-crate:before,.ss-crate.right:after{content:'\E5D8'}.ss-deliveryvan:before,.ss-deliveryvan.right:after{content:'\E5E0'}.ss-deliverytruck:before,.ss-deliverytruck.right:after{content:'\E5E1'}.ss-forklift:before,.ss-forklift.right:after{content:'\E5E2'}.ss-cargoship:before,.ss-cargoship.right:after{content:'\E5E3'}.ss-hook:before,.ss-hook.right:after{content:'\E5E4'}.ss-weight:before,.ss-weight.right:after{content:'\E5E5'}.ss-containers:before,.ss-containers.right:after{content:'\E5E6'}.ss-fragile:before,.ss-fragile.right:after{content:'\E5E7'}.ss-thissideup:before,.ss-thissideup.right:after{content:'\E5E8'}.ss-home:before,.ss-home.right:after{content:'\2302'}.ss-building:before,.ss-building.right:after{content:'\1F3E2'}.ss-lodging:before,.ss-lodging.right:after{content:'\1F3E8'}.ss-earth:before,.ss-earth.right:after{content:'\1F30E'}.ss-globe:before,.ss-globe.right:after{content:'\1F310'}.ss-garage:before,.ss-garage.right:after{content:'\E600'}.ss-warehouse:before,.ss-warehouse.right:after{content:'\E602'}.ss-floorplan:before,.ss-floorplan.right:after{content:'\E610'}.ss-address:before,.ss-address.right:after{content:'\E611'}.ss-searchhouse:before,.ss-searchhouse.right:after{content:'\E612'}.ss-housesale:before,.ss-housesale.right:after{content:'\E613'}.ss-navigate:before,.ss-navigate.right:after{content:'\E670'}.ss-compass:before,.ss-compass.right:after{content:'\E671'}.ss-signpost:before,.ss-signpost.right:after{content:'\E672'}.ss-map:before,.ss-map.right:after{content:'\E673'}.ss-gps:before,.ss-gps.right:after{content:'\E674'}.ss-compassnavigate:before,.ss-compassnavigate.right:after{content:'\E680'}.ss-compassarrow:before,.ss-compassarrow.right:after{content:'\E681'}.ss-location:before,.ss-location.right:after{content:'\E6D0'}.ss-pin:before,.ss-pin.right:after{content:'\1F4CD'}.ss-pushpin:before,.ss-pushpin.right:after{content:'\1F4CC'}.ss-maplocation:before,.ss-maplocation.right:after{content:'\E6D1'}.ss-globelocation:before,.ss-globelocation.right:after{content:'\E6D2'}.ss-puzzle:before,.ss-puzzle.right:after{content:'\E710'}.ss-floppydisk:before,.ss-floppydisk.right:after{content:'\1F4BE'}.ss-firewall:before,.ss-firewall.right:after{content:'\E720'}.ss-database:before,.ss-database.right:after{content:'\E7A0'}.ss-hdd:before,.ss-hdd.right:after{content:'\E7B0'}.ss-music:before,.ss-music.right:after{content:'\266B'}.ss-eighthnote:before,.ss-eighthnote.right:after{content:'\266A'}.ss-mic:before,.ss-mic.right:after{content:'\1F3A4'}.ss-volume:before,.ss-volume.right:after{content:'\1F508'}.ss-lowvolume:before,.ss-lowvolume.right:after{content:'\1F509'}.ss-highvolume:before,.ss-highvolume.right:after{content:'\1F50A'}.ss-radio:before,.ss-radio.right:after{content:'\1F4FB'}.ss-stereo:before,.ss-stereo.right:after{content:'\E801'}.ss-airplay:before,.ss-airplay.right:after{content:'\E800'}.ss-vinylrecord:before,.ss-vinylrecord.right:after{content:'\E810'}.ss-disc:before,.ss-disc.right:after{content:'\1F4BF'}.ss-camera:before,.ss-camera.right:after{content:'\1F4F7'}.ss-picture:before,.ss-picture.right:after{content:'\1F304'}.ss-video:before,.ss-video.right:after{content:'\1F4F9'}.ss-playvideo:before,.ss-playvideo.right:after{content:'\E8A1'}.ss-play:before,.ss-play.right:after{content:'\25B6'}.ss-pause:before,.ss-pause.right:after{content:'\E8A0'}.ss-stop:before,.ss-stop.right:after{content:'\25A0'}.ss-record:before,.ss-record.right:after{content:'\25CF'}.ss-rewind:before,.ss-rewind.right:after{content:'\23EA'}.ss-fastforward:before,.ss-fastforward.right:after{content:'\23E9'}.ss-skipback:before,.ss-skipback.right:after{content:'\23EE'}.ss-skipforward:before,.ss-skipforward.right:after{content:'\23ED'}.ss-eject:before,.ss-eject.right:after{content:'\23CF'}.ss-repeat:before,.ss-repeat.right:after{content:'\1F501'}.ss-replay:before,.ss-replay.right:after{content:'\21BA'}.ss-shuffle:before,.ss-shuffle.right:after{content:'\1F500'}.ss-index:before,.ss-index.right:after{content:'\E902'}.ss-page:before,.ss-page.right:after{content:'\E903'}.ss-book:before,.ss-book.right:after{content:'\1F4D5'}.ss-books:before,.ss-books.right:after{content:'\1F4DA'}.ss-openbook:before,.ss-openbook.right:after{content:'\1F4D6'}.ss-heartbook:before,.ss-heartbook.right:after{content:'\E962'}.ss-downloadbook:before,.ss-downloadbook.right:after{content:'\E963'}.ss-musicopenbook:before,.ss-musicopenbook.right:after{content:'\E966'}.ss-searchbook:before,.ss-searchbook.right:after{content:'\E967'}.ss-notebook:before,.ss-notebook.right:after{content:'\1F4D3'}.ss-newspaper:before,.ss-newspaper.right:after{content:'\1F4F0'}.ss-notice:before,.ss-notice.right:after{content:'\E973'}.ss-rows:before,.ss-rows.right:after{content:'\E9A1'}.ss-columns:before,.ss-columns.right:after{content:'\E9A2'}.ss-thumbnails:before,.ss-thumbnails.right:after{content:'\E9A3'}.ss-pagecurl:before,.ss-pagecurl.right:after{content:'\E9B0'}.ss-desktop:before,.ss-desktop.right:after{content:'\1F4BB'}.ss-laptop:before,.ss-laptop.right:after{content:'\EA00'}.ss-tablet:before,.ss-tablet.right:after{content:'\EA01'}.ss-smartphone:before,.ss-smartphone.right:after{content:'\EA02'}.ss-cell:before,.ss-cell.right:after{content:'\1F4F1'}.ss-walkytalky:before,.ss-walkytalky.right:after{content:'\EA03'}.ss-ereader:before,.ss-ereader.right:after{content:'\EA04'}.ss-ebook:before,.ss-ebook.right:after{content:'\EA05'}.ss-wifibook:before,.ss-wifibook.right:after{content:'\E968'}.ss-wifiopenbook:before,.ss-wifiopenbook.right:after{content:'\E969'}.ss-battery:before,.ss-battery.right:after{content:'\1F50B'}.ss-highbattery:before,.ss-highbattery.right:after{content:'\EA10'}.ss-mediumbattery:before,.ss-mediumbattery.right:after{content:'\EA11'}.ss-lowbattery:before,.ss-lowbattery.right:after{content:'\EA12'}.ss-emptybattery:before,.ss-emptybattery.right:after{content:'\EA13'}.ss-chargingbattery:before,.ss-chargingbattery.right:after{content:'\EA14'}.ss-heartmobile:before,.ss-heartmobile.right:after{content:'\EA23'}.ss-phonemobile:before,.ss-phonemobile.right:after{content:'\EA24'}.ss-lockmobile:before,.ss-lockmobile.right:after{content:'\EA25'}.ss-textmobile:before,.ss-textmobile.right:after{content:'\EA26'}.ss-dollarmobile:before,.ss-dollarmobile.right:after{content:'\EA27'}.ss-euromobile:before,.ss-euromobile.right:after{content:'\EA28'}.ss-rssmobile:before,.ss-rssmobile.right:after{content:'\EA29'}.ss-navigationmobile:before,.ss-navigationmobile.right:after{content:'\EA2A'}.ss-batterymobile:before,.ss-batterymobile.right:after{content:'\EA2B'}.ss-powermobile:before,.ss-powermobile.right:after{content:'\EA2C'}.ss-browseonline:before,.ss-browseonline.right:after{content:'\EA30'}.ss-shoponline:before,.ss-shoponline.right:after{content:'\EA31'}.ss-bankonline:before,.ss-bankonline.right:after{content:'\EA32'}.ss-realtyonline:before,.ss-realtyonline.right:after{content:'\EA33'}.ss-readonline:before,.ss-readonline.right:after{content:'\EA34'}.ss-weatheronline:before,.ss-weatheronline.right:after{content:'\EA35'}.ss-lightbulb:before,.ss-lightbulb.right:after{content:'\1F4A1'}.ss-lightbulbon:before,.ss-lightbulbon.right:after{content:'\EA83'}.ss-cfl:before,.ss-cfl.right:after{content:'\EA85'}.ss-hairdryer:before,.ss-hairdryer.right:after{content:'\EA88'}.ss-picnictable:before,.ss-picnictable.right:after{content:'\EAB1'}.ss-flame:before,.ss-flame.right:after{content:'\EAB2'}.ss-campfire:before,.ss-campfire.right:after{content:'\1F525'}.ss-bonfire:before,.ss-bonfire.right:after{content:'\EAB3'}.ss-balloon:before,.ss-balloon.right:after{content:'\1F388'}.ss-christmastree:before,.ss-christmastree.right:after{content:'\1F384'}.ss-sweep:before,.ss-sweep.right:after{content:'\EA86'}.ss-chess:before,.ss-chess.right:after{content:'\265E'}.ss-onedie:before,.ss-onedie.right:after{content:'\2680'}.ss-twodie:before,.ss-twodie.right:after{content:'\2681'}.ss-threedie:before,.ss-threedie.right:after{content:'\2682'}.ss-fourdie:before,.ss-fourdie.right:after{content:'\2683'}.ss-fivedie:before,.ss-fivedie.right:after{content:'\2684'}.ss-sixdie:before,.ss-sixdie.right:after{content:'\2685'}.ss-downloadcloud:before,.ss-downloadcloud.right:after{content:'\EB00'}.ss-download:before,.ss-download.right:after{content:'\EB01'}.ss-downloadbox:before,.ss-downloadbox.right:after{content:'\EB02'}.ss-downloadcrate:before,.ss-downloadcrate.right:after{content:'\EB03'}.ss-uploadcloud:before,.ss-uploadcloud.right:after{content:'\EB40'}.ss-upload:before,.ss-upload.right:after{content:'\EB41'}.ss-uploadbox:before,.ss-uploadbox.right:after{content:'\EB42'}.ss-uploadcrate:before,.ss-uploadcrate.right:after{content:'\EB43'}.ss-fork:before,.ss-fork.right:after{content:'\EB80'}.ss-merge:before,.ss-merge.right:after{content:'\EB81'}.ss-refresh:before,.ss-refresh.right:after{content:'\21BB'}.ss-sync:before,.ss-sync.right:after{content:'\EB82'}.ss-loading:before,.ss-loading.right:after{content:'\EB83'}.ss-wifi:before,.ss-wifi.right:after{content:'\EB84'}.ss-connection:before,.ss-connection.right:after{content:'\EB85'}.ss-reload:before,.ss-reload.right:after{content:'\EB87'}.ss-file:before,.ss-file.right:after{content:'\1F4C4'}.ss-addfile:before,.ss-addfile.right:after{content:'\EC01'}.ss-removefile:before,.ss-removefile.right:after{content:'\EC02'}.ss-deletefile:before,.ss-deletefile.right:after{content:'\EC04'}.ss-downloadfile:before,.ss-downloadfile.right:after{content:'\EC06'}.ss-uploadfile:before,.ss-uploadfile.right:after{content:'\EC07'}.ss-importfile:before,.ss-importfile.right:after{content:'\EC08'}.ss-exportfile:before,.ss-exportfile.right:after{content:'\EC09'}.ss-settingsfile:before,.ss-settingsfile.right:after{content:'\EC0A'}.ss-lockfile:before,.ss-lockfile.right:after{content:'\EC11'}.ss-userfile:before,.ss-userfile.right:after{content:'\EC15'}.ss-picturefile:before,.ss-picturefile.right:after{content:'\EC17'}.ss-textfile:before,.ss-textfile.right:after{content:'\EC19'}.ss-exe:before,.ss-exe.right:after{content:'\EC30'}.ss-zip:before,.ss-zip.right:after{content:'\EC31'}.ss-doc:before,.ss-doc.right:after{content:'\EC32'}.ss-ppt:before,.ss-ppt.right:after{content:'\EC33'}.ss-pdf:before,.ss-pdf.right:after{content:'\EC34'}.ss-jpg:before,.ss-jpg.right:after{content:'\EC35'}.ss-png:before,.ss-png.right:after{content:'\EC36'}.ss-folder:before,.ss-folder.right:after{content:'\1F4C1'}.ss-openfolder:before,.ss-openfolder.right:after{content:'\1F4C2'}.ss-downloadfolder:before,.ss-downloadfolder.right:after{content:'\EC76'}.ss-uploadfolder:before,.ss-uploadfolder.right:after{content:'\EC77'}.ss-cloudfolder:before,.ss-cloudfolder.right:after{content:'\EC80'}.ss-lockfolder:before,.ss-lockfolder.right:after{content:'\EC81'}.ss-securefolder:before,.ss-securefolder.right:after{content:'\EC83'}.ss-picturefolder:before,.ss-picturefolder.right:after{content:'\EC87'}.ss-moviefolder:before,.ss-moviefolder.right:after{content:'\EC88'}.ss-quote:before,.ss-quote.right:after{content:'\201C'}.ss-text:before,.ss-text.right:after{content:'\ED00'}.ss-font:before,.ss-font.right:after{content:'\ED01'}.ss-highlight:before,.ss-highlight.right:after{content:'\ED11'}.ss-print:before,.ss-print.right:after{content:'\2399'}.ss-fax:before,.ss-fax.right:after{content:'\1F4E0'}.ss-list:before,.ss-list.right:after{content:'\ED50'}.ss-layout:before,.ss-layout.right:after{content:'\EDA0'}.ss-action:before,.ss-action.right:after{content:'\EE00'}.ss-redirect:before,.ss-redirect.right:after{content:'\21AA'}.ss-expand:before,.ss-expand.right:after{content:'\2922'}.ss-contract:before,.ss-contract.right:after{content:'\EE01'}.ss-help:before,.ss-help.right:after{content:'\2753'}.ss-info:before,.ss-info.right:after{content:'\2139'}.ss-alert:before,.ss-alert.right:after{content:'\26A0'}.ss-caution:before,.ss-caution.right:after{content:'\26D4'}.ss-logout:before,.ss-logout.right:after{content:'\EE02'}.ss-login:before,.ss-login.right:after{content:'\EE03'}.ss-scaleup:before,.ss-scaleup.right:after{content:'\EE04'}.ss-scaledown:before,.ss-scaledown.right:after{content:'\EE05'}.ss-plus:before,.ss-plus.right:after{content:'+'}.ss-hyphen:before,.ss-hyphen.right:after{content:'-'}.ss-check:before,.ss-check.right:after{content:'\2713'}.ss-delete:before,.ss-delete.right:after{content:'\2421'}.ss-bearface:before,.ss-bearface.right:after{content:'\1F43B'}.ss-bird:before,.ss-bird.right:after{content:'\1F426'}.ss-fishes:before,.ss-fishes.right:after{content:'\EF20'}.ss-tropicalfish:before,.ss-tropicalfish.right:after{content:'\EF21'}.ss-tree:before,.ss-tree.right:after{content:'\1F333'}.ss-evergreen:before,.ss-evergreen.right:after{content:'\1F332'}.ss-palmtree:before,.ss-palmtree.right:after{content:'\1F334'}.ss-leaf:before,.ss-leaf.right:after{content:'\1F342'}.ss-seedling:before,.ss-seedling.right:after{content:'\1F331'}.ss-grass:before,.ss-grass.right:after{content:'\EF70'}.ss-settings:before,.ss-settings.right:after{content:'\2699'}.ss-dashboard:before,.ss-dashboard.right:after{content:'\F000'}.ss-dial:before,.ss-dial.right:after{content:'\F004'}.ss-notifications:before,.ss-notifications.right:after{content:'\1F514'}.ss-notificationsdisabled:before,.ss-notificationsdisabled.right:after{content:'\1F515'}.ss-flash:before,.ss-flash.right:after{content:'\2301'}.ss-wrench:before,.ss-wrench.right:after{content:'\1F527'}.ss-tapemeasure:before,.ss-tapemeasure.right:after{content:'\F036'}.ss-clock:before,.ss-clock.right:after{content:'\23F2'}.ss-watch:before,.ss-watch.right:after{content:'\231A'}.ss-stopwatch:before,.ss-stopwatch.right:after{content:'\23F1'}.ss-alarmclock:before,.ss-alarmclock.right:after{content:'\23F0'}.ss-calendar:before,.ss-calendar.right:after{content:'\1F4C5'}.ss-addcalendar:before,.ss-addcalendar.right:after{content:'\F070'}.ss-removecalendar:before,.ss-removecalendar.right:after{content:'\F071'}.ss-checkcalendar:before,.ss-checkcalendar.right:after{content:'\F072'}.ss-deletecalendar:before,.ss-deletecalendar.right:after{content:'\F073'}.ss-sausage:before,.ss-sausage.right:after{content:'\F103'}.ss-burger:before,.ss-burger.right:after{content:'\1F354'}.ss-pizza:before,.ss-pizza.right:after{content:'\1F355'}.ss-fish:before,.ss-fish.right:after{content:'\1F41F'}.ss-shrimp:before,.ss-shrimp.right:after{content:'\1F364'}.ss-turkey:before,.ss-turkey.right:after{content:'\F105'}.ss-steak:before,.ss-steak.right:after{content:'\F106'}.ss-sidedish:before,.ss-sidedish.right:after{content:'\1F35A'}.ss-noodles:before,.ss-noodles.right:after{content:'\1F35C'}.ss-spaghetti:before,.ss-spaghetti.right:after{content:'\1F35D'}.ss-corn:before,.ss-corn.right:after{content:'\F110'}.ss-carrot:before,.ss-carrot.right:after{content:'\F111'}.ss-icecream:before,.ss-icecream.right:after{content:'\1F368'}.ss-mug:before,.ss-mug.right:after{content:'\2615'}.ss-beer:before,.ss-beer.right:after{content:'\1F37A'}.ss-bottle:before,.ss-bottle.right:after{content:'\F122'}.ss-wineglass:before,.ss-wineglass.right:after{content:'\1F377'}.ss-cocktail:before,.ss-cocktail.right:after{content:'\1F378'}.ss-tea:before,.ss-tea.right:after{content:'\1F375'}.ss-teapot:before,.ss-teapot.right:after{content:'\F127'}.ss-waterbottle:before,.ss-waterbottle.right:after{content:'\F128'}.ss-wineglasssparkle:before,.ss-wineglasssparkle.right:after{content:'\F129'}.ss-salt:before,.ss-salt.right:after{content:'\F130'}.ss-pepper:before,.ss-pepper.right:after{content:'\F131'}.ss-oliveoil:before,.ss-oliveoil.right:after{content:'\F132'}.ss-hotsauce:before,.ss-hotsauce.right:after{content:'\F133'}.ss-coal:before,.ss-coal.right:after{content:'\F136'}.ss-oven:before,.ss-oven.right:after{content:'\F140'}.ss-stove:before,.ss-stove.right:after{content:'\F141'}.ss-cook:before,.ss-cook.right:after{content:'\1F373'}.ss-bbq:before,.ss-bbq.right:after{content:'\F142'}.ss-utensils:before,.ss-utensils.right:after{content:'\1F374'}.ss-spoonfork:before,.ss-spoonfork.right:after{content:'\F150'}.ss-knife:before,.ss-knife.right:after{content:'\1F52A'}.ss-cookingutensils:before,.ss-cookingutensils.right:after{content:'\F151'}.ss-measuringcup:before,.ss-measuringcup.right:after{content:'\F162'}.ss-colander:before,.ss-colander.right:after{content:'\F163'}.ss-scale:before,.ss-scale.right:after{content:'\F164'}.ss-eggtimer:before,.ss-eggtimer.right:after{content:'\F165'}.ss-platter:before,.ss-platter.right:after{content:'\F166'}.ss-apron:before,.ss-apron.right:after{content:'\F170'}.ss-bbqapron:before,.ss-bbqapron.right:after{content:'\F171'}.ss-chef:before,.ss-chef.right:after{content:'\F172'}.ss-handbag:before,.ss-handbag.right:after{content:'\1F45C'}.ss-briefcase:before,.ss-briefcase.right:after{content:'\1F4BC'}.ss-hanger:before,.ss-hanger.right:after{content:'\F1A0'}.ss-weathervane:before,.ss-weathervane.right:after{content:'\F200'}.ss-thermometer:before,.ss-thermometer.right:after{content:'\F201'}.ss-weather:before,.ss-weather.right:after{content:'\F210'}.ss-cloud:before,.ss-cloud.right:after{content:'\2601'}.ss-droplet:before,.ss-droplet.right:after{content:'\1F4A7'}.ss-sun:before,.ss-sun.right:after{content:'\2600'}.ss-partlycloudy:before,.ss-partlycloudy.right:after{content:'\26C5'}.ss-rain:before,.ss-rain.right:after{content:'\2614'}.ss-thunderstorm:before,.ss-thunderstorm.right:after{content:'\26C8'}.ss-umbrella:before,.ss-umbrella.right:after{content:'\2602'}.ss-rainbow:before,.ss-rainbow.right:after{content:'\1F308'}.ss-fog:before,.ss-fog.right:after{content:'\F211'}.ss-wind:before,.ss-wind.right:after{content:'\F212'}.ss-tornado:before,.ss-tornado.right:after{content:'\F213'}.ss-snowflake:before,.ss-snowflake.right:after{content:'\2744'}.ss-fan:before,.ss-fan.right:after{content:'\F280'}.ss-solarpanel:before,.ss-solarpanel.right:after{content:'\F281'}.ss-plug:before,.ss-plug.right:after{content:'\1F50C'}.ss-outlet:before,.ss-outlet.right:after{content:'\F282'}.ss-car:before,.ss-car.right:after{content:'\1F698'}.ss-taxi:before,.ss-taxi.right:after{content:'\1F696'}.ss-locomotive:before,.ss-locomotive.right:after{content:'\1F682'}.ss-train:before,.ss-train.right:after{content:'\1F686'}.ss-traintunnel:before,.ss-traintunnel.right:after{content:'\1F687'}.ss-bus:before,.ss-bus.right:after{content:'\1F68D'}.ss-truck:before,.ss-truck.right:after{content:'\1F69A'}.ss-caravan:before,.ss-caravan.right:after{content:'\1F690'}.ss-tractor:before,.ss-tractor.right:after{content:'\1F69C'}.ss-tunnel:before,.ss-tunnel.right:after{content:'\F323'}.ss-plane:before,.ss-plane.right:after{content:'\2708'}.ss-arrival:before,.ss-arrival.right:after{content:'\F325'}.ss-departure:before,.ss-departure.right:after{content:'\F324'}.ss-helicopter:before,.ss-helicopter.right:after{content:'\1F681'}.ss-bike:before,.ss-bike.right:after{content:'\1F6B2'}.ss-motorcycle:before,.ss-motorcycle.right:after{content:'\F303'}.ss-boat:before,.ss-boat.right:after{content:'\1F6A2'}.ss-sailboat:before,.ss-sailboat.right:after{content:'\26F5'}.ss-schooner:before,.ss-schooner.right:after{content:'\F305'}.ss-skylift:before,.ss-skylift.right:after{content:'\1F6A1'}.ss-rocket:before,.ss-rocket.right:after{content:'\1F680'}.ss-steeringwheel:before,.ss-steeringwheel.right:after{content:'\F313'}.ss-trafficcamera:before,.ss-trafficcamera.right:after{content:'\F314'}.ss-fuel:before,.ss-fuel.right:after{content:'\26FD'}.ss-jerrycan:before,.ss-jerrycan.right:after{content:'\F315'}.ss-passport:before,.ss-passport.right:after{content:'\F316'}.ss-trafficlight:before,.ss-trafficlight.right:after{content:'\1F6A6'}.ss-highway:before,.ss-highway.right:after{content:'\F320'}.ss-road:before,.ss-road.right:after{content:'\F321'}.ss-intersection:before,.ss-intersection.right:after{content:'\F322'}.ss-wheelchair:before,.ss-wheelchair.right:after{content:'\267F'}.ss-elevator:before,.ss-elevator.right:after{content:'\F380'}.ss-golf:before,.ss-golf.right:after{content:'\F400'}.ss-hockey:before,.ss-hockey.right:after{content:'\F401'}.ss-iceskate:before,.ss-iceskate.right:after{content:'\26F8'}.ss-billiards:before,.ss-billiards.right:after{content:'\1F3B1'}.ss-baseballglove:before,.ss-baseballglove.right:after{content:'\F404'}.ss-tennis:before,.ss-tennis.right:after{content:'\1F3BE'}.ss-tabletennis:before,.ss-tabletennis.right:after{content:'\F402'}.ss-badminton:before,.ss-badminton.right:after{content:'\F403'}.ss-boxing:before,.ss-boxing.right:after{content:'\F405'}.ss-bowling:before,.ss-bowling.right:after{content:'\F406'}.ss-football:before,.ss-football.right:after{content:'\1F3C8'}.ss-soccer:before,.ss-soccer.right:after{content:'\26BD'}.ss-hiker:before,.ss-hiker.right:after{content:'\F410'}.ss-pool:before,.ss-pool.right:after{content:'\E412'}.ss-shower:before,.ss-shower.right:after{content:'\1F6BF'}.ss-exercise:before,.ss-exercise.right:after{content:'\F414'}.ss-exercisebike:before,.ss-exercisebike.right:after{content:'\F415'}.ss-dumbbell:before,.ss-dumbbell.right:after{content:'\F416'}.ss-jumprope:before,.ss-jumprope.right:after{content:'\F417'}.ss-yoga:before,.ss-yoga.right:after{content:'\F418'}.ss-suitcase:before,.ss-suitcase.right:after{content:'\E420'}.ss-luggage:before,.ss-luggage.right:after{content:'\E421'}.ss-donotdisturb:before,.ss-donotdisturb.right:after{content:'\E422'}.ss-sunscreen:before,.ss-sunscreen.right:after{content:'\F423'}.ss-callbell:before,.ss-callbell.right:after{content:'\F424'}.ss-hospital:before,.ss-hospital.right:after{content:'\26E8'}.ss-medicalcross:before,.ss-medicalcross.right:after{content:'\F4B0'}.ss-ambulance:before,.ss-ambulance.right:after{content:'\1F691'}.ss-bandage:before,.ss-bandage.right:after{content:'\F4B2'}.ss-medicalthermometer:before,.ss-medicalthermometer.right:after{content:'\F4B3'}.ss-stethoscope:before,.ss-stethoscope.right:after{content:'\F4B4'}.ss-syringe:before,.ss-syringe.right:after{content:'\1F489'}.ss-pill:before,.ss-pill.right:after{content:'\1F48A'}.ss-pillbottle:before,.ss-pillbottle.right:after{content:'\F4B5'}.ss-supplements:before,.ss-supplements.right:after{content:'\F4B6'}.ss-bathroomscale:before,.ss-bathroomscale.right:after{content:'\F4B7'}.ss-dna:before,.ss-dna.right:after{content:'\F4C2'}.ss-anatomicalheart:before,.ss-anatomicalheart.right:after{content:'\F4D0'}.ss-checkheart:before,.ss-checkheart.right:after{content:'\F4D1'}.ss-eyesurgery:before,.ss-eyesurgery.right:after{content:'\F4E0'}.ss-brokenbone:before,.ss-brokenbone.right:after{content:'\F4E1'}.ss-up:before,.ss-up.right:after{content:'\2B06'}.ss-upright:before,.ss-upright.right:after{content:'\2B08'}.ss-right:before,.ss-right.right:after{content:'\27A1'}.ss-downright:before,.ss-downright.right:after{content:'\2B0A'}.ss-down:before,.ss-down.right:after{content:'\2B07'}.ss-downleft:before,.ss-downleft.right:after{content:'\2B0B'}.ss-left:before,.ss-left.right:after{content:'\2B05'}.ss-upleft:before,.ss-upleft.right:after{content:'\2B09'}.ss-navigateup:before,.ss-navigateup.right:after{content:'\F500'}.ss-navigateright:before,.ss-navigateright.right:after{content:'\25BB'}.ss-navigatedown:before,.ss-navigatedown.right:after{content:'\F501'}.ss-navigateleft:before,.ss-navigateleft.right:after{content:'\25C5'}.ss-directup:before,.ss-directup.right:after{content:'\25B4'}.ss-directright:before,.ss-directright.right:after{content:'\25B9'}.ss-dropdown:before,.ss-dropdown.right:after{content:'\25BE'}.ss-directleft:before,.ss-directleft.right:after{content:'\25C3'}.ss-leftright:before,.ss-leftright.right:after{content:'\2B0C'}.ss-rightward:before,.ss-rightward.right:after{content:'\F503'}.ss-leftward:before,.ss-leftward.right:after{content:'\F505'}.ss-previouspage:before,.ss-previouspage.right:after{content:'\2397'}.ss-nextpage:before,.ss-nextpage.right:after{content:'\2398'}.ss-retweet:before,.ss-retweet.right:after{content:'\F600'}.ss-share:before,.ss-share.right:after{content:'\F601'} /** * For some reason the ss-users icon is too small, so we make it larger here by * default */ .ss-users { font-size:108%; } /** * The up and down icon is too large for use as sorting icon in the table head, */ .ss-sorting { font-size:66%; } /** * These are all the ss-binocs icons */ .ss-binocs-canceled:before { content: "\E600"; } .ss-binocs-done:before { content: "\E601"; } .ss-binocs-draft:before { content: "\E602"; } .ss-binocs-editing:before { content: "\E603"; } .ss-binocs-progress:before { content: "\E604"; } .ss-binocs-ready:before { content: "\E605"; } .ss-binocs-waiting:before { content: "\E606"; } /** * Some of the binocs icons must always appear in a specific color. * We define that color here right away and give it importance. * * It does get overwritten in the demand tree (when line item is selected). * Have a look at the tree components for that. */ .ss-binocs-draft, .ss-binocs-editing { color:#D12716 !important; } .ss-binocs-progress, .ss-binocs-waiting, .ss-binocs-ready { color:#2ABD32 !important; } .material-symbols-rounded.stop_circle, .material-symbols-rounded.error { color:#D12716 !important; } .material-symbols-rounded.cancel { color:#666666 !important; } .material-symbols-rounded.pause_circle, .material-symbols-rounded.play_circle, .material-symbols-rounded.check_circle, .material-symbols-rounded.schedule { color:#2ABD32 !important; } /*------------------------------------*\ #the counter \*------------------------------------*/ /** *The counter */ .c-counter{ background-color: var(--bnc-primary); display:inline-block; border-radius: 4px; height: 20px; min-width: 20px; padding: 2px 4px 0; text-align: center; position:absolute; top: -7px; right:-1px; color:#fff; z-index: 1; } /*------------------------------------*\ #TITLES \*------------------------------------*/ /** * Title classes */ /** * This is the main title component. All others modify this one. */ .c-title { } .c-title__link { color: inherit; text-decoration: none; } .c-title__link:hover { opacity: 1; } .c-title__link:active { color: inherit; } .o-grid:has(.o-grid__cell .c-title.c-title--h1) { border-bottom: 1px solid var(--bnc-border-color); padding-left: 2rem; padding-right: 2rem; } .c-title--h1 { font-size: 24px; line-height: 32px; display: inline-block; color: var(--bnc-text-color); padding: 12px 56px 12px 0; } .c-title--h2 { font-size: 14px; margin-bottom: 8px; } .c-title--h3 { font-weight: 600; font-size: inherit; } .c-title--h4 { font-size: inherit; } /*following class is used on the titles in the feed on the dashboard screen*/ .c-title--tablefeed { display: block; margin-bottom: 8px; } .c-title--spacier { margin-bottom: 10px; } .c-title--tighter { margin-bottom: 0px; } /*------------------------------------*\ #PODS \*------------------------------------*/ /** * Pods are containers. * * Requirements: * 1. c-pod class on a container element. * 2. c-pod__header on a heading element. * 3. c-pod__body on the body of the pod element. * * Modifiers: * 1. c-pod--scrollable when the pod has to have an internal scrolling * mechanism. Please refer to the scrollable object for more information on * making something scrollable. * 2. c-pod--twoheaded when the pod has two headers (eg in demand search * results). For now only relevant when the pod__body needs to be scrollable. * * * */ /** * 1) Removes the top padding of the pod. Equal numbers. * 2) Changing right and left padding influences numbers in statuses, * availabilities and demand-details components. */ .c-pod { margin-bottom: 30px; background-color: white; border-radius: 3px; padding-left: 2rem; padding-right: 2rem; } .c-pod__header { padding-top: 11px; padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 20px; } .c-pod__header--distinct { background-color: rgba(0, 60, 82, .05); padding-left: 5px; padding-right: 5px; } .c-pod__header.is-selected{ background-color: var(--bnc-primary); color: #ffffff; } /** * Some headers should be less tall e.g. the ones that have a search * field in them. */ .c-pod__header--tight { padding-top: 6px; padding-bottom: 6px; } /** * Some headers should have more space below them. E.g. the one for the * demand channel list. */ .c-pod__header--space-below { margin-bottom: 30px; } /** * Some headers should have no space below them. E.g. the one for the * service items list. */ .c-pod__header--nospace-below { margin-bottom: 0; } /** * Some headers should have little space below them. E.g. the one for the * schedule items list. */ .c-pod__header--littlespace-below { margin-bottom: 10px; } /** * Some pods have two headers. Use this modifier for all headers but the * first one. * * 1) Undo the default margin-bottom below pod__header. */ .c-pod__header--sub { margin-top: -20px; /* [1] */ } /** * For now the pod__body only must be set when it has to be scrollable. We * use the scrollable object for this as well. * * 2) Undo the pod's left and right padding and then add it back in. Because * some parts of the ui inside scrollable pods need to break out of the * padding. Eg. the demand line item's description in the right pane has * textarea borders that break out of the pod__body's area. They should * be visible and shouldn't introduce scroll bars. */ .c-pod--scrollable { } .c-pod--scrollable .c-pod__body { max-height: calc(100vh - 225px); /* margin-left: -11px; [2] */ /* padding-left: 11px; [2] */ /* margin-right: -11px; [2] */ /* padding-right: 11px; [2] */ } .c-pod--scrollable.c-pod--twoheaded .c-pod__body { max-height: calc(100vh - 260px); } .c-template__main > .c-pod { border-right: 1px solid var(--bnc-border-color); } .c-template__main > .c-pod, .c-pod:last-of-type { margin-bottom: 15px; } /*------------------------------------*\ #BUTTONS \*------------------------------------*/ /** * Buttons come in many flavors, all modifying the base .btn class. * They are best applied to these HTML elements: button, a, input with * type=button. The main component class should be used whenever a situation * comes around that doesn't fit in any of the modifiers' categories. * * For buttons that have similar functionality and that should appear next to * each other in a group, check the btn-group component. * * Requirements: * 1. A HTML element (button, a, input type=button) with the c-btn class. * 2. Disabled buttons should have the disabled attribute. As for links, it's * mandatory to add the c-btn--disabled modifier class. * * Modifiers: * 1. c-btn--textwrap: if the button's text needs to wrap over multiple lines. * 2. c-btn--tight: makes the button tighter (less padding). * 3. c-btn--spacier: makes the button spacier (more padding). * 4. c-btn--dimmed: makes the button dimmed out (less opaque). * 5. c-btn--funct: should be used when a button does something functional, like * a real data change. * 6. c-btn--link: should be used when a button takes the user to another page. * It looks and should act as a normal text link. * 7. c-btn--vis: should be used on buttons that do something visually, eg. the * dropdown filters on the dashboard. No real data changes, only visual * representation of existing data. * It looks like a neutral colored text link. * 8. c-btn--scene: the scenario/plan/scene changing button. Eg. next to the * main page title. * 9. c-btn--disabled: mandatory for disabled buttons that are links. A HTML * button or input type=button element should have the disabled attribute. * 10. c-btn--icon: when an icon is the button. * 11. c-btn--underline: when a button needs an underline. */ /** * The main button component. It should be used whenever a clear visual button * is needed, that doesn't fall in one of the modifier's categories. * * Things to note: * 1. Buttons inherit font color and properties from the ancestor element, as * defined in normalize.css. * 2. We haven't really looked at handheld devices. * 3. Disabled buttons should have the disabled HTML attribute. As for links, * it's mandatory to add the c-btn--disabled class. * * Comments: * 1) Very light gray. * 2) Slightly darker gray. * 3) Text shouldn't wrap to multiple lines in buttons. * 4) Cursor must always change to a pointer on hover. * 5) If the button is used in a dropdown, we want the hover look to be active * when the dropdown menu is open. Bootstrap's JS adds the open class to the * dropdown__toggle's parent element. For everything dropdown see * _components.dropdowns.css. * 6) In the case of a parent with pointer-events:none. * */ .c-btn-group__btn--last.c-btn--override { padding-left: 4px !important; padding-right: 8px !important; } .c-btn--override { height: 30px !important; padding: 0 12px !important; border-radius: 50rem !important; font-size: 14px !important; font-weight: 500 !important; border: 1px solid #818181 !important; background-color: white !important; color: #515151 !important; line-height: 28px !important; text-decoration: none !important; } .c-btn--override:not(:disabled):hover { border-color: var(--bnc-primary) !important; color: var(--bnc-primary) !important; } .c-btn--primary { border-color: var(--bnc-primary) !important; background-color: var(--bnc-primary) !important; color: white !important; } .c-btn--primary:not(:disabled):hover { border-color: var(--bnc-primary-hover) !important; background-color: var(--bnc-primary-hover) !important; color: white !important; } .c-btn { display: inline-flex; margin: 0; text-align: center; text-decoration: none; background: rgb(234, 234, 234); /* [1] */ border: 1px solid rgb(204, 204, 204); /* [2] */ white-space: nowrap; /* [3] */ cursor: pointer; /* [4] */ padding: 5px 12px; border-radius: 3px; pointer-events: auto; /* [6] */ align-items: center; } .c-btn:hover, .open .c-dropdown__toggle.c-btn { /* [5] */ background: rgb(240, 240, 240); opacity: 1; } .c-btn:active { background: rgb(234, 234, 234); /* [1] */ box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, .07); color: inherit; } /** * Modifier .c-btn--textwrap * When the button's text has to wrap over multiple text lines. */ .c-btn--textwrap { white-space: normal; word-break: break-all; text-align: left; } /** * Modifiers: btn--link, btn--vis, btn--icon and btn--scene. * They have a lot in common, so we declare most styles together. */ .c-btn--link, .c-btn--vis, .c-btn--scene, .c-btn--icon, .c-btn--form-field { padding: 0; background: transparent; border: none; } .c-btn--icon.unauthorized { cursor: default; } .c-btn--link:hover, .c-btn--link:focus, .open .c-dropdown__toggle.c-btn--link, .c-btn--vis:hover, .c-btn--vis:focus, .open .c-dropdown__toggle.c-btn--vis, .c-btn--scene:hover, .c-btn--scene:focus, .open .c-dropdown__toggle.c-btn--scene, .c-btn--icon:hover, .c-btn--icon:focus, .open .c-dropdown__toggle.c-btn--icon, .c-btn--form-field:hover, .c-btn--form-field:focus, .open .c-dropdown__toggle.c-btn--form-field { /* [5] */ background: transparent; opacity: .7; } .c-btn--no-background, .c-btn--no-background:focus, .c-btn--no-background:hover { background: transparent; border: none; box-shadow: none; text-shadow: none; outline: none; } .c-btn--link:active, .c-btn--vis:active, .c-btn--scene:active, .c-btn--icon:active, .c-btn--form-field:active { box-shadow: none; color: inherit; } /** * btn--link has some distinct styles as well. */ .c-btn--link { color: var(--bnc-primary); } .c-btn--link:active { color: var(--bnc-primary); } /** * btn--vis and btn--icon have some distinct styles as well. */ .c-btn--vis, .c-btn--icon { color: inherit; } /** * btn--scene has some distinct styles as well. */ .c-btn--scene { color: var(--bnc-text-color-light); font-size: 16px; padding: 2px 8px; font-weight: 300; height: 30px; /* Needed to standardise button group heights */ } .c-btn--scene:not(.selected) { font-style: italic; } .c-btn--scene:not(.selected):hover { background: #B39DDB !important; color: var(--bnc-text-color) !important; opacity: 1; } .c-btn--scene.selected { background: #7E57C2 !important; color: white !important; opacity: 1; } .open .c-btn--scene.selected, .c-btn--scene.selected:not(.c-btn--disabled):hover { background: #5E35B1 !important; color: white !important; opacity: 1; } /** * btn--form-field has some distinct styles as well. * * 1) Same as a standard filled-out Binocs form element. (Is not propagated to * the caret icon as that is an inline-block element.) * 2) Overwriting what's in base.links.css */ .c-btn--form-field { border-bottom: 1px solid var(--bnc-text-color); border-radius: 0; /*text-decoration: underline; !* [1] *!*/ /*text-decoration-color: rgba(0, 60, 82, 1); !* [2] *!*/ /*-webkit-text-decoration-color: rgba(0, 60, 82, 1); !* [2] *!*/ text-align: left; white-space: normal; } /** * Modifier: c-btn--funct * should be used on buttons that perform something functionally, * eg. the buttons that create a new demand item. Real data changes. */ .c-btn--funct { background: white; } /** * Modifier: c-btn--no-border * button without border */ .c-btn--no-border { border: none; background: none; } .c-btn--secondary { color: #afbec6 !important; } .c-btn--secondary:hover { color: #8e9ca4 !important; } .c-btn--no-border:hover{ background: none; color: var(--bnc-primary); box-shadow: none; } .c-btn--no-border:active, .c-btn--no-border:focus { background: none; box-shadow: none; } /** * Modifier: c-btn--prom * should be used on prominent buttons that need to draw attention, * eg. the button that performs the default or most impotant action * within an element, section or group if controls. */ .c-btn--prom { background:var(--bnc-primary); border-color: var(--bnc-primary); color: white; } /** * Modifier: c-btn--disabled * Links that are disabled should have this class added to them. * Buttons with the disabled attribute are styled here too. */ .c-btn:disabled, .c-btn:disabled:hover, .c-btn:disabled:focus, .c-btn:disabled:active, .c-btn--disabled, .c-btn--disabled:hover, .c-btn--disabled:focus, .c-btn--disabled:active { opacity: .3; background: inherit; box-shadow: none; cursor: default; } .c-btn--scene:disabled, .c-btn--scene:disabled:hover, .c-btn--scene:disabled:focus, .c-btn--scene:disabled:active, .c-btn--scene.c-btn--disabled, .c-btn--scene.c-btn--disabled:hover, .c-btn--scene.c-btn--disabled:focus, .c-btn--scene.c-btn--disabled:active { opacity: 1; } /** * A disabled c-btn--vis should probably always look fully opaque. */ .c-dropdown__toggle.c-btn--vis:disabled, .c-dropdown__toggle.c-btn--icon:disabled, .c-dropdown__toggle.c-btn--scene:disabled, .c-btn--form-field:disabled, .c-dropdown__toggle.c-btn--vis:disabled:hover, .c-dropdown__toggle.c-btn--icon:disabled:hover, .c-dropdown__toggle.c-btn--scene:disabled:hover, .c-btn--form-field:disabled:hover, .c-dropdown__toggle.c-btn--vis:disabled:focus, .c-dropdown__toggle.c-btn--icon:disabled:focus, .c-dropdown__toggle.c-btn--scene:disabled:focus, .c-btn--form-field:disabled:focus, .c-dropdown__toggle.c-btn--vis:disabled:active, .c-dropdown__toggle.c-btn--icon:disabled:active, .c-dropdown__toggle.c-btn--scene:disabled:active, .c-btn--form-field:disabled:active .c-dropdown__toggle.c-btn--vis.c-btn--disabled, .c-dropdown__toggle.c-btn--icon.c-btn--disabled, .c-dropdown__toggle.c-btn--scene.c-btn--disabled, .c-btn--form-field.c-btn--disabled, .c-dropdown__toggle.c-btn--vis.c-btn--disabled:hover, .c-dropdown__toggle.c-btn--icon.c-btn--disabled:hover, .c-dropdown__toggle.c-btn--scene.c-btn--disabled:hover, .c-btn--form-field.c-btn--disabled:hover, .c-dropdown__toggle.c-btn--vis.c-btn--disabled:focus, .c-dropdown__toggle.c-btn--icon.c-btn--disabled:focus, .c-dropdown__toggle.c-btn--scene.c-btn--disabled:focus, .c-btn--form-field.c-btn--disabled:focus, .c-dropdown__toggle.c-btn--vis.c-btn--disabled:active, .c-dropdown__toggle.c-btn--icon.c-btn--disabled:active, .c-dropdown__toggle.c-btn--scene.c-btn--disabled:active, .c-btn--form-field.c-btn--disabled:active { opacity: 1; text-decoration: none; border-bottom: none; } /** * Modifier: dimmed out button, especially handy in combination with the * c-btn--text-field modifier, to make the button look more like a placeholder * attribute. */ .c-btn--dimmed { opacity: .4; } /** * Modifier: makes the button look much tighter (less padding). */ .c-btn--tight { padding: 2px 5px; } /** * Modifier: makes the button look much spacier (more padding). */ .c-btn--spacier { padding: 7px 10px; } /** * Modifier: adds margin to button. */ .c-btn--margin { margin-top: 8px; margin-left: -7px; } /** * Modifier: underlines the link or button. */ .c-btn--underline { text-decoration: underline; } /*Show hidden button under label*/ .c-btn--hidden-btn{ float: left; } .c-btn--hidden-btn + button{ float:left; clear: left; position: relative; top:-3px; } /** * Modifier: indicates a temporarily disabled button * with a progress bar. To be used alongside an embedded * empty div.c-btn__progress element */ .c-btn--in-progress { background: rgb(250, 250, 250); border-color: rgb(200, 200, 200); color: #1976d280; position: relative; cursor: default; } /** * Add this element inside an .c-btn--in-progress button * the element should have an inline style or width attribute set. * The width is supposed to change from 0% to 100% as the * test completion progresses. */ .c-btn__progress { display: block; position: absolute; bottom: 1px; left: 12px; height: 3px; border-radius: 3px; background: white; } .c-btn-size-10 { font-size: 10px; } /*------------------------------------*\ #BUTTON-GROUPS \*------------------------------------*/ /** * Buttons that are grouped together have no spacing between them and form a * visual group. * * Requirements: * 1. c-btn-group on a parent element. * 2. c-btn-group__btn on every button. * 3. c-btn-group__btn--first on the first button. * 4. c-btn-group__btn--last on the last button. * * Modifiers: none */ /** * 1) Make sure the space gap disappears between buttons. * 2) Move to left to make the buttons' borders overlap... * 3) ... but undo that for the first button. * */ .c-btn-group { font-size: 0; /* [1] */ display: flex; align-items: center; } .c-btn-group__btn { font-size: 12px; margin-left: -1px; /* [2] */ } .c-btn-group__btn--first { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-left: 0; /* [3] */ } .c-btn-group__btn--last { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .c-flex-btn-grid{ display: flex; flex-flow: row wrap; flex-direction: row; } .c-flex-btn-item{ margin: 4px 4px 4px 0px; flex: 0 1 calc(25% - 8px); background: #F2F8FB; color: var(--bnc-text-color); border: 1px solid var(--bnc-primary); opacity: 0.5; } .c-flex-btn-action-item{ margin: 4px 4px 4px 0px; flex: 0 1 calc(25% - 8px); opacity: 1; } .c-flex-btn-item-active{ background: white; opacity: 1; font-weight: bold; } .c-btn-group__margin{ margin-bottom: 5px; } /*------------------------------------*\ #SCENE-SELECT \*------------------------------------*/ /** * The scene selector dropdown that appears next to the main page title on some * pages. */ .c-scene-select { /*margin-top: 9px;*/ display: inline-flex; align-items: center; height: 56px; justify-content: end; } /*------------------------------------*\ #CHARTS \*------------------------------------*/ /** * This is the element that holds a title and a chart (couple). * Used on the dashboard, capacity balance page etc. * * Requirements: * 1. A container with the c-chart class. * 2. An optional title element, styled using the titles component. Add the * c-chart__title class to it for spacing. */ .c-chart { margin-bottom: 70px; } .c-chart__title { margin-bottom: 12px; } /** * The analysis pivot charts don't load data as they're hidden. So we're using * this nasty trick to position the charts off screen until the page has * finished loading. */ .is-loading .c-chart { height: 1px; opacity: 0; } .checkbox-container { display: block; position: relative; padding-left: 20px; margin-bottom: 5px; cursor: pointer; font-size: 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-container--center { display: flex; align-items: center; cursor: pointer; font-size: 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-container--inline { display: inline-block; position: relative; padding-left: 0px; padding-right: 5px; vertical-align: middle; } /* Hide the browser's default checkbox */ .checkbox-container input { position: absolute; opacity: 0; left: 1px; margin-right: 0; } .checkbox-container--center input { position: absolute; opacity: 0; left: 1px; margin-right: 0; } /* Create a custom checkbox */ .checkbox-checkmark { position: absolute; top: 0; left: 0; height: 15px; width: 15px; border: 1px solid #ccc; border-radius: 3px; background-color: #FFF; overflow: hidden; } .checkbox-checkmark--disabled { background-color: #e2e2e2; } .checkbox-checkmark-fill { position: absolute; display: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bnc-primary); } .checkbox-container--inline .checkbox-checkmark { position: relative; display: block; } .checkbox-container--center .checkbox-checkmark { position: relative; display: block; } .checkbox-label--inline { display: inline-block; vertical-align: middle; padding-left: 5px; } .checkbox-label--inline.checkbox-label--clickable { cursor: pointer; } /* When the checkbox is checked, add a blue background */ .checkbox-container input:checked ~ .checkbox-checkmark, .checkbox-container input.partial ~ .checkbox-checkmark { background-color: var(--bnc-primary); } .checkbox-container input:checked ~ .checkbox-checkmark .checkbox-checkmark-fill, .checkbox-container input.partial ~ .checkbox-checkmark .checkbox-checkmark-fill { display: block; } .checkbox-container--center input:checked ~ .checkbox-checkmark, .checkbox-container--center input.partial ~ .checkbox-checkmark { background-color: var(--bnc-primary); } .checkbox-container--center input:checked ~ .checkbox-checkmark .checkbox-checkmark-fill, .checkbox-container--center input.partial ~ .checkbox-checkmark .checkbox-checkmark-fill { display: block; } /* Create the checkmark/indicator (hidden when not checked) */ .checkbox-checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .checkbox-container input:checked ~ .checkbox-checkmark:after, .checkbox-container input.partial ~ .checkbox-checkmark:after { display: block; } .checkbox-container--center input:checked ~ .checkbox-checkmark:after, .checkbox-container--center input.partial ~ .checkbox-checkmark:after { display: block; } /* Style the checkmark/indicator */ .checkbox-container .checkbox-checkmark:after { left: 5px; top: 1px; width: 4px; height: 9px; border: solid white; border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Style the checkmark/indicator */ .checkbox-container .checkbox-checkmark.partial:after { left: 5px; top: 1px; width: 3px; height: 9px; border: solid white; border-width: 0 1px 0px 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .checkbox-container--center .checkbox-checkmark:after { left: 5px; top: 1px; width: 4px; height: 9px; border: solid white; border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Style the checkmark/indicator */ .checkbox-container--center .checkbox-checkmark.partial:after { left: 5px; top: 1px; width: 3px; height: 9px; border: solid white; border-width: 0 1px 0px 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /*------------------------------------*\ #FORM-CONTROL \*------------------------------------*/ /** * Use this component for textual inputs, textareas and select element. * * Modifiers: * 1. c-form-control--as-link: makes form fields look like a text link. * 2. c-form-control--tight: reduces padding-left and padding-right, handy when * space is tight as in certain table cells. * 3. c-form-control--vert-align: makes 'as-link' form controls align better with * possible elements that are above or below the form control. * 4. c-form-control--inline: for those form controls that are placed inline in * a paragraph of text instead of with a text label e.g. "this activity takes * xxxx hours to complete". * 5. c-form-control--search if you want an input that is not of type="search" to * look like a search field anyway. * 6. c-form-control--invisible if you want a form control to look like a regular * unstyled div. * 7. c-form-control--hidden-until-focus if you want to hide the control's * outlines until it's focused. * 8. c-form-control--autoexpand if you want the form field to grow taller as * needed. */ /** * The base component. * * 1) Same value as in c-form-control--as-link. * 2) Changing this value? * a) Check comments in .c-form-control--vert-align. * b) Check comments in .c-dropdown--input-field. */ .c-form-control { display: block; width: 100%; /* [2] */ height: 30px; padding: 2px 7px; /* [2] */ background-color: #fff; /* [1] */ border: 1px solid #ccc; /* [1] */ border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); /* [1] */ transition: border-color ease-in-out .15s, box-shadow ease-in-out .1s; line-height: inherit; } /** * is-focused class is set by the search field js on a div element. Therefor * we need to define it here. Basically this means we can style all elements * as input elements now. (untested) */ .c-form-control:focus, .c-form-control.is-focused { border-color: var(--bnc-primary); outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(58, 157, 250, .6); } .c-form-control--lop { box-shadow: none !important; /* [1] */ } /** * is-focused class is set by the search field js on a div element. Therefor * we need to define it here. Basically this means we can style all elements * as input elements now. (untested) */ .c-form-control--lop:focus, .c-form-control--lop.is-focused { border-color: var(--bnc-primary); outline: 0; box-shadow: none; } .c-form-control::-moz-placeholder { color: #999; opacity: 1; } .c-form-control:-ms-input-placeholder { color: #999; } .c-form-control::-webkit-input-placeholder { color: #999; } /** * Hide the default x button on ms browsers for search fields. */ .c-form-control::-ms-clear { display: none; } .c-form-control[disabled], .c-form-control[readonly] { background-color: #eee; opacity: 1; } .c-form-control[disabled] { /*cursor: not-allowed;*/ } /** * 1) Same height as input type form control. */ textarea.c-form-control, .c-form-control--autoexpand { height: auto; min-height: 30px; /* [1] */ } [type="search"].c-form-control, .c-form-control--search { background: url(/public/8b3c91c5d51575595f6f86c234d52f16.svg) no-repeat white; padding-left: 26px; } /** * Modifier: makes form fields look like a text link. * * 1) Hides the resize handle that appears in some browsers at the bottom * right of a textarea. * 2) If text-decoration styling is better supported by browsers, we could * best style the underline so it's much more subtle. Current browser * support: http://caniuse.com/#feat=text-decoration * 3) Exactly the same as c-form-control. * 4) Important for these places where the form control may appear on a colored * background, eg. a selected table cell from availabilities. */ .c-form-control--as-link { background-color: transparent; border-color: transparent; box-shadow: none; resize: none; /* [1] */ text-decoration: underline; /* [2] */ } .c-form-control--as-link:hover { border-color: #ccc; /* [3] */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); /* [3] */ background-color: white; color: var(--bnc-text-color); /* [4] */ } .c-form-control--as-link:focus, .c-form-control--as-link.is-focused { background-color: #fff; /* [3] */ border-color: var(--bnc-primary); /* [3] */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); /* [3] */ text-decoration: none; color: var(--bnc-text-color); /* [4] */ } /** * For some reason, we can't group these selectors. Safari won't do a * thing if they're grouped together. * * Current state of browser support for the placeholder pseudo-element: * http://caniuse.com/#feat=css-placeholder * * 3) Placeholders should inherit text color as most browsers make them gray * by default. */ .c-form-control--as-link:-ms-input-placeholder { text-overflow: ellipsis; color: inherit; /* [3] */ opacity: .4; text-decoration: underline; /* [2] */ } .c-form-control--as-link::-webkit-input-placeholder { text-overflow: ellipsis; opacity: .4; color: inherit; /* [3] */ text-decoration: underline; /* [2] */ } .c-form-control--as-link:focus::-webkit-input-placeholder, .c-form-control--as-link.is-focused::-webkit-input-placeholder, .c-form-control--as-link:disabled::-webkit-input-placeholder { text-decoration: none; } .c-form-control--as-link::-moz-placeholder { text-overflow: ellipsis; opacity: .4; color: inherit; /* [3] */ text-decoration: underline; /* [2] */ } .c-form-control--as-link:focus::-moz-placeholder, .c-form-control--as-link.is-focused::-moz-placeholder { text-decoration: none; } /** * For textarea's, make the resize handles appear again on focus. */ textarea.c-form-control--as-link:focus { resize: both; } /** * Styling the disabled fields. * * 4) Safari makes disabled fields lighter by default. */ .c-form-control--as-link[disabled], .c-form-control--as-link[readonly] { background-color: transparent; border-color: transparent; box-shadow: none; resize: none; /* [1] */ text-decoration: none; -webkit-text-fill-color: inherit; /* [4] */ } .c-form-control--as-link[disabled]:hover, .c-form-control--as-link[readonly]:hover { /*cursor: not-allowed;*/ } /** * Modifier: makes field compact and removes all but the bottom borders. * Used on scheduling tree input fields. * Only used as addition to .c-form-control--as-link */ .c-form-control--line-field.c-form-control--as-link { height: auto; padding-top: 2px; padding-bottom: 1px; } .c-form-control--line-field.c-form-control--as-link:hover { border-color: transparent transparent #ccc transparent; border-radius: 0; box-shadow: none; } .c-form-control--line-field.c-form-control--as-link:focus, .c-form-control--line-field.c-form-control--as-link.is-focused { border-color: transparent transparent var(--bnc-primary) transparent; border-radius: 0; box-shadow: none; } /** * Modifier: makes left and right padding smaller. * Used on the availabilities table input fields. */ .c-form-control--tight { padding-left: 3px; padding-right: 3px; padding-top:0; padding-bottom:0; max-height: 18px; } .c-form-control--medium { padding-left: 3px; padding-right: 3px; padding-top:0; padding-bottom:0; max-height: 23px; } /** * Modifier: makes input's text align with left and right edge. * * 1) field width + left padding + right padding. For width and padding values, * see base class. * 2) Move to the left with the value of the left padding. For correct value, * see padding-left of base class. */ .c-form-control--vert-align { width: calc(100% + 7px + 7px); /* [1] */ margin-left: -7px; /* [2] */ } .c-form-control--vert-align.c-form-control--tight { width: calc(100% + 6px); /* [1] */ margin-left: -3px; /* [2] */ } /** * Modifier: remove field's left and right paddings. */ .c-form-control--no-spacing { padding-left: 0; padding-right: 0; } /** * Modifier: align field to its label. */ .c-form-control--multi-date { margin-top: 13px; } /** * An inline form-control, as used in the service item detail view for instance. */ .c-form-control--inline { display: inline-block; width: auto; padding-right: 0; padding-left: 1px; text-align: center; } .c-form-control--inline:focus, .c-form-control--inline.is-focused { width: 5em; } .c-form-control--inline-number, .c-form-control--inline-number:focus { width: 34px; } /** * We don't want to contstrain the width of select elements as they're only * as wide as their contents, which is the ideal behavior we're after. */ select.c-form-control--inline, select.c-form-control--inline:focus { width: auto; } /** * Modifier * Hides the input field's outline to the user. In use for the add labels * ui element. */ .c-form-control--invisible { border-width: 0; box-shadow: none; padding: 0; } /** * Default height minus vertical padding and border width. */ .c-form-control .c-form-control--invisible { height: 24px; /* [1] */ } .c-form-control--invisible:focus, .c-form-control--invisible:hover, .c-form-control--invisible.is-focused { box-shadow: none; } /** * For some reason, we can't group these selectors. Safari won't do a * thing if they're grouped together. * * Make the placeholder more opaque on hover, but return to normal state on * focus. * * 1) Same value as c-form-control--as-link */ .c-form-control--invisible:hover:-ms-input-placeholder { opacity: .7; } .c-form-control--invisible:focus:-ms-input-placeholder { opacity: .4; /* [1] */ } .c-form-control--invisible:hover::-webkit-input-placeholder { opacity: .7; } .c-form-control--invisible:focus::-webkit-input-placeholder { opacity: .4; /* [1] */ } .c-form-control--invisible:hover::-moz-placeholder { opacity: .7; } .c-form-control--invisible:focus::-moz-placeholder { opacity: .4; /* [1] */ } /** * Modifier * Most likely to be used together with c-form-control--as-link modifier. * Only show the input element's outlines when focused. */ /** * 1) Makes tiny dot-like underline appear in labels box on FF and Chrome. */ .c-form-control--hidden-until-focus { text-decoration: none; /* [1] */ position: relative; right: 8px; } .c-form-control--hidden-until-focus:hover { cursor: pointer; border-color: transparent; box-shadow: none; background-color: white; } .c-form-control--hidden-until-focus:hover * { cursor: pointer; } .c-form-control--hidden-until-focus:focus, .c-form-control--hidden-until-focus.is-focused { border-color: var(--bnc-primary); /* [3] */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); /* [3] */ text-decoration: none; right: 0; } .c-form-control--placeholer { padding: 0 8px; line-height: 30px; } /*------------------------------------*\ #FORM-GROUP \*------------------------------------*/ /** * Use this component to group a label input pair. The base class is used only * when a label is above the input. The form group component is nestable, as a * label sometimes has sub-labels. In the case of the latter we don't use the *