From 698b8f9339e38cce03bf5ab14b7c583226a9d21e Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Mon, 23 Oct 2017 11:05:55 +0100 Subject: [PATCH 01/26] Fix validation for UBRN search - Add config file for valid refs --- src/config/validation.js | 8 ++++++++ src/utils/validation.js | 12 +++++++----- src/views/UBRNLookup.js | 23 +++++++++++++---------- 3 files changed, 28 insertions(+), 15 deletions(-) create mode 100644 src/config/validation.js diff --git a/src/config/validation.js b/src/config/validation.js new file mode 100644 index 0000000..b00f889 --- /dev/null +++ b/src/config/validation.js @@ -0,0 +1,8 @@ +const validation = { + UBRN: { + min: 8, + max: 12, + }, +}; + +export default validation; diff --git a/src/utils/validation.js b/src/utils/validation.js index a95f21c..27e9937 100644 --- a/src/utils/validation.js +++ b/src/utils/validation.js @@ -1,15 +1,17 @@ // @flow +import config from '../config/validation'; + +const { UBRN } = config; + /** - * @function validateRefSearch(length) + * @function validateUBRNSearch(length) * * @param {int} length - The length of ref input * * @return {string} Validation state string for bootstrap */ -export function validateRefSearch(length: number) { - if (length > 12) return 'error'; - else if (length > 5) return 'success'; - else if (length > 0) return 'error'; +export function validateUBRNSearch(length: number) { + if (length >= UBRN.min && length <= UBRN.max) return 'success'; return 'error'; } diff --git a/src/views/UBRNLookup.js b/src/views/UBRNLookup.js index b1b8095..070a98e 100644 --- a/src/views/UBRNLookup.js +++ b/src/views/UBRNLookup.js @@ -8,7 +8,10 @@ import { ubrnSearch, setQuery } from '../actions/ApiActions'; import { SET_UBRN_QUERY } from '../constants/ApiConstants'; import ErrorModal from '../components/ErrorModal'; import SearchRefForm from '../components/SearchRefForm'; -import { validateRefSearch } from '../utils/validation'; +import { validateUBRNSearch } from '../utils/validation'; +import config from '../config/validation'; + +const { UBRN } = config; class UBRNLookup extends React.Component { constructor(props) { @@ -45,15 +48,15 @@ class UBRNLookup extends React.Component { onSubmit(e) { e.preventDefault(); const query = this.props.data.query; - if (query.length > 5 && query.length < 13) { + if (query.length <= UBRN.max && query.length >= UBRN.min) { this.props.dispatch(ubrnSearch(query.toUpperCase())); } else { // Possibly swap this action with a redux way of doing it? - this.props.data.results = 0; + //this.props.data.results = []; this.setState({ results: [], show: true, - errorMessage: 'Please enter a valid VAT/PAYE/UBRN reference.', + errorMessage: 'Please enter a valid UBRN number.', }); } } @@ -74,19 +77,19 @@ class UBRNLookup extends React.Component {
-
-
+
+
(this.child = ch)} currentlySending={this.props.data.currentlySending} onSubmit={this.onSubmit} onChange={this.changeQuery} value={this.props.data.query} - valid={validateRefSearch(this.props.data.query.length)} + valid={validateUBRNSearch(this.props.data.query.length)} /> Date: Mon, 23 Oct 2017 12:28:26 +0100 Subject: [PATCH 02/26] Add ONS inputs for Match search, used SDC styles - Used Less to isolate SDC styles, prefix with 'sdc-isolation' to prevent conflicts with other styles --- src/components/MatchForm.js | 104 + src/resources/css/sdc-isolation.css | 6561 +++++++++++++++++++++ src/resources/img/icons--chevron-down.svg | 1 + src/views/Match.js | 8 +- 4 files changed, 6670 insertions(+), 4 deletions(-) create mode 100644 src/components/MatchForm.js create mode 100644 src/resources/css/sdc-isolation.css create mode 100644 src/resources/img/icons--chevron-down.svg diff --git a/src/components/MatchForm.js b/src/components/MatchForm.js new file mode 100644 index 0000000..276206c --- /dev/null +++ b/src/components/MatchForm.js @@ -0,0 +1,104 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Button } from 'registers-react-library'; +import '../resources/css/sdc-isolation.css'; + +class MatchForm extends React.Component { + render() { + return ( +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ ); + } +} + +MatchForm.propTypes = { + currentlySending: PropTypes.bool.isRequired, + onSubmit: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, + valid: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, +}; + +export default MatchForm; diff --git a/src/resources/css/sdc-isolation.css b/src/resources/css/sdc-isolation.css new file mode 100644 index 0000000..a0a077e --- /dev/null +++ b/src/resources/css/sdc-isolation.css @@ -0,0 +1,6561 @@ +.sdc-isolation { + @charset "UTF-8"; + /* ========================================================================== + Normalize.scss settings + ========================================================================== */ + /** + * Includes legacy browser support IE6/7 + * + * Set to false if you want to drop support for IE6 and IE7 + */ + /* ========================================================================== + HTML5 display definitions + ========================================================================== */ + /* + * Corrects `block` display not defined in IE 8/9. + */ + /** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + /** + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + /** + * Address styling not present in IE 8/9. + */ + /* ========================================================================== + Base + ========================================================================== */ + /** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * 3.Corrects text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + */ + /** + * Remove default margin. + */ + /* ========================================================================== + Links + ========================================================================== */ + /** + * Address `outline` inconsistency between Chrome and other browsers. + */ + /** + * Improves readability when focused and also mouse hovered in all browsers. + */ + /* ========================================================================== + Typography + ========================================================================== */ + /** + * Addresses font sizes and margins set differently in IE 6/7. + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + /** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + /** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + /** + * Address styling not present in Safari 5 and Chrome. + */ + /** + * Address differences between Firefox and other browsers. + */ + /** + * Addresses styling not present in IE 8/9. + */ + /** + * Addresses margins set differently in IE 6/7. + */ + /** + * Correct font family set oddly in Safari 5 and Chrome. + */ + /** + * Improve readability of pre-formatted text in all browsers. + */ + /** + * Set consistent quote types. + */ + /* + * Addresses CSS quotes not supported in IE 6/7. + */ + /* + * Addresses `quotes` property not supported in Safari 4. + */ + /** + * Address inconsistent and variable font size in all browsers. + */ + /** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + /* ========================================================================== + Lists + ========================================================================== */ + /* + * Addresses margins set differently in IE 6/7. + */ + /* + * Addresses paddings set differently in IE 6/7. + */ + /* + * Corrects list images handled incorrectly in IE 7. + */ + /* ========================================================================== + Embedded content + ========================================================================== */ + /** + * 1. Remove border when inside `a` element in IE 8/9. + * 2. Improves image quality when scaled in IE 7. + */ + /** + * Correct overflow displayed oddly in IE 9. + */ + /* ========================================================================== + Figures + ========================================================================== */ + /** + * Address margin not present in IE 8/9 and Safari 5. + */ + /* ========================================================================== + Forms + ========================================================================== */ + /** + * Define consistent border, margin, and padding. + */ + /** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * 3. Corrects text not wrapping in Firefox 3. + * 4. Corrects alignment displayed oddly in IE 6/7. + */ + /** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + * 4. Improves appearance and consistency in all browsers. + */ + /** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + /** + * 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 Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + /** + * 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. + * 4. Removes inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + /** + * Re-set default cursor for disabled elements. + */ + /** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Removes excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + /** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + /** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + /** + * Remove inner padding and border in Firefox 4+. + */ + /** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + /* ========================================================================== + Tables + ========================================================================== */ + /** + * Remove most spacing between table cells. + */ + /** + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * contenteditable attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that are clearfixed. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ + /** + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ +} +.sdc-isolation :root { + --grid-cols: 4; + --grid-gutters: 1rem; + --grid-max-width: 57.445rem; + --grid-baseline: 16px; +} +@media only screen and (min-width: 740px) { + .sdc-isolation :root { + --grid-cols: 12; + } +} +.sdc-isolation article, +.sdc-isolation aside, +.sdc-isolation details, +.sdc-isolation figcaption, +.sdc-isolation figure, +.sdc-isolation footer, +.sdc-isolation header, +.sdc-isolation hgroup, +.sdc-isolation main, +.sdc-isolation nav, +.sdc-isolation section, +.sdc-isolation summary { + display: block; +} +.sdc-isolation audio, +.sdc-isolation canvas, +.sdc-isolation video { + display: inline-block; + *display: inline; + *zoom: 1; +} +.sdc-isolation audio:not([controls]) { + display: none; + height: 0; +} +.sdc-isolation [hidden] { + display: none; +} +.sdc-isolation { + font-size: 100%; + /* 3 */ + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} +.sdc-isolation { + margin: 0; +} +.sdc-isolation a:focus { + outline: thin dotted; +} +.sdc-isolation a:active, +.sdc-isolation a:hover { + outline: 0; +} +.sdc-isolation h1 { + font-size: 2em; + margin: 0.67em 0; +} +.sdc-isolation h2 { + font-size: 1.5em; + margin: 0.83em 0; +} +.sdc-isolation h3 { + font-size: 1.17em; + margin: 1em 0; +} +.sdc-isolation h4 { + font-size: 1em; + margin: 1.33em 0; +} +.sdc-isolation h5 { + font-size: 0.83em; + margin: 1.67em 0; +} +.sdc-isolation h6 { + font-size: 0.75em; + margin: 2.33em 0; +} +.sdc-isolation abbr[title] { + border-bottom: 1px dotted; +} +.sdc-isolation b, +.sdc-isolation strong { + font-weight: bold; +} +.sdc-isolation blockquote { + margin: 1em 40px; +} +.sdc-isolation dfn { + font-style: italic; +} +.sdc-isolation hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} +.sdc-isolation mark { + background: #ff0; + color: #000; +} +.sdc-isolation p, +.sdc-isolation pre { + margin: 1em 0; +} +.sdc-isolation code, +.sdc-isolation kbd, +.sdc-isolation pre, +.sdc-isolation samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} +.sdc-isolation pre { + white-space: pre-wrap; +} +.sdc-isolation q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} +.sdc-isolation q { + quotes: none; +} +.sdc-isolation q:before, +.sdc-isolation q:after { + content: ''; + content: none; +} +.sdc-isolation small { + font-size: 80%; +} +.sdc-isolation sub, +.sdc-isolation sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +.sdc-isolation sup { + top: -0.5em; +} +.sdc-isolation sub { + bottom: -0.25em; +} +.sdc-isolation dl, +.sdc-isolation menu, +.sdc-isolation ol, +.sdc-isolation ul { + margin: 1em 0; +} +.sdc-isolation dd { + margin: 0 0 0 40px; +} +.sdc-isolation menu, +.sdc-isolation ol, +.sdc-isolation ul { + padding: 0 0 0 40px; +} +.sdc-isolation nav ul, +.sdc-isolation nav ol { + list-style: none; + list-style-image: none; +} +.sdc-isolation img { + border: 0; + -ms-interpolation-mode: bicubic; + /* 2 */ +} +.sdc-isolation svg:not(:root) { + overflow: hidden; +} +.sdc-isolation figure { + margin: 0; +} +.sdc-isolation fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +.sdc-isolation legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ + white-space: normal; + /* 2 */ + *margin-left: -7px; + /* 3 */ +} +.sdc-isolation button, +.sdc-isolation input, +.sdc-isolation select, +.sdc-isolation textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 2 */ + margin: 0; + /* 3 */ + vertical-align: baseline; + /* 3 */ + *vertical-align: middle; + /* 3 */ +} +.sdc-isolation button, +.sdc-isolation input { + line-height: normal; +} +.sdc-isolation button, +.sdc-isolation select { + text-transform: none; +} +.sdc-isolation button, +.sdc-isolation input[type="button"], +.sdc-isolation input[type="reset"], +.sdc-isolation input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ + *overflow: visible; + /* 4 */ +} +.sdc-isolation button[disabled], +.sdc-isolation input[disabled] { + cursor: default; +} +.sdc-isolation input[type="checkbox"], +.sdc-isolation input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ +} +.sdc-isolation input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; +} +.sdc-isolation input[type="search"]::-webkit-search-cancel-button, +.sdc-isolation input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +.sdc-isolation button::-moz-focus-inner, +.sdc-isolation input::-moz-focus-inner { + border: 0; + padding: 0; +} +.sdc-isolation textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ +} +.sdc-isolation table { + border-collapse: collapse; + border-spacing: 0; +} +.sdc-isolation input::placeholder { + color: #bfbfbf; + font-weight: 400; +} +.sdc-isolation input:focus::placeholder { + color: #8c8c8c; +} +.sdc-isolation fieldset, +.sdc-isolation legend { + padding: 0; + margin: 0; + border: none; +} +.sdc-isolation fieldset { + width: 100%; +} +.sdc-isolation .lt-ie8 legend { + float: left; + clear: both; + margin-left: -7px; +} +.sdc-isolation input { + box-sizing: border-box; +} +.sdc-isolation ::-webkit-inner-spin-button { + display: none; +} +.sdc-isolation input[type=number] { + -moz-appearance: textfield; +} +.sdc-isolation *, +.sdc-isolation *::before, +.sdc-isolation *::after { + box-sizing: inherit; +} +.sdc-isolation { + width: 100%; + height: 100%; + box-sizing: border-box; +} +.sdc-isolation { + height: 100%; + margin: 0; + position: relative; +} +.sdc-isolation img { + vertical-align: middle; + max-width: 100%; + height: auto; +} +.sdc-isolation abbr[title] { + border: none; +} +.sdc-isolation a { + color: #4263c2; +} +.sdc-isolation a:hover { + text-decoration: underline; + color: #033e58; +} +.sdc-isolation a:focus { + color: white; + background-color: #4263c2; + outline: 3px solid #4263c2; +} +.sdc-isolation main:focus, +.sdc-isolation [role="main"]:focus { + outline: none; +} +.sdc-isolation legend { + white-space: normal; + display: table; +} +.sdc-isolation .svg-icons--caret-bottom, +.sdc-isolation .svg-icons--caret-left, +.sdc-isolation .svg-icons--caret-right, +.sdc-isolation .svg-icons--caret-top, +.sdc-isolation .svg-icons--check, +.sdc-isolation .svg-icons--check-green, +.sdc-isolation .svg-icons--chevron-bottom, +.sdc-isolation .svg-icons--chevron-down, +.sdc-isolation .svg-icons--chevron-left, +.sdc-isolation .svg-icons--chevron-right, +.sdc-isolation .svg-icons--chevron-top, +.sdc-isolation .svg-icons--circle-check, +.sdc-isolation .svg-icons--circle-x, +.sdc-isolation .svg-icons--external-link, +.sdc-isolation .svg-icons--guidance, +.sdc-isolation .svg-icons--guidance-white, +.sdc-isolation .svg-icons--info, +.sdc-isolation .svg-icons--info-circle, +.sdc-isolation .svg-icons--lock, +.sdc-isolation .svg-icons--logo, +.sdc-isolation .svg-icons--phone, +.sdc-isolation .svg-icons--right-arrow, +.sdc-isolation .svg-loader, +.sdc-isolation .svg-logo, +.sdc-isolation .svg-theme--census--census-logo, +.sdc-isolation .svg-theme--census--ons-logo, +.sdc-isolation .svg-theme--starwars--star-wars-logo { + /* background: url("static/img/sprite.svg") no-repeat; */ +} +.sdc-isolation .svg-icons--caret-bottom { + background-position: 0 0; +} +.sdc-isolation .svg-icons--caret-bottom-dims { + width: 52px; + height: 36px; +} +.sdc-isolation .svg-icons--caret-left { + background-position: 75.22348484848484% 59.09090909090909%; +} +.sdc-isolation .svg-icons--caret-left-dims { + width: 36px; + height: 52px; +} +.sdc-isolation .svg-icons--caret-right { + background-position: 0 20.454545454545453%; +} +.sdc-isolation .svg-icons--caret-right-dims { + width: 36px; + height: 52px; +} +.sdc-isolation .svg-icons--caret-top { + background-position: 14.516129032258064% 18.796992481203006%; +} +.sdc-isolation .svg-icons--caret-top-dims { + width: 52px; + height: 36.48px; +} +.sdc-isolation .svg-icons--check { + background-position: 41.935483870967744% 0; +} +.sdc-isolation .svg-icons--check-dims { + width: 52px; + height: 45.02px; +} +.sdc-isolation .svg-icons--check-green { + background-position: 0 48.19541048250178%; +} +.sdc-isolation .svg-icons--check-green-dims { + width: 52px; + height: 45.41px; +} +.sdc-isolation .svg-icons--chevron-bottom { + background-position: 41.935483870967744% 24.28132247451594%; +} +.sdc-isolation .svg-icons--chevron-bottom-dims { + width: 52px; + height: 42.59px; +} +.sdc-isolation .svg-icons--chevron-down { + background-position: 99.83665338645419% 0; +} +.sdc-isolation .svg-icons--chevron-down-dims { + width: 49px; + height: 37px; +} +.sdc-isolation .svg-icons--chevron-left { + background-position: 60.60370614972224% 0; +} +.sdc-isolation .svg-icons--chevron-left-dims { + width: 42.59px; + height: 52px; +} +.sdc-isolation .svg-icons--chevron-right { + background-position: 60.60370614972224% 29.545454545454547%; +} +.sdc-isolation .svg-icons--chevron-right-dims { + width: 42.59px; + height: 52px; +} +.sdc-isolation .svg-icons--chevron-top { + background-position: 0 71.95404778598781%; +} +.sdc-isolation .svg-icons--chevron-top-dims { + width: 52px; + height: 42.59px; +} +.sdc-isolation .svg-icons--circle-check { + background-position: 80.07661290322581% 0; +} +.sdc-isolation .svg-icons--circle-check-dims { + width: 52px; + height: 52px; +} +.sdc-isolation .svg-icons--circle-x { + background-position: 80.07661290322581% 29.545454545454547%; +} +.sdc-isolation .svg-icons--circle-x-dims { + width: 52px; + height: 52px; +} +.sdc-isolation .svg-icons--external-link { + background-position: 94.20676691729324% 98.45360824742268%; +} +.sdc-isolation .svg-icons--external-link-dims { + width: 34px; + height: 34px; +} +.sdc-isolation .svg-icons--guidance { + background-position: 92.81111111111112% 61.78010471204188%; +} +.sdc-isolation .svg-icons--guidance-dims { + width: 30px; + height: 37px; +} +.sdc-isolation .svg-icons--guidance-white { + background-position: 92.81111111111112% 42.40837696335078%; +} +.sdc-isolation .svg-icons--guidance-white-dims { + width: 30px; + height: 37px; +} +.sdc-isolation .svg-icons--info { + background-position: 0 100%; +} +.sdc-isolation .svg-icons--info-dims { + width: 36.94px; + height: 52px; +} +.sdc-isolation .svg-icons--info-circle { + background-position: 14.89516129032258% 100%; +} +.sdc-isolation .svg-icons--info-circle-dims { + width: 52px; + height: 52px; +} +.sdc-isolation .svg-icons--lock { + background-position: 96.59252977681841% 20.108695652173914%; +} +.sdc-isolation .svg-icons--lock-dims { + width: 40.57px; + height: 44px; +} +.sdc-isolation .svg-icons--logo { + background-position: 56.24775511833021% 100%; +} +.sdc-isolation .svg-icons--logo-dims { + width: 49.43px; + height: 52px; +} +.sdc-isolation .svg-icons--phone { + background-position: 94.92045454545455% 80.72916666666667%; +} +.sdc-isolation .svg-icons--phone-dims { + width: 36px; + height: 36px; +} +.sdc-isolation .svg-icons--right-arrow { + background-position: 73.04784927669698% 100%; +} +.sdc-isolation .svg-icons--right-arrow-dims { + width: 39.39px; + height: 52px; +} +.sdc-isolation .svg-loader { + background-position: 35.86290322580645% 100%; +} +.sdc-isolation .svg-loader-dims { + width: 52px; + height: 52px; +} +.sdc-isolation .svg-logo { + background-position: 41.935483870967744% 66.15918670964543%; +} +.sdc-isolation .svg-logo-dims { + width: 52px; + height: 26.35px; +} +.sdc-isolation .svg-theme--census--census-logo { + background-position: 20.967741935483872% 66.49885355398266%; +} +.sdc-isolation .svg-theme--census--census-logo-dims { + width: 52px; + height: 27.38px; +} +.sdc-isolation .svg-theme--census--ons-logo { + background-position: 20.967741935483872% 43.62482649216736%; +} +.sdc-isolation .svg-theme--census--ons-logo-dims { + width: 52px; + height: 26.28px; +} +.sdc-isolation .svg-theme--starwars--star-wars-logo { + background-position: 20.967741935483872% 0; +} +.sdc-isolation .svg-theme--starwars--star-wars-logo-dims { + width: 52px; + height: 34.42px; +} +.sdc-isolation table { + width: 100%; + margin-bottom: 20px; +} +.sdc-isolation table th { + text-align: left; +} +.sdc-isolation table > thead { + border-bottom: 2px solid #e4e8eb; +} +.sdc-isolation th, +.sdc-isolation td { + padding: 15px 0; + word-wrap: normal; + line-height: 1; + vertical-align: top; + border-bottom: thin solid #e4e8eb; +} +@font-face { + font-family: "Lato"; + font-weight: 400; + /* src: url("/assets//fonts/lato/latolatin-regular-webfont.eot?") format("eot"), url("/assets//fonts/lato/latolatin-regular-webfont.woff2") format("woff2"), url("/assets//fonts/lato/latolatin-regular-webfont.woff") format("woff"), url("/assets//fonts/lato/latolatin-regular-webfont.ttf") format("truetype"), url("/assets//fonts/lato/latolatin-regular-webfont.svg#Lato") format("svg"); */ +} +@font-face { + font-family: "Lato"; + font-weight: 600; + /* src: url("/assets//fonts/lato/latolatin-bold-webfont.eot?") format("eot"), url("/assets//fonts/lato/latolatin-bold-webfont.woff2") format("woff2"), url("/assets//fonts/lato/latolatin-bold-webfont.woff") format("woff"), url("/assets//fonts/lato/latolatin-bold-webfont.ttf") format("truetype"), url("/assets//fonts/lato/latolatin-bold-webfont.svg#Lato") format("svg"); */ +} +.sdc-isolation { + font-size: 18px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} +@media only screen and (min-width: 300px) and (max-width: 500px) { + .sdc-isolation { + font-size: 16px; + } +} +.sdc-isolation { + font-family: "Lato", "Helvetica Neue", Arial, sans-serif; + color: #222; +} +.sdc-isolation p { + margin: 0 0 1rem; +} +.sdc-isolation h1, +.sdc-isolation h2, +.sdc-isolation h3, +.sdc-isolation h4, +.sdc-isolation h5 { + font-size: 1rem; + margin: 0 0 1rem; + line-height: 1.2; +} +.sdc-isolation code { + font-size: 0.8rem; +} +.sdc-isolation ul { + margin: 0 0 1rem; + padding-left: 1.5rem; +} +.sdc-isolation li { + margin-bottom: 0.3rem; +} +.sdc-isolation em { + font-style: normal; + font-weight: 600; +} +.sdc-isolation .container { + max-width: 57.445rem; + margin: 0 auto; + padding: 0 1rem; + box-sizing: border-box; + width: 100%; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .container { + padding: 0 1rem; + } +} +.sdc-isolation .grid--align-bottom .grid__col { + vertical-align: bottom; +} +.sdc-isolation .grid__col { + font-size: 1rem; +} +.sdc-isolation .page { + display: flex; + min-height: 100%; + flex-direction: column; + width: 100%; + overflow-x: hidden; +} +.sdc-isolation .page__header { + margin-bottom: 0; +} +.sdc-isolation .page__header:empty { + display: none; +} +.sdc-isolation .page__subheader { + padding: 1rem 0; + overflow: hidden; + min-height: 2.6rem; +} +.sdc-isolation .page__subheader:empty { + height: 1rem; +} +.sdc-isolation .page__previous { + float: left; +} +.sdc-isolation .has-nav-open .page__previous { + display: none; +} +.sdc-isolation .page__previous--bottom { + float: none; +} +.sdc-isolation .page__content { + flex: 1 0 auto; + padding-bottom: 1px; + position: relative; + overflow-x: hidden; +} +.sdc-isolation .page__menubtn { + display: none; + float: right; +} +.sdc-isolation .no-js .page__nav { + margin-bottom: 2rem; +} +.sdc-isolation .has-js .page__nav { + margin: 0 0 1rem; + position: absolute; + right: -15rem; + width: 14rem; + display: none; + top: 0; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .has-js .page__nav { + display: block; + right: 0; + position: relative; + width: auto; + } +} +.sdc-isolation .has-js .page__menubtn { + vertical-align: middle; + display: inline-block; + position: relative; + line-height: 1; +} +.sdc-isolation .has-js .page__container { + transition: transform 200ms ease-out; +} +.sdc-isolation .has-js .page__main { + transform: translateX(0); + transition: opacity 100ms ease-out; +} +.sdc-isolation .has-js .has-nav-open .page__container { + transform: translateX(-15rem); +} +.sdc-isolation .has-js .has-nav-open .page__main { + opacity: 0.2; + pointer-events: none; +} +.sdc-isolation .has-js .has-nav-open .page__nav { + display: block; +} +.sdc-isolation .page__prefooter { + clear: both; +} +.sdc-isolation .page__footer { + clear: both; +} +.sdc-isolation .jupiter { + font-size: 1.75rem; + font-weight: 600; + line-height: 1.4; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .jupiter { + font-size: 2rem; + } +} +.sdc-isolation .saturn { + font-size: 1.375rem; + font-weight: 600; + line-height: 1.4; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .saturn { + font-size: 1.55556rem; + } +} +.sdc-isolation .neptune { + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .neptune { + font-size: 1.22222rem; + } +} +.sdc-isolation .venus { + font-size: 1rem; + font-weight: 600; + line-height: 1.4; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .venus { + font-size: 1rem; + } +} +.sdc-isolation .mars { + font-size: 1rem; + font-weight: 400; + line-height: 1.4; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .mars { + font-size: 1rem; + } +} +.sdc-isolation .mercury { + font-size: 0.875rem; + font-weight: 600; + line-height: 1.4; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .mercury { + font-size: 0.77778rem; + } +} +.sdc-isolation .pluto { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.4; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pluto { + font-size: 0.77778rem; + } +} +.sdc-isolation .field { + background: none; +} +.sdc-isolation .field__item { + margin: 0 0.5rem 0.5rem 0; + position: relative; + width: 100%; + display: inline-block; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .field__item { + width: auto; + min-width: 20rem; + } +} +.sdc-isolation .field:not(.field--cols) .field__item:last-of-type { + margin-bottom: 0; +} +.sdc-isolation .field__other { + display: none; + clear: both; + background-color: #f5f5f5; + padding: 0 0.5rem 0.5rem; +} +.sdc-isolation .has-focus .field__other { + background-color: transparent; +} +.sdc-isolation input:checked ~ .field__other { + display: block; +} +.sdc-isolation .field--multiplechoice { + font-size: 0; +} +.sdc-isolation .field--multiplechoice .field__item { + font-size: 1rem; + background: white; + border: 1px solid #999; + border-radius: 0.2rem; + cursor: pointer; + overflow: hidden; + position: relative; + transition: background-color 200ms ease-in, color 200ms ease-in, box-shadow 200ms ease-in, border-color 200ms ease-in; +} +.sdc-isolation .field--multiplechoice .field__item:hover { + border-color: #033e58; + box-shadow: none; +} +.sdc-isolation .field--multiplechoice .field__item.is-checked { + color: #222; + border-color: #033e58; + box-shadow: 0 0 0 1px #033e58; +} +.sdc-isolation .field--multiplechoice .field__item.is-checked:hover { + border-color: #222; + background-color: #eee; + box-shadow: 0 0 0 1px #222; +} +.sdc-isolation .field--multiplechoice .field__item.has-focus { + color: #222; + border-color: #4263c2; + background-color: #f5f6ff; + box-shadow: 0 0 0 1px #4263c2; +} +.sdc-isolation .field--multiplechoice .field__item.has-focus:hover { + border-color: #4263c2; + box-shadow: 0 0 0 1px #4263c2; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .field--multiplechoice.field--cols { + display: flex; + flex-wrap: wrap; + } + .sdc-isolation .field--multiplechoice.field--cols .field__item { + width: calc(49%); + min-width: 0; + } + .sdc-isolation .field--multiplechoice.field--cols .label { + width: 100%; + } + .sdc-isolation .field--multiplechoice.field--cols:last-of-type { + margin-bottom: 0; + } +} +.sdc-isolation .fieldgroup { + display: block; +} +.sdc-isolation .fieldgroup--date .fieldgroup__title { + font-weight: 700; + display: inline-block; + width: 100%; + margin: 0 0 0.5rem; +} +.sdc-isolation .fieldgroup--date .fieldgroup__fields { + display: flex; + width: 100%; + flex-direction: row; +} +.sdc-isolation .fieldgroup--date .field { + margin: 0 0.5rem 0 0; + flex: 1 1 0; + clear: right; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .fieldgroup--date .field { + margin-right: 1rem; + } +} +.sdc-isolation .fieldgroup--date .field--day { + max-width: 6rem; +} +.sdc-isolation .fieldgroup--date .field--month { + flex: 2; + max-width: 15rem; +} +.sdc-isolation .fieldgroup--date .field--year { + margin-right: 0; + max-width: 6rem; +} +.sdc-isolation .fieldgroup--date .input { + width: 100%; +} +.sdc-isolation .input-type { + display: flex; + position: relative; + align-items: center; +} +.sdc-isolation .input-type .input-type__input { + border-radius: 3px; + line-height: normal; + position: relative; + z-index: 3; + width: 100%; + padding-left: 3.4rem; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .input-type .input-type__input { + width: calc(16.6rem); + } +} +.sdc-isolation .input-type .input-type__type { + display: inline-block; + background-color: #f5f5f5; + border-right: 1px solid #999; + border-radius: 3px 0 0 3px; + padding: 0.6rem 0; + width: 2.9rem; + font-weight: 600; + font-size: 1rem; + text-align: center; + line-height: normal; + position: absolute; + left: 1px; + top: 1px; + z-index: 4; + text-decoration: none; +} +.sdc-isolation .input-type--percentage .input-type__input, +.sdc-isolation .input-type--unit .input-type__input { + padding-left: 0.5rem; +} +.sdc-isolation .input-type--percentage .input-type__type, +.sdc-isolation .input-type--unit .input-type__type { + left: auto; + right: 1px; + border-right: none; + border-left: 1px solid #999; + border-radius: 0 3px 3px 0; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .input-type--percentage .input-type__type, + .sdc-isolation .input-type--unit .input-type__type { + right: auto; + left: calc(12.7rem); + } +} +.sdc-isolation .input { + position: relative; + z-index: 3; + padding: 0.6rem; + display: block; + color: inherit; + font-size: 1rem; + border: 1px solid #999; + border-radius: 3px; + width: 100%; + transition: border-color 200ms ease-in; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .input { + width: 19.5rem; + } +} +.sdc-isolation .input:hover { + border-color: #033e58; +} +.sdc-isolation .input:focus { + outline: none; + border-color: #4263c2; + box-shadow: 0 0 0 1px #4263c2; +} +.sdc-isolation .input__helper { + font-size: 0.8rem; + font-weight: 600; + margin-top: 0.2rem; +} +.sdc-isolation .input--select { + appearance: none; + padding: 0.6rem 2rem 0.6rem 0.5rem; + background: #fff url("../img/icons--chevron-down.svg") no-repeat center right 6px; + background-size: 1.5rem; + line-height: 1.25rem; +} +.sdc-isolation .input--select::-ms-expand { + display: none; +} +.sdc-isolation .input--textarea { + width: 100%; +} +.sdc-isolation .input--radio, +.sdc-isolation .input--checkbox { + width: 20px; + height: 20px; + appearance: none; + border: 2px solid #9b9b9b; + padding: 0.5rem; + font-size: 1rem; + background: #eee; + box-shadow: inset 0 0 0 3px white; + cursor: pointer; + position: absolute; + top: 0.75rem; + left: 0.6rem; + transition: background-color 200ms ease-in, color 200ms ease-in; +} +.sdc-isolation .input--radio:checked, +.sdc-isolation .input--checkbox:checked { + border-color: #033e58; +} +.sdc-isolation .input--radio:focus, +.sdc-isolation .input--checkbox:focus { + border-color: #4263c2; + outline: none; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .input--radio, + .sdc-isolation .input--checkbox { + top: 0.85rem; + } +} +.sdc-isolation .input--radio { + border-radius: 100px; + box-shadow: inset 0 0 0 3px white; +} +.sdc-isolation .input--radio:checked { + background: #033e58; + box-shadow: inset 0 0 0 3px white; +} +.sdc-isolation .input--radio:focus { + border-color: #4263c2; + box-shadow: inset 0 0 0 3px white; + outline: none; +} +.sdc-isolation .input--radio:focus:checked { + border-color: #4263c2; + background-color: #4263c2; +} +.sdc-isolation .input--checkbox { + /* background: url("/assets//img/icons/icons--check.svg") no-repeat center center; */ + background-size: 0; + transition: background-size 50ms ease-out; +} +.sdc-isolation .input--checkbox:checked { + background-size: 20px; + box-shadow: none; +} +.sdc-isolation .input--checkbox:focus { + box-shadow: none; +} +.sdc-isolation .input--block { + display: block; + width: 100%; +} +.sdc-isolation .input--has-error { + background-color: #fbecec; + transition: background-color 1s ease-in-out; +} +.sdc-isolation .label { + display: block; + margin-bottom: 0.4rem; + font-weight: 600; + color: inherit; +} +.sdc-isolation input:checked ~ .label { + background: #f5f5f5; +} +.sdc-isolation .has-focus input:checked ~ .label { + background-color: transparent; +} +.sdc-isolation .label__description { + line-height: 1.4; + display: inline-block; +} +.sdc-isolation .label--inline { + font-weight: 400; + padding: 0.7rem 1rem 0.7rem 2.5rem; + display: block; + margin: 0; + cursor: pointer; +} +.sdc-isolation .field--textarea .label { + font-weight: 400; + margin-bottom: 2rem; +} +.sdc-isolation .label--small { + font-size: 0.8rem; +} +.sdc-isolation .grid { + box-sizing: border-box; + font-size: 0; + margin-left: -1rem; +} +.sdc-isolation .grid--float { + letter-spacing: 0; +} +.sdc-isolation .grid--center { + text-align: center; +} +.sdc-isolation .grid--center .grid__col { + text-align: left; +} +.sdc-isolation .grid--center-all { + text-align: center; +} +.sdc-isolation .grid--reverse { + direction: rtl; +} +.sdc-isolation .grid--reverse .grid__col { + direction: ltr; +} +.sdc-isolation .grid--spaced .grid__col { + margin-bottom: 1rem; +} +.sdc-isolation .grid--spaced.grid--tight .grid__col { + margin-bottom: 0.5rem; +} +.sdc-isolation .grid--align-mid .grid__col { + vertical-align: middle; +} +.sdc-isolation .grid--tight { + margin-left: -0.5rem; +} +.sdc-isolation .grid--tight .grid__col { + padding-left: 0.5rem; +} +.sdc-isolation .grid--gutterless { + margin-left: 0; +} +.sdc-isolation .grid--gutterless .grid__col { + padding-left: 0; +} +.sdc-isolation .grid--pixelgutter { + margin-left: 1px; +} +.sdc-isolation .grid--pixelgutter .grid__col { + padding-left: 1px; + margin-bottom: 1px; +} +.sdc-isolation .grid--flex { + flex-wrap: wrap; + flex-flow: row wrap; + display: flex; +} +.sdc-isolation .grid--flex .grid__col { + display: flex; +} +.sdc-isolation .grid--flex.grid--center { + justify-content: center; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .grid--bordered\@xs { + margin-left: 0; + } + .sdc-isolation .grid--bordered\@xs .grid__col { + padding-top: 1rem; + padding-bottom: 1rem; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + flex: 1 1 auto; + } + .sdc-isolation .grid--bordered\@xs .grid__col:first-of-type { + border-right: 1px solid #999; + padding-left: 0; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .grid--bordered\@s { + margin-left: 0; + } + .sdc-isolation .grid--bordered\@s .grid__col { + padding-top: 1rem; + padding-bottom: 1rem; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + flex: 1 1 auto; + } + .sdc-isolation .grid--bordered\@s .grid__col:first-of-type { + border-right: 1px solid #999; + padding-left: 0; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .grid--bordered\@m { + margin-left: 0; + } + .sdc-isolation .grid--bordered\@m .grid__col { + padding-top: 1rem; + padding-bottom: 1rem; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + flex: 1 1 auto; + } + .sdc-isolation .grid--bordered\@m .grid__col:first-of-type { + border-right: 1px solid #999; + padding-left: 0; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .grid--bordered\@l { + margin-left: 0; + } + .sdc-isolation .grid--bordered\@l .grid__col { + padding-top: 1rem; + padding-bottom: 1rem; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + flex: 1 1 auto; + } + .sdc-isolation .grid--bordered\@l .grid__col:first-of-type { + border-right: 1px solid #999; + padding-left: 0; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .grid--bordered\@xl { + margin-left: 0; + } + .sdc-isolation .grid--bordered\@xl .grid__col { + padding-top: 1rem; + padding-bottom: 1rem; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + flex: 1 1 auto; + } + .sdc-isolation .grid--bordered\@xl .grid__col:first-of-type { + border-right: 1px solid #999; + padding-left: 0; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .grid--bordered\@xxl { + margin-left: 0; + } + .sdc-isolation .grid--bordered\@xxl .grid__col { + padding-top: 1rem; + padding-bottom: 1rem; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + flex: 1 1 auto; + } + .sdc-isolation .grid--bordered\@xxl .grid__col:first-of-type { + border-right: 1px solid #999; + padding-left: 0; + } +} +.sdc-isolation .grid__col { + display: inline-block; + width: 100%; + vertical-align: top; + box-sizing: border-box; + background-clip: content-box; + font-size: 1rem; + padding-left: 1rem; +} +.sdc-isolation .grid--float .grid__col { + float: left; + display: block; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-1\@xs { + width: 8.33333%; + width: calc(8.33333333%); + } + .sdc-isolation .grid--flex .col-1\@xs { + flex: 0 0 8.33333%; + max-width: 8.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-1\@s { + width: 8.33333%; + width: calc(8.33333333%); + } + .sdc-isolation .grid--flex .col-1\@s { + flex: 0 0 8.33333%; + max-width: 8.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-1\@m { + width: 8.33333%; + width: calc(8.33333333%); + } + .sdc-isolation .grid--flex .col-1\@m { + flex: 0 0 8.33333%; + max-width: 8.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-1\@l { + width: 8.33333%; + width: calc(8.33333333%); + } + .sdc-isolation .grid--flex .col-1\@l { + flex: 0 0 8.33333%; + max-width: 8.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-1\@xl { + width: 8.33333%; + width: calc(8.33333333%); + } + .sdc-isolation .grid--flex .col-1\@xl { + flex: 0 0 8.33333%; + max-width: 8.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-1\@xxl { + width: 8.33333%; + width: calc(8.33333333%); + } + .sdc-isolation .grid--flex .col-1\@xxl { + flex: 0 0 8.33333%; + max-width: 8.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-1\@xs { + position: relative; + left: 8.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-1\@s { + position: relative; + left: 8.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-1\@m { + position: relative; + left: 8.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-1\@l { + position: relative; + left: 8.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-1\@xl { + position: relative; + left: 8.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-1\@xxl { + position: relative; + left: 8.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-1\@xs { + position: relative; + left: -8.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-1\@s { + position: relative; + left: -8.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-1\@m { + position: relative; + left: -8.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-1\@l { + position: relative; + left: -8.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-1\@xl { + position: relative; + left: -8.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-1\@xxl { + position: relative; + left: -8.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-2\@xs { + width: 16.66667%; + width: calc(16.66666667%); + } + .sdc-isolation .grid--flex .col-2\@xs { + flex: 0 0 16.66667%; + max-width: 16.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-2\@s { + width: 16.66667%; + width: calc(16.66666667%); + } + .sdc-isolation .grid--flex .col-2\@s { + flex: 0 0 16.66667%; + max-width: 16.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-2\@m { + width: 16.66667%; + width: calc(16.66666667%); + } + .sdc-isolation .grid--flex .col-2\@m { + flex: 0 0 16.66667%; + max-width: 16.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-2\@l { + width: 16.66667%; + width: calc(16.66666667%); + } + .sdc-isolation .grid--flex .col-2\@l { + flex: 0 0 16.66667%; + max-width: 16.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-2\@xl { + width: 16.66667%; + width: calc(16.66666667%); + } + .sdc-isolation .grid--flex .col-2\@xl { + flex: 0 0 16.66667%; + max-width: 16.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-2\@xxl { + width: 16.66667%; + width: calc(16.66666667%); + } + .sdc-isolation .grid--flex .col-2\@xxl { + flex: 0 0 16.66667%; + max-width: 16.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-2\@xs { + position: relative; + left: 16.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-2\@s { + position: relative; + left: 16.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-2\@m { + position: relative; + left: 16.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-2\@l { + position: relative; + left: 16.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-2\@xl { + position: relative; + left: 16.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-2\@xxl { + position: relative; + left: 16.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-2\@xs { + position: relative; + left: -16.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-2\@s { + position: relative; + left: -16.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-2\@m { + position: relative; + left: -16.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-2\@l { + position: relative; + left: -16.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-2\@xl { + position: relative; + left: -16.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-2\@xxl { + position: relative; + left: -16.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-3\@xs { + width: 25%; + width: calc(25%); + } + .sdc-isolation .grid--flex .col-3\@xs { + flex: 0 0 25%; + max-width: 25%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-3\@s { + width: 25%; + width: calc(25%); + } + .sdc-isolation .grid--flex .col-3\@s { + flex: 0 0 25%; + max-width: 25%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-3\@m { + width: 25%; + width: calc(25%); + } + .sdc-isolation .grid--flex .col-3\@m { + flex: 0 0 25%; + max-width: 25%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-3\@l { + width: 25%; + width: calc(25%); + } + .sdc-isolation .grid--flex .col-3\@l { + flex: 0 0 25%; + max-width: 25%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-3\@xl { + width: 25%; + width: calc(25%); + } + .sdc-isolation .grid--flex .col-3\@xl { + flex: 0 0 25%; + max-width: 25%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-3\@xxl { + width: 25%; + width: calc(25%); + } + .sdc-isolation .grid--flex .col-3\@xxl { + flex: 0 0 25%; + max-width: 25%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-3\@xs { + position: relative; + left: 25%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-3\@s { + position: relative; + left: 25%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-3\@m { + position: relative; + left: 25%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-3\@l { + position: relative; + left: 25%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-3\@xl { + position: relative; + left: 25%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-3\@xxl { + position: relative; + left: 25%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-3\@xs { + position: relative; + left: -25%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-3\@s { + position: relative; + left: -25%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-3\@m { + position: relative; + left: -25%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-3\@l { + position: relative; + left: -25%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-3\@xl { + position: relative; + left: -25%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-3\@xxl { + position: relative; + left: -25%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-4\@xs { + width: 33.33333%; + width: calc(33.33333333%); + } + .sdc-isolation .grid--flex .col-4\@xs { + flex: 0 0 33.33333%; + max-width: 33.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-4\@s { + width: 33.33333%; + width: calc(33.33333333%); + } + .sdc-isolation .grid--flex .col-4\@s { + flex: 0 0 33.33333%; + max-width: 33.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-4\@m { + width: 33.33333%; + width: calc(33.33333333%); + } + .sdc-isolation .grid--flex .col-4\@m { + flex: 0 0 33.33333%; + max-width: 33.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-4\@l { + width: 33.33333%; + width: calc(33.33333333%); + } + .sdc-isolation .grid--flex .col-4\@l { + flex: 0 0 33.33333%; + max-width: 33.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-4\@xl { + width: 33.33333%; + width: calc(33.33333333%); + } + .sdc-isolation .grid--flex .col-4\@xl { + flex: 0 0 33.33333%; + max-width: 33.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-4\@xxl { + width: 33.33333%; + width: calc(33.33333333%); + } + .sdc-isolation .grid--flex .col-4\@xxl { + flex: 0 0 33.33333%; + max-width: 33.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-4\@xs { + position: relative; + left: 33.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-4\@s { + position: relative; + left: 33.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-4\@m { + position: relative; + left: 33.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-4\@l { + position: relative; + left: 33.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-4\@xl { + position: relative; + left: 33.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-4\@xxl { + position: relative; + left: 33.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-4\@xs { + position: relative; + left: -33.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-4\@s { + position: relative; + left: -33.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-4\@m { + position: relative; + left: -33.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-4\@l { + position: relative; + left: -33.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-4\@xl { + position: relative; + left: -33.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-4\@xxl { + position: relative; + left: -33.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-5\@xs { + width: 41.66667%; + width: calc(41.66666667%); + } + .sdc-isolation .grid--flex .col-5\@xs { + flex: 0 0 41.66667%; + max-width: 41.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-5\@s { + width: 41.66667%; + width: calc(41.66666667%); + } + .sdc-isolation .grid--flex .col-5\@s { + flex: 0 0 41.66667%; + max-width: 41.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-5\@m { + width: 41.66667%; + width: calc(41.66666667%); + } + .sdc-isolation .grid--flex .col-5\@m { + flex: 0 0 41.66667%; + max-width: 41.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-5\@l { + width: 41.66667%; + width: calc(41.66666667%); + } + .sdc-isolation .grid--flex .col-5\@l { + flex: 0 0 41.66667%; + max-width: 41.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-5\@xl { + width: 41.66667%; + width: calc(41.66666667%); + } + .sdc-isolation .grid--flex .col-5\@xl { + flex: 0 0 41.66667%; + max-width: 41.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-5\@xxl { + width: 41.66667%; + width: calc(41.66666667%); + } + .sdc-isolation .grid--flex .col-5\@xxl { + flex: 0 0 41.66667%; + max-width: 41.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-5\@xs { + position: relative; + left: 41.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-5\@s { + position: relative; + left: 41.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-5\@m { + position: relative; + left: 41.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-5\@l { + position: relative; + left: 41.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-5\@xl { + position: relative; + left: 41.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-5\@xxl { + position: relative; + left: 41.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-5\@xs { + position: relative; + left: -41.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-5\@s { + position: relative; + left: -41.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-5\@m { + position: relative; + left: -41.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-5\@l { + position: relative; + left: -41.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-5\@xl { + position: relative; + left: -41.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-5\@xxl { + position: relative; + left: -41.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-6\@xs { + width: 50%; + width: calc(50%); + } + .sdc-isolation .grid--flex .col-6\@xs { + flex: 0 0 50%; + max-width: 50%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-6\@s { + width: 50%; + width: calc(50%); + } + .sdc-isolation .grid--flex .col-6\@s { + flex: 0 0 50%; + max-width: 50%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-6\@m { + width: 50%; + width: calc(50%); + } + .sdc-isolation .grid--flex .col-6\@m { + flex: 0 0 50%; + max-width: 50%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-6\@l { + width: 50%; + width: calc(50%); + } + .sdc-isolation .grid--flex .col-6\@l { + flex: 0 0 50%; + max-width: 50%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-6\@xl { + width: 50%; + width: calc(50%); + } + .sdc-isolation .grid--flex .col-6\@xl { + flex: 0 0 50%; + max-width: 50%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-6\@xxl { + width: 50%; + width: calc(50%); + } + .sdc-isolation .grid--flex .col-6\@xxl { + flex: 0 0 50%; + max-width: 50%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-6\@xs { + position: relative; + left: 50%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-6\@s { + position: relative; + left: 50%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-6\@m { + position: relative; + left: 50%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-6\@l { + position: relative; + left: 50%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-6\@xl { + position: relative; + left: 50%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-6\@xxl { + position: relative; + left: 50%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-6\@xs { + position: relative; + left: -50%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-6\@s { + position: relative; + left: -50%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-6\@m { + position: relative; + left: -50%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-6\@l { + position: relative; + left: -50%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-6\@xl { + position: relative; + left: -50%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-6\@xxl { + position: relative; + left: -50%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-7\@xs { + width: 58.33333%; + width: calc(58.3331875%); + } + .sdc-isolation .grid--flex .col-7\@xs { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-7\@s { + width: 58.33333%; + width: calc(58.3331875%); + } + .sdc-isolation .grid--flex .col-7\@s { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-7\@m { + width: 58.33333%; + width: calc(58.3331875%); + } + .sdc-isolation .grid--flex .col-7\@m { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-7\@l { + width: 58.33333%; + width: calc(58.3331875%); + } + .sdc-isolation .grid--flex .col-7\@l { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-7\@xl { + width: 58.33333%; + width: calc(58.3331875%); + } + .sdc-isolation .grid--flex .col-7\@xl { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-7\@xxl { + width: 58.33333%; + width: calc(58.3331875%); + } + .sdc-isolation .grid--flex .col-7\@xxl { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-7\@xs { + position: relative; + left: 58.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-7\@s { + position: relative; + left: 58.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-7\@m { + position: relative; + left: 58.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-7\@l { + position: relative; + left: 58.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-7\@xl { + position: relative; + left: 58.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-7\@xxl { + position: relative; + left: 58.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-7\@xs { + position: relative; + left: -58.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-7\@s { + position: relative; + left: -58.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-7\@m { + position: relative; + left: -58.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-7\@l { + position: relative; + left: -58.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-7\@xl { + position: relative; + left: -58.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-7\@xxl { + position: relative; + left: -58.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-8\@xs { + width: 66.66667%; + width: calc(66.66666667%); + } + .sdc-isolation .grid--flex .col-8\@xs { + flex: 0 0 66.66667%; + max-width: 66.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-8\@s { + width: 66.66667%; + width: calc(66.66666667%); + } + .sdc-isolation .grid--flex .col-8\@s { + flex: 0 0 66.66667%; + max-width: 66.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-8\@m { + width: 66.66667%; + width: calc(66.66666667%); + } + .sdc-isolation .grid--flex .col-8\@m { + flex: 0 0 66.66667%; + max-width: 66.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-8\@l { + width: 66.66667%; + width: calc(66.66666667%); + } + .sdc-isolation .grid--flex .col-8\@l { + flex: 0 0 66.66667%; + max-width: 66.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-8\@xl { + width: 66.66667%; + width: calc(66.66666667%); + } + .sdc-isolation .grid--flex .col-8\@xl { + flex: 0 0 66.66667%; + max-width: 66.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-8\@xxl { + width: 66.66667%; + width: calc(66.66666667%); + } + .sdc-isolation .grid--flex .col-8\@xxl { + flex: 0 0 66.66667%; + max-width: 66.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-8\@xs { + position: relative; + left: 66.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-8\@s { + position: relative; + left: 66.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-8\@m { + position: relative; + left: 66.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-8\@l { + position: relative; + left: 66.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-8\@xl { + position: relative; + left: 66.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-8\@xxl { + position: relative; + left: 66.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-8\@xs { + position: relative; + left: -66.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-8\@s { + position: relative; + left: -66.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-8\@m { + position: relative; + left: -66.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-8\@l { + position: relative; + left: -66.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-8\@xl { + position: relative; + left: -66.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-8\@xxl { + position: relative; + left: -66.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-9\@xs { + width: 75%; + width: calc(75.0001875%); + } + .sdc-isolation .grid--flex .col-9\@xs { + flex: 0 0 75%; + max-width: 75%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-9\@s { + width: 75%; + width: calc(75.0001875%); + } + .sdc-isolation .grid--flex .col-9\@s { + flex: 0 0 75%; + max-width: 75%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-9\@m { + width: 75%; + width: calc(75.0001875%); + } + .sdc-isolation .grid--flex .col-9\@m { + flex: 0 0 75%; + max-width: 75%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-9\@l { + width: 75%; + width: calc(75.0001875%); + } + .sdc-isolation .grid--flex .col-9\@l { + flex: 0 0 75%; + max-width: 75%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-9\@xl { + width: 75%; + width: calc(75.0001875%); + } + .sdc-isolation .grid--flex .col-9\@xl { + flex: 0 0 75%; + max-width: 75%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-9\@xxl { + width: 75%; + width: calc(75.0001875%); + } + .sdc-isolation .grid--flex .col-9\@xxl { + flex: 0 0 75%; + max-width: 75%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-9\@xs { + position: relative; + left: 75%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-9\@s { + position: relative; + left: 75%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-9\@m { + position: relative; + left: 75%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-9\@l { + position: relative; + left: 75%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-9\@xl { + position: relative; + left: 75%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-9\@xxl { + position: relative; + left: 75%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-9\@xs { + position: relative; + left: -75%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-9\@s { + position: relative; + left: -75%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-9\@m { + position: relative; + left: -75%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-9\@l { + position: relative; + left: -75%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-9\@xl { + position: relative; + left: -75%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-9\@xxl { + position: relative; + left: -75%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-10\@xs { + width: 83.33333%; + width: calc(83.33333333%); + } + .sdc-isolation .grid--flex .col-10\@xs { + flex: 0 0 83.33333%; + max-width: 83.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-10\@s { + width: 83.33333%; + width: calc(83.33333333%); + } + .sdc-isolation .grid--flex .col-10\@s { + flex: 0 0 83.33333%; + max-width: 83.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-10\@m { + width: 83.33333%; + width: calc(83.33333333%); + } + .sdc-isolation .grid--flex .col-10\@m { + flex: 0 0 83.33333%; + max-width: 83.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-10\@l { + width: 83.33333%; + width: calc(83.33333333%); + } + .sdc-isolation .grid--flex .col-10\@l { + flex: 0 0 83.33333%; + max-width: 83.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-10\@xl { + width: 83.33333%; + width: calc(83.33333333%); + } + .sdc-isolation .grid--flex .col-10\@xl { + flex: 0 0 83.33333%; + max-width: 83.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-10\@xxl { + width: 83.33333%; + width: calc(83.33333333%); + } + .sdc-isolation .grid--flex .col-10\@xxl { + flex: 0 0 83.33333%; + max-width: 83.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-10\@xs { + position: relative; + left: 83.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-10\@s { + position: relative; + left: 83.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-10\@m { + position: relative; + left: 83.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-10\@l { + position: relative; + left: 83.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-10\@xl { + position: relative; + left: 83.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-10\@xxl { + position: relative; + left: 83.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-10\@xs { + position: relative; + left: -83.33333%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-10\@s { + position: relative; + left: -83.33333%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-10\@m { + position: relative; + left: -83.33333%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-10\@l { + position: relative; + left: -83.33333%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-10\@xl { + position: relative; + left: -83.33333%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-10\@xxl { + position: relative; + left: -83.33333%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-11\@xs { + width: 91.66667%; + width: calc(91.66659028%); + } + .sdc-isolation .grid--flex .col-11\@xs { + flex: 0 0 91.66667%; + max-width: 91.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-11\@s { + width: 91.66667%; + width: calc(91.66659028%); + } + .sdc-isolation .grid--flex .col-11\@s { + flex: 0 0 91.66667%; + max-width: 91.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-11\@m { + width: 91.66667%; + width: calc(91.66659028%); + } + .sdc-isolation .grid--flex .col-11\@m { + flex: 0 0 91.66667%; + max-width: 91.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-11\@l { + width: 91.66667%; + width: calc(91.66659028%); + } + .sdc-isolation .grid--flex .col-11\@l { + flex: 0 0 91.66667%; + max-width: 91.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-11\@xl { + width: 91.66667%; + width: calc(91.66659028%); + } + .sdc-isolation .grid--flex .col-11\@xl { + flex: 0 0 91.66667%; + max-width: 91.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-11\@xxl { + width: 91.66667%; + width: calc(91.66659028%); + } + .sdc-isolation .grid--flex .col-11\@xxl { + flex: 0 0 91.66667%; + max-width: 91.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-11\@xs { + position: relative; + left: 91.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-11\@s { + position: relative; + left: 91.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-11\@m { + position: relative; + left: 91.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-11\@l { + position: relative; + left: 91.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-11\@xl { + position: relative; + left: 91.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-11\@xxl { + position: relative; + left: 91.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-11\@xs { + position: relative; + left: -91.66667%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-11\@s { + position: relative; + left: -91.66667%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-11\@m { + position: relative; + left: -91.66667%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-11\@l { + position: relative; + left: -91.66667%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-11\@xl { + position: relative; + left: -91.66667%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-11\@xxl { + position: relative; + left: -91.66667%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .col-12\@xs { + width: 100%; + width: calc(100%); + } + .sdc-isolation .grid--flex .col-12\@xs { + flex: 0 0 100%; + max-width: 100%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .col-12\@s { + width: 100%; + width: calc(100%); + } + .sdc-isolation .grid--flex .col-12\@s { + flex: 0 0 100%; + max-width: 100%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .col-12\@m { + width: 100%; + width: calc(100%); + } + .sdc-isolation .grid--flex .col-12\@m { + flex: 0 0 100%; + max-width: 100%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .col-12\@l { + width: 100%; + width: calc(100%); + } + .sdc-isolation .grid--flex .col-12\@l { + flex: 0 0 100%; + max-width: 100%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .col-12\@xl { + width: 100%; + width: calc(100%); + } + .sdc-isolation .grid--flex .col-12\@xl { + flex: 0 0 100%; + max-width: 100%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .col-12\@xxl { + width: 100%; + width: calc(100%); + } + .sdc-isolation .grid--flex .col-12\@xxl { + flex: 0 0 100%; + max-width: 100%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .push-12\@xs { + position: relative; + left: 100%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .push-12\@s { + position: relative; + left: 100%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .push-12\@m { + position: relative; + left: 100%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .push-12\@l { + position: relative; + left: 100%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .push-12\@xl { + position: relative; + left: 100%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .push-12\@xxl { + position: relative; + left: 100%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .pull-12\@xs { + position: relative; + left: -100%; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .pull-12\@s { + position: relative; + left: -100%; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .pull-12\@m { + position: relative; + left: -100%; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .pull-12\@l { + position: relative; + left: -100%; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .pull-12\@xl { + position: relative; + left: -100%; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .pull-12\@xxl { + position: relative; + left: -100%; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .nopull-\@xs { + left: 0; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .nopull-\@s { + left: 0; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .nopull-\@m { + left: 0; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .nopull-\@l { + left: 0; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .nopull-\@xl { + left: 0; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .nopull-\@xxl { + left: 0; + } +} +@media only screen and (min-width: 300px) { + .sdc-isolation .nopush-\@xs { + left: 0; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .nopush-\@s { + left: 0; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .nopush-\@m { + left: 0; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .nopush-\@l { + left: 0; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .nopush-\@xl { + left: 0; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .nopush-\@xxl { + left: 0; + } +} +.sdc-isolation #bp-helper { + font-family: 'Consolas', 'Lucida Grande', sans-serif; + font-size: 0.8rem; + position: fixed; + bottom: 0; + right: 0; + display: block; + z-index: 999999; + width: auto; + padding: 1px 10px; + background: white; + opacity: 0.8; + text-align: center; +} +.sdc-isolation #bp-helper::before { + display: inline-block; + color: #222; +} +@media only screen and (min-width: 300px) { + .sdc-isolation #bp-helper::before { + content: "xs ≥ 300px"; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation #bp-helper::before { + content: "s ≥ 500px"; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation #bp-helper::before { + content: "m ≥ 740px"; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation #bp-helper::before { + content: "l ≥ 980px"; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation #bp-helper::before { + content: "xl ≥ 1300px"; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation #bp-helper::before { + content: "xxl ≥ 1600px"; + } +} +.sdc-isolation .grid__helper { + background: #eee; + text-align: left; + font-size: 0.8rem; + padding: 0.5rem; + margin-bottom: 1rem; +} +.sdc-isolation .grid--tight .grid__helper { + margin-bottom: 0.5rem; +} +.sdc-isolation .grid--spaced .grid__helper, +.sdc-isolation .grid--gutterless .grid__helper, +.sdc-isolation .grid--pixelgutter .grid__helper { + margin-bottom: 0; +} +.sdc-isolation .nav { + display: block; + padding: 0; +} +.sdc-isolation .nav--vertical { + border-left: 1px solid #999; + padding: 0.5rem 0 0.5rem 2rem; + margin: 0; +} +.sdc-isolation .nav--vertical .nav__title { + margin-bottom: 0.5rem; +} +.sdc-isolation .nav--vertical .nav__list { + list-style: none; + margin: 0; + padding: 0; +} +.sdc-isolation .nav--vertical .nav__item { + margin: 0; + padding: 0.5rem 1rem 0.5rem 2rem; + position: relative; + margin-left: -2.5rem; + border-left: 0.5rem solid transparent; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .nav--vertical .nav__link { + font-size: 1rem; + } +} +.sdc-isolation .nav--vertical .nav__item--completed::before { + z-index: 2; + content: ""; + /* background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAbCAYAAAAZMl2nAAAABGdBTUEAALGPC/xhBQAAAjtJREFUSA29l0FLW0EQx2f2NWDSQ196sFBELKFfwVMPNcmLFZV68eRFPBd6K4IexKT0IHjpqdDi0aMg5iCKUvDkqdBDQYiKIIJY0oO1wZhMd0L3+V6yz+TlrZ1DNjOzM/9f9u1uEoD/aH3Lk/EgORGUMB1/VHDeXf4u7z9ZyvXqeqMuaDqWLGTf1Ov0sdEX8UdMWJmLuc0zr869g9iL2RlC+gwEHi08eCB60j/nN04VjCepQuZGe9GZJqAvANS6BRBKIobp8uz2CSu2TjDEcScEaxCk6Jq+2h9eDbB7LyBtIVhZGgEMQLVaXKAFYfzRdArBIFL8EgWOlOe394yCdAvBUBa/NNvTT+MJa7B/rSf7/KyyUzpuzuv8KBDcr2WPMMTV+Z+i3O2jUKtt2O+Hh3TC3lhUCO7lezQuBNFLJYSAV2BZY7/mNndVzDuagOB+7oroIHiCXJkE1G+Kj/NOjn2vmYLgng2QIAglSgTxGtB6spAbVzGTENwTiQiTeWdLfvKMEgkcEaqAYgrr8DDwxmwq9h7RppTPFYhIKGgFEGu+jM4hiAHRqmkIlmoc38rO0fdE5llJfi+9ljF33+hY/uV9m1w3r9OVULXuPRISRtVrx7AQ3MQFYccETDcQLSBRYbqF0IJ0CxMFIhAkLExUiDtBOoUxAdEWxAdDOCF9qXtrpiC4o+/U3Er43/Fpig+lTuQ9zPdMA8YkBKt1BMITK7uH3xLp1Ln8eTdqGoL7hzY777yV/1NehC5sU/AXb484yamkz/AAAAAASUVORK5CYII=") no-repeat center; */ + background-size: 1rem; + position: absolute; + left: 0.5rem; + width: 1.2em; + height: 1.2em; + bottom: 0; + top: 0; + margin: auto; +} +.sdc-isolation .lt-ie9 .nav--vertical .nav__item--completed { + background: url("/s/img/check-green.png") no-repeat 0.5rem center; + background-size: 17px 13px; +} +.sdc-isolation .nav--vertical .nav__item--current { + background-color: #eff0f9; + border-left: 0.5rem #033e58 solid; +} +.sdc-isolation .nav--vertical .nav__item--current.nav__item--completed::before { + left: 0.5rem; +} +.sdc-isolation .nav--horizontal { + font-size: 0; + margin: 0; +} +.sdc-isolation .nav--horizontal .nav__item { + font-size: 1rem; + display: inline-block; + margin: 0 0 0 0.5rem; + padding: 0 0.5rem 0 0; + position: relative; + text-align: center; +} +.sdc-isolation .nav--horizontal .nav__item:not(:last-child)::after { + content: ""; + position: absolute; + height: 1em; + width: 1px; + background-color: #999; + right: -1px; + bottom: 0; + top: 0; + margin: auto; +} +.sdc-isolation .nav--horizontal .nav__item:first-child { + margin-left: 0; + padding-left: 0; +} +.sdc-isolation .nav--horizontal .nav__item:last-child { + margin-right: 0; + padding-right: 0; + border: none; +} +.sdc-isolation .nav--horizontal .nav__link { + display: inline-block; + text-decoration: none; + margin: 0; + text-align: center; +} +.sdc-isolation .nav--dark .nav__link { + color: #222; + text-decoration: underline; +} +.sdc-isolation .nav--dark .nav__link:hover { + color: #4263c2; + text-decoration: underline; +} +.sdc-isolation .nav--dark .nav__link:focus { + color: white; +} +.sdc-isolation .accordion { + display: block; + border: 1px solid #999; + border-radius: 3px; + overflow: hidden; +} +.sdc-isolation .accordion__item { + overflow: hidden; + border-bottom: 1px solid #999; +} +.sdc-isolation .accordion__item:last-of-type { + margin-bottom: -1px; +} +.sdc-isolation .accordion__item.is-closed { + border: none; +} +.sdc-isolation .accordion__head { + background: #f5f5f5; + padding: 0.5rem; + cursor: pointer; + border: none; + border-bottom: 1px solid #999; + display: block; + appearance: none; + width: 100%; + text-align: left; + line-height: 1; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .accordion__head { + padding: 1rem; + } +} +.sdc-isolation .has-js .accordion__head:focus { + transition: background 100ms ease-out; + background: #e4e8eb; + outline: none; +} +.sdc-isolation .has-js .is-closed .accordion__title::before { + content: "+"; +} +.sdc-isolation .accordion__title { + margin: 0; + display: inline-block; + vertical-align: middle; + display: flex; + align-items: center; + flex-direction: row; +} +.sdc-isolation .accordion__title::before { + font-family: monospace; + content: "-"; + font-weight: bold; + display: inline-block; + vertical-align: middle; + margin-right: 0.5rem; + font-size: 0.9rem; +} +.sdc-isolation .accordion__body { + overflow: hidden; +} +.sdc-isolation .is-closed .accordion__body { + display: none; +} +.sdc-isolation .accordion__content { + padding: 0.75rem; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .accordion__content { + padding: 1rem; + } +} +.sdc-isolation .address { + font-size: 0.8rem; + line-height: 1.5; + text-transform: uppercase; +} +.sdc-isolation .badge { + display: inline-block; + vertical-align: middle; + padding: 0 0.6rem; + font-size: 0.8rem; + font-weight: 600; + line-height: 1.8; + border-radius: 3px; + text-transform: uppercase; + color: #fff; +} +.sdc-isolation .badge--amber { + background-color: #fe781f; +} +.sdc-isolation .bar { + background: #033e58; + color: #fff; + padding: 0.5rem 0; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .bar { + padding: 0.5rem 0; + } +} +.sdc-isolation .bar__inner { + display: flex; + align-items: center; + line-height: 1.2; +} +.sdc-isolation .bar__title { + display: inline-block; + vertical-align: middle; + margin: 0; +} +.sdc-isolation .bar--hero .bar__title { + display: block; + margin: 1rem 0; +} +.sdc-isolation .bar--hero .bar__inner { + display: block; +} +.sdc-isolation .box { + padding: 1rem; + border: 1px solid #999; + border-radius: 3px; + position: relative; + display: inline-block; + max-width: 40rem; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .box { + padding: 2rem; + } +} +.sdc-isolation .breadcrumb { + font-size: 0.7rem; + display: flex; + align-items: center; + padding: 1rem 1rem; +} +.sdc-isolation .breadcrumb__item { + display: inline-block; +} +.sdc-isolation .breadcrumb__item--current { + color: #999; +} +.sdc-isolation .btn { + background-color: #0f8243; + color: #fff; + border: none; + padding: 0.75rem 2.5rem; + margin: 0 0 1rem; + font-size: 1rem; + border-radius: 3px; + display: inline-block; + text-rendering: optimizeLegibility; + text-decoration: none; + width: 100%; + transition: background-color 200ms ease-in, color 200ms ease-in; +} +.sdc-isolation .btn:hover { + text-decoration: none; + color: #fff; + background-color: #0a542b; +} +.sdc-isolation .btn:focus { + background-color: #4263c2; + outline: none; +} +.sdc-isolation .btn.btn--border { + font-weight: 600; + background: #fff; + border: 1px solid #0f8243; + color: #0f8243; + padding: 0.5rem 2rem; +} +.sdc-isolation .btn.btn--border:hover, +.sdc-isolation .btn.btn--border:focus { + background: #0f8243; + color: #fff; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn.btn--border { + border-width: 2px; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn { + width: auto; + } +} +.sdc-isolation .btn--secondary { + background-color: #033e58; + color: #fff; + border: none; + padding: 0.75rem 2.5rem; + margin: 0 0 1rem; + font-size: 1rem; + border-radius: 3px; + display: inline-block; + text-rendering: optimizeLegibility; + text-decoration: none; + width: 100%; + transition: background-color 200ms ease-in, color 200ms ease-in; +} +.sdc-isolation .btn--secondary:hover { + text-decoration: none; + color: #fff; + background-color: #011b27; +} +.sdc-isolation .btn--secondary:focus { + background-color: #4263c2; + outline: none; +} +.sdc-isolation .btn--secondary.btn--border { + font-weight: 600; + background: #fff; + border: 1px solid #033e58; + color: #033e58; + padding: 0.5rem 2rem; +} +.sdc-isolation .btn--secondary.btn--border:hover, +.sdc-isolation .btn--secondary.btn--border:focus { + background: #033e58; + color: #fff; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn--secondary.btn--border { + border-width: 2px; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn--secondary { + width: auto; + } +} +.sdc-isolation .btn--neutral { + background-color: #999; + color: #fff; + border: none; + padding: 0.75rem 2.5rem; + margin: 0 0 1rem; + font-size: 1rem; + border-radius: 3px; + display: inline-block; + text-rendering: optimizeLegibility; + text-decoration: none; + width: 100%; + transition: background-color 200ms ease-in, color 200ms ease-in; +} +.sdc-isolation .btn--neutral:hover { + text-decoration: none; + color: #fff; + background-color: gray; +} +.sdc-isolation .btn--neutral:focus { + background-color: #4263c2; + outline: none; +} +.sdc-isolation .btn--neutral.btn--border { + font-weight: 600; + background: #fff; + border: 1px solid #999; + color: #999; + padding: 0.5rem 2rem; +} +.sdc-isolation .btn--neutral.btn--border:hover, +.sdc-isolation .btn--neutral.btn--border:focus { + background: #999; + color: #fff; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn--neutral.btn--border { + border-width: 2px; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn--neutral { + width: auto; + } +} +.sdc-isolation .btn--light { + background-color: #fff; + color: transparent; + border: none; + padding: 0.75rem 2.5rem; + margin: 0 0 1rem; + font-size: 1rem; + border-radius: 3px; + display: inline-block; + text-rendering: optimizeLegibility; + text-decoration: none; + width: 100%; + transition: background-color 200ms ease-in, color 200ms ease-in; +} +.sdc-isolation .btn--light:hover { + text-decoration: none; + color: #033e58; + background-color: #e6e6e6; +} +.sdc-isolation .btn--light:focus { + background-color: #4263c2; + outline: none; +} +.sdc-isolation .btn--light.btn--border { + font-weight: 600; + background: transparent; + border: 1px solid #fff; + color: #fff; + padding: 0.5rem 2rem; +} +.sdc-isolation .btn--light.btn--border:hover, +.sdc-isolation .btn--light.btn--border:focus { + background: #fff; + color: #033e58; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn--light.btn--border { + border-width: 2px; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn--light { + width: auto; + } +} +.sdc-isolation .btn--lg { + font-weight: 600; + padding: 0.9rem 1rem; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .btn--lg { + padding: 0.9rem 5rem; + } +} +.sdc-isolation .btn--loader { + transition: color 300ms ease-out; + position: relative; +} +.sdc-isolation .btn--loader::after { + display: block; + content: ""; + width: 2rem; + height: 2rem; + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + /* background-image: url("/s/img/loader.svg"); */ + background-repeat: no-repeat; + background-position: center center; + background-size: 1.5rem; + transition: opacity 300ms ease-out 200ms; + pointer-events: none; +} +.sdc-isolation .btn--loader.is-loading { + color: transparent; +} +.sdc-isolation .btn--loader.is-loading::after { + opacity: 1; +} +.sdc-isolation .btn--link { + padding: 0.1rem; + margin: 0; + display: inline-block; + color: #4263c2; + background: transparent; + cursor: pointer; + text-decoration: underline; + width: auto; +} +.sdc-isolation .btn--link:hover { + text-decoration: underline; + color: #033e58; + background: transparent; +} +.sdc-isolation .btn--link:focus { + color: white; + background: #4263c2; +} +.sdc-isolation .btn-group { + font-size: 0; +} +.sdc-isolation .btn-group .btn { + display: inline-block; + margin-right: 18px; +} +.sdc-isolation .btn-group .btn:last-of-type { + margin-right: 0; +} +.sdc-isolation .btn-group__btn { + display: inline-block; +} +.sdc-isolation .btn--menu { + padding-right: 1.5em; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .btn--menu { + display: none; + } +} +.sdc-isolation .btn--menu::before, +.sdc-isolation .btn--menu::after { + transition: all 100ms ease-out; + content: ""; + position: absolute; + right: 0; + background-size: auto; + background-position: center; + background-repeat: no-repeat; + width: 1.1em; + height: 1.1em; +} +.sdc-isolation .btn--menu::before { + opacity: 1; + bottom: 3px; + right: 2px; + /* background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIyOTAgNTEgMTYgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9Ikdyb3VwLTIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5MC4wMDAwMDAsIDUxLjAwMDAwMCkiPg0KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiM0QTRBNEEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyLjA5NTIzODEiPjwvcmVjdD4NCiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNEE0QTRBIiB4PSIwIiB5PSI1LjIzODA5NTI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMi4wOTUyMzgxIj48L3JlY3Q+DQogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzRBNEE0QSIgeD0iMCIgeT0iMTAuNDc2MTkwNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIuMDk1MjM4MSI+PC9yZWN0Pg0KICAgIDwvZz4NCjwvc3ZnPg"); */ + background-size: auto; +} +.sdc-isolation .btn--menu::after { + opacity: 0; + transform: scaleY(0); + /* background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNXB4IiB2aWV3Qm94PSIyOTAgNDUgMjQgMjUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9Ikdyb3VwLTIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5MC4wMDAwMDAsIDQ1LjAwMDAwMCkiPg0KICAgICAgICA8ZyBpZD0iR3JvdXAtMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMDAwMDAwLCAxMi41MDAwMDApIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi41MDAwMDApIHRyYW5zbGF0ZSg0LjAwMDAwMCwgNC4wMDAwMDApIiBmaWxsPSIjNEE0QTRBIj4NCiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iNyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIuMDk1MjM4MSI+PC9yZWN0Pg0KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4LjAwMDAwMCwgOC4wNDc2MTkpIHJvdGF0ZSgtOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTguMDAwMDAwLCAtOC4wNDc2MTkpICIgeD0iMCIgeT0iNyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIuMDk1MjM4MSI+PC9yZWN0Pg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+"); */ + background-size: auto; + right: 2px; + bottom: 2px; +} +.sdc-isolation .has-nav-open .btn--menu::before { + transform: scaleY(0); + opacity: 0; +} +.sdc-isolation .has-nav-open .btn--menu::after { + transform: scaleY(1); + opacity: 1; +} +.sdc-isolation .dl { + margin: 0 0 1rem; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .dl { + margin-bottom: 0; + } +} +.sdc-isolation .dl__title { + text-transform: uppercase; + letter-spacing: 0.1em; + color: #595959; +} +.sdc-isolation .dl__data { + margin: 0 0 1rem; +} +.sdc-isolation .dl__data:last-child { + margin-bottom: 0; +} +.sdc-isolation .details { + margin: 0.7rem 0 0 -0.1rem; +} +.sdc-isolation .details__link { + display: inline-block; + vertical-align: middle; + line-height: 1; + text-decoration: underline; + padding: 0.2rem 0.5rem 0.2rem 0.2rem; +} +.sdc-isolation .details__link span { + display: inline-block; + vertical-align: middle; +} +.sdc-isolation .details__link::before { + transition: transform 300ms ease-in-out; + margin-right: 0.3rem; + speak: none; + content: ""; + /* background: url("/assets//img/icons/icons--details.svg") no-repeat center center; */ + background-size: auto; + text-align: center; + width: 1rem; + height: 1rem; + position: relative; + left: -0.1rem; + vertical-align: middle; + display: inline-block; +} +.sdc-isolation .details__link:focus { + outline: none; +} +.sdc-isolation .details__link:focus::before { + /* background: url("/assets//img/icons/icons--details-white.svg") no-repeat center center; */ +} +.sdc-isolation .is-expanded .details__link::before { + transform: rotate(90deg); +} +.sdc-isolation .no-js .details__link { + display: none; +} +.sdc-isolation .details__main { + overflow: hidden; + width: 100%; + border-radius: 3px; + opacity: 0; + transition: all 0; + max-height: 0; + margin-left: 0.5rem; +} +.sdc-isolation .no-js .details__main, +.sdc-isolation .is-expanded .details__main { + max-height: 10000em; + height: auto; + opacity: 1; + transition: opacity 300ms ease-out, max-height 300ms ease-out; +} +.sdc-isolation .details__content { + padding: 0; + width: 100%; + display: table; + table-layout: fixed; + margin-top: 1rem; + border-left: 2px solid #999; + padding-left: 1rem; + margin-left: 1px; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .details__content div { + display: table-cell; + } + .sdc-isolation .details__content div:first-of-type { + padding-left: 0.25rem; + padding-right: 0.5rem; + } + .sdc-isolation .details__content div:last-of-type { + padding-left: 1rem; + } +} +.sdc-isolation .details__content div ul { + padding-left: 1rem; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .details__content div ul { + margin-bottom: 0; + } +} +.sdc-isolation .lt-ie8 .details__content div ul { + margin-bottom: 1rem; +} +.sdc-isolation .external { + padding-right: 1.2em; + position: relative; +} +.sdc-isolation .external::after { + position: absolute; + top: 0; + bottom: 0; + right: 0; + margin: auto; + content: " "; + /* background: url("/assets//img/icons/icons--external-link.svg") no-repeat center center; */ + background-size: 1.9em; + background-color: transparent !important; + width: 1em; + height: 1em; + display: inline-block; +} +.sdc-isolation .field { + background: none; +} +.sdc-isolation .field__legend { + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.5rem; +} +.sdc-isolation .field__description { + line-height: 1.3; + display: block; +} +.sdc-isolation .field__item { + margin: 0 0.5rem 0.5rem 0; + position: relative; + width: 100%; + display: inline-block; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .field__item { + width: auto; + min-width: 20rem; + } +} +.sdc-isolation .field:not(.field--cols) .field__item:last-of-type { + margin-bottom: 0; +} +.sdc-isolation .field__other { + display: none; + clear: both; + background-color: #f5f5f5; + padding: 0 0.5rem 0.5rem; +} +.sdc-isolation .has-focus .field__other { + background-color: transparent; +} +.sdc-isolation input:checked ~ .field__other { + display: block; +} +.sdc-isolation .field--multiplechoice { + font-size: 0; +} +.sdc-isolation .field--multiplechoice .field__item { + font-size: 1rem; + background: white; + border: 1px solid #999; + border-radius: 0.2rem; + cursor: pointer; + overflow: hidden; + position: relative; + transition: background-color 200ms ease-in, color 200ms ease-in, box-shadow 200ms ease-in, border-color 200ms ease-in; +} +.sdc-isolation .field--multiplechoice .field__item:hover { + border-color: #033e58; + box-shadow: none; +} +.sdc-isolation .field--multiplechoice .field__item.is-checked { + color: #222; + border-color: #033e58; + box-shadow: 0 0 0 1px #033e58; +} +.sdc-isolation .field--multiplechoice .field__item.is-checked:hover { + border-color: #222; + background-color: #eee; + box-shadow: 0 0 0 1px #222; +} +.sdc-isolation .field--multiplechoice .field__item.has-focus { + color: #222; + border-color: #4263c2; + background-color: #f5f6ff; + box-shadow: 0 0 0 1px #4263c2; +} +.sdc-isolation .field--multiplechoice .field__item.has-focus:hover { + border-color: #4263c2; + box-shadow: 0 0 0 1px #4263c2; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .field--multiplechoice.field--cols { + display: flex; + flex-wrap: wrap; + } + .sdc-isolation .field--multiplechoice.field--cols .field__item { + width: calc(49%); + min-width: 0; + } + .sdc-isolation .field--multiplechoice.field--cols .label { + width: 100%; + } + .sdc-isolation .field--multiplechoice.field--cols:last-of-type { + margin-bottom: 0; + } +} +.sdc-isolation .fieldgroup--date .fieldgroup__title { + font-weight: 700; + display: inline-block; + width: 100%; + margin: 0 0 0.5rem; +} +.sdc-isolation .fieldgroup--date .fieldgroup__fields { + display: flex; + width: 100%; + flex-direction: row; +} +.sdc-isolation .fieldgroup--date .field { + margin: 0 0.5rem 0 0; + flex: 1 1 0; + clear: right; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .fieldgroup--date .field { + margin-right: 1rem; + } +} +.sdc-isolation .fieldgroup--date .field--day { + max-width: 6rem; +} +.sdc-isolation .fieldgroup--date .field--month { + flex: 2; + max-width: 15rem; +} +.sdc-isolation .fieldgroup--date .field--year { + margin-right: 0; + max-width: 6rem; +} +.sdc-isolation .fieldgroup--date .input { + width: 100%; +} +.sdc-isolation .has-js .field--selectionbtn .input { + width: 0; + height: 0; + opacity: 0; +} +.sdc-isolation .has-js .field--selectionbtn .label { + padding-left: 1rem; + font-size: 1rem; + height: 100%; +} +@media only screen and (min-width: 300px) and (max-width: 500px) { + .sdc-isolation .has-js .field--selectionbtn .label { + font-size: 0.8rem; + padding: 0.35rem; + padding-left: 0.5rem; + } +} +.sdc-isolation .field--selectionbtn .field__item { + font-size: 1rem; + width: calc(49.85%); + min-width: 0; + margin: 0 0.3rem 0.3rem 0; + vertical-align: top; + transition: opacity 100ms ease-out; + color: #4263c2; +} +.sdc-isolation .field--selectionbtn .field__item:nth-child(2n) { + margin-right: 0; +} +.sdc-isolation .field--selectionbtn .field__item:hover { + border-color: #033e58; + color: #033e58; +} +.sdc-isolation .field--selectionbtn .field__item:hover label { + background: transparent !important; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(20) { + transition-delay: 500ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(19) { + transition-delay: 475ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(18) { + transition-delay: 450ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(17) { + transition-delay: 425ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(16) { + transition-delay: 400ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(15) { + transition-delay: 375ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(14) { + transition-delay: 350ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(13) { + transition-delay: 325ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(12) { + transition-delay: 300ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(11) { + transition-delay: 275ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(10) { + transition-delay: 250ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(9) { + transition-delay: 225ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(8) { + transition-delay: 200ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(7) { + transition-delay: 175ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(6) { + transition-delay: 150ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(5) { + transition-delay: 125ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(4) { + transition-delay: 100ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(3) { + transition-delay: 75ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(2) { + transition-delay: 50ms; +} +.sdc-isolation .field--selectionbtn .field__item:nth-of-type(1) { + transition-delay: 25ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item { + opacity: 0; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(1) { + transition-delay: 25ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(2) { + transition-delay: 50ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(3) { + transition-delay: 75ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(4) { + transition-delay: 100ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(5) { + transition-delay: 125ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(6) { + transition-delay: 150ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(7) { + transition-delay: 175ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(8) { + transition-delay: 200ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(9) { + transition-delay: 225ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(10) { + transition-delay: 250ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(11) { + transition-delay: 275ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(12) { + transition-delay: 300ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(13) { + transition-delay: 325ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(14) { + transition-delay: 350ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(15) { + transition-delay: 375ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(16) { + transition-delay: 400ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(17) { + transition-delay: 425ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(18) { + transition-delay: 450ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(19) { + transition-delay: 475ms; +} +.sdc-isolation .is-closed .field--selectionbtn .field__item:nth-of-type(20) { + transition-delay: 500ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item { + opacity: 1; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(1) { + transition-delay: 25ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(2) { + transition-delay: 50ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(3) { + transition-delay: 75ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(4) { + transition-delay: 100ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(5) { + transition-delay: 125ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(6) { + transition-delay: 150ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(7) { + transition-delay: 175ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(8) { + transition-delay: 200ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(9) { + transition-delay: 225ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(10) { + transition-delay: 250ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(11) { + transition-delay: 275ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(12) { + transition-delay: 300ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(13) { + transition-delay: 325ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(14) { + transition-delay: 350ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(15) { + transition-delay: 375ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(16) { + transition-delay: 400ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(17) { + transition-delay: 425ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(18) { + transition-delay: 450ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(19) { + transition-delay: 475ms; +} +.sdc-isolation .is-open .field--selectionbtn .field__item:nth-of-type(20) { + transition-delay: 500ms; +} +.sdc-isolation .footer { + padding: 2rem 0; + margin-top: 2rem; + background-color: #e4e8eb; + color: #595959; +} +.sdc-isolation .footer__link { + color: #595959; +} +.sdc-isolation .footer__link:focus { + color: white; +} +.sdc-isolation .header { + display: block; + overflow: hidden; + padding: 1.284rem 0; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .header { + padding: 1.284rem 0; + } +} +.sdc-isolation .header::before { + content: ""; + display: block; + width: 100%; + height: 8px; + background-color: #033e58; + position: absolute; + top: 0; + left: 0; +} +@media only screen and (min-width: 36em) { + .sdc-isolation .header { + display: flex; + align-items: center; + } +} +.sdc-isolation .header__logo { + margin-bottom: 1rem; +} +@media only screen and (min-width: 36em) { + .sdc-isolation .header__logo { + margin-bottom: 0; + flex: 1 1 50%; + } +} +@media only screen and (min-width: 300px) and (max-width: 740px) { + .sdc-isolation .header__info { + max-width: 100%; + } +} +@media only screen and (min-width: 36em) { + .sdc-isolation .header__info { + float: right; + flex: 1 1 10rem; + margin-left: 2rem; + position: relative; + text-align: right; + } + .sdc-isolation .header__info::before { + content: ""; + display: block; + width: 100%; + height: 8px; + background-color: #a8bd3a; + position: absolute; + top: -1.3rem; + right: 0; + } +} +.sdc-isolation .highlight { + background-color: #dce5b0; + padding: 0 2px; + font-style: normal; +} +.sdc-isolation .info { + display: block; + font-size: 0.9rem; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .info { + font-size: 1rem; + } +} +.sdc-isolation .info__title { + display: inline-block; + margin: 0; + font-size: 1em; +} +.sdc-isolation .info__tel { + display: inline-block; + font-size: 1em; + line-height: 1; + margin-left: 1em; +} +.sdc-isolation .info__tel::before { + content: ""; + display: inline-block; + vertical-align: middle; + /* background: url("/assets//img/icons/icons--phone.svg") no-repeat center; */ + width: 1.5em; + height: 1.5em; + background-size: 2.5em; +} +.sdc-isolation .info__link { + text-decoration: none; + color: #222; +} +.sdc-isolation .info__link:focus { + color: white; +} +.sdc-isolation .info__list { + display: flex; + border-top: 1px solid #999; + padding-top: 0.5em; + margin: 0.1em 0 0; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .info__list { + display: inline-flex; + } +} +.sdc-isolation .info__dt, +.sdc-isolation .info__dd { + display: inline-block; + font-size: 0.7em; + margin: 0; + line-height: 1.2; + white-space: nowrap; +} +.sdc-isolation .info__dt.first, +.sdc-isolation .info__dd.first { + padding-left: 0; + margin-left: 0; +} +.sdc-isolation .info__dt.last, +.sdc-isolation .info__dd.last { + padding-right: 0; + margin-right: 0; + border-right: none; +} +.sdc-isolation .info__dt { + font-weight: 600; + margin-right: 0.2rem; +} +.sdc-isolation .info__dd { + border-right: 1px solid #999; + padding-right: 1em; + margin-right: 1em; +} +.sdc-isolation .list { + margin: 0; + padding: 0; +} +.sdc-isolation .list__item:last-child { + margin: 0; +} +.sdc-isolation .list--bare { + list-style: none; +} +.sdc-isolation .list--bullets { + margin-left: 1rem; +} +.sdc-isolation .list--boxes { + font-family: monaco, Consolas, "Lucida Console", monospace; + list-style-type: none; + padding: 0; + margin: 1rem auto; +} +.sdc-isolation .list--boxes .list__item { + border: 1px solid #ccc; + display: inline-block; + padding: 0.4rem; + text-align: center; + margin: 0.2rem; + background: rgba(255, 255, 255, 0.5); +} +.sdc-isolation .list--boxes .list__item:first-child { + margin-left: 0; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .list--boxes .list__item { + padding: 0.5rem 1rem; + margin: 0 0.5rem; + } +} +.sdc-isolation .list--errors .list__item { + color: #d0021b; +} +.sdc-isolation .logo { + display: inline-block; +} +.sdc-isolation .lt-ie9 .logo { + float: left; + display: block; + width: 220px; + height: 44px; + /* background: url("/assets//img/logo.png") no-repeat 0 0; */ +} +.sdc-isolation .lt-ie9 .logo img { + display: none; +} +.sdc-isolation .logo__img { + width: 220px; + height: auto; +} +.sdc-isolation .panel { + border-radius: 0; +} +.sdc-isolation .panel a { + color: #033e58; +} +.sdc-isolation .panel a:focus { + color: white; +} +.sdc-isolation .panel__header { + color: #fff; + margin: 0; + padding: 0.75rem 1rem; + border-radius: 0; +} +.sdc-isolation .panel__title { + margin: 0; +} +.sdc-isolation .panel__body { + padding: 1rem; +} +.sdc-isolation .panel--error { + background: #fbecec; +} +.sdc-isolation .panel--error .panel__header { + background: #d0021b; +} +.sdc-isolation .panel--simple.panel--error { + border-color: #d0021b; +} +.sdc-isolation .panel--warn { + background: #fdf6ec; +} +.sdc-isolation .panel--warn .panel__header { + background: #fe781f; +} +.sdc-isolation .panel--simple.panel--warn { + border-color: #fe781f; +} +.sdc-isolation .panel--success { + background: #edf4f0; +} +.sdc-isolation .panel--success .panel__header { + background: #0f8243; +} +.sdc-isolation .panel--simple.panel--success { + border-color: #0f8243; +} +.sdc-isolation .panel--info { + background: #eff0f9; +} +.sdc-isolation .panel--info .panel__header { + background: #033e58; +} +.sdc-isolation .panel--simple.panel--info { + border-color: #033e58; +} +.sdc-isolation .panel--simple { + border: none; + border-left: 8px solid transparent; + margin-left: -8px; + color: #222; + padding: 1rem; +} +.sdc-isolation .panel--simple .panel__header { + background: none; + padding: 0 0 1rem; +} +.sdc-isolation .panel--simple .panel__body { + background: none; + padding: 0; +} +.sdc-isolation .panel--spacious { + padding: 1rem; +} +@media only screen and (min-width: 740px) { + .sdc-isolation .panel--spacious { + padding: 2rem; + } +} +.sdc-isolation .skip { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 999999; +} +.sdc-isolation .skip__link { + display: block; + height: 1px; + width: 100%; + overflow: hidden; + position: absolute; + top: -30px; + transition: top 100ms; + color: #fff; + background: #033e58; + font-weight: 600; + font-size: 1.1rem; +} +.sdc-isolation .skip__link:focus { + padding: 1rem; + max-height: 20em; + height: auto; + top: 0; +} +.sdc-isolation .summary { + display: block; +} +.sdc-isolation .summary__title { + font-size: 1.2rem; + margin-bottom: 1rem; + font-weight: 600; +} +.sdc-isolation .summary__block { + margin: 0; + padding: 0; +} +.sdc-isolation .summary__items { + font-size: 0.9rem; + text-align: left; + border: 1px solid #999; + border-bottom: none; + margin: 0 0 1rem; + border-radius: 3px; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .summary__items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + } +} +.sdc-isolation .summary__question, +.sdc-isolation .summary__answer { + margin: 0; + width: 100%; + border: none; + text-align: left; + border-bottom: 1px solid #999; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .summary__question, + .sdc-isolation .summary__answer { + font-size: 1rem; + } +} +.sdc-isolation .lt-ie8 .summary__question, +.sdc-isolation .lt-ie8 .summary__answer { + min-height: 3rem; +} +.sdc-isolation .summary__question { + width: 100%; + border-bottom: 1px solid #999; + background-color: #f5f5f5; + display: flex; + padding: 0.6rem 0.5rem; + line-height: 1.3; +} +.sdc-isolation .summary__question div { + width: 100%; + margin: 0; +} +.sdc-isolation .summary__question--sub { + background-color: transparent; +} +.sdc-isolation .summary__answer { + display: flex; + position: relative; + flex-direction: row; + justify-content: space-between; + overflow: hidden; + width: 100%; +} +.sdc-isolation .summary__answer-text, +.sdc-isolation .summary__edit { + padding: 0.6rem 0.5rem; +} +.sdc-isolation .summary__answer-text { + align-items: center; + flex: 1 1 auto; + word-break: break-all; + font-weight: 600; +} +.sdc-isolation .summary__answer-text p:last-of-type { + margin-bottom: 0; +} +.sdc-isolation .summary__edit { + padding: 0 1rem; + font-size: 0.9rem; + border-left: 1px solid #999; + text-align: center; + display: flex; +} +@media only screen and (min-width: 500px) { + .sdc-isolation .summary__edit { + padding: 0 2rem; + } +} +.sdc-isolation .summary__edit-link { + display: block; + line-height: 1rem; + padding: 0 0.5rem; + align-self: center; +} +.sdc-isolation caption { + text-align: left; +} +.sdc-isolation .table__dense { + font-size: 81.25%; +} +.sdc-isolation .table__dense .table--header--cell { + padding: 0.5rem 0 0.25rem 1rem; +} +.sdc-isolation .table__dense .table--header--cell:nth-child(1) { + padding-left: 0; +} +.sdc-isolation .table--row { + border-bottom: 1px solid #ccc; +} +.sdc-isolation .table--header--cell { + padding: 0.5rem 0 0.5rem 1rem; + border-bottom: 2px solid #595959; +} +.sdc-isolation .table--header--cell:nth-child(1) { + padding-left: 0; +} +.sdc-isolation .table--cell__numeric { + text-align: right; +} +.sdc-isolation .table--cell { + padding: 0.5rem 0 0.5rem 1rem; +} +.sdc-isolation .table--cell:nth-child(1) { + padding-left: 0; +} +.sdc-isolation .u-blue { + color: #033e58; +} +.sdc-isolation .u-bg-blue { + background-color: #033e58; +} +.sdc-isolation .u-blue-10 { + color: #1c5169; +} +.sdc-isolation .u-bg-blue-10 { + background-color: #1c5169; +} +.sdc-isolation .u-blue-20 { + color: #356579; +} +.sdc-isolation .u-bg-blue-20 { + background-color: #356579; +} +.sdc-isolation .u-blue-30 { + color: #4f788a; +} +.sdc-isolation .u-bg-blue-30 { + background-color: #4f788a; +} +.sdc-isolation .u-blue-40 { + color: #688b9b; +} +.sdc-isolation .u-bg-blue-40 { + background-color: #688b9b; +} +.sdc-isolation .u-blue-50 { + color: #819fac; +} +.sdc-isolation .u-bg-blue-50 { + background-color: #819fac; +} +.sdc-isolation .u-blue-60 { + color: #9ab2bc; +} +.sdc-isolation .u-bg-blue-60 { + background-color: #9ab2bc; +} +.sdc-isolation .u-blue-70 { + color: #b3c5cd; +} +.sdc-isolation .u-bg-blue-70 { + background-color: #b3c5cd; +} +.sdc-isolation .u-blue-80 { + color: #cdd8de; +} +.sdc-isolation .u-bg-blue-80 { + background-color: #cdd8de; +} +.sdc-isolation .u-blue-90 { + color: #e6ecee; +} +.sdc-isolation .u-bg-blue-90 { + background-color: #e6ecee; +} +.sdc-isolation .u-blue-100 { + color: white; +} +.sdc-isolation .u-bg-blue-100 { + background-color: white; +} +.sdc-isolation .u-green { + color: #0f8243; +} +.sdc-isolation .u-bg-green { + background-color: #0f8243; +} +.sdc-isolation .u-green-10 { + color: #278f56; +} +.sdc-isolation .u-bg-green-10 { + background-color: #278f56; +} +.sdc-isolation .u-green-20 { + color: #3f9b69; +} +.sdc-isolation .u-bg-green-20 { + background-color: #3f9b69; +} +.sdc-isolation .u-green-30 { + color: #57a87b; +} +.sdc-isolation .u-bg-green-30 { + background-color: #57a87b; +} +.sdc-isolation .u-green-40 { + color: #6fb48e; +} +.sdc-isolation .u-bg-green-40 { + background-color: #6fb48e; +} +.sdc-isolation .u-green-50 { + color: #87c1a1; +} +.sdc-isolation .u-bg-green-50 { + background-color: #87c1a1; +} +.sdc-isolation .u-green-60 { + color: #9fcdb4; +} +.sdc-isolation .u-bg-green-60 { + background-color: #9fcdb4; +} +.sdc-isolation .u-green-70 { + color: #b7dac7; +} +.sdc-isolation .u-bg-green-70 { + background-color: #b7dac7; +} +.sdc-isolation .u-green-80 { + color: #cfe6d9; +} +.sdc-isolation .u-bg-green-80 { + background-color: #cfe6d9; +} +.sdc-isolation .u-green-90 { + color: #e7f3ec; +} +.sdc-isolation .u-bg-green-90 { + background-color: #e7f3ec; +} +.sdc-isolation .u-green-100 { + color: white; +} +.sdc-isolation .u-bg-green-100 { + background-color: white; +} +.sdc-isolation .u-d-no { + display: none; +} +.sdc-isolation .u-cf::before, +.sdc-isolation .u-cf::after { + content: " "; + /* 1 */ + display: table; + /* 2 */ +} +.sdc-isolation .u-cf::after { + clear: both; +} +.sdc-isolation .u-cf { + *zoom: 1; +} +.sdc-isolation .u-fr { + float: right; +} +.sdc-isolation .u-f-no { + float: none; +} +.sdc-isolation .u-fr { + float: right; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-fr\@xs { + float: right; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-fr\@s { + float: right; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-fr\@m { + float: right; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-fr\@l { + float: right; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-fr\@xl { + float: right; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-fr\@xxl { + float: right; + } +} +.sdc-isolation .u-mt-no { + margin-top: 0 !important; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mt-no\@xs { + margin-top: 0 !important; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mt-no\@s { + margin-top: 0 !important; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mt-no\@m { + margin-top: 0 !important; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mt-no\@l { + margin-top: 0 !important; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mt-no\@xl { + margin-top: 0 !important; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mt-no\@xxl { + margin-top: 0 !important; + } +} +.sdc-isolation .u-mr-no { + margin-right: 0 !important; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mr-no\@xs { + margin-right: 0 !important; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mr-no\@s { + margin-right: 0 !important; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mr-no\@m { + margin-right: 0 !important; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mr-no\@l { + margin-right: 0 !important; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mr-no\@xl { + margin-right: 0 !important; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mr-no\@xxl { + margin-right: 0 !important; + } +} +.sdc-isolation .u-mb-no { + margin-bottom: 0 !important; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mb-no\@xs { + margin-bottom: 0 !important; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mb-no\@s { + margin-bottom: 0 !important; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mb-no\@m { + margin-bottom: 0 !important; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mb-no\@l { + margin-bottom: 0 !important; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mb-no\@xl { + margin-bottom: 0 !important; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mb-no\@xxl { + margin-bottom: 0 !important; + } +} +.sdc-isolation .u-ml-no { + margin-left: 0 !important; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-ml-no\@xs { + margin-left: 0 !important; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-ml-no\@s { + margin-left: 0 !important; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-ml-no\@m { + margin-left: 0 !important; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-ml-no\@l { + margin-left: 0 !important; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-ml-no\@xl { + margin-left: 0 !important; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-ml-no\@xxl { + margin-left: 0 !important; + } +} +.sdc-isolation .u-m-no { + margin: 0 !important; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-m-no\@xs { + margin: 0 !important; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-m-no\@s { + margin: 0 !important; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-m-no\@m { + margin: 0 !important; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-m-no\@l { + margin: 0 !important; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-m-no\@xl { + margin: 0 !important; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-m-no\@xxl { + margin: 0 !important; + } +} +.sdc-isolation .u-mt-xs { + margin-top: 0.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mt-xs\@xs { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mt-xs\@s { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mt-xs\@m { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mt-xs\@l { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mt-xs\@xl { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mt-xs\@xxl { + margin-top: 0.5rem; + } +} +.sdc-isolation .u-mr-xs { + margin-right: 0.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mr-xs\@xs { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mr-xs\@s { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mr-xs\@m { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mr-xs\@l { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mr-xs\@xl { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mr-xs\@xxl { + margin-right: 0.5rem; + } +} +.sdc-isolation .u-mb-xs { + margin-bottom: 0.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mb-xs\@xs { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mb-xs\@s { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mb-xs\@m { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mb-xs\@l { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mb-xs\@xl { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mb-xs\@xxl { + margin-bottom: 0.5rem; + } +} +.sdc-isolation .u-ml-xs { + margin-left: 0.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-ml-xs\@xs { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-ml-xs\@s { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-ml-xs\@m { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-ml-xs\@l { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-ml-xs\@xl { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-ml-xs\@xxl { + margin-left: 0.5rem; + } +} +.sdc-isolation .u-m-xs { + margin: 0.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-m-xs\@xs { + margin: 0.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-m-xs\@s { + margin: 0.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-m-xs\@m { + margin: 0.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-m-xs\@l { + margin: 0.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-m-xs\@xl { + margin: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-m-xs\@xxl { + margin: 0.5rem; + } +} +.sdc-isolation .u-mt-s { + margin-top: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mt-s\@xs { + margin-top: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mt-s\@s { + margin-top: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mt-s\@m { + margin-top: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mt-s\@l { + margin-top: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mt-s\@xl { + margin-top: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mt-s\@xxl { + margin-top: 1rem; + } +} +.sdc-isolation .u-mr-s { + margin-right: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mr-s\@xs { + margin-right: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mr-s\@s { + margin-right: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mr-s\@m { + margin-right: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mr-s\@l { + margin-right: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mr-s\@xl { + margin-right: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mr-s\@xxl { + margin-right: 1rem; + } +} +.sdc-isolation .u-mb-s { + margin-bottom: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mb-s\@xs { + margin-bottom: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mb-s\@s { + margin-bottom: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mb-s\@m { + margin-bottom: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mb-s\@l { + margin-bottom: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mb-s\@xl { + margin-bottom: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mb-s\@xxl { + margin-bottom: 1rem; + } +} +.sdc-isolation .u-ml-s { + margin-left: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-ml-s\@xs { + margin-left: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-ml-s\@s { + margin-left: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-ml-s\@m { + margin-left: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-ml-s\@l { + margin-left: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-ml-s\@xl { + margin-left: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-ml-s\@xxl { + margin-left: 1rem; + } +} +.sdc-isolation .u-m-s { + margin: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-m-s\@xs { + margin: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-m-s\@s { + margin: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-m-s\@m { + margin: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-m-s\@l { + margin: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-m-s\@xl { + margin: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-m-s\@xxl { + margin: 1rem; + } +} +.sdc-isolation .u-mt-m { + margin-top: 1.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mt-m\@xs { + margin-top: 1.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mt-m\@s { + margin-top: 1.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mt-m\@m { + margin-top: 1.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mt-m\@l { + margin-top: 1.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mt-m\@xl { + margin-top: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mt-m\@xxl { + margin-top: 1.5rem; + } +} +.sdc-isolation .u-mr-m { + margin-right: 1.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mr-m\@xs { + margin-right: 1.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mr-m\@s { + margin-right: 1.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mr-m\@m { + margin-right: 1.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mr-m\@l { + margin-right: 1.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mr-m\@xl { + margin-right: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mr-m\@xxl { + margin-right: 1.5rem; + } +} +.sdc-isolation .u-mb-m { + margin-bottom: 1.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mb-m\@xs { + margin-bottom: 1.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mb-m\@s { + margin-bottom: 1.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mb-m\@m { + margin-bottom: 1.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mb-m\@l { + margin-bottom: 1.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mb-m\@xl { + margin-bottom: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mb-m\@xxl { + margin-bottom: 1.5rem; + } +} +.sdc-isolation .u-ml-m { + margin-left: 1.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-ml-m\@xs { + margin-left: 1.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-ml-m\@s { + margin-left: 1.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-ml-m\@m { + margin-left: 1.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-ml-m\@l { + margin-left: 1.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-ml-m\@xl { + margin-left: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-ml-m\@xxl { + margin-left: 1.5rem; + } +} +.sdc-isolation .u-m-m { + margin: 1.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-m-m\@xs { + margin: 1.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-m-m\@s { + margin: 1.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-m-m\@m { + margin: 1.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-m-m\@l { + margin: 1.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-m-m\@xl { + margin: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-m-m\@xxl { + margin: 1.5rem; + } +} +.sdc-isolation .u-mt-l { + margin-top: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mt-l\@xs { + margin-top: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mt-l\@s { + margin-top: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mt-l\@m { + margin-top: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mt-l\@l { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mt-l\@xl { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mt-l\@xxl { + margin-top: 2rem; + } +} +.sdc-isolation .u-mr-l { + margin-right: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mr-l\@xs { + margin-right: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mr-l\@s { + margin-right: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mr-l\@m { + margin-right: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mr-l\@l { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mr-l\@xl { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mr-l\@xxl { + margin-right: 2rem; + } +} +.sdc-isolation .u-mb-l { + margin-bottom: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mb-l\@xs { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mb-l\@s { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mb-l\@m { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mb-l\@l { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mb-l\@xl { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mb-l\@xxl { + margin-bottom: 2rem; + } +} +.sdc-isolation .u-ml-l { + margin-left: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-ml-l\@xs { + margin-left: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-ml-l\@s { + margin-left: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-ml-l\@m { + margin-left: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-ml-l\@l { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-ml-l\@xl { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-ml-l\@xxl { + margin-left: 2rem; + } +} +.sdc-isolation .u-m-l { + margin: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-m-l\@xs { + margin: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-m-l\@s { + margin: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-m-l\@m { + margin: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-m-l\@l { + margin: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-m-l\@xl { + margin: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-m-l\@xxl { + margin: 2rem; + } +} +.sdc-isolation .u-mt-xl { + margin-top: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mt-xl\@xs { + margin-top: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mt-xl\@s { + margin-top: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mt-xl\@m { + margin-top: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mt-xl\@l { + margin-top: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mt-xl\@xl { + margin-top: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mt-xl\@xxl { + margin-top: 3rem; + } +} +.sdc-isolation .u-mr-xl { + margin-right: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mr-xl\@xs { + margin-right: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mr-xl\@s { + margin-right: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mr-xl\@m { + margin-right: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mr-xl\@l { + margin-right: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mr-xl\@xl { + margin-right: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mr-xl\@xxl { + margin-right: 3rem; + } +} +.sdc-isolation .u-mb-xl { + margin-bottom: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-mb-xl\@xs { + margin-bottom: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-mb-xl\@s { + margin-bottom: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-mb-xl\@m { + margin-bottom: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-mb-xl\@l { + margin-bottom: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-mb-xl\@xl { + margin-bottom: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-mb-xl\@xxl { + margin-bottom: 3rem; + } +} +.sdc-isolation .u-ml-xl { + margin-left: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-ml-xl\@xs { + margin-left: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-ml-xl\@s { + margin-left: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-ml-xl\@m { + margin-left: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-ml-xl\@l { + margin-left: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-ml-xl\@xl { + margin-left: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-ml-xl\@xxl { + margin-left: 3rem; + } +} +.sdc-isolation .u-m-xl { + margin: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-m-xl\@xs { + margin: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-m-xl\@s { + margin: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-m-xl\@m { + margin: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-m-xl\@l { + margin: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-m-xl\@xl { + margin: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-m-xl\@xxl { + margin: 3rem; + } +} +.sdc-isolation .u-pt-s { + padding-top: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pt-s\@xs { + padding-top: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pt-s\@s { + padding-top: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pt-s\@m { + padding-top: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pt-s\@l { + padding-top: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pt-s\@xl { + padding-top: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pt-s\@xxl { + padding-top: 1rem; + } +} +.sdc-isolation .u-pr-s { + padding-right: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pr-s\@xs { + padding-right: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pr-s\@s { + padding-right: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pr-s\@m { + padding-right: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pr-s\@l { + padding-right: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pr-s\@xl { + padding-right: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pr-s\@xxl { + padding-right: 1rem; + } +} +.sdc-isolation .u-pb-s { + padding-bottom: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pb-s\@xs { + padding-bottom: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pb-s\@s { + padding-bottom: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pb-s\@m { + padding-bottom: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pb-s\@l { + padding-bottom: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pb-s\@xl { + padding-bottom: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pb-s\@xxl { + padding-bottom: 1rem; + } +} +.sdc-isolation .u-pl-s { + padding-left: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pl-s\@xs { + padding-left: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pl-s\@s { + padding-left: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pl-s\@m { + padding-left: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pl-s\@l { + padding-left: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pl-s\@xl { + padding-left: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pl-s\@xxl { + padding-left: 1rem; + } +} +.sdc-isolation .u-p-s { + padding: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-p-s\@xs { + padding: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-p-s\@s { + padding: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-p-s\@m { + padding: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-p-s\@l { + padding: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-p-s\@xl { + padding: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-p-s\@xxl { + padding: 1rem; + } +} +.sdc-isolation .u-pt-m { + padding-top: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pt-m\@xs { + padding-top: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pt-m\@s { + padding-top: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pt-m\@m { + padding-top: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pt-m\@l { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pt-m\@xl { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pt-m\@xxl { + padding-top: 2rem; + } +} +.sdc-isolation .u-pr-m { + padding-right: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pr-m\@xs { + padding-right: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pr-m\@s { + padding-right: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pr-m\@m { + padding-right: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pr-m\@l { + padding-right: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pr-m\@xl { + padding-right: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pr-m\@xxl { + padding-right: 2rem; + } +} +.sdc-isolation .u-pb-m { + padding-bottom: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pb-m\@xs { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pb-m\@s { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pb-m\@m { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pb-m\@l { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pb-m\@xl { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pb-m\@xxl { + padding-bottom: 2rem; + } +} +.sdc-isolation .u-pl-m { + padding-left: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pl-m\@xs { + padding-left: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pl-m\@s { + padding-left: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pl-m\@m { + padding-left: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pl-m\@l { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pl-m\@xl { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pl-m\@xxl { + padding-left: 2rem; + } +} +.sdc-isolation .u-p-m { + padding: 2rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-p-m\@xs { + padding: 2rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-p-m\@s { + padding: 2rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-p-m\@m { + padding: 2rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-p-m\@l { + padding: 2rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-p-m\@xl { + padding: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-p-m\@xxl { + padding: 2rem; + } +} +.sdc-isolation .u-pt-l { + padding-top: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pt-l\@xs { + padding-top: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pt-l\@s { + padding-top: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pt-l\@m { + padding-top: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pt-l\@l { + padding-top: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pt-l\@xl { + padding-top: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pt-l\@xxl { + padding-top: 3rem; + } +} +.sdc-isolation .u-pr-l { + padding-right: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pr-l\@xs { + padding-right: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pr-l\@s { + padding-right: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pr-l\@m { + padding-right: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pr-l\@l { + padding-right: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pr-l\@xl { + padding-right: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pr-l\@xxl { + padding-right: 3rem; + } +} +.sdc-isolation .u-pb-l { + padding-bottom: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pb-l\@xs { + padding-bottom: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pb-l\@s { + padding-bottom: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pb-l\@m { + padding-bottom: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pb-l\@l { + padding-bottom: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pb-l\@xl { + padding-bottom: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pb-l\@xxl { + padding-bottom: 3rem; + } +} +.sdc-isolation .u-pl-l { + padding-left: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-pl-l\@xs { + padding-left: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-pl-l\@s { + padding-left: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-pl-l\@m { + padding-left: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-pl-l\@l { + padding-left: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-pl-l\@xl { + padding-left: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-pl-l\@xxl { + padding-left: 3rem; + } +} +.sdc-isolation .u-p-l { + padding: 3rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-p-l\@xs { + padding: 3rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-p-l\@s { + padding: 3rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-p-l\@m { + padding: 3rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-p-l\@l { + padding: 3rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-p-l\@xl { + padding: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-p-l\@xxl { + padding: 3rem; + } +} +.sdc-isolation .u-fs-xxs { + font-size: 0.7rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-fs-xxs\@xs { + font-size: 0.7rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-fs-xxs\@s { + font-size: 0.7rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-fs-xxs\@m { + font-size: 0.7rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-fs-xxs\@l { + font-size: 0.7rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-fs-xxs\@xl { + font-size: 0.7rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-fs-xxs\@xxl { + font-size: 0.7rem; + } +} +.sdc-isolation .u-fs-xs { + font-size: 0.8rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-fs-xs\@xs { + font-size: 0.8rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-fs-xs\@s { + font-size: 0.8rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-fs-xs\@m { + font-size: 0.8rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-fs-xs\@l { + font-size: 0.8rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-fs-xs\@xl { + font-size: 0.8rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-fs-xs\@xxl { + font-size: 0.8rem; + } +} +.sdc-isolation .u-fs-s { + font-size: 0.9rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-fs-s\@xs { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-fs-s\@s { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-fs-s\@m { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-fs-s\@l { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-fs-s\@xl { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-fs-s\@xxl { + font-size: 0.9rem; + } +} +.sdc-isolation .u-fs-m { + font-size: 1rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-fs-m\@xs { + font-size: 1rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-fs-m\@s { + font-size: 1rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-fs-m\@m { + font-size: 1rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-fs-m\@l { + font-size: 1rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-fs-m\@xl { + font-size: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-fs-m\@xxl { + font-size: 1rem; + } +} +.sdc-isolation .u-fs-l { + font-size: 1.5rem; +} +@media only screen and (min-width: 300px) { + .sdc-isolation .u-fs-l\@xs { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 500px) { + .sdc-isolation .u-fs-l\@s { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 740px) { + .sdc-isolation .u-fs-l\@m { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 980px) { + .sdc-isolation .u-fs-l\@l { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 1300px) { + .sdc-isolation .u-fs-l\@xl { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .sdc-isolation .u-fs-l\@xxl { + font-size: 1.5rem; + } +} +.sdc-isolation .u-fw-b { + font-weight: 700; +} +.sdc-isolation .u-fw-n { + font-weight: normal; +} +.sdc-isolation .u-fs-i { + font-style: italic; +} +.sdc-isolation .u-tt-u { + text-transform: uppercase; +} +.sdc-isolation .u-lighter { + color: #595959; +} +.sdc-isolation .u-dib { + display: inline-block; +} +.sdc-isolation .u-db { + display: block; +} +.sdc-isolation .no-js .u-no-js-hide { + display: none; +} +.sdc-isolation .u-hidden { + display: none !important; + visibility: hidden; +} +.sdc-isolation .u-visuallyhidden, +.sdc-isolation .u-vh { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.sdc-isolation .u-visuallyhidden.u-focusable:active, +.sdc-isolation .u-vh.u-focusable:active, +.sdc-isolation .u-visuallyhidden.u-focusable:focus, +.sdc-isolation .u-vh.u-focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} +.sdc-isolation .u-invisible { + visibility: hidden; +} +.sdc-isolation .u-ir { + background-color: transparent; + border: 0; + overflow: hidden; + *text-indent: -9999px; +} +.sdc-isolation .u-ir::before { + content: ""; + display: block; + width: 0; + height: 150%; +} diff --git a/src/resources/img/icons--chevron-down.svg b/src/resources/img/icons--chevron-down.svg new file mode 100644 index 0000000..3957e9a --- /dev/null +++ b/src/resources/img/icons--chevron-down.svg @@ -0,0 +1 @@ +Rectangle 1 \ No newline at end of file diff --git a/src/views/Match.js b/src/views/Match.js index c6a0416..468d039 100644 --- a/src/views/Match.js +++ b/src/views/Match.js @@ -5,8 +5,8 @@ import { connect } from 'react-redux'; import { matchSearch, setQuery } from '../actions/ApiActions'; import { SET_MATCH_QUERY } from '../constants/ApiConstants'; import ErrorModal from '../components/ErrorModal'; -import SearchRefForm from '../components/SearchRefForm'; -import { validateRefSearch } from '../utils/validation'; +import MatchForm from '../components/MatchForm'; +import { validateUBRNSearch } from '../utils/validation'; class Match extends React.Component { constructor(props) { @@ -78,13 +78,13 @@ class Match extends React.Component { />
- (this.child = ch)} currentlySending={this.props.data.currentlySending} onSubmit={this.onSubmit} onChange={this.changeQuery} value={this.props.data.query} - valid={validateRefSearch(this.props.data.query.length)} + valid={validateUBRNSearch(this.props.data.query.length)} /> Date: Mon, 23 Oct 2017 13:54:52 +0100 Subject: [PATCH 03/26] Add inputs for Match search - Add bands to utils/convertBands.js --- src/components/MatchForm.js | 122 ++++++++++++------------------------ src/utils/convertBands.js | 49 +++++++++++++++ src/views/Match.js | 27 +++++--- 3 files changed, 107 insertions(+), 91 deletions(-) create mode 100644 src/utils/convertBands.js diff --git a/src/components/MatchForm.js b/src/components/MatchForm.js index 276206c..88740bc 100644 --- a/src/components/MatchForm.js +++ b/src/components/MatchForm.js @@ -1,94 +1,52 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Button } from 'registers-react-library'; +import { employmentBands, legalStatusBands, turnoverBands, tradingStatusBands } from '../utils/convertBands'; import '../resources/css/sdc-isolation.css'; +const TextInput = ({ id, label, onChange, autoFocus }) => { + return ( +
+ + +
+ ); +}; + +TextInput.defaultProps = { + autoFocus: false, +}; + +const SelectInput = ({ id, label, bands, onChange }) => { + return ( +
+ + +
+ ); +}; + class MatchForm extends React.Component { render() { return ( -
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
+
+
+
+
+
+
+
+
+
+
+
+ ); } } diff --git a/src/utils/convertBands.js b/src/utils/convertBands.js new file mode 100644 index 0000000..372f1df --- /dev/null +++ b/src/utils/convertBands.js @@ -0,0 +1,49 @@ +export const employmentBands = { + A: '0', + B: '1', + C: '2-4', + D: '5-9', + E: '10-19', + F: '20-24', + G: '25-49', + H: '50-74', + I: '75-99', + J: '100-149', + K: '150-199', + L: '200-249', + M: '250-299', + N: '300-499', + O: '500+', +}; + +export const legalStatusBands = { + 1: 'Company', + 2: 'Sole Proprietor', + 3: 'Partnership', + 4: 'Public Corporation', + 5: 'Central Government', + 6: 'Local Authority', + 7: 'Non-Profit Organisation', + 8: 'Charity', +}; + + +export const tradingStatusBands = { + A: 'Active', + C: 'Closed', + D: 'Dormant', + I: 'Insolvent', +}; + + +export const turnoverBands = { + A: '0-99', + B: '100-249', + C: '250-499', + D: '500-999', + E: '1,000-1,999', + F: '2,000-4,999', + G: '5,000-9,999', + H: '10,000-49,999', + I: '50,000+', +}; diff --git a/src/views/Match.js b/src/views/Match.js index 468d039..8be410e 100644 --- a/src/views/Match.js +++ b/src/views/Match.js @@ -14,6 +14,7 @@ class Match extends React.Component { this.state = { show: false, errorMessage: '', + formValues: {}, results: [], }; this.changeQuery = this.changeQuery.bind(this); @@ -35,16 +36,15 @@ class Match extends React.Component { this.setState({ results: nextProps.data.results }); } } - componentWillUpdate() { - if (!this.state.show) { - this.child.myInput.focus(); - } - } + // componentWillUpdate() { + // if (!this.state.show) { + // this.child.myInput.focus(); + // } + // } onSubmit(e) { e.preventDefault(); - const query = this.props.data.query; - if (query.length > 5 && query.length < 13) { - this.props.dispatch(matchSearch(query.toUpperCase())); + if (this.state.formValues !== {}) { + this.props.dispatch(matchSearch(this.state.formValues)); } else { // Possibly swap this action with a redux way of doing it? this.props.data.results = 0; @@ -59,9 +59,18 @@ class Match extends React.Component { this.setState({ show: false, errorMessage: '' }); } changeQuery(evt) { + // if setting to empty, delete + const formValues = this.state.formValues; + if (evt.target.value === '') { + delete formValues[evt.target.id]; + } else { + formValues[evt.target.id] = evt.target.value; + } + this.setState({ formValues }); + //console.log(formValues); // Store the query in Redux store, so we can access it again if a user // presses 'back to search' on the Enterprise View page. - this.props.dispatch(setQuery(SET_MATCH_QUERY, evt.target.value)); + // this.props.dispatch(setQuery(SET_MATCH_QUERY, evt.target.value)); } render() { const items = [ From a032270c9778a34d8386ec7500603e5521096542 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Mon, 23 Oct 2017 14:54:18 +0100 Subject: [PATCH 04/26] Add code for working Match search - Uses all inputs --- src/actions/ApiActions.js | 11 +++++-- src/components/MatchForm.js | 37 +++++++++++++++------- src/config/api-urls.js | 1 + src/config/form-query.js | 8 +++++ src/constants/ApiConstants.js | 1 + src/reducers/apiSearch.js | 3 +- src/utils/apiSearch.js | 4 +-- src/utils/formQuery.js | 10 ++++++ src/views/Match.js | 59 +++++++++++++++++++++++++++++++++++ 9 files changed, 118 insertions(+), 16 deletions(-) create mode 100644 src/config/form-query.js create mode 100644 src/utils/formQuery.js diff --git a/src/actions/ApiActions.js b/src/actions/ApiActions.js index e568421..c5ad26e 100644 --- a/src/actions/ApiActions.js +++ b/src/actions/ApiActions.js @@ -1,5 +1,6 @@ -import { ADD_MOST_RECENT_ERROR, REMOVE_LAST_ERROR, SET_UBRN_ERROR_MESSAGE, SENDING_UBRN_REQUEST, SET_UBRN_RESULTS, SET_UBRN_QUERY, SET_UBRN_HEADERS, SET_RANGE_HEADERS, SET_RANGE_ERROR_MESSAGE, SENDING_RANGE_REQUEST, SET_RANGE_RESULTS, SET_RANGE_QUERY, SET_PERIOD, SET_MATCH_RESULTS, SET_MATCH_HEADERS, SENDING_MATCH_REQUEST, SET_MATCH_QUERY, SET_MATCH_ERROR_MESSAGE } from '../constants/ApiConstants'; +import { SET_MATCH_FORMATTED_QUERY, ADD_MOST_RECENT_ERROR, REMOVE_LAST_ERROR, SET_UBRN_ERROR_MESSAGE, SENDING_UBRN_REQUEST, SET_UBRN_RESULTS, SET_UBRN_QUERY, SET_UBRN_HEADERS, SET_RANGE_HEADERS, SET_RANGE_ERROR_MESSAGE, SENDING_RANGE_REQUEST, SET_RANGE_RESULTS, SET_RANGE_QUERY, SET_PERIOD, SET_MATCH_RESULTS, SET_MATCH_HEADERS, SENDING_MATCH_REQUEST, SET_MATCH_QUERY, SET_MATCH_ERROR_MESSAGE } from '../constants/ApiConstants'; import apiSearch from '../utils/apiSearch'; +import { formMatchQuery } from '../utils/formQuery'; import periods from '../config/periods'; /** @@ -15,7 +16,9 @@ export function matchSearch(query) { dispatch(sendingRequest(SENDING_MATCH_REQUEST, true)); dispatch(setResults(SET_MATCH_RESULTS, { results: [] })); dispatch(setQuery(SET_MATCH_QUERY, query)); - apiSearch.match(query, (success, data) => { + const formattedQuery = formMatchQuery(query); + dispatch(setFormattedQuery(SET_MATCH_FORMATTED_QUERY, formattedQuery)); + apiSearch.match(formattedQuery, (success, data) => { dispatch(sendingRequest(SENDING_MATCH_REQUEST, false)); if (success) { dispatch(setResults(SET_MATCH_RESULTS, { @@ -109,6 +112,10 @@ export function setQuery(type, query) { return { type, query }; } +export function setFormattedQuery(type, query) { + return { type, query }; +} + export function setHeaders(type, newState) { return { type, newState }; } diff --git a/src/components/MatchForm.js b/src/components/MatchForm.js index 88740bc..38cd8c4 100644 --- a/src/components/MatchForm.js +++ b/src/components/MatchForm.js @@ -18,6 +18,13 @@ TextInput.defaultProps = { autoFocus: false, }; +TextInput.propTypes = { + id: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + autoFocus: PropTypes.bool.isRequired, +}; + const SelectInput = ({ id, label, bands, onChange }) => { return (
@@ -25,26 +32,34 @@ const SelectInput = ({ id, label, bands, onChange }) => {
); }; +SelectInput.propTypes = { + id: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + bands: PropTypes.object.isRequired, +}; + class MatchForm extends React.Component { + // For the id of each input, we use the same name as the business-index-api input render() { return (
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
From c0f1c01bf5032316d7227a5e93358e8b000b6bb2 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Tue, 24 Oct 2017 09:28:39 +0100 Subject: [PATCH 05/26] Fix reload of Match data - When going from match -> Home or another page, the data will be reloaded into the search inputs when you go back - Turn off eslint rule --- .eslintrc.json | 3 ++- src/components/MatchForm.js | 28 +++++++++++++++------------- src/views/Match.js | 16 ++++++++++++++-- 3 files changed, 31 insertions(+), 16 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 41fddb9..ca5fa0a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -22,7 +22,8 @@ "react/forbid-prop-types": "off", "arrow-body-style": "off", "no-return-assign": "off", - "arrow-parens": "off" + "arrow-parens": "off", + "react/no-did-mount-set-state": "off" }, "env": { "browser": true diff --git a/src/components/MatchForm.js b/src/components/MatchForm.js index 38cd8c4..8b15d58 100644 --- a/src/components/MatchForm.js +++ b/src/components/MatchForm.js @@ -4,12 +4,12 @@ import { Button } from 'registers-react-library'; import { employmentBands, legalStatusBands, turnoverBands, tradingStatusBands } from '../utils/convertBands'; import '../resources/css/sdc-isolation.css'; -const TextInput = ({ id, label, onChange, autoFocus }) => { +const TextInput = ({ id, label, onChange, autoFocus, value }) => { return (
- +
); }; @@ -50,17 +50,19 @@ class MatchForm extends React.Component { render() { return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+

- ); -}; - -TextInput.defaultProps = { - autoFocus: false, -}; - -TextInput.propTypes = { - id: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - autoFocus: PropTypes.bool.isRequired, -}; - -const SelectInput = ({ id, label, bands, onChange, value }) => { - if (value === undefined) { - value = ''; - } - return ( -
- - -
- ); -}; - -SelectInput.propTypes = { - id: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - bands: PropTypes.object.isRequired, - value: PropTypes.string.isRequired, -}; +import TextInput from './TextInput'; +import SelectInput from './SelectInput'; class MatchForm extends React.Component { // For the id of each input, we use the same name as the business-index-api input @@ -85,11 +41,11 @@ MatchForm.propTypes = { currentlySending: PropTypes.bool.isRequired, onSubmit: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, - onFilterChange: PropTypes.func.isRequired, + onClear: PropTypes.func.isRequired, + onChangeFilter: PropTypes.func.isRequired, filter: PropTypes.bool.isRequired, showFilter: PropTypes.bool.isRequired, - // valid: PropTypes.string.isRequired, - // value: PropTypes.string.isRequired, + initialValues: PropTypes.object.isRequired, }; export default MatchForm; diff --git a/src/components/RangeForm.js b/src/components/RangeForm.js new file mode 100644 index 0000000..ce7b90f --- /dev/null +++ b/src/components/RangeForm.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Button } from 'registers-react-library'; +import { employmentBands, legalStatusBands, turnoverBands, tradingStatusBands } from '../utils/convertBands'; + +class RangeForm extends React.Component { + // For the id of each input, we use the same name as the business-index-api input + render() { + return ( +
+
+
+
+
+
+
+
+
+
+
+ diff --git a/src/views/UBRNLookup.js b/src/views/UBRNLookup.js index 5989a4a..107e09e 100644 --- a/src/views/UBRNLookup.js +++ b/src/views/UBRNLookup.js @@ -48,7 +48,7 @@ class UBRNLookup extends React.Component { onSubmit(e) { e.preventDefault(); const query = this.props.data.query; - if (query.length <= UBRN.max && query.length >= UBRN.min) { + if (validateUBRNSearch(this.props.data.query) === 'success') { this.props.dispatch(ubrnSearch(query.toUpperCase())); } else { // Possibly swap this action with a redux way of doing it? @@ -78,7 +78,7 @@ class UBRNLookup extends React.Component {
From 70a3e2dd96236e3bcc5ca244bcf32c0fc0d2b349 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Tue, 24 Oct 2017 13:27:01 +0100 Subject: [PATCH 14/26] Fix naming of SearchRefForm -> UBRNForm --- src/components/{SearchRefForm.js => UBRNForm.js} | 6 +++--- src/views/UBRNLookup.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename src/components/{SearchRefForm.js => UBRNForm.js} (92%) diff --git a/src/components/SearchRefForm.js b/src/components/UBRNForm.js similarity index 92% rename from src/components/SearchRefForm.js rename to src/components/UBRNForm.js index 4252e87..26d82e8 100644 --- a/src/components/SearchRefForm.js +++ b/src/components/UBRNForm.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Loader from 'halogen/PulseLoader'; -class SearchRefForm extends React.Component { +class UBRNForm extends React.Component { render() { const spinner = (); const icon = (); @@ -19,7 +19,7 @@ class SearchRefForm extends React.Component { } } -SearchRefForm.propTypes = { +UBRNForm.propTypes = { currentlySending: PropTypes.bool.isRequired, onSubmit: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, @@ -27,4 +27,4 @@ SearchRefForm.propTypes = { value: PropTypes.string.isRequired, }; -export default SearchRefForm; +export default UBRNForm; diff --git a/src/views/UBRNLookup.js b/src/views/UBRNLookup.js index 107e09e..2ceb7f7 100644 --- a/src/views/UBRNLookup.js +++ b/src/views/UBRNLookup.js @@ -7,7 +7,7 @@ import 'react-table/react-table.css'; import { ubrnSearch, setQuery } from '../actions/ApiActions'; import { SET_UBRN_QUERY } from '../constants/ApiConstants'; import ErrorModal from '../components/ErrorModal'; -import SearchRefForm from '../components/SearchRefForm'; +import UBRNForm from '../components/UBRNForm'; import { validateUBRNSearch } from '../utils/validation'; import config from '../config/validation'; @@ -83,7 +83,7 @@ class UBRNLookup extends React.Component { />
- (this.child = ch)} currentlySending={this.props.data.currentlySending} onSubmit={this.onSubmit} From df74aeafc9280a6fd3a581f1c7da2b35aee952f1 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Tue, 24 Oct 2017 13:41:46 +0100 Subject: [PATCH 15/26] Use CheckBoxInput component in Match --- src/components/CheckBoxInput.js | 22 ++++++++++++++++++++++ src/components/MatchForm.js | 19 +------------------ 2 files changed, 23 insertions(+), 18 deletions(-) create mode 100644 src/components/CheckBoxInput.js diff --git a/src/components/CheckBoxInput.js b/src/components/CheckBoxInput.js new file mode 100644 index 0000000..21c6189 --- /dev/null +++ b/src/components/CheckBoxInput.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const CheckBoxInput = ({ id, label, onChangeFilter, value }) => { + return ( +
+
+ + +
+
+ ); +}; + +CheckBoxInput.propTypes = { + id: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + onChangeFilter: PropTypes.func.isRequired, + value: PropTypes.string.isRequired, +}; + +export default CheckBoxInput; diff --git a/src/components/MatchForm.js b/src/components/MatchForm.js index d76de6a..68e03cf 100644 --- a/src/components/MatchForm.js +++ b/src/components/MatchForm.js @@ -4,24 +4,7 @@ import { Button } from 'registers-react-library'; import { employmentBands, legalStatusBands, turnoverBands, tradingStatusBands } from '../utils/convertBands'; import TextInput from './TextInput'; import SelectInput from './SelectInput'; - -const CheckBoxInput = ({ id, label, onChangeFilter, value }) => { - return ( -
-
- - -
-
- ); -}; - -CheckBoxInput.propTypes = { - id: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - onChangeFilter: PropTypes.func.isRequired, - value: PropTypes.bool.isRequired, -}; +import CheckBoxInput from './CheckBoxInput'; class MatchForm extends React.Component { // For the id of each input, we use the same name as the business-index-api input From 12c7fc8dab6eac13b8bd9eaf078cc4b3b3c251b5 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Wed, 25 Oct 2017 08:47:02 +0100 Subject: [PATCH 16/26] Add fixed code for RangeSearch query --- src/components/RangeForm.js | 86 +++++++++++++++++++++++++++++++------ src/reducers/apiSearch.js | 3 +- src/resources/css/index.css | 6 +++ src/views/RangeQuery.js | 67 ++++++++++------------------- 4 files changed, 104 insertions(+), 58 deletions(-) diff --git a/src/components/RangeForm.js b/src/components/RangeForm.js index aabf8cc..647797f 100644 --- a/src/components/RangeForm.js +++ b/src/components/RangeForm.js @@ -4,23 +4,79 @@ import { Button } from 'registers-react-library'; import { employmentBands, legalStatusBands, turnoverBands, tradingStatusBands } from '../utils/convertBands'; import TextInput from './TextInput'; import SelectInput from './SelectInput'; +import CheckBoxInput from './CheckBoxInput'; +import Select from 'react-select'; +import 'react-select/dist/react-select.min.css'; -const CheckBoxInput = ({ id, label, onChangeFilter, value }) => { - return ( -
-
- - +class SelectMultipleInput extends React.Component { + constructor(props) { + super(props); + this.state = { + values: this.formValues(this.props.value), + inputsJson: this.formProperJson(this.props.bands), + }; + this.handleSelectChange = this.handleSelectChange.bind(this); + // Look at index.css for .Select-menu-outer + } + componentDidUpdate() { + const elements = document.getElementsByClassName('Select-value-icon'); + for (let i = 0; i <= elements.length; i += 1) { + if (document.getElementsByClassName('Select-value-icon')[i] !== undefined) { + document.getElementsByClassName('Select-value-icon')[i].setAttribute('aria-hidden', 'false'); + } + } + } + formValues(value) { + console.log('value: ', value); + if (value === undefined) { + return []; + } + return value.split(','); + } + formProperJson(json) { + const arr = Object.keys(json).map((key) => { + return { label: `${key} [${json[key]}]`, value: key }; + }); + return arr; + } + handleSelectChange(value) { + this.setState({ value }); + // Make our lives easier by mimicking the exact json of an input event + const evt = { + target: { + id: this.props.id, + value: value.split(','), + }, + }; + this.props.onChange(evt); + } + render() { + return ( +
+
+ +
+ -







Date: Wed, 25 Oct 2017 09:06:17 +0100 Subject: [PATCH 17/26] Fix persistance of multiple select input values --- src/components/RangeForm.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/RangeForm.js b/src/components/RangeForm.js index 647797f..fa3f290 100644 --- a/src/components/RangeForm.js +++ b/src/components/RangeForm.js @@ -27,11 +27,10 @@ class SelectMultipleInput extends React.Component { } } formValues(value) { - console.log('value: ', value); if (value === undefined) { return []; } - return value.split(','); + return value.join(','); } formProperJson(json) { const arr = Object.keys(json).map((key) => { @@ -39,13 +38,13 @@ class SelectMultipleInput extends React.Component { }); return arr; } - handleSelectChange(value) { - this.setState({ value }); + handleSelectChange(values) { + this.setState({ values }); // Make our lives easier by mimicking the exact json of an input event const evt = { target: { id: this.props.id, - value: value.split(','), + value: values.split(','), }, }; this.props.onChange(evt); @@ -65,7 +64,7 @@ class SelectMultipleInput extends React.Component { options={this.state.inputsJson} placeholder="" simpleValue - value={this.state.value} + value={this.state.values} />
); @@ -77,6 +76,7 @@ SelectMultipleInput.propTypes = { label: PropTypes.string.isRequired, bands: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, + value: PropTypes.array.isRequired, }; class RangeForm extends React.Component { @@ -87,9 +87,9 @@ class RangeForm extends React.Component {


-
-
-
+
+
+

From a5fe761b9156f40b60bd0f6eeecb3986c32b7189 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Wed, 25 Oct 2017 13:47:17 +0100 Subject: [PATCH 23/26] Fix formatRangeQuery, remove debugging statements --- src/utils/formQuery.js | 16 ++++------------ src/views/RangeQuery.js | 3 ++- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/utils/formQuery.js b/src/utils/formQuery.js index d3609d8..b758974 100644 --- a/src/utils/formQuery.js +++ b/src/utils/formQuery.js @@ -11,24 +11,16 @@ export function formMatchQuery(query) { export function formRangeQuery(query) { const queryArr = Object.keys(query).map(param => { - console.log('param is: ', query[param].constructor.name); - console.log(query[param].constructor.name); if (param === 'IndustryCode') { - // API format: IndustryCode:[${min} TO ${max}] + // ES format: IndustryCode:[${min} TO ${max}] return `${param}${SEPERATOR}[${query[param][0]} TO ${query[param][1]}]`; } else if (param === 'PostCode') { - // API format: PostCode:(${postCode}) + // ES format: PostCode:(${postCode}) return `${param}${SEPERATOR}(${query[param]})`; } - //if (query[param].constructor === Array) { - // This is for the IndustryCode min/max - const t = `${param}${SEPERATOR}[${query[param][0]} TO ${query[param][1]}]`; - console.log('t is: ', t) - return t; - //} - //return `${param}${SEPERATOR}${query[param]}`; + // ES format: Param:(A OR B OR C) + return `${param}${SEPERATOR}(${query[param].join(' OR ')})`; }); const formattedQuery = `${queryArr.join(` ${ES_CONCAT} `)}${END_SEPERATOR}${LIMIT}`; - console.log('formattedQuery: ', formattedQuery); return formattedQuery; } diff --git a/src/views/RangeQuery.js b/src/views/RangeQuery.js index c19c1f8..882dc50 100644 --- a/src/views/RangeQuery.js +++ b/src/views/RangeQuery.js @@ -24,6 +24,7 @@ class RangeQuery extends React.Component { this.onSubmit = this.onSubmit.bind(this); this.clearQuery = this.clearQuery.bind(this); this.closeModal = this.closeModal.bind(this); + this.changeFilter = this.changeFilter.bind(this); } componentDidMount() { // Reload the data from the store @@ -83,7 +84,7 @@ class RangeQuery extends React.Component { clearQuery() { this.props.dispatch(setQuery(SET_RANGE_QUERY, {})); this.props.dispatch(setResults(SET_RANGE_RESULTS, { results: [] })); - this.setState({ formValues: {} }); + this.setState({ formValues: {}, showFilter: false }); // Scroll to the top of the page and focus on the first input document.getElementsByClassName('wrapper')[0].scrollIntoView(false); this.child.childTextInput.myInput.focus(); From a75cc4ee0efc96dc282c5fd2a8c25d05136cf960 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Wed, 25 Oct 2017 13:54:35 +0100 Subject: [PATCH 24/26] Fix showFilter bug, shows after new search --- src/views/Match.js | 2 ++ src/views/RangeQuery.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/views/Match.js b/src/views/Match.js index 7c54e83..c5b43ba 100644 --- a/src/views/Match.js +++ b/src/views/Match.js @@ -64,12 +64,14 @@ class Match extends React.Component { onSubmit(e) { e.preventDefault(); if (this.state.formValues !== {}) { + this.setState({ showFilter: false }); this.props.dispatch(matchSearch(this.state.formValues)); } else { // Possibly swap this action with a redux way of doing it? this.props.data.results = 0; this.setState({ results: [], + showFilter: false, show: true, errorMessage: 'Please enter a valid VAT/PAYE/UBRN reference.', }); diff --git a/src/views/RangeQuery.js b/src/views/RangeQuery.js index 882dc50..cb05294 100644 --- a/src/views/RangeQuery.js +++ b/src/views/RangeQuery.js @@ -70,12 +70,14 @@ class RangeQuery extends React.Component { e.preventDefault(); const query = this.state.formValues; if (query !== {}) { + this.setState({ showFilter: false }); this.props.dispatch(rangeSearch(query)); } else { // Possibly swap this action with a redux way of doing it? this.props.data.results = 0; this.setState({ results: [], + showFilter: false, show: true, errorMessage: 'Please enter a valid VAT/PAYE/UBRN reference.', }); From dbecf5f0608aecb218e2b32edd3c2e3cbf76ec11 Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Wed, 25 Oct 2017 14:05:43 +0100 Subject: [PATCH 25/26] Transform businessName to upper case --- src/views/Match.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/Match.js b/src/views/Match.js index c5b43ba..493715f 100644 --- a/src/views/Match.js +++ b/src/views/Match.js @@ -97,7 +97,11 @@ class Match extends React.Component { if (evt.target.value === '') { delete formValues[evt.target.id]; } else { - formValues[evt.target.id] = evt.target.value; + if (evt.target.id === 'BusinessName') { + formValues[evt.target.id] = evt.target.value.toUpperCase(); + } else { + formValues[evt.target.id] = evt.target.value; + } } this.setState({ formValues }); // Store the query in Redux store, so we can access it again if a user From 381dd499f51a2c8b9a87b9163f0e236acad144ba Mon Sep 17 00:00:00 2001 From: Tom Cooling Date: Wed, 25 Oct 2017 14:23:08 +0100 Subject: [PATCH 26/26] Add encodeSpecialChars method to formQuery - For encoding businessName - Copied method from business-index-ui --- src/utils/formQuery.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/utils/formQuery.js b/src/utils/formQuery.js index b758974..d9751be 100644 --- a/src/utils/formQuery.js +++ b/src/utils/formQuery.js @@ -3,6 +3,9 @@ const { SEPERATOR, LIMIT, ES_CONCAT, END_SEPERATOR } = config; export function formMatchQuery(query) { const queryArr = Object.keys(query).map(param => { + if (param === 'BusinessName') { + return `${param}${SEPERATOR}${encodeSpecialChars(query[param])}`; + } return `${param}${SEPERATOR}${query[param]}`; }); const formattedQuery = `${queryArr.join(` ${ES_CONCAT} `)}${END_SEPERATOR}${LIMIT}`; @@ -24,3 +27,12 @@ export function formRangeQuery(query) { const formattedQuery = `${queryArr.join(` ${ES_CONCAT} `)}${END_SEPERATOR}${LIMIT}`; return formattedQuery; } + +// Encode special chars in businessName (e.g. £ etc.) +export function encodeSpecialChars(businessName) { + const encodedName = encodeURIComponent(businessName); + if (encodedName.includes('%A3')) { + encodedName.replace('%A3,%C2%A3'); + } + return encodedName; +}