/*! normalize.css v3.0.1 | 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, 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: 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 { 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"], 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 */ /* 2 */ box-sizing: content-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; } meta.foundation-version { font-family: "1.1.0"; } meta.foundation-mq { font-family: "small=0&medium=40rem&large=75rem&xlarge=90rem&xxlarge=120rem"; } /* GLOBAL ------ Global styles and settings for Foundation for Apps are stored here. This file must always be imported, no matter what. Includes: - */ html, body { height: 100%; font-size: 100%; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: #fff; color: #222; padding: 0; margin: 0; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; display: inline-block; vertical-align: middle; } a, [ui-sref], [zf-open], [zf-close], [zf-toggle] { cursor: pointer; } #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { max-width: none !important; } .padding { padding: 1rem; } .iconic { width: 1rem; height: 1rem; vertical-align: middle; } a > .iconic { margin-top: -2px; margin-right: 0.25rem; } a > .iconic * { fill: #00558b; stroke: #00558b; } a > .iconic *.iconic-property-accent { fill: #00558b; stroke: #00558b; } .iconic * { fill: #00558b; stroke: #00558b; } .iconic *.iconic-property-accent { fill: #00558b; stroke: #00558b; } .iconic-color-primary * { fill: #00558b; stroke: #00558b; } .iconic-color-primary *.iconic-property-accent { fill: #00558b; stroke: #00558b; } .iconic-color-success * { fill: #43AC6A; stroke: #43AC6A; } .iconic-color-success *.iconic-property-accent { fill: #43AC6A; stroke: #43AC6A; } .iconic-color-warning * { fill: #F08A24; stroke: #F08A24; } .iconic-color-warning *.iconic-property-accent { fill: #F08A24; stroke: #F08A24; } .iconic-color-alert * { fill: #F04124; stroke: #F04124; } .iconic-color-alert *.iconic-property-accent { fill: #F04124; stroke: #F04124; } .iconic-color-dark * { fill: #232323; stroke: #232323; } .iconic-color-dark *.iconic-property-accent { fill: #232323; stroke: #232323; } .iconic-color-secondary * { fill: #f1f1f1; stroke: #f1f1f1; } .iconic-color-secondary *.iconic-property-accent { fill: #f1f1f1; stroke: #f1f1f1; } /* ACTION SHEET ------------ A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices. */ /* Styles for the list inside an action sheet. Don't include this mixin if you want to build custom controls inside the sheet. */ /* Styles for the action sheet container. Action sheets pin to the top or bottom of the screen. */ .action-sheet-container { position: relative; display: inline-block; } .action-sheet-container .button { margin-left: 0; margin-right: 0; } .action-sheet { position: fixed; left: 0; z-index: 1000; width: 100%; padding: 1rem; background: white; text-align: center; transition-property: -webkit-transform opacity; transition-property: transform opacity; transition-duration: 0.25s; transition-timing-function: ease-out; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.25); bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .action-sheet.is-active { -webkit-transform: translateY(0%); transform: translateY(0%); } .action-sheet ul { margin: -1rem; margin-top: 0; list-style-type: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .action-sheet ul:first-child { margin-top: -1rem; } .action-sheet ul:first-child li:first-child { border-top: 0; } .action-sheet ul a { display: block; padding: 0.8rem; line-height: 1; color: #000; border-top: 1px solid #ccc; } .action-sheet ul a:hover { color: #000; background: #f2f2f2; } .action-sheet ul .alert > a { color: #F04124; } .action-sheet ul .disabled > a { pointer-events: none; color: #999; } @media only screen and (min-width: 40em) { .action-sheet { /* Core styles */ position: absolute; left: 50%; width: 300px; border-radius: 4px; opacity: 0; pointer-events: none; /* Menu shadow */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); /* Active state */ /* Menu tail */ /* Positioning */ top: auto; bottom: 0; -webkit-transform: translateX(-50%) translateY(110%); transform: translateX(-50%) translateY(110%); } .action-sheet.is-active { opacity: 1; pointer-events: auto; } .action-sheet::before, .action-sheet::after { content: ''; position: absolute; left: 50%; display: block; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; margin-left: -10px; } .action-sheet.is-active { -webkit-transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%); } .action-sheet::before, .action-sheet::after { top: -10px; bottom: auto; border-top: 0; border-bottom: 10px solid white; } .action-sheet::before { top: -12px; border-bottom-color: rgba(0, 0, 0, 0.15); } .action-sheet.top { /* Core styles */ position: absolute; left: 50%; width: 300px; border-radius: 4px; opacity: 0; pointer-events: none; /* Menu shadow */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); /* Active state */ /* Menu tail */ /* Positioning */ top: 0; bottom: auto; -webkit-transform: translateX(-50%) translateY(-120%); transform: translateX(-50%) translateY(-120%); } .action-sheet.top.is-active { opacity: 1; pointer-events: auto; } .action-sheet.top::before, .action-sheet.top::after { content: ''; position: absolute; left: 50%; display: block; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; margin-left: -10px; } .action-sheet.top.is-active { -webkit-transform: translateX(-50%) translateY(-110%); transform: translateX(-50%) translateY(-110%); } .action-sheet.top::before, .action-sheet.top::after { top: auto; bottom: -10px; border-top: 10px solid white; border-bottom: 0; } .action-sheet.top::before { bottom: -12px; border-top-color: rgba(0, 0, 0, 0.15); } } .action-sheet.primary { background: #00558b; color: #fff; border: 0; } .action-sheet.primary::before { display: none; } .action-sheet.primary::before, .action-sheet.primary::after { border-top-color: #00558b; } .action-sheet.primary.top::before, .action-sheet.primary.top::after { border-bottom-color: #00558b; } .action-sheet.primary ul { margin: -1rem; margin-top: 0; list-style-type: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .action-sheet.primary ul:first-child { margin-top: -1rem; } .action-sheet.primary ul:first-child li:first-child { border-top: 0; } .action-sheet.primary ul a { display: block; padding: 0.8rem; line-height: 1; color: #fff; border-top: 1px solid #006cb0; } .action-sheet.primary ul a:hover { color: #fff; background: #00609e; } .action-sheet.primary ul .alert > a { color: #F04124; } .action-sheet.primary ul .disabled > a { pointer-events: none; color: #999; } .action-sheet.dark { background: #232323; color: #fff; border: 0; } .action-sheet.dark::before { display: none; } .action-sheet.dark::before, .action-sheet.dark::after { border-top-color: #232323; } .action-sheet.dark.top::before, .action-sheet.dark.top::after { border-bottom-color: #232323; } .action-sheet.dark ul { margin: -1rem; margin-top: 0; list-style-type: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .action-sheet.dark ul:first-child { margin-top: -1rem; } .action-sheet.dark ul:first-child li:first-child { border-top: 0; } .action-sheet.dark ul a { display: block; padding: 0.8rem; line-height: 1; color: #fff; border-top: 1px solid #393939; } .action-sheet.dark ul a:hover { color: #fff; background: #2e2e2e; } .action-sheet.dark ul .alert > a { color: #F04124; } .action-sheet.dark ul .disabled > a { pointer-events: none; color: #999; } /* BLOCK LIST ---------- A generic list component that can accomodate a variety of styles and controls. Features: - Icons - Labels - Chevrons - Text fields - Dropdown menus - Checkbox/radio inputs */ /* Adds styles for a block list container. $font-size: global font size for the list. $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element. */ .block-list { margin-bottom: 1rem; line-height: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .block-list, .block-list ul { list-style-type: none; } .block-list ul { margin-left: 0; } /* Styles block list headers on the selector you include this mixin in (normally a
). $color - color of the header. $font-size - font size of the header. $offset - left margin to add to the header, to line it up with the list items. */ /* Styles block list items on the selector you include this mixin in (normally an
  • ). $color - color of items. $color-hover - color of items on hover. $background - background of items. $background-hover - background of items on hover. $border - border between items. $padding - padding on items. */ /* Adds label styles to the class you include this mixin in. $color - color of the label. $left-class - extra class to flip the orientation of the label. $left-padding - left padding to use for left-hand labels. */ /* Adds support for chevrons, which appear on the right-hand side of the item. $color - color of the chevron. $padding - include the global padding of block list items here. */ /* Adds icon styles. Call this mixin on a block list container. $size - size of the icon as a percentage (decimal) of the list item's height. $item-selector - overrides the 'li' selector used for list items. */ /* Adds support for text fields, select menus, and checkbox/radio groups in block lists. $color - color of select menu arrow. $background-hover - color of select menu when hovered over. $padding - include the global padding of block list items here. $dropdown-class - class to use for list items that contain a dropdown. $switch-class - class to use for switches inside list items. */ .block-list { font-size: 1rem; margin-left: -1rem; margin-right: -1rem; } .block-list input[type="text"], .block-list input[type="password"], .block-list input[type="date"], .block-list input[type="datetime"], .block-list input[type="datetime-local"], .block-list input[type="month"], .block-list input[type="week"], .block-list input[type="email"], .block-list input[type="number"], .block-list input[type="search"], .block-list input[type="tel"], .block-list input[type="time"], .block-list input[type="url"], .block-list input[type="color"], .block-list textarea { margin: 0; border: 0; line-height: 1; height: auto; padding: 0.8rem 1rem; color: inherit; } .block-list input[type="text"]:hover, .block-list input[type="text"]:focus, .block-list input[type="password"]:hover, .block-list input[type="password"]:focus, .block-list input[type="date"]:hover, .block-list input[type="date"]:focus, .block-list input[type="datetime"]:hover, .block-list input[type="datetime"]:focus, .block-list input[type="datetime-local"]:hover, .block-list input[type="datetime-local"]:focus, .block-list input[type="month"]:hover, .block-list input[type="month"]:focus, .block-list input[type="week"]:hover, .block-list input[type="week"]:focus, .block-list input[type="email"]:hover, .block-list input[type="email"]:focus, .block-list input[type="number"]:hover, .block-list input[type="number"]:focus, .block-list input[type="search"]:hover, .block-list input[type="search"]:focus, .block-list input[type="tel"]:hover, .block-list input[type="tel"]:focus, .block-list input[type="time"]:hover, .block-list input[type="time"]:focus, .block-list input[type="url"]:hover, .block-list input[type="url"]:focus, .block-list input[type="color"]:hover, .block-list input[type="color"]:focus, .block-list textarea:hover, .block-list textarea:focus { border: 0; } .block-list li > input[type="checkbox"], .block-list li > input[type="radio"] { position: absolute; left: -9999px; } .block-list li > input[type="checkbox"] + label, .block-list li > input[type="radio"] + label { display: block; font-size: 1rem; margin: 0; } .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before { background-image: url('data:image/svg+xml;utf8,'); content: ''; background-size: 100% 100%; width: 1.5em; height: 1.5em; color: #00558b; float: right; pointer-events: none; margin-top: -0.25em; } @media screen and (min-width: 0\0) { .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrMl0FugzAQRY3TRZeoFyhVL0BOkGTXJezaHZwguUnECaCrdFd6gqQnCN11Uyk5QekNOlONJWMVGMCgfGlkEIY3HnsG2xFM3d96PjQB2AJsWdPtAPYOln+dTwXnuw4DHEGzBvNFN6EDCTiS9XIAwB40acNoucKoxODIie0AwAOCu8KOSnIiNx/MakK+A7sW9oTferxx3fP3T1nURoBG/irGVahHwjHm/Ggx7E3TMVdrQmoP0gngghhpZQ3QvG/EdPLUelARWI8Aycjq9Md0qMIdbcNhjmOKLoY7quk3l1Rebeqg4AwFkmq7LWGOh1pmNY0etZAWSq0OX8HoS4JvWuCopbSY26EGR/CW86K0BF+pwkLwlPuyHJhOCl5oe4ZtF++vOqST+GdOYwO+71pN2VNAjmQGPCe42weuHDg0PI8olUwnYrXTGQJH9gxq8l1LKvrQx4O6/YY32Kp/ugb3ey7gZ4xAzuhYiYTxB/UHZFAuaREVXZ2g6yFlvEC2yoKEmbsRZYNgVLk2JeaOaG+xLHN+WCszDWMqLGOrJFa1DlApjSdwoHJGqGzLIb0+cas0wh5Bh780ngswx8GJD7h8sHg2wLA/mfDLPZpdxOF0quP5rwADAAFIzSRvu1m5AAAAAElFTkSuQmCC'); } } .block-list .with-dropdown { color: inherit; } .block-list .with-dropdown select { -webkit-appearance: none; -moz-appearance: none; outline: 0; background: 0; border: 0; height: auto; padding: 0.8rem 1rem; margin: 0; font-size: 1em; line-height: 1; color: inherit; background-color: transparent; } .block-list .switch { position: absolute; top: 50%; right: 1rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .block-list.with-icons li > a, .block-list.with-icons li > span, .block-list.with-icons li > label { padding-left: 2.8rem; } .block-list.with-icons li img, .block-list.with-icons li .iconic { position: absolute; top: 0.26rem; left: 0.26rem; width: 2.08rem; height: 2.08rem; border-radius: 8px; pointer-events: none; } .block-list header { margin-top: 1em; color: #666666; font-weight: bold; margin-bottom: 0.5em; margin-left: 1rem; font-size: 0.8em; cursor: default; text-transform: uppercase; } .block-list li { position: relative; border-bottom: 1px solid #d0d0d0; } .block-list li:first-child { border-top: 1px solid #d0d0d0; } .block-list li > a, .block-list li > span, .block-list li > label { display: block; padding: 0.8rem 1rem; padding-left: 1rem; color: #000; line-height: 1; } .block-list li > span { cursor: default; } .block-list li > a, .block-list li > label { cursor: pointer; } .block-list li > a:hover, .block-list li > label:hover { color: #000; } .block-list li > a:hover, .block-list li > label:hover, .block-list li select:hover { background: #f4f4f4; } .block-list li.caution > a, .block-list li.caution > a:hover { color: #F04124; } .block-list li.disabled > a { cursor: default; } .block-list li.disabled > a, .block-list li.disabled > a:hover { color: #999; } .block-list li.disabled > a:hover { background: transparent; } .block-list li.with-chevron::after { content: '\203A'; display: block; position: absolute; right: 1rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-weight: bold; color: #666666; font-size: 2em; } .block-list li.with-chevron .block-list-label { padding-right: 1.5rem; } .block-list li .block-list-label { display: inline-block; float: right; padding: 0; color: #999999; pointer-events: none; } .block-list li .block-list-label.left { margin-left: 0.8rem; float: none; } .button, .button-group > li > a, .button-group > li > label, .button-group > li > button { display: inline-block; border: 0; text-align: center; line-height: 1; cursor: pointer; -webkit-appearance: none; -webkit-font-smoothing: antialiased; transition: background 0.25s ease-out; vertical-align: middle; padding: 0.85em 1em; margin: 0 1rem 1rem 0; font-size: 0.9rem; border-radius: 0; } .button { font-size: 0.9rem; display: inline-block; width: auto; margin: 0 1rem 1rem 0; background: #00558b; color: #fff; } .button .iconic { width: 1em; height: 1em; vertical-align: middle; margin-right: 0.25em; margin-top: -2px; } .button:hover, .button:focus { background: #004876; color: #fff; } .button .iconic * { fill: #fff; stroke: #fff; } .button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button.tiny { font-size: 0.63rem; } .button.tiny .iconic { width: 1em; height: 1em; vertical-align: middle; margin-right: 0.25em; margin-top: -2px; } .button.small { font-size: 0.72rem; } .button.small .iconic { width: 1em; height: 1em; vertical-align: middle; margin-right: 0.25em; margin-top: -2px; } .button.large { font-size: 1.17rem; } .button.large .iconic { width: 1em; height: 1em; vertical-align: middle; margin-right: 0.25em; margin-top: -2px; } .button.expand { display: block; width: 100%; margin-left: 0; margin-right: 0; } .button.secondary { background: #f1f1f1; color: #000; } .button.secondary:hover, .button.secondary:focus { background: #cdcdcd; color: #000; } .button.secondary .iconic * { fill: #000; stroke: #000; } .button.secondary .iconic *.iconic-property-accent { fill: #000; stroke: #000; } .button.success { background: #43AC6A; color: #fff; } .button.success:hover, .button.success:focus { background: #39925a; color: #fff; } .button.success .iconic * { fill: #fff; stroke: #fff; } .button.success .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button.warning { background: #F08A24; color: #fff; } .button.warning:hover, .button.warning:focus { background: #dc750f; color: #fff; } .button.warning .iconic * { fill: #fff; stroke: #fff; } .button.warning .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button.alert { background: #F04124; color: #fff; } .button.alert:hover, .button.alert:focus { background: #dc2c0f; color: #fff; } .button.alert .iconic * { fill: #fff; stroke: #fff; } .button.alert .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button.info { background: #A0D3E8; color: #000; } .button.info:hover, .button.info:focus { background: #71bddd; color: #000; } .button.info .iconic * { fill: #000; stroke: #000; } .button.info .iconic *.iconic-property-accent { fill: #000; stroke: #000; } .button.dark { background: #232323; color: #fff; } .button.dark:hover, .button.dark:focus { background: #1e1e1e; color: #fff; } .button.dark .iconic * { fill: #fff; stroke: #fff; } .button.dark .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button.hollow { border: 1px solid #00558b; background: transparent; color: #00558b; } .button.hollow:hover, .button.hollow:focus { border-color: #008ee8; background: transparent; color: #008ee8; } .button.hollow .iconic * { fill: #00558b; stroke: #00558b; } .button.hollow .iconic *.iconic-property-accent { fill: #00558b; stroke: #00558b; } .button.hollow:hover .iconic * { fill: #008ee8; stroke: #008ee8; } .button.hollow:hover .iconic *.iconic-property-accent { fill: #008ee8; stroke: #008ee8; } .button.hollow.secondary { border: 1px solid #f1f1f1; background: transparent; color: #f1f1f1; } .button.hollow.secondary:hover, .button.hollow.secondary:focus { border-color: #f4f4f4; background: transparent; color: #f4f4f4; } .button.hollow.secondary .iconic * { fill: #f1f1f1; stroke: #f1f1f1; } .button.hollow.secondary .iconic *.iconic-property-accent { fill: #f1f1f1; stroke: #f1f1f1; } .button.hollow.secondary:hover .iconic * { fill: #f4f4f4; stroke: #f4f4f4; } .button.hollow.secondary:hover .iconic *.iconic-property-accent { fill: #f4f4f4; stroke: #f4f4f4; } .button.hollow.success { border: 1px solid #43AC6A; background: transparent; color: #43AC6A; } .button.hollow.success:hover, .button.hollow.success:focus { border-color: #6dc68e; background: transparent; color: #6dc68e; } .button.hollow.success .iconic * { fill: #43AC6A; stroke: #43AC6A; } .button.hollow.success .iconic *.iconic-property-accent { fill: #43AC6A; stroke: #43AC6A; } .button.hollow.success:hover .iconic * { fill: #6dc68e; stroke: #6dc68e; } .button.hollow.success:hover .iconic *.iconic-property-accent { fill: #6dc68e; stroke: #6dc68e; } .button.hollow.warning { border: 1px solid #F08A24; background: transparent; color: #F08A24; } .button.hollow.warning:hover, .button.hollow.warning:focus { border-color: #f4a75b; background: transparent; color: #f4a75b; } .button.hollow.warning .iconic * { fill: #F08A24; stroke: #F08A24; } .button.hollow.warning .iconic *.iconic-property-accent { fill: #F08A24; stroke: #F08A24; } .button.hollow.warning:hover .iconic * { fill: #f4a75b; stroke: #f4a75b; } .button.hollow.warning:hover .iconic *.iconic-property-accent { fill: #f4a75b; stroke: #f4a75b; } .button.hollow.alert { border: 1px solid #F04124; background: transparent; color: #F04124; } .button.hollow.alert:hover, .button.hollow.alert:focus { border-color: #f4715b; background: transparent; color: #f4715b; } .button.hollow.alert .iconic * { fill: #F04124; stroke: #F04124; } .button.hollow.alert .iconic *.iconic-property-accent { fill: #F04124; stroke: #F04124; } .button.hollow.alert:hover .iconic * { fill: #f4715b; stroke: #f4715b; } .button.hollow.alert:hover .iconic *.iconic-property-accent { fill: #f4715b; stroke: #f4715b; } .button.hollow.info { border: 1px solid #A0D3E8; background: transparent; color: #A0D3E8; } .button.hollow.info:hover, .button.hollow.info:focus { border-color: #b8deee; background: transparent; color: #b8deee; } .button.hollow.info .iconic * { fill: #A0D3E8; stroke: #A0D3E8; } .button.hollow.info .iconic *.iconic-property-accent { fill: #A0D3E8; stroke: #A0D3E8; } .button.hollow.info:hover .iconic * { fill: #b8deee; stroke: #b8deee; } .button.hollow.info:hover .iconic *.iconic-property-accent { fill: #b8deee; stroke: #b8deee; } .button.hollow.dark { border: 1px solid #232323; background: transparent; color: #232323; } .button.hollow.dark:hover, .button.hollow.dark:focus { border-color: #5a5a5a; background: transparent; color: #5a5a5a; } .button.hollow.dark .iconic * { fill: #232323; stroke: #232323; } .button.hollow.dark .iconic *.iconic-property-accent { fill: #232323; stroke: #232323; } .button.hollow.dark:hover .iconic * { fill: #5a5a5a; stroke: #5a5a5a; } .button.hollow.dark:hover .iconic *.iconic-property-accent { fill: #5a5a5a; stroke: #5a5a5a; } .button.disabled { opacity: 0.5; cursor: default; pointer-events: none; } .button-group { margin: 0; margin-bottom: 1rem; list-style-type: none; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; border-radius: 0; overflow: hidden; font-size: 0.9rem; } .button-group > li { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .button-group > li > a, .button-group > li > label, .button-group > li > button { border-radius: 0; font-size: inherit; display: block; margin: 0; } .button-group > li > input + label { margin-left: 0; } .button-group > li:not(:last-child) > a, .button-group > li:not(:last-child) > label, .button-group > li:not(:last-child) > button { border-right: 1px solid #004068; } .button-group .iconic { width: 1em; height: 1em; vertical-align: middle; margin-right: 0.25em; margin-top: -2px; } .button-group.segmented, .button-group.segmented.secondary, .button-group.segmented.success, .button-group.segmented.warning, .button-group.segmented.alert { border: 1px solid #00558b; transition-property: background color; } .button-group.segmented > li > input[type="radio"] { position: absolute; left: -9999px; } .button-group.segmented > li > a, .button-group.segmented.secondary > li > a, .button-group.segmented.success > li > a, .button-group.segmented.warning > li > a, .button-group.segmented.alert > li > a, .button-group.segmented > li > label, .button-group.segmented.secondary > li > label, .button-group.segmented.success > li > label, .button-group.segmented.warning > li > label, .button-group.segmented.alert > li > label, .button-group.segmented > li > button, .button-group.segmented.secondary > li > button, .button-group.segmented.success > li > button, .button-group.segmented.warning > li > button, .button-group.segmented.alert > li > button { margin-right: 0; background: transparent; } .button-group { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; border-radius: 0; } .button-group > li { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .button-group > li > a, .button-group > li > label, .button-group > li > button { background: #00558b; color: #fff; border-color: #004876; } .button-group > li > a:hover, .button-group > li > a:focus, .button-group > li > label:hover, .button-group > li > label:focus, .button-group > li > button:hover, .button-group > li > button:focus { background: #004876; color: #fff; } .button-group > li > a .iconic *, .button-group > li > label .iconic *, .button-group > li > button .iconic * { fill: #fff; stroke: #fff; } .button-group > li > a .iconic *.iconic-property-accent, .button-group > li > label .iconic *.iconic-property-accent, .button-group > li > button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group > li.is-active > a, .button-group > li.is-active > label, .button-group > li.is-active > button { background: #004876; } .button-group.secondary > li > a, .button-group.secondary > li > label, .button-group.secondary > li > button { background: #f1f1f1; color: #000; border-color: #cdcdcd; } .button-group.secondary > li > a:hover, .button-group.secondary > li > a:focus, .button-group.secondary > li > label:hover, .button-group.secondary > li > label:focus, .button-group.secondary > li > button:hover, .button-group.secondary > li > button:focus { background: #cdcdcd; color: #000; } .button-group.secondary > li > a .iconic *, .button-group.secondary > li > label .iconic *, .button-group.secondary > li > button .iconic * { fill: #000; stroke: #000; } .button-group.secondary > li > a .iconic *.iconic-property-accent, .button-group.secondary > li > label .iconic *.iconic-property-accent, .button-group.secondary > li > button .iconic *.iconic-property-accent { fill: #000; stroke: #000; } .button-group.secondary > li.is-active > a, .button-group.secondary > li.is-active > label, .button-group.secondary > li.is-active > button { background: #cdcdcd; } .button-group.success > li > a, .button-group.success > li > label, .button-group.success > li > button { background: #43AC6A; color: #fff; border-color: #39925a; } .button-group.success > li > a:hover, .button-group.success > li > a:focus, .button-group.success > li > label:hover, .button-group.success > li > label:focus, .button-group.success > li > button:hover, .button-group.success > li > button:focus { background: #39925a; color: #fff; } .button-group.success > li > a .iconic *, .button-group.success > li > label .iconic *, .button-group.success > li > button .iconic * { fill: #fff; stroke: #fff; } .button-group.success > li > a .iconic *.iconic-property-accent, .button-group.success > li > label .iconic *.iconic-property-accent, .button-group.success > li > button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.success > li.is-active > a, .button-group.success > li.is-active > label, .button-group.success > li.is-active > button { background: #39925a; } .button-group.warning > li > a, .button-group.warning > li > label, .button-group.warning > li > button { background: #F08A24; color: #fff; border-color: #dc750f; } .button-group.warning > li > a:hover, .button-group.warning > li > a:focus, .button-group.warning > li > label:hover, .button-group.warning > li > label:focus, .button-group.warning > li > button:hover, .button-group.warning > li > button:focus { background: #dc750f; color: #fff; } .button-group.warning > li > a .iconic *, .button-group.warning > li > label .iconic *, .button-group.warning > li > button .iconic * { fill: #fff; stroke: #fff; } .button-group.warning > li > a .iconic *.iconic-property-accent, .button-group.warning > li > label .iconic *.iconic-property-accent, .button-group.warning > li > button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.warning > li.is-active > a, .button-group.warning > li.is-active > label, .button-group.warning > li.is-active > button { background: #dc750f; } .button-group.alert > li > a, .button-group.alert > li > label, .button-group.alert > li > button { background: #F04124; color: #fff; border-color: #dc2c0f; } .button-group.alert > li > a:hover, .button-group.alert > li > a:focus, .button-group.alert > li > label:hover, .button-group.alert > li > label:focus, .button-group.alert > li > button:hover, .button-group.alert > li > button:focus { background: #dc2c0f; color: #fff; } .button-group.alert > li > a .iconic *, .button-group.alert > li > label .iconic *, .button-group.alert > li > button .iconic * { fill: #fff; stroke: #fff; } .button-group.alert > li > a .iconic *.iconic-property-accent, .button-group.alert > li > label .iconic *.iconic-property-accent, .button-group.alert > li > button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.alert > li.is-active > a, .button-group.alert > li.is-active > label, .button-group.alert > li.is-active > button { background: #dc2c0f; } .button-group > li.secondary > a, .button-group > li.secondary > label, .button-group > li.secondary > button { background: #f1f1f1; color: #000; border-color: #f1f1f1; } .button-group > li.secondary > a:hover, .button-group > li.secondary > a:focus, .button-group > li.secondary > label:hover, .button-group > li.secondary > label:focus, .button-group > li.secondary > button:hover, .button-group > li.secondary > button:focus { background: #cdcdcd; color: #000; } .button-group > li.secondary > a:hover, .button-group > li.secondary > a:focus, .button-group > li.secondary > label:hover, .button-group > li.secondary > label:focus, .button-group > li.secondary > button:hover, .button-group > li.secondary > button:focus { border-color: #b5b5b5; } .button-group > li.secondary > a .iconic *, .button-group > li.secondary > label .iconic *, .button-group > li.secondary > button .iconic * { fill: #000; stroke: #000; } .button-group > li.secondary > a .iconic *.iconic-property-accent, .button-group > li.secondary > label .iconic *.iconic-property-accent, .button-group > li.secondary > button .iconic *.iconic-property-accent { fill: #000; stroke: #000; } .button-group > li.success > a, .button-group > li.success > label, .button-group > li.success > button { background: #43AC6A; color: #fff; border-color: #43AC6A; } .button-group > li.success > a:hover, .button-group > li.success > a:focus, .button-group > li.success > label:hover, .button-group > li.success > label:focus, .button-group > li.success > button:hover, .button-group > li.success > button:focus { background: #39925a; color: #fff; } .button-group > li.success > a:hover, .button-group > li.success > a:focus, .button-group > li.success > label:hover, .button-group > li.success > label:focus, .button-group > li.success > button:hover, .button-group > li.success > button:focus { border-color: #32814f; } .button-group > li.success > a .iconic *, .button-group > li.success > label .iconic *, .button-group > li.success > button .iconic * { fill: #fff; stroke: #fff; } .button-group > li.success > a .iconic *.iconic-property-accent, .button-group > li.success > label .iconic *.iconic-property-accent, .button-group > li.success > button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group > li.warning > a, .button-group > li.warning > label, .button-group > li.warning > button { background: #F08A24; color: #fff; border-color: #F08A24; } .button-group > li.warning > a:hover, .button-group > li.warning > a:focus, .button-group > li.warning > label:hover, .button-group > li.warning > label:focus, .button-group > li.warning > button:hover, .button-group > li.warning > button:focus { background: #dc750f; color: #fff; } .button-group > li.warning > a:hover, .button-group > li.warning > a:focus, .button-group > li.warning > label:hover, .button-group > li.warning > label:focus, .button-group > li.warning > button:hover, .button-group > li.warning > button:focus { border-color: #c2670d; } .button-group > li.warning > a .iconic *, .button-group > li.warning > label .iconic *, .button-group > li.warning > button .iconic * { fill: #fff; stroke: #fff; } .button-group > li.warning > a .iconic *.iconic-property-accent, .button-group > li.warning > label .iconic *.iconic-property-accent, .button-group > li.warning > button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group > li.alert > a, .button-group > li.alert > label, .button-group > li.alert > button { background: #F04124; color: #fff; border-color: #F04124; } .button-group > li.alert > a:hover, .button-group > li.alert > a:focus, .button-group > li.alert > label:hover, .button-group > li.alert > label:focus, .button-group > li.alert > button:hover, .button-group > li.alert > button:focus { background: #dc2c0f; color: #fff; } .button-group > li.alert > a:hover, .button-group > li.alert > a:focus, .button-group > li.alert > label:hover, .button-group > li.alert > label:focus, .button-group > li.alert > button:hover, .button-group > li.alert > button:focus { border-color: #c2270d; } .button-group > li.alert > a .iconic *, .button-group > li.alert > label .iconic *, .button-group > li.alert > button .iconic * { fill: #fff; stroke: #fff; } .button-group > li.alert > a .iconic *.iconic-property-accent, .button-group > li.alert > label .iconic *.iconic-property-accent, .button-group > li.alert > button .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.segmented { border-color: #00558b; } .button-group.segmented > li > a, .button-group.segmented > li > label, .button-group.segmented > li > button { border-color: #00558b; color: #00558b; } .button-group.segmented > li > a:hover, .button-group.segmented > li > label:hover, .button-group.segmented > li > button:hover { background: rgba(0, 85, 139, 0.25); color: #00558b; } .button-group.segmented > li > a .iconic *, .button-group.segmented > li > label .iconic *, .button-group.segmented > li > button .iconic * { fill: #00558b; stroke: #00558b; } .button-group.segmented > li > a .iconic *.iconic-property-accent, .button-group.segmented > li > label .iconic *.iconic-property-accent, .button-group.segmented > li > button .iconic *.iconic-property-accent { fill: #00558b; stroke: #00558b; } .button-group.segmented > li.is-active > a, .button-group.segmented > li.is-active > a:hover, .button-group.segmented > li > input:checked + label, .button-group.segmented > li > input:checked + label:hover { background: #00558b; color: #fff; } .button-group.segmented > li.is-active > a .iconic *, .button-group.segmented > li > input:checked + label .iconic * { fill: #fff; stroke: #fff; } .button-group.segmented > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented > li > input:checked + label .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.segmented.secondary { border-color: #f1f1f1; } .button-group.segmented.secondary > li > a, .button-group.segmented.secondary > li > label, .button-group.segmented.secondary > li > button { border-color: #f1f1f1; color: #f1f1f1; } .button-group.segmented.secondary > li > a:hover, .button-group.segmented.secondary > li > label:hover, .button-group.segmented.secondary > li > button:hover { background: rgba(241, 241, 241, 0.25); color: #f1f1f1; } .button-group.segmented.secondary > li > a .iconic *, .button-group.segmented.secondary > li > label .iconic *, .button-group.segmented.secondary > li > button .iconic * { fill: #f1f1f1; stroke: #f1f1f1; } .button-group.segmented.secondary > li > a .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > label .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > button .iconic *.iconic-property-accent { fill: #f1f1f1; stroke: #f1f1f1; } .button-group.segmented.secondary > li.is-active > a, .button-group.segmented.secondary > li.is-active > a:hover, .button-group.segmented.secondary > li > input:checked + label, .button-group.segmented.secondary > li > input:checked + label:hover { background: #f1f1f1; color: #000; } .button-group.segmented.secondary > li.is-active > a .iconic *, .button-group.segmented.secondary > li > input:checked + label .iconic * { fill: #000; stroke: #000; } .button-group.segmented.secondary > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > input:checked + label .iconic *.iconic-property-accent { fill: #000; stroke: #000; } .button-group.segmented.success { border-color: #43AC6A; } .button-group.segmented.success > li > a, .button-group.segmented.success > li > label, .button-group.segmented.success > li > button { border-color: #43AC6A; color: #43AC6A; } .button-group.segmented.success > li > a:hover, .button-group.segmented.success > li > label:hover, .button-group.segmented.success > li > button:hover { background: rgba(67, 172, 106, 0.25); color: #43AC6A; } .button-group.segmented.success > li > a .iconic *, .button-group.segmented.success > li > label .iconic *, .button-group.segmented.success > li > button .iconic * { fill: #43AC6A; stroke: #43AC6A; } .button-group.segmented.success > li > a .iconic *.iconic-property-accent, .button-group.segmented.success > li > label .iconic *.iconic-property-accent, .button-group.segmented.success > li > button .iconic *.iconic-property-accent { fill: #43AC6A; stroke: #43AC6A; } .button-group.segmented.success > li.is-active > a, .button-group.segmented.success > li.is-active > a:hover, .button-group.segmented.success > li > input:checked + label, .button-group.segmented.success > li > input:checked + label:hover { background: #43AC6A; color: #fff; } .button-group.segmented.success > li.is-active > a .iconic *, .button-group.segmented.success > li > input:checked + label .iconic * { fill: #fff; stroke: #fff; } .button-group.segmented.success > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.success > li > input:checked + label .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.segmented.warning { border-color: #F08A24; } .button-group.segmented.warning > li > a, .button-group.segmented.warning > li > label, .button-group.segmented.warning > li > button { border-color: #F08A24; color: #F08A24; } .button-group.segmented.warning > li > a:hover, .button-group.segmented.warning > li > label:hover, .button-group.segmented.warning > li > button:hover { background: rgba(240, 138, 36, 0.25); color: #F08A24; } .button-group.segmented.warning > li > a .iconic *, .button-group.segmented.warning > li > label .iconic *, .button-group.segmented.warning > li > button .iconic * { fill: #F08A24; stroke: #F08A24; } .button-group.segmented.warning > li > a .iconic *.iconic-property-accent, .button-group.segmented.warning > li > label .iconic *.iconic-property-accent, .button-group.segmented.warning > li > button .iconic *.iconic-property-accent { fill: #F08A24; stroke: #F08A24; } .button-group.segmented.warning > li.is-active > a, .button-group.segmented.warning > li.is-active > a:hover, .button-group.segmented.warning > li > input:checked + label, .button-group.segmented.warning > li > input:checked + label:hover { background: #F08A24; color: #fff; } .button-group.segmented.warning > li.is-active > a .iconic *, .button-group.segmented.warning > li > input:checked + label .iconic * { fill: #fff; stroke: #fff; } .button-group.segmented.warning > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.warning > li > input:checked + label .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.segmented.alert { border-color: #F04124; } .button-group.segmented.alert > li > a, .button-group.segmented.alert > li > label, .button-group.segmented.alert > li > button { border-color: #F04124; color: #F04124; } .button-group.segmented.alert > li > a:hover, .button-group.segmented.alert > li > label:hover, .button-group.segmented.alert > li > button:hover { background: rgba(240, 65, 36, 0.25); color: #F04124; } .button-group.segmented.alert > li > a .iconic *, .button-group.segmented.alert > li > label .iconic *, .button-group.segmented.alert > li > button .iconic * { fill: #F04124; stroke: #F04124; } .button-group.segmented.alert > li > a .iconic *.iconic-property-accent, .button-group.segmented.alert > li > label .iconic *.iconic-property-accent, .button-group.segmented.alert > li > button .iconic *.iconic-property-accent { fill: #F04124; stroke: #F04124; } .button-group.segmented.alert > li.is-active > a, .button-group.segmented.alert > li.is-active > a:hover, .button-group.segmented.alert > li > input:checked + label, .button-group.segmented.alert > li > input:checked + label:hover { background: #F04124; color: #fff; } .button-group.segmented.alert > li.is-active > a .iconic *, .button-group.segmented.alert > li > input:checked + label .iconic * { fill: #fff; stroke: #fff; } .button-group.segmented.alert > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.alert > li > input:checked + label .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .button-group.tiny { font-size: 0.63rem; } .button-group.small { font-size: 0.72rem; } .button-group.large { font-size: 1.17rem; } .button-group.expand { display: -webkit-flex; display: -ms-flexbox; display: flex; } .button-group.expand > li { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .button-group.expand > li > a, .button-group.expand > li > label, .button-group.expand > li > button { display: block; width: 100%; margin-left: 0; margin-right: 0; } .button-group li.disabled > a, .button-group li.disabled > label, .button-group li.disabled > button { opacity: 0.5; cursor: default; pointer-events: none; } /* Cards Structure: titles lists */ .card { border: 1px solid #ededed; margin-bottom: 0.5rem; background: #fff; color: #000; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); overflow: hidden; } .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: inherit; } .card ul { margin-bottom: 0; } .card img { width: 100%; } .card.primary { border: 0; margin-bottom: 0.5rem; background: #00558b; color: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); overflow: hidden; } .card.primary h1, .card.primary h2, .card.primary h3, .card.primary h4, .card.primary h5, .card.primary h6 { color: inherit; } .card.primary ul { margin-bottom: 0; } .card.primary img { width: 100%; } .card.primary .card-divider { background: #0065a5; padding: 1rem; } .card.success { border: 0; margin-bottom: 0.5rem; background: #43AC6A; color: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); overflow: hidden; } .card.success h1, .card.success h2, .card.success h3, .card.success h4, .card.success h5, .card.success h6 { color: inherit; } .card.success ul { margin-bottom: 0; } .card.success img { width: 100%; } .card.success .card-divider { background: #4ab873; padding: 1rem; } .card.warning { border: 0; margin-bottom: 0.5rem; background: #F08A24; color: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); overflow: hidden; } .card.warning h1, .card.warning h2, .card.warning h3, .card.warning h4, .card.warning h5, .card.warning h6 { color: inherit; } .card.warning ul { margin-bottom: 0; } .card.warning img { width: 100%; } .card.warning .card-divider { background: #f19233; padding: 1rem; } .card.alert { border: 0; margin-bottom: 0.5rem; background: #F04124; color: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); overflow: hidden; } .card.alert h1, .card.alert h2, .card.alert h3, .card.alert h4, .card.alert h5, .card.alert h6 { color: inherit; } .card.alert ul { margin-bottom: 0; } .card.alert img { width: 100%; } .card.alert .card-divider { background: #f14e33; padding: 1rem; } .card.dark { border: 0; margin-bottom: 0.5rem; background: #232323; color: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); overflow: hidden; } .card.dark h1, .card.dark h2, .card.dark h3, .card.dark h4, .card.dark h5, .card.dark h6 { color: inherit; } .card.dark ul { margin-bottom: 0; } .card.dark img { width: 100%; } .card.dark .card-divider { background: #323232; padding: 1rem; } .card-divider { background: #ededed; padding: 1rem; } .card-section { padding: 1rem; } /* Odds and ends. */ .close-button { position: absolute; color: #999; top: 1rem; right: 1rem; font-size: 2em; line-height: 0.5; cursor: pointer; } .close-button:hover { color: #333; } .thumbnail, ul.thumbnails > li img { padding: 0.5rem; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25); } ul.thumbnails > li { margin-bottom: 1rem; } ul.thumbnails > li a { display: block; } /* FORMS ----- Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components. Includes: - Text fields - Text areas - Select menus - Checkboxes and radio buttons - Range slider - Progress bars and meters */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea { -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; height: 2.4rem; padding: 0.5rem; margin: 0 0 1rem 0; border: 1px solid #ccc; border-radius: 0; background: #fff; color: #000; font-size: 1rem; -webkit-font-smoothing: antialiased; vertical-align: middle; } input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="color"]:hover, textarea:hover { border: 1px solid #bbb; background: #fff; color: #000; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus { outline: 0; border: 1px solid #999; background: #fff; color: #000; } label > input[type="text"], label > input[type="password"], label > input[type="date"], label > input[type="datetime"], label > input[type="datetime-local"], label > input[type="month"], label > input[type="week"], label > input[type="email"], label > input[type="number"], label > input[type="search"], label > input[type="tel"], label > input[type="time"], label > input[type="url"], label > input[type="color"], label > textarea { margin-top: 0.5rem; } input[type="search"] { box-sizing: border-box; } input.disabled, input[disabled], input[readonly], fieldset[disabled] input { cursor: false; } input.disabled, input.disabled:hover, input[disabled], input[disabled]:hover, input[readonly], input[readonly]:hover, fieldset[disabled] input, fieldset[disabled] input:hover { background-color: #f2f2f2; } label { display: block; font-size: 0.9rem; margin-bottom: 0.5rem; color: #333; } label > input, label > textarea { margin-top: 0.5rem; } input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; } label > input[type="checkbox"], label > input[type="radio"] { margin-right: 0.25rem; } input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; margin-left: 0.5rem; margin-right: 1rem; margin-bottom: 0; vertical-align: baseline; } .inline-label { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; margin-bottom: 1rem; } label > .inline-label { margin-top: 0.5rem; } .inline-label > input, .inline-label > select { -webkit-flex: 1; -ms-flex: 1; flex: 1; margin: 0; } .inline-label > .form-label { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; background: #eee; color: #333; border: 1px solid #ccc; padding: 0 0.5rem; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .inline-label > .form-label:first-child { border-right: 0; } .inline-label > .form-label:last-child { border-left: 0; } .inline-label > a, .inline-label > button, .inline-label > input[type="button"], .inline-label > input[type="submit"] { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 0; padding-bottom: 0; margin: 0; border-radius: 0; } textarea { height: auto; width: 100%; min-height: 50px; } select { -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; height: 2.4rem; padding: 0.5rem; margin: 0 0 1rem 0; font-size: 1rem; color: #000; border-radius: 0; border: 1px solid #ccc; background: #fafafa url('data:image/svg+xml;utf8,') right 10px center no-repeat; background-size: 8px 8px; padding-right: 1.625rem; } select:hover { background-color: #f0f0f0; } select:focus { outline: 0; } select::-ms-expand { display: none; } input[type="range"] { -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; height: auto; cursor: pointer; margin-top: 0.25rem; margin-bottom: 0.25rem; border: 0; line-height: 1; } input[type="range"]:focus { outline: 0; } input[type="range"]::-webkit-slider-runnable-track { height: 1rem; background: #ddd; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background: #00558b; width: 1.5rem; height: 1.5rem; margin-top: -0.25rem; } input[type="range"]::-moz-range-track { -moz-appearance: none; height: 1rem; background: #ccc; } input[type="range"]::-moz-range-thumb { -moz-appearance: none; background: #00558b; width: 1.5rem; height: 1.5rem; margin-top: -0.25rem; } input[type="range"]::-ms-track { height: 1rem; background: #ddd; color: transparent; border: 0; overflow: visible; border-top: 0.25rem solid #fff; border-bottom: 0.25rem solid #fff; } input[type="range"]::-ms-thumb { background: #00558b; width: 1.5rem; height: 1.5rem; border: 0; } input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper { background: #ddd; } output { line-height: 1.5rem; vertical-align: middle; margin-left: 0.5em; } input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; background: #00558b; } progress, meter { -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; height: 1.5rem; margin-bottom: 1rem; background: #ccc; border: 0; } progress::-webkit-progress-bar { background: #ccc; } progress::-webkit-progress-value { background: #00558b; } progress::-moz-progress-bar { background: #00558b; } progress.high::-webkit-progress-value { background: #43AC6A; } progress.high::-moz-progress-bar { background: #43AC6A; } progress.medium::-webkit-progress-value { background: #e7cf00; } progress.medium::-moz-progress-bar { background: #e7cf00; } progress.low::-webkit-progress-value { background: #F04124; } progress.low::-moz-progress-bar { background: #F04124; } meter { background: #ccc; } meter::-webkit-meter-bar { background: #ccc; } meter::-webkit-meter-optimum-value { background: #43AC6A; } meter::-webkit-meter-suboptimum-value { background: #e7cf00; } meter::-webkit-meter-even-less-good-value { background: #F04124; } meter::-moz-meter-bar { background: #00558b; } meter:-moz-meter-optimum::-moz-meter-bar { background: #43AC6A; } meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #e7cf00; } meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #F04124; } /* PANEL ----- The friendly panel is an all-purpose container for hiding content off-screen. Features: - Position at top, right, bottom, or left - Anchor to grid block or window - Define max width or height - Transform into grid block depending on screen size */ .panel { display: block; position: absolute; z-index: 100; overflow-y: auto; display: none; } .is-active.panel { display: block; } .panel { /* Basic styles */ padding: 0; background: #fff; } .panel-top { /* Direction */ top: 0; left: 0; width: 100%; /* Sizing */ height: 300px; /* Shadows */ } .panel-top.is-active { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); } .panel-right { /* Direction */ top: 0; right: 0; height: 100%; /* Sizing */ width: 100%; /* Shadows */ } @media only screen and (min-width: 18.75em) { .panel-right { width: 300px; } } .panel-right.is-active { box-shadow: -3px 0 10px rgba(0, 0, 0, 0.25); } .panel-bottom { /* Direction */ bottom: 0; left: 0; width: 100%; /* Sizing */ height: 300px; /* Shadows */ } .panel-bottom.is-active { box-shadow: 2px -3px 10px rgba(0, 0, 0, 0.25); } .panel-left { /* Direction */ top: 0; left: 0; height: 100%; /* Sizing */ width: 100%; /* Shadows */ } @media only screen and (min-width: 18.75em) { .panel-left { width: 300px; } } .panel-left.is-active { box-shadow: 3px 0 10px rgba(0, 0, 0, 0.25); } .panel-fixed { position: fixed; } /* THE GRID -------- Foundation's magical, flexbox-powered grid. Features: - Horizontal or vertical grids - Auto-sizing or percentage width grid blocks - Independently-scrollable blocks - Column alignment - Source ordering - Offsets */ /* Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior. If set to "shrink", the block will contract and only fill as much space as it needs for its content. If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid. @group grid @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number. @output The flex-basis, flex-grow, and flex-shrink properties. */ /* Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block. @group grid @param {string} $orientation - Direction of the grid, either horizontal or vertical. @output A flex-flow property to match the direction given. */ /* Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height. @group grid @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false. @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false. */ /* Set the alignment of blocks within a grid. left: Items align to the left. right: Items align to the right. center: Items align to the center. justify: Items are spaced equally apart so they occupy the space of the entire grid. spaced: Items are given equal space to their left and right. @group grid @param {string} $align - Alignment to use. @output An appropriate justify-content value. */ /* Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first. @group grid @param {number} $order - Position in source order. @output An order property. */ /* Collapse a content block by removing the padding. @group grid @param {bool} $collapse - Collapses the block if true. @output A padding value. @todo No way to reverse collapse using this mixin. Solution: - If true, add padding: 0; - If false, add padding: 1rem; - If null, add nothing, to cut down on CSS output - Make null the default value */ /* Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows. @group grid @param {bool} $container - Adds container styles if true. @output A maximum width and the good old margin: 0 auto for center alignment. */ /* Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block. @group grid @param {bool} $nest - Adds negative margins if true. @output Negative margin values. */ /* Offset a block by adding a left margin. @group grid @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns. @output A left margin based on the number of columns specified, and the global number of columns. */ /* Resets styles set by panels. Use this when a panel transforms into a block on larger screens. @group grid @output Resets to transform, position, and a few visual styles. */ /* Frames are containers that stretch to the full dimmensions of the browser window. */ /* Groups are collections of content items. They're the "rows" of Foundation for Apps. */ /* Blocks are containers for actual content. They're the "columns" of Foundation for Apps. */ .vertical.grid-frame, .vertical.grid-block, .vertical.small-grid-block, .vertical.medium-grid-block, .vertical.large-grid-block { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .small-vertical.grid-frame, .small-vertical.grid-block, .small-vertical.small-grid-block, .small-vertical.medium-grid-block, .small-vertical.large-grid-block { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .small-horizontal.grid-frame, .small-horizontal.grid-block, .small-horizontal.small-grid-block, .small-horizontal.medium-grid-block, .small-horizontal.large-grid-block { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } @media only screen and (min-width: 40em) { .medium-vertical.grid-frame, .medium-vertical.grid-block, .medium-vertical.small-grid-block, .medium-vertical.medium-grid-block, .medium-vertical.large-grid-block { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .medium-horizontal.grid-frame, .medium-horizontal.grid-block, .medium-horizontal.small-grid-block, .medium-horizontal.medium-grid-block, .medium-horizontal.large-grid-block { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } } @media only screen and (min-width: 75em) { .large-vertical.grid-frame, .large-vertical.grid-block, .large-vertical.small-grid-block, .large-vertical.medium-grid-block, .large-vertical.large-grid-block { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .large-horizontal.grid-frame, .large-horizontal.grid-block, .large-horizontal.small-grid-block, .large-horizontal.medium-grid-block, .large-horizontal.large-grid-block { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } } .align-right.grid-frame, .align-right.grid-block, .align-right.small-grid-block, .align-right.medium-grid-block, .align-right.large-grid-block { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .align-center.grid-frame, .align-center.grid-block, .align-center.small-grid-block, .align-center.medium-grid-block, .align-center.large-grid-block { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .align-justify.grid-frame, .align-justify.grid-block, .align-justify.small-grid-block, .align-justify.medium-grid-block, .align-justify.large-grid-block { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .align-spaced.grid-frame, .align-spaced.grid-block, .align-spaced.small-grid-block, .align-spaced.medium-grid-block, .align-spaced.large-grid-block { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .wrap.grid-frame, .wrap.grid-block, .wrap.small-grid-block, .wrap.medium-grid-block, .wrap.large-grid-block { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .shrink.grid-block, .shrink.grid-content, .shrink.small-grid-block, .shrink.small-grid-content, .shrink.medium-grid-block, .shrink.medium-grid-content, .shrink.large-grid-block, .shrink.large-grid-content { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .noscroll.grid-block, .noscroll.grid-content, .noscroll.small-grid-block, .noscroll.small-grid-content, .noscroll.medium-grid-block, .noscroll.medium-grid-content, .noscroll.large-grid-block, .noscroll.large-grid-content { overflow: hidden; } .grid-frame { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .grid-block { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-order: 0; -ms-flex-order: 0; order: 0; height: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .grid-content { display: block; padding: 0 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .grid-content.collapse { padding: 0; } .grid-content .grid-block { margin-left: -1rem; margin-right: -1rem; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: visible; } .grid-content .grid-block.nowrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .grid-content .grid-block .grid-content { overflow: visible; } .grid-container { max-width: 56.25rem; margin: 0 auto; } .grid-container.contain-left { max-width: 56.25rem; margin: 0 auto 0 0; } .grid-container.contain-right { max-width: 56.25rem; margin: 0 0 0 auto; } .small-grid-block { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-order: 0; -ms-flex-order: 0; order: 0; height: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .small-grid-block.panel { -webkit-transform: none; transform: none; position: relative; width: auto; height: auto; z-index: auto; box-shadow: none; background: transparent; top: auto; right: auto; bottom: auto; left: auto; } .small-grid-content { display: block; padding: 0 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .small-grid-content.panel { -webkit-transform: none; transform: none; position: relative; width: auto; height: auto; z-index: auto; box-shadow: none; background: transparent; top: auto; right: auto; bottom: auto; left: auto; } @media only screen and (min-width: 40em) { .medium-grid-block { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-order: 0; -ms-flex-order: 0; order: 0; height: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .medium-grid-block.panel { -webkit-transform: none; transform: none; position: relative; width: auto; height: auto; z-index: auto; box-shadow: none; background: transparent; top: auto; right: auto; bottom: auto; left: auto; } } @media only screen and (min-width: 40em) { .medium-grid-content { display: block; padding: 0 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .medium-grid-content.panel { -webkit-transform: none; transform: none; position: relative; width: auto; height: auto; z-index: auto; box-shadow: none; background: transparent; top: auto; right: auto; bottom: auto; left: auto; } } @media only screen and (min-width: 75em) { .large-grid-block { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-order: 0; -ms-flex-order: 0; order: 0; height: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .large-grid-block.panel { -webkit-transform: none; transform: none; position: relative; width: auto; height: auto; z-index: auto; box-shadow: none; background: transparent; top: auto; right: auto; bottom: auto; left: auto; } } @media only screen and (min-width: 75em) { .large-grid-content { display: block; padding: 0 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .large-grid-content.panel { -webkit-transform: none; transform: none; position: relative; width: auto; height: auto; z-index: auto; box-shadow: none; background: transparent; top: auto; right: auto; bottom: auto; left: auto; } } .order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-7 { -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-8 { -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-9 { -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-10 { -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-11 { -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-12 { -webkit-order: 12; -ms-flex-order: 12; order: 12; } .small-1 { -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%; } .small-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .small-offset-1 { margin-left: 8.33333%; } .small-up-1 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-1 > li, .small-up-1 > div, .small-up-1 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } .small-2 { -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%; } .small-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .small-offset-2 { margin-left: 16.66667%; } .small-up-2 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-2 > li, .small-up-2 > div, .small-up-2 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } .small-3 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .small-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .small-offset-3 { margin-left: 25%; } .small-up-3 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-3 > li, .small-up-3 > div, .small-up-3 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } .small-4 { -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .small-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .small-offset-4 { margin-left: 33.33333%; } .small-up-4 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-4 > li, .small-up-4 > div, .small-up-4 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } .small-5 { -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667%; } .small-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .small-offset-5 { margin-left: 41.66667%; } .small-up-5 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-5 > li, .small-up-5 > div, .small-up-5 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } .small-6 { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .small-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .small-offset-6 { margin-left: 50%; } .small-up-6 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-6 > li, .small-up-6 > div, .small-up-6 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } .small-7 { -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333%; } .small-order-7 { -webkit-order: 7; -ms-flex-order: 7; order: 7; } .small-offset-7 { margin-left: 58.33333%; } .small-up-7 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-7 > li, .small-up-7 > div, .small-up-7 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 14.28571%; -ms-flex: 0 0 14.28571%; flex: 0 0 14.28571%; } .small-8 { -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; } .small-order-8 { -webkit-order: 8; -ms-flex-order: 8; order: 8; } .small-offset-8 { margin-left: 66.66667%; } .small-up-8 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-8 > li, .small-up-8 > div, .small-up-8 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 12.5%; -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; } .small-9 { -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .small-order-9 { -webkit-order: 9; -ms-flex-order: 9; order: 9; } .small-offset-9 { margin-left: 75%; } .small-up-9 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-9 > li, .small-up-9 > div, .small-up-9 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 11.11111%; -ms-flex: 0 0 11.11111%; flex: 0 0 11.11111%; } .small-10 { -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; } .small-order-10 { -webkit-order: 10; -ms-flex-order: 10; order: 10; } .small-offset-10 { margin-left: 83.33333%; } .small-up-10 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-10 > li, .small-up-10 > div, .small-up-10 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; } .small-11 { -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667%; } .small-order-11 { -webkit-order: 11; -ms-flex-order: 11; order: 11; } .small-offset-11 { margin-left: 91.66667%; } .small-up-11 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-11 > li, .small-up-11 > div, .small-up-11 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 9.09091%; -ms-flex: 0 0 9.09091%; flex: 0 0 9.09091%; } .small-12 { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .small-order-12 { -webkit-order: 12; -ms-flex-order: 12; order: 12; } .small-offset-12 { margin-left: 100%; } .small-up-12 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .small-up-12 > li, .small-up-12 > div, .small-up-12 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } @media only screen and (min-width: 40em) { .medium-1 { -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%; } .medium-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .medium-offset-1 { margin-left: 8.33333%; } .medium-up-1 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-1 > li, .medium-up-1 > div, .medium-up-1 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media only screen and (min-width: 40em) { .medium-2 { -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%; } .medium-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .medium-offset-2 { margin-left: 16.66667%; } .medium-up-2 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-2 > li, .medium-up-2 > div, .medium-up-2 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media only screen and (min-width: 40em) { .medium-3 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .medium-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .medium-offset-3 { margin-left: 25%; } .medium-up-3 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-3 > li, .medium-up-3 > div, .medium-up-3 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } @media only screen and (min-width: 40em) { .medium-4 { -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .medium-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .medium-offset-4 { margin-left: 33.33333%; } .medium-up-4 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-4 > li, .medium-up-4 > div, .medium-up-4 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } } @media only screen and (min-width: 40em) { .medium-5 { -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667%; } .medium-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .medium-offset-5 { margin-left: 41.66667%; } .medium-up-5 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-5 > li, .medium-up-5 > div, .medium-up-5 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } } @media only screen and (min-width: 40em) { .medium-6 { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .medium-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .medium-offset-6 { margin-left: 50%; } .medium-up-6 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-6 > li, .medium-up-6 > div, .medium-up-6 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } @media only screen and (min-width: 40em) { .medium-7 { -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333%; } .medium-order-7 { -webkit-order: 7; -ms-flex-order: 7; order: 7; } .medium-offset-7 { margin-left: 58.33333%; } .medium-up-7 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-7 > li, .medium-up-7 > div, .medium-up-7 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 14.28571%; -ms-flex: 0 0 14.28571%; flex: 0 0 14.28571%; } } @media only screen and (min-width: 40em) { .medium-8 { -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; } .medium-order-8 { -webkit-order: 8; -ms-flex-order: 8; order: 8; } .medium-offset-8 { margin-left: 66.66667%; } .medium-up-8 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-8 > li, .medium-up-8 > div, .medium-up-8 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 12.5%; -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; } } @media only screen and (min-width: 40em) { .medium-9 { -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .medium-order-9 { -webkit-order: 9; -ms-flex-order: 9; order: 9; } .medium-offset-9 { margin-left: 75%; } .medium-up-9 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-9 > li, .medium-up-9 > div, .medium-up-9 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 11.11111%; -ms-flex: 0 0 11.11111%; flex: 0 0 11.11111%; } } @media only screen and (min-width: 40em) { .medium-10 { -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; } .medium-order-10 { -webkit-order: 10; -ms-flex-order: 10; order: 10; } .medium-offset-10 { margin-left: 83.33333%; } .medium-up-10 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-10 > li, .medium-up-10 > div, .medium-up-10 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; } } @media only screen and (min-width: 40em) { .medium-11 { -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667%; } .medium-order-11 { -webkit-order: 11; -ms-flex-order: 11; order: 11; } .medium-offset-11 { margin-left: 91.66667%; } .medium-up-11 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-11 > li, .medium-up-11 > div, .medium-up-11 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 9.09091%; -ms-flex: 0 0 9.09091%; flex: 0 0 9.09091%; } } @media only screen and (min-width: 40em) { .medium-12 { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .medium-order-12 { -webkit-order: 12; -ms-flex-order: 12; order: 12; } .medium-offset-12 { margin-left: 100%; } .medium-up-12 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .medium-up-12 > li, .medium-up-12 > div, .medium-up-12 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } @media only screen and (min-width: 75em) { .large-1 { -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%; } .large-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .large-offset-1 { margin-left: 8.33333%; } .large-up-1 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-1 > li, .large-up-1 > div, .large-up-1 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media only screen and (min-width: 75em) { .large-2 { -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%; } .large-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .large-offset-2 { margin-left: 16.66667%; } .large-up-2 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-2 > li, .large-up-2 > div, .large-up-2 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media only screen and (min-width: 75em) { .large-3 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .large-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .large-offset-3 { margin-left: 25%; } .large-up-3 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-3 > li, .large-up-3 > div, .large-up-3 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } @media only screen and (min-width: 75em) { .large-4 { -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .large-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .large-offset-4 { margin-left: 33.33333%; } .large-up-4 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-4 > li, .large-up-4 > div, .large-up-4 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } } @media only screen and (min-width: 75em) { .large-5 { -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667%; } .large-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .large-offset-5 { margin-left: 41.66667%; } .large-up-5 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-5 > li, .large-up-5 > div, .large-up-5 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } } @media only screen and (min-width: 75em) { .large-6 { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .large-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .large-offset-6 { margin-left: 50%; } .large-up-6 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-6 > li, .large-up-6 > div, .large-up-6 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } @media only screen and (min-width: 75em) { .large-7 { -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333%; } .large-order-7 { -webkit-order: 7; -ms-flex-order: 7; order: 7; } .large-offset-7 { margin-left: 58.33333%; } .large-up-7 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-7 > li, .large-up-7 > div, .large-up-7 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 14.28571%; -ms-flex: 0 0 14.28571%; flex: 0 0 14.28571%; } } @media only screen and (min-width: 75em) { .large-8 { -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; } .large-order-8 { -webkit-order: 8; -ms-flex-order: 8; order: 8; } .large-offset-8 { margin-left: 66.66667%; } .large-up-8 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-8 > li, .large-up-8 > div, .large-up-8 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 12.5%; -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; } } @media only screen and (min-width: 75em) { .large-9 { -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .large-order-9 { -webkit-order: 9; -ms-flex-order: 9; order: 9; } .large-offset-9 { margin-left: 75%; } .large-up-9 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-9 > li, .large-up-9 > div, .large-up-9 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 11.11111%; -ms-flex: 0 0 11.11111%; flex: 0 0 11.11111%; } } @media only screen and (min-width: 75em) { .large-10 { -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; } .large-order-10 { -webkit-order: 10; -ms-flex-order: 10; order: 10; } .large-offset-10 { margin-left: 83.33333%; } .large-up-10 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-10 > li, .large-up-10 > div, .large-up-10 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; } } @media only screen and (min-width: 75em) { .large-11 { -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667%; } .large-order-11 { -webkit-order: 11; -ms-flex-order: 11; order: 11; } .large-offset-11 { margin-left: 91.66667%; } .large-up-11 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-11 > li, .large-up-11 > div, .large-up-11 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 9.09091%; -ms-flex: 0 0 9.09091%; flex: 0 0 9.09091%; } } @media only screen and (min-width: 75em) { .large-12 { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .large-order-12 { -webkit-order: 12; -ms-flex-order: 12; order: 12; } .large-offset-12 { margin-left: 100%; } .large-up-12 { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: visible; list-style-type: none; } .large-up-12 > li, .large-up-12 > div, .large-up-12 > section { padding: 0 1rem 1rem; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } .grid-content .modal .grid-block { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } /* TITLE BAR --------- A navigational component which can display the current screen the user is on, along with additional controls or menu items. The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order: - Center - Left - Right */ .title-bar { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; overflow: visible; } .title-bar .title { font-weight: bold; } .title-bar .left, .title-bar .center, .title-bar .right { display: block; white-space: nowrap; overflow: visible; } .title-bar .left:first-child:last-child, .title-bar .center:first-child:last-child, .title-bar .right:first-child:last-child { -webkit-flex: 1; -ms-flex: 1; flex: 1; margin: 0; } .title-bar .left { -webkit-order: 1; -ms-flex-order: 1; order: 1; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } .title-bar .center { -webkit-order: 2; -ms-flex-order: 2; order: 2; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; text-align: center; } .title-bar .right { -webkit-order: 3; -ms-flex-order: 3; order: 3; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; text-align: right; } .title-bar .left:first-child { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .title-bar .left:first-child + .right:last-child { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .title-bar .center:first-child:not(:last-child) { margin-left: 25%; } .title-bar .center + .left { margin-right: -25%; } .title-bar { background: #eee; color: #000; padding: 1rem; border-bottom: 1px solid #ccc; } .title-bar.primary { background: #00558b; color: #fff; padding: 1rem; border-bottom: 1px solid #ccc; } .title-bar.primary a, .title-bar.primary a:hover { color: #fff; } .title-bar.primary .iconic * { fill: #fff; stroke: #fff; } .title-bar.primary .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .title-bar.dark { background: #232323; color: #fff; padding: 1rem; border-bottom: 1px solid #ccc; } .title-bar.dark a, .title-bar.dark a:hover { color: #fff; } .title-bar.dark .iconic * { fill: #fff; stroke: #fff; } .title-bar.dark .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .title-bar-bottom { border-bottom: 0; border-top: 1px solid #ccc; } /* Label */ .label { line-height: 1; white-space: nowrap; display: inline-block; cursor: default; } .label { font-size: 0.8rem; padding: 0.33333rem 0.5rem; background: #00558b; border-radius: 0; color: #fff; } .label.primary { background: #00558b; border-radius: 0; color: #fff; } .label.success { background: #43AC6A; border-radius: 0; color: #fff; } .label.warning { background: #F08A24; border-radius: 0; color: #fff; } .label.alert { background: #F04124; border-radius: 0; color: #fff; } .label.dark { background: #232323; border-radius: 0; color: #fff; } /* Badge */ .badge { -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; border-radius: 1000px; } .badge { font-size: 0.8em; width: 1.5rem; height: 1.5rem; background: #00558b; color: #fff; } .badge.secondary { background: #f1f1f1; color: #000; } .badge.primary { background: #00558b; color: #fff; } .badge.success { background: #43AC6A; color: #fff; } .badge.warning { background: #F08A24; color: #fff; } .badge.alert { background: #F04124; color: #fff; } .badge.dark { background: #232323; color: #fff; } .inline-list { list-style-type: none; text-align: left; } .inline-list li, .inline-list dt, .inline-list dd { display: inline-block; margin-left: -2px; margin-right: -2px; } .inline-list li { margin-right: 1rem; margin-left: 0; } /* MENU BAR -------- A generic, flexible menu component. Features: - Orient horizontally and vertically - Change orientation at certain breakpoints - Items with icons above, below, or to the left or right - Text labels for vertical menus and badges for horizontal menus */ .menu-bar { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 0; list-style-type: none; } .menu-bar > li { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .menu-bar > li > a { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 1rem; font-size: 1rem; line-height: 1; } /* Set the alignment of menu items (li) within a menu-bar left: Items align to the left. right: Items align to the right. center: Items align to the center. justify: Items are spaced equally apart so they occupy the space of the entire grid. spaced: Items are given equal space to their left and right. @group menu-bar @param {string} $align - Alignment to use. @output An appropriate justify-content value. */ /* CSS output */ .menu-bar { background: #fff; } .menu-bar > li > a { color: #000; } .menu-bar > li > a:hover { background: #ededed; color: #000; } .menu-bar .is-active > a { background: #ededed; color: #000; } .menu-bar .iconic * { fill: #000; stroke: #000; } .menu-bar .iconic *.iconic-property-accent { fill: #000; stroke: #000; } .menu-bar, .menu-bar.horizontal { /* Orientation */ overflow-x: hidden; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; /* Stretch */ } .menu-bar > li > a, .menu-bar.horizontal > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar.vertical { /* Orientation */ -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; /* Stretch */ } .menu-bar.vertical > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .menu-bar.condense > li { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .menu-bar.align-right { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .menu-bar.align-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .menu-bar.align-justify { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .menu-bar.align-spaced { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .menu-bar.small-condense li { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .menu-bar.small-expand li { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .menu-bar.small-align-left { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .menu-bar.small-align-right { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .menu-bar.small-align-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .menu-bar.small-align-justify { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .menu-bar.small-align-spaced { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } @media only screen and (min-width: 40em) { .menu-bar.medium-condense li { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .menu-bar.medium-expand li { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .menu-bar.medium-align-left { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .menu-bar.medium-align-right { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .menu-bar.medium-align-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .menu-bar.medium-align-justify { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .menu-bar.medium-align-spaced { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } } @media only screen and (min-width: 75em) { .menu-bar.large-condense li { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .menu-bar.large-expand li { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .menu-bar.large-align-left { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .menu-bar.large-align-right { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .menu-bar.large-align-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .menu-bar.large-align-justify { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .menu-bar.large-align-spaced { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } } .menu-bar.small-horizontal { /* Orientation */ overflow-x: hidden; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; /* Stretch */ } .menu-bar.small-horizontal > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar.small-vertical { /* Orientation */ -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; /* Stretch */ } .menu-bar.small-vertical > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } @media only screen and (min-width: 40em) { .menu-bar.medium-horizontal { /* Orientation */ overflow-x: hidden; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; /* Stretch */ } .menu-bar.medium-horizontal > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar.medium-vertical { /* Orientation */ -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; /* Stretch */ } .menu-bar.medium-vertical > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } } @media only screen and (min-width: 75em) { .menu-bar.large-horizontal { /* Orientation */ overflow-x: hidden; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; /* Stretch */ } .menu-bar.large-horizontal > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar.large-vertical { /* Orientation */ -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; /* Stretch */ } .menu-bar.large-vertical > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } } .menu-bar > li > img, .menu-bar > li > .iconic, .menu-bar.icon-top > li > img, .menu-bar.icon-top > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar > li > a, .menu-bar.icon-top > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar > li > a > img, .menu-bar > li > a > .iconic, .menu-bar.icon-top > li > a > img, .menu-bar.icon-top > li > a > .iconic { margin: 0 0 1rem 0; } .menu-bar.icon-right > li > img, .menu-bar.icon-right > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.icon-right > li > a { -webkit-flex-flow: row-reverse nowrap; -ms-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; } .menu-bar.icon-right > li > a > img, .menu-bar.icon-right > li > a > .iconic { margin: 0 0 0 1rem; } .menu-bar.icon-bottom > li > img, .menu-bar.icon-bottom > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.icon-bottom > li > a { -webkit-flex-flow: column-reverse nowrap; -ms-flex-flow: column-reverse nowrap; flex-flow: column-reverse nowrap; } .menu-bar.icon-bottom > li > a > img, .menu-bar.icon-bottom > li > a > .iconic { margin: 1rem 0 0 0; } .menu-bar.icon-left > li > img, .menu-bar.icon-left > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.icon-left > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .menu-bar.icon-left > li > a > img, .menu-bar.icon-left > li > a > .iconic { margin: 0 1rem 0 0; } .menu-bar.small-icon-top > li > img, .menu-bar.small-icon-top > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.small-icon-top > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar.small-icon-top > li > a > img, .menu-bar.small-icon-top > li > a > .iconic { margin: 0 0 1rem 0; } .menu-bar.small-icon-right > li > img, .menu-bar.small-icon-right > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.small-icon-right > li > a { -webkit-flex-flow: row-reverse nowrap; -ms-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; } .menu-bar.small-icon-right > li > a > img, .menu-bar.small-icon-right > li > a > .iconic { margin: 0 0 0 1rem; } .menu-bar.small-icon-bottom > li > img, .menu-bar.small-icon-bottom > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.small-icon-bottom > li > a { -webkit-flex-flow: column-reverse nowrap; -ms-flex-flow: column-reverse nowrap; flex-flow: column-reverse nowrap; } .menu-bar.small-icon-bottom > li > a > img, .menu-bar.small-icon-bottom > li > a > .iconic { margin: 1rem 0 0 0; } .menu-bar.small-icon-left > li > img, .menu-bar.small-icon-left > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.small-icon-left > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .menu-bar.small-icon-left > li > a > img, .menu-bar.small-icon-left > li > a > .iconic { margin: 0 1rem 0 0; } @media only screen and (min-width: 40em) { .menu-bar.medium-icon-top > li > img, .menu-bar.medium-icon-top > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.medium-icon-top > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar.medium-icon-top > li > a > img, .menu-bar.medium-icon-top > li > a > .iconic { margin: 0 0 1rem 0; } } @media only screen and (min-width: 40em) { .menu-bar.medium-icon-right > li > img, .menu-bar.medium-icon-right > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.medium-icon-right > li > a { -webkit-flex-flow: row-reverse nowrap; -ms-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; } .menu-bar.medium-icon-right > li > a > img, .menu-bar.medium-icon-right > li > a > .iconic { margin: 0 0 0 1rem; } } @media only screen and (min-width: 40em) { .menu-bar.medium-icon-bottom > li > img, .menu-bar.medium-icon-bottom > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.medium-icon-bottom > li > a { -webkit-flex-flow: column-reverse nowrap; -ms-flex-flow: column-reverse nowrap; flex-flow: column-reverse nowrap; } .menu-bar.medium-icon-bottom > li > a > img, .menu-bar.medium-icon-bottom > li > a > .iconic { margin: 1rem 0 0 0; } } @media only screen and (min-width: 40em) { .menu-bar.medium-icon-left > li > img, .menu-bar.medium-icon-left > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.medium-icon-left > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .menu-bar.medium-icon-left > li > a > img, .menu-bar.medium-icon-left > li > a > .iconic { margin: 0 1rem 0 0; } } @media only screen and (min-width: 75em) { .menu-bar.large-icon-top > li > img, .menu-bar.large-icon-top > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.large-icon-top > li > a { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu-bar.large-icon-top > li > a > img, .menu-bar.large-icon-top > li > a > .iconic { margin: 0 0 1rem 0; } } @media only screen and (min-width: 75em) { .menu-bar.large-icon-right > li > img, .menu-bar.large-icon-right > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.large-icon-right > li > a { -webkit-flex-flow: row-reverse nowrap; -ms-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap; } .menu-bar.large-icon-right > li > a > img, .menu-bar.large-icon-right > li > a > .iconic { margin: 0 0 0 1rem; } } @media only screen and (min-width: 75em) { .menu-bar.large-icon-bottom > li > img, .menu-bar.large-icon-bottom > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.large-icon-bottom > li > a { -webkit-flex-flow: column-reverse nowrap; -ms-flex-flow: column-reverse nowrap; flex-flow: column-reverse nowrap; } .menu-bar.large-icon-bottom > li > a > img, .menu-bar.large-icon-bottom > li > a > .iconic { margin: 1rem 0 0 0; } } @media only screen and (min-width: 75em) { .menu-bar.large-icon-left > li > img, .menu-bar.large-icon-left > li > .iconic { margin: 0; width: 25px; height: 25px; } .menu-bar.large-icon-left > li > a { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .menu-bar.large-icon-left > li > a > img, .menu-bar.large-icon-left > li > a > .iconic { margin: 0 1rem 0 0; } } .menu-bar.label-side > li { position: relative; } .menu-bar.label-side > li > a { padding-right: 3.2rem; } .menu-bar.label-side .menu-bar-label { display: block; font-size: 0.9rem; width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; border-radius: 1000px; background: red; color: #fff; position: absolute; pointer-events: none; right: 1rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .menu-bar.label-corner > li { position: relative; } .menu-bar.label-corner > li > a { padding-right: 3.2rem; } .menu-bar.label-corner .menu-bar-label { display: block; font-size: 0.9rem; width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; border-radius: 1000px; background: red; color: #fff; position: absolute; pointer-events: none; right: 1rem; top: 1rem; } .menu-bar.primary { background: #00558b; } .menu-bar.primary > li > a { color: #fff; } .menu-bar.primary > li > a:hover { background: #0065a5; color: #fff; } .menu-bar.primary .is-active > a { background: #0065a5; color: #fff; } .menu-bar.primary .iconic * { fill: #fff; stroke: #fff; } .menu-bar.primary .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .menu-bar.dark { background: #232323; } .menu-bar.dark > li > a { color: #fff; } .menu-bar.dark > li > a:hover { background: #323232; color: #fff; } .menu-bar.dark .is-active > a { background: #323232; color: #fff; } .menu-bar.dark .iconic * { fill: #fff; stroke: #fff; } .menu-bar.dark .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .menu-bar > li.title { padding: 1rem; cursor: default; font-weight: bold; } .menu-group { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (min-width: 40em) { .menu-group { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .menu-group > .menu-group-left, .menu-group > .menu-group-right { -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } @media only screen and (min-width: 40em) { .menu-group > .menu-group-left, .menu-group > .menu-group-right { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } } .menu-group .menu-bar { margin: 0; } .menu-group .menu-bar > li { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .menu-group.primary { background-color: #00558b; } .menu-group.primary .menu-bar { background: #00558b; } .menu-group.primary .menu-bar > li > a { color: #fff; } .menu-group.primary .menu-bar > li > a:hover { background: #0065a5; color: #fff; } .menu-group.primary .menu-bar .is-active > a { background: #0065a5; color: #fff; } .menu-group.primary .menu-bar .iconic * { fill: #fff; stroke: #fff; } .menu-group.primary .menu-bar .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } .menu-group.dark { background-color: #232323; } .menu-group.dark .menu-bar { background: #232323; } .menu-group.dark .menu-bar > li > a { color: #fff; } .menu-group.dark .menu-bar > li > a:hover { background: #323232; color: #fff; } .menu-group.dark .menu-bar .is-active > a { background: #323232; color: #fff; } .menu-group.dark .menu-bar .iconic * { fill: #fff; stroke: #fff; } .menu-group.dark .menu-bar .iconic *.iconic-property-accent { fill: #fff; stroke: #fff; } /* MODAL ----- The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it. Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same. */ .modal { position: relative; z-index: 1001; background: #fff; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 100vh; max-height: 100%; overflow: hidden; padding: 1rem; } @media only screen and (min-width: 40em) { .modal { height: auto; max-width: 600px; } } .modal .grid-content, .modal .grid-block { margin: 0; } .modal .close-button, .modal [fa-close] { z-index: 1001; } .modal { max-width: 600px; border-radius: 0px; } .tiny > .modal { max-width: 300px; } .small > .modal { max-width: 500px; } .large > .modal { max-width: 800px; } .dialog > .modal { height: auto; } .collapse > .modal { padding: 0; } .modal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: none; background-color: rgba(51, 51, 51, 0.7); -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .modal-overlay.is-active { display: -webkit-flex; display: -ms-flexbox; display: flex; } @-webkit-keyframes shake { 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { -webkit-transform: translateX(7%); transform: translateX(7%); } 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { -webkit-transform: translateX(-7%); transform: translateX(-7%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes shake { 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { -webkit-transform: translateX(7%); transform: translateX(7%); } 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { -webkit-transform: translateX(-7%); transform: translateX(-7%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes spin-cw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-cw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin-ccw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes spin-ccw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes wiggle { 40%, 50%, 60% { -webkit-transform: rotate(7deg); transform: rotate(7deg); } 35%, 45%, 55%, 65% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); } 0%, 30%, 70%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes wiggle { 40%, 50%, 60% { -webkit-transform: rotate(7deg); transform: rotate(7deg); } 35%, 45%, 55%, 65% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); } 0%, 30%, 70%, 100% { -webkit-transform: rotate(0); transform: rotate(0); } } /* Transitions */ .slideInDown.ng-enter, .slideInDown.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .slideInDown.ng-enter.ng-enter-active, .slideInDown.ng-hide-remove.ng-hide-remove-active { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideInLeft.ng-enter, .slideInLeft.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } .slideInLeft.ng-enter.ng-enter-active, .slideInLeft.ng-hide-remove.ng-hide-remove-active { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideInUp.ng-enter, .slideInUp.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } .slideInUp.ng-enter.ng-enter-active, .slideInUp.ng-hide-remove.ng-hide-remove-active { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideInRight.ng-enter, .slideInRight.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .slideInRight.ng-enter.ng-enter-active, .slideInRight.ng-hide-remove.ng-hide-remove-active { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideOutBottom.ng-leave, .slideOutBottom.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideOutBottom.ng-leave.ng-leave-active, .slideOutBottom.ng-hide-add.ng-hide-add-active { -webkit-transform: translateY(100%); transform: translateY(100%); } .slideOutRight.ng-leave, .slideOutRight.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideOutRight.ng-leave.ng-leave-active, .slideOutRight.ng-hide-add.ng-hide-add-active { -webkit-transform: translateX(100%); transform: translateX(100%); } .slideOutUp.ng-leave, .slideOutUp.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideOutUp.ng-leave.ng-leave-active, .slideOutUp.ng-hide-add.ng-hide-add-active { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .slideOutLeft.ng-leave, .slideOutLeft.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .slideOutLeft.ng-leave.ng-leave-active, .slideOutLeft.ng-hide-add.ng-hide-add-active { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .fadeIn.ng-enter, .fadeIn.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: opacity; opacity: 0; } .fadeIn.ng-enter.ng-enter-active, .fadeIn.ng-hide-remove.ng-hide-remove-active { opacity: 1; } .fadeOut.ng-leave, .fadeOut.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: opacity; opacity: 1; } .fadeOut.ng-leave.ng-leave-active, .fadeOut.ng-hide-add.ng-hide-add-active { opacity: 0; } .hingeInFromTop.ng-enter, .hingeInFromTop.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } .hingeInFromTop.ng-enter.ng-enter-active, .hingeInFromTop.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .hingeInFromRight.ng-enter, .hingeInFromRight.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); -webkit-transform-origin: right; transform-origin: right; opacity: 0; } .hingeInFromRight.ng-enter.ng-enter-active, .hingeInFromRight.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .hingeInFromBottom.ng-enter, .hingeInFromBottom.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: perspective(2000px) rotateX(90deg); transform: perspective(2000px) rotateX(90deg); -webkit-transform-origin: bottom; transform-origin: bottom; opacity: 0; } .hingeInFromBottom.ng-enter.ng-enter-active, .hingeInFromBottom.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .hingeInFromLeft.ng-enter, .hingeInFromLeft.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } .hingeInFromLeft.ng-enter.ng-enter-active, .hingeInFromLeft.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .hingeInFromMiddleX.ng-enter, .hingeInFromMiddleX.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); -webkit-transform-origin: center; transform-origin: center; opacity: 0; } .hingeInFromMiddleX.ng-enter.ng-enter-active, .hingeInFromMiddleX.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .hingeInFromMiddleY.ng-enter, .hingeInFromMiddleY.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); -webkit-transform-origin: center; transform-origin: center; opacity: 0; } .hingeInFromMiddleY.ng-enter.ng-enter-active, .hingeInFromMiddleY.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .hingeOutFromTop.ng-leave, .hingeOutFromTop.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } .hingeOutFromTop.ng-leave.ng-leave-active, .hingeOutFromTop.ng-hide-add.ng-hide-add-active { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } .hingeOutFromRight.ng-leave, .hingeOutFromRight.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: right; transform-origin: right; opacity: 1; } .hingeOutFromRight.ng-leave.ng-leave-active, .hingeOutFromRight.ng-hide-add.ng-hide-add-active { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } .hingeOutFromBottom.ng-leave, .hingeOutFromBottom.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: bottom; transform-origin: bottom; opacity: 1; } .hingeOutFromBottom.ng-leave.ng-leave-active, .hingeOutFromBottom.ng-hide-add.ng-hide-add-active { -webkit-transform: perspective(2000px) rotateX(90deg); transform: perspective(2000px) rotateX(90deg); opacity: 0; } .hingeOutFromLeft.ng-leave, .hingeOutFromLeft.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } .hingeOutFromLeft.ng-leave.ng-leave-active, .hingeOutFromLeft.ng-hide-add.ng-hide-add-active { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } .hingeOutFromMiddleX.ng-leave, .hingeOutFromMiddleX.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center; transform-origin: center; opacity: 1; } .hingeOutFromMiddleX.ng-leave.ng-leave-active, .hingeOutFromMiddleX.ng-hide-add.ng-hide-add-active { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } .hingeOutFromMiddleY.ng-leave, .hingeOutFromMiddleY.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center; transform-origin: center; opacity: 1; } .hingeOutFromMiddleY.ng-leave.ng-leave-active, .hingeOutFromMiddleY.ng-hide-add.ng-hide-add-active { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } .zoomIn.ng-enter, .zoomIn.ng-hide-remove { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, property; transition-property: transform, property; -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } .zoomIn.ng-enter.ng-enter-active, .zoomIn.ng-hide-remove.ng-hide-remove-active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .zoomOut.ng-leave, .zoomOut.ng-hide-add { transition-duration: 500ms; transition-timing-function: ease; transition-delay: 0; transition-property: -webkit-transform, property; transition-property: transform, property; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } .zoomOut.ng-leave.ng-leave-active, .zoomOut.ng-hide-add.ng-hide-add-active { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } .spinIn.ng-enter, .spinIn.ng-hide-remove { transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(-270deg); transform: rotate(-270deg); opacity: 0; } .spinIn.ng-enter.ng-enter-active, .spinIn.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } .spinOut.ng-leave, .spinOut.ng-hide-add { transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } .spinOut.ng-leave.ng-leave-active, .spinOut.ng-hide-add.ng-hide-add-active { -webkit-transform: rotate(270deg); transform: rotate(270deg); opacity: 0; } .spinInCCW.ng-enter, .spinInCCW.ng-hide-remove { transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(270deg); transform: rotate(270deg); opacity: 0; } .spinInCCW.ng-enter.ng-enter-active, .spinInCCW.ng-hide-remove.ng-hide-remove-active { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } .spinOutCCW.ng-leave, .spinOutCCW.ng-hide-add { transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } .spinOutCCW.ng-leave.ng-leave-active, .spinOutCCW.ng-hide-add.ng-hide-add-active { -webkit-transform: rotate(-270deg); transform: rotate(-270deg); opacity: 0; } /* Transition modifiers */ .slow { transition-duration: 750ms !important; } .fast { transition-duration: 250ms !important; } .linear { transition-timing-function: linear !important; } .ease { transition-timing-function: ease !important; } .easeIn { transition-timing-function: ease-in !important; } .easeOut { transition-timing-function: ease-out !important; } .easeInOut { transition-timing-function: ease-in-out !important; } .bounceIn { transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } .bounceOut { transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } .bounceInOut { transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } .delay { transition-delay: 300ms !important; } .long-delay { transition-delay: 700ms !important; } /* Animations */ .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-animation-delay: 0; animation-delay: 0; } .spin-cw { -webkit-animation-name: spin-cw; animation-name: spin-cw; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-animation-delay: 0; animation-delay: 0; } .spin-ccw { -webkit-animation-name: spin-ccw; animation-name: spin-ccw; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-animation-delay: 0; animation-delay: 0; } .wiggle { -webkit-animation-name: wiggle; animation-name: wiggle; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-animation-delay: 0; animation-delay: 0; } /* Animation modifiers */ .shake.infinite, .spin-cw.infinite, .spin-ccw.infinite, .wiggle.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .shake.linear, .spin-cw.linear, .spin-ccw.linear, .wiggle.linear { -webkit-animation-timing-function: linear !important; animation-timing-function: linear !important; } .shake.ease, .spin-cw.ease, .spin-ccw.ease, .wiggle.ease { -webkit-animation-timing-function: ease !important; animation-timing-function: ease !important; } .shake.easeIn, .spin-cw.easeIn, .spin-ccw.easeIn, .wiggle.easeIn { -webkit-animation-timing-function: ease-in !important; animation-timing-function: ease-in !important; } .shake.easeOut, .spin-cw.easeOut, .spin-ccw.easeOut, .wiggle.easeOut { -webkit-animation-timing-function: ease-out !important; animation-timing-function: ease-out !important; } .shake.easeInOut, .spin-cw.easeInOut, .spin-ccw.easeInOut, .wiggle.easeInOut { -webkit-animation-timing-function: ease-in-out !important; animation-timing-function: ease-in-out !important; } .shake.bounceIn, .spin-cw.bounceIn, .spin-ccw.bounceIn, .wiggle.bounceIn { -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } .shake.bounceOut, .spin-cw.bounceOut, .spin-ccw.bounceOut, .wiggle.bounceOut { -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } .shake.bounceInOut, .spin-cw.bounceInOut, .spin-ccw.bounceInOut, .wiggle.bounceInOut { -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } .shake.slow, .spin-cw.slow, .spin-ccw.slow, .wiggle.slow { -webkit-animation-duration: 750ms !important; animation-duration: 750ms !important; } .shake.fast, .spin-cw.fast, .spin-ccw.fast, .wiggle.fast { -webkit-animation-duration: 250ms !important; animation-duration: 250ms !important; } .shake.delay, .spin-cw.delay, .spin-ccw.delay, .wiggle.delay { -webkit-animation-delay: 300ms !important; animation-delay: 300ms !important; } .shake.long-delay, .spin-cw.long-delay, .spin-ccw.long-delay, .wiggle.long-delay { -webkit-animation-delay: 700ms !important; animation-delay: 700ms !important; } .stagger { transition-delay: 150ms; transition-duration: 0; } .stort-stagger { transition-delay: 150ms; transition-duration: 0; } .long-stagger { transition-delay: 150ms; transition-duration: 0; } .position-absolute { overflow: hidden; position: relative; } .ui-animation.ng-enter-active, .ui-animation.ng-leave-active { position: absolute !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; top: 0; right: 0; bottom: 0; left: 0; } /* NOTIFICATION ------------ An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well. Optionally, the notifications directive can also tap into the browser's native notification support, if it exists. */ .notification, .static-notification { z-index: 1000; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; margin-top: .5rem; margin-bottom: .5rem; display: none; } .notification h1, .static-notification h1 { font-size: 1.25em; margin: 0; } .notification p, .static-notification p { margin: 0; } .is-active.notification, .is-active.static-notification { display: -webkit-flex; display: -ms-flexbox; display: flex; } .notification .close-button, .static-notification .close-button { color: white; } .notification-container { z-index: 3000; position: fixed; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } /* CSS Output */ .notification { background: #00558b; padding: 1rem; border-radius: 4px; } .notification, .notification h1, .notification h2, .notification h3, .notification h4, .notification h5, .notification h6 { color: white; } .notification.success { background: #43AC6A; padding: 1rem; border-radius: 4px; } .notification.success, .notification.success h1, .notification.success h2, .notification.success h3, .notification.success h4, .notification.success h5, .notification.success h6 { color: white; } .notification.warning { background: #F08A24; padding: 1rem; border-radius: 4px; } .notification.warning, .notification.warning h1, .notification.warning h2, .notification.warning h3, .notification.warning h4, .notification.warning h5, .notification.warning h6 { color: white; } .notification.alert { background: #F04124; padding: 1rem; border-radius: 4px; } .notification.alert, .notification.alert h1, .notification.alert h2, .notification.alert h3, .notification.alert h4, .notification.alert h5, .notification.alert h6 { color: white; } .notification.dark { background: #232323; padding: 1rem; border-radius: 4px; } .notification.dark, .notification.dark h1, .notification.dark h2, .notification.dark h3, .notification.dark h4, .notification.dark h5, .notification.dark h6 { color: #fff; } .static-notification { background: #00558b; padding: 1rem; border-radius: 4px; position: fixed !important; } .static-notification, .static-notification h1, .static-notification h2, .static-notification h3, .static-notification h4, .static-notification h5, .static-notification h6 { color: white; } .static-notification.top-right { width: 25rem; right: 1rem; top: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .static-notification.top-right { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .static-notification.top-left { width: 25rem; left: 1rem; top: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .static-notification.top-left { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .static-notification.top-middle { width: 25rem; left: 50%; margin-left: -12.5rem; top: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .static-notification.top-middle { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .static-notification.bottom-right { width: 25rem; right: 1rem; top: auto; bottom: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .static-notification.bottom-right { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .static-notification.bottom-left { width: 25rem; left: 1rem; top: auto; bottom: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .static-notification.bottom-left { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .static-notification.bottom-middle { width: 25rem; left: 50%; margin-left: -12.5rem; top: auto; bottom: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .static-notification.bottom-middle { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .static-notification.success { background: #43AC6A; padding: 1rem; border-radius: 4px; } .static-notification.success, .static-notification.success h1, .static-notification.success h2, .static-notification.success h3, .static-notification.success h4, .static-notification.success h5, .static-notification.success h6 { color: white; } .static-notification.warning { background: #F08A24; padding: 1rem; border-radius: 4px; } .static-notification.warning, .static-notification.warning h1, .static-notification.warning h2, .static-notification.warning h3, .static-notification.warning h4, .static-notification.warning h5, .static-notification.warning h6 { color: white; } .static-notification.alert { background: #F04124; padding: 1rem; border-radius: 4px; } .static-notification.alert, .static-notification.alert h1, .static-notification.alert h2, .static-notification.alert h3, .static-notification.alert h4, .static-notification.alert h5, .static-notification.alert h6 { color: white; } .static-notification.dark { background: #232323; padding: 1rem; border-radius: 4px; } .static-notification.dark, .static-notification.dark h1, .static-notification.dark h2, .static-notification.dark h3, .static-notification.dark h4, .static-notification.dark h5, .static-notification.dark h6 { color: #fff; } .notification-container { width: 25rem; right: 1rem; top: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .notification-container { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .notification-container.top-right { width: 25rem; right: 1rem; top: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .notification-container.top-right { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .notification-container.top-left { width: 25rem; left: 1rem; top: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .notification-container.top-left { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .notification-container.top-middle { width: 25rem; left: 50%; margin-left: -12.5rem; top: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .notification-container.top-middle { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .notification-container.bottom-right { width: 25rem; right: 1rem; top: auto; bottom: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .notification-container.bottom-right { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .notification-container.bottom-left { width: 25rem; left: 1rem; top: auto; bottom: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .notification-container.bottom-left { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .notification-container.bottom-middle { width: 25rem; left: 50%; margin-left: -12.5rem; top: auto; bottom: 1rem; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .notification-container.bottom-middle { width: auto; left: 1rem; right: 1rem; margin-left: 0; } } .notification-icon { -webkit-flex: 0 0 60px; -ms-flex: 0 0 60px; flex: 0 0 60px; margin-right: 1rem; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .notification-icon img { width: 100%; height: auto; } .notification-content { -webkit-flex: 1; -ms-flex: 1; flex: 1; } /* Off-canvas menu --------------- A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu. */ .off-canvas { position: fixed; overflow: auto; -webkit-overflow-scrolling: touch; transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; z-index: 2; } .is-active.off-canvas { -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; } .off-canvas ~ .grid-frame { -webkit-transform: translate(0, 0, 0); transform: translate(0, 0, 0); transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: white; } .off-canvas { /* Get shadow values for later use */ /* Sizing */ width: 250px; height: 100%; /* Positioning */ top: 0; left: 0; box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25); -webkit-transform: translateX(-100%); transform: translateX(-100%); background: #fff; color: #000; } .off-canvas.is-active ~ .grid-frame { -webkit-transform: translateX(250px) !important; transform: translateX(250px) !important; } .off-canvas.top { /* Get shadow values for later use */ /* Sizing */ height: 250px; width: 100%; /* Positioning */ top: 0; left: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.25); } .off-canvas.top.is-active ~ .grid-frame { -webkit-transform: translateY(250px) !important; transform: translateY(250px) !important; } .off-canvas.right { /* Get shadow values for later use */ /* Sizing */ width: 250px; height: 100%; /* Positioning */ left: auto; top: 0; right: 0; box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.25); -webkit-transform: translateX(100%); transform: translateX(100%); } .off-canvas.right.is-active ~ .grid-frame { -webkit-transform: translateX(-250px) !important; transform: translateX(-250px) !important; } .off-canvas.bottom { /* Get shadow values for later use */ /* Sizing */ height: 250px; width: 100%; /* Positioning */ top: auto; bottom: 0; left: 0; -webkit-transform: translateY(100%); transform: translateY(100%); box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.25); } .off-canvas.bottom.is-active ~ .grid-frame { -webkit-transform: translateY(-250px) !important; transform: translateY(-250px) !important; } .off-canvas.left { /* Get shadow values for later use */ /* Sizing */ width: 250px; height: 100%; /* Positioning */ top: 0; left: 0; box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25); -webkit-transform: translateX(-100%); transform: translateX(-100%); } .off-canvas.left.is-active ~ .grid-frame { -webkit-transform: translateX(250px) !important; transform: translateX(250px) !important; } .off-canvas.detached { z-index: 0; box-shadow: none; } .off-canvas.detached, .off-canvas.detached.is-active { -webkit-transform: none; transform: none; } .off-canvas.detached ~ .grid-frame { z-index: 1; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } .off-canvas.primary { background: #00558b; color: #fff; } .off-canvas.dark { background: #232323; color: #fff; } /* POPUP ----- A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels. */ .popup { position: absolute; z-index: 1000; opacity: 0; overflow: hidden; transition: opacity 0.25s ease-out; pointer-events: none; } .tether-enabled.popup { opacity: 1; pointer-events: auto; } .popup { width: 18.75rem; background: #fff; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); border: 0; } .popup.dark { background: #232323; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); border: 0; } .popup.primary { background: #00558b; border-radius: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); border: 0; } /* SWITCH ------ */ .switch { position: relative; overflow: hidden; display: inline-block; } .switch > input { position: absolute; left: -9999px; outline: none; } .switch > label { -ms-touch-action: manipulation; touch-action: manipulation; display: block; width: 100%; height: 100%; cursor: pointer; margin: 0; } .switch > label::after { content: ''; display: block; position: absolute; top: 0; left: 0; } /* Defines the dimmensions of the switch. $width - width of the switch. $height - height of the switch. */ .switch { width: 3.125rem; height: 2rem; border-radius: 9999px; } .switch > label::after { width: 2rem; height: 2rem; } .switch input:checked + label::after { left: 1.125rem; } .switch > label { background: #ccc; } .switch > label::after { background: white; border-radius: 9999px; transition: left 0.15s ease-out; border: 4px solid #ccc; } .switch input:checked + label { background: #00558b; margin: 0; } .switch input:checked + label::after { border-color: #00558b; } .switch.small { width: 2.5rem; height: 1.625rem; } .switch.small > label::after { width: 1.625rem; height: 1.625rem; } .switch.small input:checked + label::after { left: 0.875rem; } .switch.large { width: 3.75rem; height: 2.375rem; } .switch.large > label::after { width: 2.375rem; height: 2.375rem; } .switch.large input:checked + label::after { left: 1.375rem; } /* TABS ---- */ .tabs { /* Container styles */ display: -webkit-flex; display: -ms-flexbox; display: flex; background: transparent; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .tabs.vertical { /* Container styles */ display: -webkit-flex; display: -ms-flexbox; display: flex; background: transparent; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .tabs .tab-item { background: #f3f3f3; padding: 1rem; line-height: 1; margin: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; cursor: pointer; color: #000; } .tabs .tab-item.is-active { background: #ececec; color: #000; } .tabs .tab-item.is-active:hover { background: #e7e7e7; } .tabs .tab-item:hover { background: #e7e7e7; } .tab-contents { padding: 1rem; } .tab-contents .tab-content { display: none; } .tab-contents .tab-content.is-active { display: block; } /* ACCORDION --------- The trusy accordion allows you to create a series of vertical tabs. */ .accordion { border: 1px solid #cbcbcb; } .accordion-title { padding: 1rem; background: #f3f3f3; color: #000; line-height: 1; cursor: pointer; } .accordion-title:hover { background: #e7e7e7; } .is-active > .accordion-title { background: #ececec; color: #000; } .accordion-content { padding: 1rem; display: none; } .is-active > .accordion-content { display: block; } /* TYPOGRAPHY ---------- Includes typographic resets for many common elements, and a few helper classes. - Headers - Subheaders - Lead paragraphs - Ordered/unordered lists - Code samples - Anchors - Dividers - Blockquotes - Acronyms */ /* Typography resets */ div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; } /* Default Link Styles */ a { color: #00558b; text-decoration: none; line-height: inherit; } a[ui-sref] { cursor: pointer; } a:hover, a:focus { color: #004978; } a img { border: none; } /* Default paragraph styles */ p { font-family: inherit; font-weight: normal; font-size: 1rem; line-height: 1.6; margin-bottom: 1.25rem; text-rendering: optimizeLegibility; } p.lead { font-size: 1.21875rem; line-height: 1.6; } p aside { font-size: 0.875rem; line-height: 1.35; font-style: italic; } /* Default header styles */ h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; color: #222; text-rendering: optimizeLegibility; margin-top: 0.2rem; margin-bottom: 0.5rem; line-height: 1.4; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; } h1 { font-size: 2.125rem; } h2 { font-size: 1.6875rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } .subheader { line-height: 1.4; color: #6f6f6f; font-weight: normal; margin-top: 0.2rem; margin-bottom: 0.5rem; } hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 1.25rem 0 1.1875rem; height: 0; } /* Helpful Typography Defaults */ em, i { font-style: italic; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } small { font-size: 60%; color: #6f6f6f; line-height: inherit; } code { font-family: Consolas, 'Liberation Mono', Courier, monospace; font-weight: normal; color: #464646; background-color: #fbfbfb; border-width: 1px; border-style: solid; border-color: #e2e2e2; padding: 0.125rem 0.3125rem 0.0625rem; } /* Lists */ ul, ol, dl { font-size: 1rem; line-height: 1.6; margin-bottom: 1.25rem; list-style-position: outside; font-family: inherit; } /* Lists */ ul, ol { margin-left: 1.1rem; } ul li ul, ul li ol, ol li ul, ol li ol { margin-left: 1.25rem; margin-bottom: 0; } /* Lists without bullets */ ul.no-bullet { margin-left: 0; } ul.no-bullet, ul.no-bullet li ul, ul.no-bullet li ol { list-style-type: none; } /* Definition Lists */ dl dt { margin-bottom: 0.3rem; font-weight: bold; } dl dd { margin-bottom: 0.75rem; } /* Abbreviations */ abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px dotted #ddd; cursor: help; } abbr { text-transform: none; } /* Blockquotes */ blockquote { margin: 0 0 1.25rem; padding: 0.5625rem 1.25rem 0 1.1875rem; border-left: 1px solid #ddd; } blockquote cite { display: block; font-size: 0.8125rem; color: #555555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #555555; } blockquote, blockquote p { line-height: 1.6; color: #6f6f6f; } @media only screen and (min-width: 40em) { h1, h2, h3, h4, h5, h6 { line-height: 1.4; } h1 { font-size: 2.75rem; } h2 { font-size: 2.3125rem; } h3 { font-size: 1.6875rem; } h4 { font-size: 1.4375rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } } /* UTILITIES --------- Responsive helper classes to assist you in quickly doing basic formatting and layout. Features: - Vertical alignment - Visibility - Text alignment - Floating */ .v-align { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .v-align .align-top { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .v-align .align-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .v-align .align-bottom { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .v-align .small-align-top { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .v-align .small-align-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .v-align .small-align-bottom { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } @media only screen and (min-width: 40em) { .v-align .medium-align-top { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } } @media only screen and (min-width: 40em) { .v-align .medium-align-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } } @media only screen and (min-width: 40em) { .v-align .medium-align-bottom { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } } @media only screen and (min-width: 75em) { .v-align .large-align-top { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } } @media only screen and (min-width: 75em) { .v-align .large-align-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } } @media only screen and (min-width: 75em) { .v-align .large-align-bottom { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } } .hide { display: none !important; } .invisible { visibility: hidden; } .hide-for-small:not(.ng-hide) { display: block !important; display: none !important; } .hide-for-small[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; display: none !important; } .show-for-small:not(.ng-hide) { display: none !important; display: block !important; } .show-for-small[class*="grid-block"]:not(.ng-hide) { display: none !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } .hide-for-small-only:not(.ng-hide) { display: block !important; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .hide-for-small-only:not(.ng-hide) { display: none !important; } } .hide-for-small-only[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .hide-for-small-only[class*="grid-block"]:not(.ng-hide) { display: none !important; } } .show-for-small-only:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .show-for-small-only:not(.ng-hide) { display: block !important; } } .show-for-small-only[class*="grid-block"]:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .show-for-small-only[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } .hide-for-medium:not(.ng-hide) { display: block !important; } @media only screen and (min-width: 40em) { .hide-for-medium:not(.ng-hide) { display: none !important; } } .hide-for-medium[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } @media only screen and (min-width: 40em) { .hide-for-medium[class*="grid-block"]:not(.ng-hide) { display: none !important; } } .show-for-medium:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 40em) { .show-for-medium:not(.ng-hide) { display: block !important; } } .show-for-medium[class*="grid-block"]:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 40em) { .show-for-medium[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } .hide-for-medium-only:not(.ng-hide) { display: block !important; } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .hide-for-medium-only:not(.ng-hide) { display: none !important; } } .hide-for-medium-only[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .hide-for-medium-only[class*="grid-block"]:not(.ng-hide) { display: none !important; } } .show-for-medium-only:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .show-for-medium-only:not(.ng-hide) { display: block !important; } } .show-for-medium-only[class*="grid-block"]:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .show-for-medium-only[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } .hide-for-large:not(.ng-hide) { display: block !important; } @media only screen and (min-width: 75em) { .hide-for-large:not(.ng-hide) { display: none !important; } } .hide-for-large[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } @media only screen and (min-width: 75em) { .hide-for-large[class*="grid-block"]:not(.ng-hide) { display: none !important; } } .show-for-large:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 75em) { .show-for-large:not(.ng-hide) { display: block !important; } } .show-for-large[class*="grid-block"]:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 75em) { .show-for-large[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } .hide-for-large-only:not(.ng-hide) { display: block !important; } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .hide-for-large-only:not(.ng-hide) { display: none !important; } } .hide-for-large-only[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .hide-for-large-only[class*="grid-block"]:not(.ng-hide) { display: none !important; } } .show-for-large-only:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .show-for-large-only:not(.ng-hide) { display: block !important; } } .show-for-large-only[class*="grid-block"]:not(.ng-hide) { display: none !important; } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .show-for-large-only[class*="grid-block"]:not(.ng-hide) { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } @media only screen and (orientation: portrait) { .hide-for-portrait { display: none !important; } .hide-for-portrait[class*="grid-block"] { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } .show-for-portrait { display: none !important; } @media only screen and (orientation: portrait) { .show-for-portrait { display: block !important; } .show-for-portrait[class*="grid-block"] { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } @media only screen and (orientation: landscape) { .hide-for-landscape { display: none !important; } .hide-for-landscape[class*="grid-block"] { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } .show-for-landscape { display: none !important; } @media only screen and (orientation: landscape) { .show-for-landscape { display: block !important; } .show-for-landscape[class*="grid-block"] { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } /* Text alignment */ .text-left { text-align: left; } .small-text-left { text-align: left; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .small-only-text-left { text-align: left; } } @media only screen and (min-width: 40em) { .medium-text-left { text-align: left; } } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .medium-only-text-left { text-align: left; } } @media only screen and (min-width: 75em) { .large-text-left { text-align: left; } } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .large-only-text-left { text-align: left; } } .text-right { text-align: right; } .small-text-right { text-align: right; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .small-only-text-right { text-align: right; } } @media only screen and (min-width: 40em) { .medium-text-right { text-align: right; } } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .medium-only-text-right { text-align: right; } } @media only screen and (min-width: 75em) { .large-text-right { text-align: right; } } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .large-only-text-right { text-align: right; } } .text-center { text-align: center; } .small-text-center { text-align: center; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .small-only-text-center { text-align: center; } } @media only screen and (min-width: 40em) { .medium-text-center { text-align: center; } } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .medium-only-text-center { text-align: center; } } @media only screen and (min-width: 75em) { .large-text-center { text-align: center; } } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .large-only-text-center { text-align: center; } } .text-justify { text-align: justify; } .small-text-justify { text-align: justify; } @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { .small-only-text-justify { text-align: justify; } } @media only screen and (min-width: 40em) { .medium-text-justify { text-align: justify; } } @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { .medium-only-text-justify { text-align: justify; } } @media only screen and (min-width: 75em) { .large-text-justify { text-align: justify; } } @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { .large-only-text-justify { text-align: justify; } } /* Floating */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .float-left { float: left; } .float-right { float: right; } .float-none { float: none; }