html { background: white; height: 100%; font-size: 10px; } body { background: white; margin: 0; } img { display: inline-block; } body, input, textarea, keygen, select, button { font-size: 1.4rem; font-family: 'Open Sans', sans-serif; line-height: 1.6; color: rgba(0, 0, 0, 0.9); -webkit-font-smoothing: antialiased; } :focus { outline: none; } p, ul, blockquote { line-height: 1.5; margin: 0 0 1em 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; font-weight: bold; } .sBlock, .sList { margin: 0 0 12px 0; } .sBlock--md { margin: 0 0 24px 0; } .sBlock--xl { margin: 0 0 24px 0; } .sBlock--cover { margin: 0 -24px 24px -24px; } .sMedia--sm .sBlock--cover { margin-top: 0; margin-left: 0; margin-right: 0; } .sBlock--uncover { padding: 24px; } .sMedia--sm .sBlock--uncover { padding: 0; } .sBlock--filled { margin: 0 -24px 24px -24px; padding: 24px; } .sMedia--sm .sBlock--filled { margin-left: 0; margin-right: 0; } .sPageBlock { background: white; } .sPageBlock_inner { max-width: 1260px; margin: 0 auto; padding-top: 24px; padding-bottom: 24px; } @media only screen and (max-width: 1308px) { .sPageBlock_inner { padding-left: 24px; padding-right: 24px; } } .sPageBlock_inner--filled { padding-top: 0; padding-bottom: 0; } @media only screen and (max-width: 1308px) { .sPageBlock_inner--filled { padding-left: 0; padding-right: 0; } } .sPageBlock--md .sPageBlock_inner { max-width: 870px; } @media only screen and (max-width: 918px) { .sPageBlock--md .sPageBlock_inner { padding-left: 24px; padding-right: 24px; } } .sPageBlock--md .sPageBlock_inner--filled { padding-top: 0; padding-bottom: 0; } @media only screen and (max-width: 918px) { .sPageBlock--md .sPageBlock_inner--filled { padding-left: 0; padding-right: 0; } } .sPageBlock--md .sPageSection--filled { padding-top: 24px; padding-bottom: 24px; } @media only screen and (max-width: 918px) { .sPageBlock--md .sPageSection--filled { margin-left: -24px; margin-right: -24px; padding: 24px; } } .sPageBlock--sm .sPageBlock_inner { max-width: 425px; } @media only screen and (max-width: 473px) { .sPageBlock--sm .sPageBlock_inner { padding-left: 24px; padding-right: 24px; } } .sPageBlock--sm .sPageBlock_inner--filled { padding-top: 0; padding-bottom: 0; } @media only screen and (max-width: 473px) { .sPageBlock--sm .sPageBlock_inner--filled { padding-left: 0; padding-right: 0; } } .sPageBlock--sm .sPageSection--filled { padding-top: 24px; padding-bottom: 24px; } @media only screen and (max-width: 473px) { .sPageBlock--sm .sPageSection--filled { margin-left: -24px; margin-right: -24px; padding: 24px; } } .sPageBlock--max .sPageBlock_inner { max-width: none; padding-left: 24px; padding-right: 24px; } .sContentBlock--sm { padding: 6px; } .sContentBlock--md { padding: 12px; } .sContentBlock--lg { padding: 18px; } .sDialog { margin: 0 !important; box-sizing: border-box; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.5); display: flex; flex-flow: column nowrap; position: absolute; left: 0; top: 0; z-index: -1; max-width: 100%; max-height: 100%; } .sDialog--open { position: fixed; } .sDialog_header { display: flex; flex-flow: row nowrap; padding: 18px; flex-shrink: 0; align-items: center; } .sDialog_body { flex-grow: 1; overflow: auto; padding: 18px; } .sDialog_footer { flex-shrink: 0; padding: 18px; } .sDialog_title { flex-grow: 1; } .sDialog_buttons { margin-left: 18px; } .sDialog--default { background: white; } .sDialog--default .sDialog_header { border-bottom: 1px solid #E0E0E0; } .sDialog--default .sDialog_footer { border-top: 1px solid #E0E0E0; } .sIcon { vertical-align: middle; } .clearfix:after { content: ""; display: table; clear: both; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .sResponsiveWidth { max-width: 100%; overflow: auto; } .hidden { display: none !important; } .sHidden { display: none !important; } .sMedia--sm .sHidden--sm { display: none !important; } .sMedia--md .sHidden--md { display: none !important; } .sMedia--lg .sHidden--lg { display: none !important; } .sMedia--xl .sHidden--xl { display: none !important; } .sVisible--inline { display: inline !important; } .sMedia--sm .sVisible--inline-sm { display: inline !important; } .sMedia--md .sVisible--inline-md { display: inline !important; } .sMedia--lg .sVisible--inline-lg { display: inline !important; } .sVisible--block { display: block !important; } .sMedia--sm .sVisible--block-sm { display: block !important; } .sMedia--md .sVisible--block-md { display: block !important; } .sMedia--lg .sVisible--block-lg { display: block !important; } .sMedia--xl .sVisible--block-xl { display: block !important; } .sVisible--inlineFlex { display: inline-flex !important; } .sMedia--sm .sVisible--inlineFlex-sm { display: inline-flex !important; } .sMedia--md .sVisible--inlineFlex-md { display: inline-flex !important; } .sMedia--lg .sVisible--inlineFlex-lg { display: inline-flex !important; } .sVisible--inlineBlock { display: inline-block !important; } .sMedia--sm .sVisible--inlineBlock-sm { display: inline-block !important; } .sMedia--md .sVisible--inlineBlock-md { display: inline-block !important; } .sMedia--lg .sVisible--inlineBlock-lg { display: inline-block !important; } .sVisible--flex { display: flex !important; } .sMedia--sm .sVisible--flex-sm { display: flex !important; } .sMedia--md .sVisible--flex-md { display: flex !important; } .sMedia--lg .sVisible--flex-lg { display: flex !important; } .sVisible--tableCell { display: table-cell !important; } .sMedia--sm .sVisible--tableCell-sm { display: table-cell !important; } .sMedia--md .sVisible--tableCell-md { display: table-cell !important; } .sMedia--lg .sVisible--tableCell-lg { display: table-cell !important; } .sHelper_dropShadow--md { box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); } .sColorVariant--success { background: #F1F8E9; color: rgba(0, 0, 0, 0.9); border-color: #C5E1A5; } .sColorVariant--success a, .sColorVariant--success a:hover { color: #33691E; text-decoration: underline; } .sColorVariant--error { background: #FFEBEE; color: rgba(0, 0, 0, 0.9); border-color: #FFCDD2; } .sColorVariant--error a, .sColorVariant--error a:hover { color: #B71C1C; text-decoration: underline; } .sColorVariant--info { background: #E1F5FE; color: rgba(0, 0, 0, 0.9); border-color: #B3E5FC; } .sColorVariant--info a, .sColorVariant--info a:hover { color: #01579B; text-decoration: underline; } .sColorVariant--warning { background: #FFF8E1; color: rgba(0, 0, 0, 0.9); border-color: #FFECB3; } .sColorVariant--warning a, .sColorVariant--warning a:hover { color: #FF6F00; text-decoration: underline; } .sGrid { display: flex; flex-flow: column nowrap; } .sGrid_row { display: flex; flex-flow: row wrap; flex-grow: 0; flex-shrink: 0; margin-left: -6px; margin-right: -6px; } .sGrid_row--nowrap { flex-wrap: nowrap; } .sGrid_col { box-sizing: border-box; max-width: 100%; flex-basis: 100%; flex-grow: 1; flex-shrink: 0; padding-left: 6px; padding-right: 6px; display: flex; flex-flow: column nowrap; } .sGrid_col--12 { flex-basis: 100%; max-width: 100%; flex-grow: 0; } .sGrid_col--offset-11 { margin-left: 91.66666667%; } .sGrid_col--11 { flex-basis: 91.66666667%; max-width: 91.66666667%; flex-grow: 0; } .sGrid_col--offset-10 { margin-left: 83.33333333%; } .sGrid_col--10 { flex-basis: 83.33333333%; max-width: 83.33333333%; flex-grow: 0; } .sGrid_col--offset-9 { margin-left: 75%; } .sGrid_col--9 { flex-basis: 75%; max-width: 75%; flex-grow: 0; } .sGrid_col--offset-8 { margin-left: 66.66666667%; } .sGrid_col--8 { flex-basis: 66.66666667%; max-width: 66.66666667%; flex-grow: 0; } .sGrid_col--offset-7 { margin-left: 58.33333333%; } .sGrid_col--7 { flex-basis: 58.33333333%; max-width: 58.33333333%; flex-grow: 0; } .sGrid_col--offset-6 { margin-left: 50%; } .sGrid_col--6 { flex-basis: 50%; max-width: 50%; flex-grow: 0; } .sGrid_col--offset-5 { margin-left: 41.66666667%; } .sGrid_col--5 { flex-basis: 41.66666667%; max-width: 41.66666667%; flex-grow: 0; } .sGrid_col--offset-4 { margin-left: 33.33333333%; } .sGrid_col--4 { flex-basis: 33.33333333%; max-width: 33.33333333%; flex-grow: 0; } .sGrid_col--offset-3 { margin-left: 25%; } .sGrid_col--3 { flex-basis: 25%; max-width: 25%; flex-grow: 0; } .sGrid_col--offset-2 { margin-left: 16.66666667%; } .sGrid_col--2 { flex-basis: 16.66666667%; max-width: 16.66666667%; flex-grow: 0; } .sGrid_col--offset-1 { margin-left: 8.33333333%; } .sGrid_col--1 { flex-basis: 8.33333333%; max-width: 8.33333333%; flex-grow: 0; } .sGrid_col--offset-0 { margin-left: 0%; } .sGrid_col--start { order: -1; } .sGrid_col--end { order: 1; } .sGrid_row--align-top, .sGrid_col--align-start { align-items: flex-start; } .sGrid_row--align-center, .sGrid_col--align-center { align-items: center; } .sGrid_row--align-bottom, .sGrid_col--align-end { align-items: flex-end; } .sGrid_row--align-start, .sGrid_col--align-top { justify-content: flex-start; } .sGrid_row--align-middle, .sGrid_col--align-middle { justify-content: center; } .sGrid_row--align-end, .sGrid_col--align-bottom { justify-content: flex-end; } .sGrid_col--align-stretch { align-self: stretch; } .sMedia--sm .sGrid_row { margin-left: -6px; margin-right: -6px; } .sMedia--sm .sGrid_col { padding-left: 6px; padding-right: 6px; } .sMedia--sm .sGrid_col--12-sm { flex-basis: 100%; max-width: 100%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-11-sm { margin-left: 91.66666667%; } .sMedia--sm .sGrid_col--11-sm { flex-basis: 91.66666667%; max-width: 91.66666667%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-10-sm { margin-left: 83.33333333%; } .sMedia--sm .sGrid_col--10-sm { flex-basis: 83.33333333%; max-width: 83.33333333%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-9-sm { margin-left: 75%; } .sMedia--sm .sGrid_col--9-sm { flex-basis: 75%; max-width: 75%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-8-sm { margin-left: 66.66666667%; } .sMedia--sm .sGrid_col--8-sm { flex-basis: 66.66666667%; max-width: 66.66666667%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-7-sm { margin-left: 58.33333333%; } .sMedia--sm .sGrid_col--7-sm { flex-basis: 58.33333333%; max-width: 58.33333333%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-6-sm { margin-left: 50%; } .sMedia--sm .sGrid_col--6-sm { flex-basis: 50%; max-width: 50%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-5-sm { margin-left: 41.66666667%; } .sMedia--sm .sGrid_col--5-sm { flex-basis: 41.66666667%; max-width: 41.66666667%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-4-sm { margin-left: 33.33333333%; } .sMedia--sm .sGrid_col--4-sm { flex-basis: 33.33333333%; max-width: 33.33333333%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-3-sm { margin-left: 25%; } .sMedia--sm .sGrid_col--3-sm { flex-basis: 25%; max-width: 25%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-2-sm { margin-left: 16.66666667%; } .sMedia--sm .sGrid_col--2-sm { flex-basis: 16.66666667%; max-width: 16.66666667%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-1-sm { margin-left: 8.33333333%; } .sMedia--sm .sGrid_col--1-sm { flex-basis: 8.33333333%; max-width: 8.33333333%; flex-grow: 0; } .sMedia--sm .sGrid_col--offset-0-sm { margin-left: 0%; } .sMedia--sm .sGrid_col--start-sm { order: -1; } .sMedia--sm .sGrid_col--end-sm { order: 1; } .sMedia--sm .sGrid_row--align-top-sm, .sMedia--sm .sGrid_col--align-start-sm { align-items: flex-start; } .sMedia--sm .sGrid_row--align-center-sm, .sMedia--sm .sGrid_col--align-center-sm { align-items: center; } .sMedia--sm .sGrid_row--align-bottom-sm, .sMedia--sm .sGrid_col--align-end-sm { align-items: flex-end; } .sMedia--sm .sGrid_col--align-top-sm { justify-content: flex-start; } .sMedia--sm .sGrid_col--align-middle-sm { justify-content: center; } .sMedia--sm .sGrid_col--align-bottom-sm { justify-content: flex-end; } .sMedia--md .sGrid_row { margin-left: -9px; margin-right: -9px; } .sMedia--md .sGrid_col { padding-left: 9px; padding-right: 9px; } .sMedia--md .sGrid_col--12-md { flex-basis: 100%; max-width: 100%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-11-md { margin-left: 91.66666667%; } .sMedia--md .sGrid_col--11-md { flex-basis: 91.66666667%; max-width: 91.66666667%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-10-md { margin-left: 83.33333333%; } .sMedia--md .sGrid_col--10-md { flex-basis: 83.33333333%; max-width: 83.33333333%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-9-md { margin-left: 75%; } .sMedia--md .sGrid_col--9-md { flex-basis: 75%; max-width: 75%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-8-md { margin-left: 66.66666667%; } .sMedia--md .sGrid_col--8-md { flex-basis: 66.66666667%; max-width: 66.66666667%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-7-md { margin-left: 58.33333333%; } .sMedia--md .sGrid_col--7-md { flex-basis: 58.33333333%; max-width: 58.33333333%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-6-md { margin-left: 50%; } .sMedia--md .sGrid_col--6-md { flex-basis: 50%; max-width: 50%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-5-md { margin-left: 41.66666667%; } .sMedia--md .sGrid_col--5-md { flex-basis: 41.66666667%; max-width: 41.66666667%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-4-md { margin-left: 33.33333333%; } .sMedia--md .sGrid_col--4-md { flex-basis: 33.33333333%; max-width: 33.33333333%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-3-md { margin-left: 25%; } .sMedia--md .sGrid_col--3-md { flex-basis: 25%; max-width: 25%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-2-md { margin-left: 16.66666667%; } .sMedia--md .sGrid_col--2-md { flex-basis: 16.66666667%; max-width: 16.66666667%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-1-md { margin-left: 8.33333333%; } .sMedia--md .sGrid_col--1-md { flex-basis: 8.33333333%; max-width: 8.33333333%; flex-grow: 0; } .sMedia--md .sGrid_col--offset-0-md { margin-left: 0%; } .sMedia--md .sGrid_col--start-md { order: -1; } .sMedia--md .sGrid_col--end-md { order: 1; } .sMedia--md .sGrid_row--align-top-md, .sMedia--md .sGrid_col--align-start-md { align-items: flex-start; } .sMedia--md .sGrid_row--align-center-md, .sMedia--md .sGrid_col--align-center-md { align-items: center; } .sMedia--md .sGrid_row--align-bottom-md, .sMedia--md .sGrid_col--align-end-md { align-items: flex-end; } .sMedia--md .sGrid_col--align-top-md { justify-content: flex-start; } .sMedia--md .sGrid_col--align-middle-md { justify-content: center; } .sMedia--md .sGrid_col--align-bottom-md { justify-content: flex-end; } .sMedia--lg .sGrid_row { margin-left: -12px; margin-right: -12px; } .sMedia--lg .sGrid_col { padding-left: 12px; padding-right: 12px; } .sMedia--lg .sGrid_col--12-lg { flex-basis: 100%; max-width: 100%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-11-lg { margin-left: 91.66666667%; } .sMedia--lg .sGrid_col--11-lg { flex-basis: 91.66666667%; max-width: 91.66666667%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-10-lg { margin-left: 83.33333333%; } .sMedia--lg .sGrid_col--10-lg { flex-basis: 83.33333333%; max-width: 83.33333333%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-9-lg { margin-left: 75%; } .sMedia--lg .sGrid_col--9-lg { flex-basis: 75%; max-width: 75%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-8-lg { margin-left: 66.66666667%; } .sMedia--lg .sGrid_col--8-lg { flex-basis: 66.66666667%; max-width: 66.66666667%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-7-lg { margin-left: 58.33333333%; } .sMedia--lg .sGrid_col--7-lg { flex-basis: 58.33333333%; max-width: 58.33333333%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-6-lg { margin-left: 50%; } .sMedia--lg .sGrid_col--6-lg { flex-basis: 50%; max-width: 50%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-5-lg { margin-left: 41.66666667%; } .sMedia--lg .sGrid_col--5-lg { flex-basis: 41.66666667%; max-width: 41.66666667%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-4-lg { margin-left: 33.33333333%; } .sMedia--lg .sGrid_col--4-lg { flex-basis: 33.33333333%; max-width: 33.33333333%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-3-lg { margin-left: 25%; } .sMedia--lg .sGrid_col--3-lg { flex-basis: 25%; max-width: 25%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-2-lg { margin-left: 16.66666667%; } .sMedia--lg .sGrid_col--2-lg { flex-basis: 16.66666667%; max-width: 16.66666667%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-1-lg { margin-left: 8.33333333%; } .sMedia--lg .sGrid_col--1-lg { flex-basis: 8.33333333%; max-width: 8.33333333%; flex-grow: 0; } .sMedia--lg .sGrid_col--offset-0-lg { margin-left: 0%; } .sMedia--lg .sGrid_col--start-lg { order: -1; } .sMedia--lg .sGrid_col--end-lg { order: 1; } .sMedia--lg .sGrid_row--align-top-lg, .sMedia--lg .sGrid_col--align-start-lg { align-items: flex-start; } .sMedia--lg .sGrid_row--align-center-lg, .sMedia--lg .sGrid_col--align-center-lg { align-items: center; } .sMedia--lg .sGrid_row--align-bottom-lg, .sMedia--lg .sGrid_col--align-end-lg { align-items: flex-end; } .sMedia--lg .sGrid_col--align-top-lg { justify-content: flex-start; } .sMedia--lg .sGrid_col--align-middle-lg { justify-content: center; } .sMedia--lg .sGrid_col--align-bottom-lg { justify-content: flex-end; } .sMedia--xl .sGrid_row { margin-left: -12px; margin-right: -12px; } .sMedia--xl .sGrid_col { padding-left: 12px; padding-right: 12px; } .sMedia--xl .sGrid_col--12-xl { flex-basis: 100%; max-width: 100%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-11-xl { margin-left: 91.66666667%; } .sMedia--xl .sGrid_col--11-xl { flex-basis: 91.66666667%; max-width: 91.66666667%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-10-xl { margin-left: 83.33333333%; } .sMedia--xl .sGrid_col--10-xl { flex-basis: 83.33333333%; max-width: 83.33333333%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-9-xl { margin-left: 75%; } .sMedia--xl .sGrid_col--9-xl { flex-basis: 75%; max-width: 75%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-8-xl { margin-left: 66.66666667%; } .sMedia--xl .sGrid_col--8-xl { flex-basis: 66.66666667%; max-width: 66.66666667%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-7-xl { margin-left: 58.33333333%; } .sMedia--xl .sGrid_col--7-xl { flex-basis: 58.33333333%; max-width: 58.33333333%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-6-xl { margin-left: 50%; } .sMedia--xl .sGrid_col--6-xl { flex-basis: 50%; max-width: 50%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-5-xl { margin-left: 41.66666667%; } .sMedia--xl .sGrid_col--5-xl { flex-basis: 41.66666667%; max-width: 41.66666667%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-4-xl { margin-left: 33.33333333%; } .sMedia--xl .sGrid_col--4-xl { flex-basis: 33.33333333%; max-width: 33.33333333%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-3-xl { margin-left: 25%; } .sMedia--xl .sGrid_col--3-xl { flex-basis: 25%; max-width: 25%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-2-xl { margin-left: 16.66666667%; } .sMedia--xl .sGrid_col--2-xl { flex-basis: 16.66666667%; max-width: 16.66666667%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-1-xl { margin-left: 8.33333333%; } .sMedia--xl .sGrid_col--1-xl { flex-basis: 8.33333333%; max-width: 8.33333333%; flex-grow: 0; } .sMedia--xl .sGrid_col--offset-0-xl { margin-left: 0%; } .sMedia--xl .sGrid_col--start-xl { order: -1; } .sMedia--xl .sGrid_col--end-xl { order: 1; } .sMedia--xl .sGrid_row--align-top-xl, .sMedia--xl .sGrid_col--align-start-xl { align-items: flex-start; } .sMedia--xl .sGrid_row--align-center-xl, .sMedia--xl .sGrid_col--align-center-xl { align-items: center; } .sMedia--xl .sGrid_row--align-bottom-xl, .sMedia--xl .sGrid_col--align-end-xl { align-items: flex-end; } .sMedia--xl .sGrid_col--align-top-xl { justify-content: flex-start; } .sMedia--xl .sGrid_col--align-middle-xl { justify-content: center; } .sMedia--xl .sGrid_col--align-bottom-xl { justify-content: flex-end; } .sFlex { display: flex; flex-flow: column nowrap; } .sFlex--inline { display: inline-flex; } .sFlex--row { flex-direction: row; } .sFlex--column { flex-direction: column; } .sFlex--wrap { flex-wrap: wrap; } .sFlex--nowrap { flex-wrap: nowrap; } .sFlex--align-center { align-items: center; } .sFlex--align-end { align-items: flex-end; } .sFlex--justify-end { justify-content: flex-end; } .sFlex--justify-center { justify-content: center; } .sFlex--justify-spaceBetween { justify-content: space-between; } .sFlex_item--grow { flex-grow: 1; } .sFlex_item--equal { flex-basis: 0; } .sFlex--pad, .sFlex--pad-md { margin-left: -12px; margin-right: -12px; } .sFlex--pad > .sFlex_item, .sFlex--pad-md > .sFlex_item { padding-left: 12px; padding-right: 12px; } .sFlex--pad-sm { margin-left: -6px; margin-right: -6px; } .sFlex--pad-sm > .sFlex_item { padding-left: 6px; padding-right: 6px; } .sFlex_item--start { order: -1; } .sFlex_item--end { order: 1; } .sMedia--sm .sFlex_item--start-sm { order: -1; } .sMedia--sm .sFlex_item--end-sm { order: 1; } .sMedia--md .sFlex_item--start-md { order: -1; } .sMedia--md .sFlex_item--end-md { order: 1; } .sMedia--lg .sFlex_item--start-lg { order: -1; } .sMedia--lg .sFlex_item--end-lg { order: 1; } .sMedia--xl .sFlex_item--start-xl { order: -1; } .sMedia--xl .sFlex_item--end-xl { order: 1; } .sButton { display: inline-flex; flex-flow: row nowrap; flex-grow: 1; box-sizing: border-box; padding: 6px 12px; text-decoration: none !important; border: none; justify-content: center; align-items: center; break-inside: avoid; background: transparent; font: 1.4rem 'Open Sans', sans-serif; color: #ffdd3a; text-align: center; font-size: initial; border-radius: 0; line-height: 2rem; } .sButton:focus:not(:hover) { background: #c3f8ff; color: #000000; } .sButton--iconOnly { padding-left: 6px; padding-right: 6px; } .sButton_icon { line-height: 2rem; width: 2rem; } .sButton--control { padding: 4px 10px; margin: 2px; } .sButton--default { background: white; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); text-transform: uppercase; } .sButton--primary { background: #ffe66d; color: #000000; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); text-transform: uppercase; } .sButton--primary:hover, .sButton--primary:focus { color: #000000; } .sButton--danger { background: #D32F2F; color: #ffffff; text-transform: uppercase; } .sButton--xs { font-size: 1.2rem; padding: 6px 12px; } .sButton--sm { font-size: 1.4rem; padding: 6px 12px; } .sButton--lg { font-size: large; } .sButton--xl { font-size: x-large; } .sButton--xxl { font-size: xx-large; } .sMedia--sm .sButton--sm-sm { font-size: 1.4rem; padding: 6px 12px; } .sMedia--sm .sButton--lg-sm { font-size: large; } .sMedia--sm .sButton--xl-sm { font-size: x-large; } .sMedia--sm .sButton--xxl-sm { font-size: xx-large; } .sMedia--md .sButton--sm-md { font-size: 1.4rem; padding: 6px 12px; } .sMedia--md .sButton--lg-md { font-size: large; } .sMedia--md .sButton--xl-md { font-size: x-large; } .sMedia--md .sButton--xxl-md { font-size: xx-large; } .sMedia--lg .sButton--sm-lg { font-size: 1.4rem; padding: 6px 12px; } .sMedia--lg .sButton--lg-lg { font-size: large; } .sMedia--lg .sButton--xl-lg { font-size: x-large; } .sMedia--lg .sButton--xxl-lg { font-size: xx-large; } .sButton_flex, .sButton_inner { display: inline-flex; flex-flow: row nowrap; flex-grow: 1; justify-content: center; align-items: center; } .sButton--block { display: flex; width: 100%; } .sButton_icon + .sButton_label, .sButton_label + .sButton_icon { margin-left: 6px; } .sButton--jumbo, .sButton--chunky { padding: 18px; } .sButton--stacked { flex-flow: column; padding: 12px; } .sButton--stacked .sButton_icon:first-child { font-size: x-large; } .sButton--stacked .sButton_icon + .sButton_label, .sButton--stacked .sButton_label + .sButton_icon { margin-left: 0; margin-top: 6px; } .sButton--disabled { opacity: .5; pointer-events: none; cursor: pointer; } .sMenu { display: flex; flex-flow: row nowrap; } .sMenu--stacked { flex-direction: column; } .sMenu_item { padding: 6px 12px; } .sForm_fieldset { margin: 0 0 24px 0; background: rgba(0, 0, 0, 0.05); padding: 0; border: 0; min-width: 0; } .sForm_fieldsetLabel { display: table; float: left; margin: 0; width: 100%; box-sizing: border-box; padding: 6px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-transform: uppercase; } .sForm_fieldsetLabel + * { clear: both; } .sForm_fieldsetFields { padding: 12px 12px 0 12px; } .sInput { display: flex; flex-flow: row nowrap; align-items: center; font: 1.4rem 'Open Sans', sans-serif; line-height: 2rem; position: relative; break-inside: avoid; } .sInput input[type="text"], .sInput input[type="email"], .sInput input[type="number"], .sInput input[type="tel"], .sInput input[type="password"], .sInput select, .sInput textarea { height: auto; font: 1.4rem 'Open Sans', sans-serif; padding: 6px 12px; line-height: 2rem; border: none; background: transparent; width: 100%; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; margin: 0; } .sInput input[type="text"][readonly], .sInput input[type="email"][readonly], .sInput input[type="number"][readonly], .sInput input[type="tel"][readonly], .sInput input[type="password"][readonly], .sInput select[readonly], .sInput textarea[readonly] { background: rgba(0, 0, 0, 0.05); } .sInput input[type="text"]:focus, .sInput input[type="email"]:focus, .sInput input[type="number"]:focus, .sInput input[type="tel"]:focus, .sInput input[type="password"]:focus, .sInput select:focus, .sInput textarea:focus { outline: none; background-color: #c3f8ff !important; color: #000000 !important; } .sInput input[type="text"]:invalid, .sInput input[type="email"]:invalid, .sInput input[type="number"]:invalid, .sInput input[type="tel"]:invalid, .sInput input[type="password"]:invalid, .sInput select:invalid, .sInput textarea:invalid { color: #F44336 !important; } .sInput input[type="text"]:disabled, .sInput input[type="email"]:disabled, .sInput input[type="number"]:disabled, .sInput input[type="tel"]:disabled, .sInput input[type="password"]:disabled, .sInput select:disabled, .sInput textarea:disabled { opacity: .5; background-color: #E0E0E0 !important; } .sInput input[type="number"] { text-align: end; } .sInput textarea { resize: vertical; } .sInput input[type="number"]::-webkit-outer-spin-button, .sInput input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sInput:focus { outline: none; } .sInput select::-ms-expand { display: none; } .sCheckbox { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-shrink: 0; box-sizing: border-box; width: 2rem; height: 2rem; border-width: 2px; border-style: solid; align-items: center; justify-content: center; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .sCheckbox:before { width: 1em; height: 1em; text-align: center; content: '\f00c'; visibility: hidden !important; } :checked ~ .sCheckbox:before, .sCheckbox--checked:before { visibility: visible !important; } :disabled ~ .sCheckbox:before, .sCheckbox.sCheckbox--disabled:before { opacity: 0.5; } .sCheckbox { background: white; border-color: #9E9E9E; color: white; } :checked ~ .sCheckbox, .sCheckbox--checked { background: #ffe66d; border-color: #28282e; color: white; } :disabled ~ .sCheckbox, .sCheckbox.sCheckbox--disabled { background: #E0E0E0; border-color: #E0E0E0; color: rgba(0, 0, 0, 0.6); } :focus ~ .sCheckbox, .sCheckbox:focus { background: #c3f8ff; color: white; } .sToggle { width: 3.6rem; height: 2rem; border-radius: 1rem; line-height: 2rem; font-size: 2rem; background: #9E9E9E; border-color: #9E9E9E; display: flex; flex-flow: column nowrap; flex-shrink: 0; box-sizing: border-box; border-width: 2px; border-style: solid; align-items: flex-start; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .sToggle:before { width: calc(1em - 4px); height: calc(1em - 4px); } .sToggle:before { background: white; } .sToggle:before { display: inline-block; content: ''; border-radius: 50%; } :checked ~ .sToggle, .sToggle--checked { align-items: flex-end; } .sToggle { background: #9E9E9E; border-color: #9E9E9E; } .sToggle:before { background: white; } :checked ~ .sToggle, .sToggle--checked { background: #ffe66d; border-color: #ffe66d; } :checked ~ .sToggle:before, .sToggle--checked:before { background: white; } :disabled ~ .sToggle, .sToggle--disabled { background: #E0E0E0; border-color: #E0E0E0; } :disabled ~ .sToggle:before, .sToggle--disabled:before { background: white; } :focus ~ .sToggle:before { background: #c3f8ff; } .sInput--select { flex-grow: 1; } .sInput--select .sInput_icon { position: absolute; right: 0; top: 50%; margin-top: -1rem; pointer-events: none; } .sInput--select select { padding-right: 36px; } .sInput--select { background: white; color: rgba(0, 0, 0, 0.9); } .sInput--select select { color: rgba(0, 0, 0, 0.9); } .sInput--select.sInput--disabled { background: #E0E0E0; color: rgba(0, 0, 0, 0.6); } .sInput--select.sInput--focused { background: #fffea5 !important; color: rgba(0, 0, 0, 0.9); } .sButton--checkbox { display: flex; text-align: start; background: #EEEEEE; color: #000000; } .sButton--checkbox .sButton_label { flex-grow: 1; } .sButton--checkbox .sButton_icon { opacity: .25; } .sButton--checkbox.sButton--checked { background: #388E3C; color: #ffffff; } .sButton--checkbox.sButton--checked .sButton_icon { opacity: 1; } :checked ~ .sButton--checkbox { background: #388E3C; color: #ffffff; } :checked ~ .sButton--checkbox .sButton_icon { opacity: 1; } .sInput_icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sInput_label, .sInput_icon { display: inline-block; padding: 0 12px; line-height: 2rem; } :invalid + .sInput_icon--validation { display: none; } .sInput_icon--select:before { content: '\f0d7'; } .sInput_icon--popup:before { content: '\f078'; } .sInput_icon--check:before { content: '\f00c'; } .sInput--focused { background: #fffea5 !important; } .sInput--focused :invalid + .sInput_icon--validation { display: inline-block; } .sInput--checkbox, .sInput--radio, .sInput--toggle { align-self: flex-start; padding: 6px 12px; border-radius: 3px; } .sInput--checkbox input, .sInput--radio input, .sInput--toggle input { position: absolute; opacity: 0; } .sInput--button input { position: absolute; opacity: 0; } .sInput--radio + .sInput--toggle { margin-left: -12px; } .sRadio { display: flex; flex-shrink: 0; box-sizing: border-box; width: 2rem; height: 2rem; border: 2px solid #9E9E9E; background: #fff; color: #fff; align-items: center; justify-content: center; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .sCheckedBadge { position: relative; } .sCheckedBadge:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: 0; top: 0; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; content: '\f00c'; background: white; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); background: #ffe66d; border: 2px solid #fff; color: #fff; } .sRadio { border-radius: 50%; } .sRadio:before { content: ''; width: 1rem; height: 1rem; border-radius: 50%; } .sRadio--checked { background: #ffe66d; border-color: #28282e; } .sRadio--checked:before { background: #28282e; } .sRadio--disabled { background: #E0E0E0; border-color: #E0E0E0; } .sRadio--checked.sRadio--disabled { background: #E0E0E0; border-color: #E0E0E0; } .sRadio--checked.sRadio--disabled:before { background: rgba(0, 0, 0, 0.4); } .sInput--radio :checked ~ .sRadio { background: #ffe66d; border-color: #28282e; } .sInput--radio :checked ~ .sRadio:before { background: #28282e; } .sInput--radio :disabled ~ .sRadio { background: #E0E0E0; border-color: #E0E0E0; } .sInput--radio :disabled:checked ~ .sRadio { background: #E0E0E0; border-color: #E0E0E0; } .sInput--radio :disabled:checked ~ .sRadio:before { background: rgba(0, 0, 0, 0.4); } .sInput--radio :focus ~ .sRadio, .sInput--radio .sRadio:focus { background: #c3f8ff; } .sInput--text, .sInput--select { flex-grow: 1; background: white; } .sInput--text.sInput--disabled, .sInput--select.sInput--disabled { flex-grow: 1; background: #E0E0E0; } .sInput--select .sInput_icon { position: absolute; right: 0; top: 50%; margin-top: -1rem; pointer-events: none; } .sInput--select select { padding-right: 36px; } .sInput--text [pattern]:valid + .sInput_icon, .sInput--text :required:valid + .sInput_icon { color: #8BC34A; } .sInput--text [pattern]:valid + .sInput_icon:before, .sInput--text :required:valid + .sInput_icon:before { content: '\f058'; } .sInput--text :invalid + .sInput_icon { color: #F44336; } .sInput--text :invalid + .sInput_icon:before { content: '\f06a'; } .sInput--width-sm { width: 50px; } .sInput--text.sInput--align-center input[type="text"] { text-align: center; } .sRadioToggle .sInput_label { padding: 0; } .sControl { flex-flow: column nowrap; } .sControl--row { display: flex; flex-direction: row; flex-wrap: wrap; } .sControl_row { display: flex; flex-flow: row nowrap; } .sControl_row--muted { color: rgba(0, 0, 0, 0.6); background: #F5F5F5; } .sControl--columns { column-width: 120px; column-gap: 24px; min-height: 1px; } .sControl--columns-xs { column-width: 160px; column-gap: 24px; min-height: 1px; } .sControl--columns-sm { column-width: 240px; column-gap: 24px; min-height: 1px; } .sControl--columns-md { column-width: 320px; column-gap: 24px; min-height: 1px; } .sControl--columns-2 { columns: 2; column-gap: 24px; min-height: 1px; } .sControl--wrap { flex-wrap: wrap; } .sControl_text { text-align: center; padding: 6px 12px; line-height: 2rem; background: #F5F5F5; } .sControl_button { display: inline-block; padding: 4px 10px; line-height: 2rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none; text-decoration: none; cursor: default; background: #eee; color: #000000; margin: 2px; border-radius: 3px; } .sControl_button:disabled { background: #E0E0E0; color: rgba(0, 0, 0, 0.4); } .sControl_button:enabled:hover, .sControl_button:enabled:focus { outline: none; background: #ffe66d; color: #000000; } .sControl--bordered { overflow: hidden; border: 1px solid #9E9E9E; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); } .sControl--bordered.sControl--disabled { background: #E0E0E0; } .sControl--tableCell { border: none; border-radius: 0; box-shadow: none; } .sControl--disabled { opacity: 0.5; } .sMedia--sm .sControl--width-xxs { max-width: 80px; } .sMedia--sm .sControl--width-xs { max-width: 160px; } .sMedia--sm .sControl--width-sm { max-width: 240px; } .sMedia--sm .sControl--width-md { max-width: 320px; } .sMedia--sm .sControl--width-lg { max-width: 400px; } .sMedia--sm .sControl--width-xl { max-width: 480px; } .sMedia--sm .sControl--width-xxl { max-width: 640px; } .sControl--textAlign-end input, .sControl--textAlign-end textarea, .sControl--textAlign-end select { text-align: end; } .sControl--textAlign-right input, .sControl--textAlign-right textarea, .sControl--textAlign-right select { text-align: right; } .sSelect--refreshing .sInput--select select { opacity: .5; } .sSelect--refreshing .sInput--select .sInput_icon { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .sSelect--refreshing .sInput--select .sInput_icon:before { content: '\f021'; } .sSelect--refreshing .sInput--select:after { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; opacity: 0.01; text-align: center; z-index: 10; line-height: 100%; } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .sButtonSelect, .sButtonSelectMultiple { margin: 0 -6px -6px 0; } .sButtonSelect .sInput--button, .sButtonSelectMultiple .sInput--button { margin: 0 6px 6px 0; } .sButtonSelect.sButtonSelect--toggle, .sButtonSelectMultiple.sButtonSelect--toggle, .sButtonSelect.sButtonSelectMultiple--toggle, .sButtonSelectMultiple.sButtonSelectMultiple--toggle { margin: 0; display: flex; flex-flow: row nowrap; } .sButtonSelect.sButtonSelect--toggle .sInput--button, .sButtonSelectMultiple.sButtonSelect--toggle .sInput--button, .sButtonSelect.sButtonSelectMultiple--toggle .sInput--button, .sButtonSelectMultiple.sButtonSelectMultiple--toggle .sInput--button { margin: 0; } .sButtonSelect.sButtonSelect--toggle .sInput--button .sButton, .sButtonSelectMultiple.sButtonSelect--toggle .sInput--button .sButton, .sButtonSelect.sButtonSelectMultiple--toggle .sInput--button .sButton, .sButtonSelectMultiple.sButtonSelectMultiple--toggle .sInput--button .sButton { box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.15); border-color: #9E9E9E; } .sButtonSelect.sButtonSelect--toggle .sInput--button:not(:first-child) .sButton, .sButtonSelectMultiple.sButtonSelect--toggle .sInput--button:not(:first-child) .sButton, .sButtonSelect.sButtonSelectMultiple--toggle .sInput--button:not(:first-child) .sButton, .sButtonSelectMultiple.sButtonSelectMultiple--toggle .sInput--button:not(:first-child) .sButton { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .sButtonSelect.sButtonSelect--toggle .sInput--button:not(:last-child) .sButton, .sButtonSelectMultiple.sButtonSelect--toggle .sInput--button:not(:last-child) .sButton, .sButtonSelect.sButtonSelectMultiple--toggle .sInput--button:not(:last-child) .sButton, .sButtonSelectMultiple.sButtonSelectMultiple--toggle .sInput--button:not(:last-child) .sButton { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .sButtonSelect.sButtonSelect--toggle .sInput--button .sButton_icon, .sButtonSelectMultiple.sButtonSelect--toggle .sInput--button .sButton_icon, .sButtonSelect.sButtonSelectMultiple--toggle .sInput--button .sButton_icon, .sButtonSelectMultiple.sButtonSelectMultiple--toggle .sInput--button .sButton_icon { display: none; } .sButtonSelect.sButtonSelect--toggle .sInput--button .sButton_label, .sButtonSelectMultiple.sButtonSelect--toggle .sInput--button .sButton_label, .sButtonSelect.sButtonSelectMultiple--toggle .sInput--button .sButton_label, .sButtonSelectMultiple.sButtonSelectMultiple--toggle .sInput--button .sButton_label { margin-left: 0; text-align: center; } .sButtonSelect.sButtonSelect--toggle :checked ~ .sButton--checkbox, .sButtonSelectMultiple.sButtonSelect--toggle :checked ~ .sButton--checkbox, .sButtonSelect.sButtonSelectMultiple--toggle :checked ~ .sButton--checkbox, .sButtonSelectMultiple.sButtonSelectMultiple--toggle :checked ~ .sButton--checkbox { box-shadow: none !important; border-color: transparent; } .sButtonSelect--fill .sInput--button, .sButtonSelectMultiple--fill .sInput--button { flex-grow: 1; } .sSliderSelect_rail { background-color: #9E9E9E; color: #9E9E9E; } .sSliderSelect_handleLabel { background: #fff; color: black; border: 1px solid #9E9E9E; } .sSliderSelect { position: relative; touch-action: pan-y; } .sSliderSelect_railContainer { position: relative; padding: 18px 0; } .sSliderSelect_rail { height: 6px; border-radius: 3px; position: relative; margin: 0 12px; } .sSliderSelect_railFill { background: white; height: 3px; position: absolute; top: 1.5px; left: 0; right: 0; z-index: 1; } .sSliderSelect_handle { box-sizing: border-box; z-index: 2; position: absolute; left: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .sSliderSelect_handle--active { z-index: 3; } .sSliderSelect_handleLabel { border-radius: 3px; padding: 6px 12px; line-height: 2rem; white-space: nowrap; cursor: ew-resize; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); text-align: center; flex-shrink: 1; } .sSliderSelect_handleLabel:focus { background: #c3f8ff; } .sSliderSelect_markers { display: flex; flex-flow: row nowrap; } .sSliderSelect_marker { flex-grow: 1; flex-basis: 100%; text-align: center; line-height: 8px; margin-top: -8px; } .sSliderSelect_marker:after { content: ' '; display: inline-block; width: 0; height: 0; border: solid; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 8px; } .sSliderSelect_labels { display: flex; flex-flow: row nowrap; } .sSliderSelect_label { flex-grow: 1; flex-basis: 100%; } .sSliderSelect_label--individual { text-align: center; cursor: default; } .sToggleSelect { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; } .sToggleSelect_label { flex-grow: 1; flex-basis: 100%; padding: 0 12px; cursor: default; } .sToggleSelect_label--selected { font-weight: bold; } .sToggleSelect_label--first { text-align: end; } .sToggleSelect_label--last { text-align: start; } .sDateSelect { display: flex; flex-direction: row; } .sBankSortCode .sInput input[type="number"] { text-align: center; } .sTextarea_charCount { padding: 6px 12px; background: rgba(0, 0, 0, 0.05); font-size: x-small; border-top: 1px solid #E0E0E0; } .sTextarea_charCount--maxed { background: #FFCDD2; color: #000000; } .sCurrencyInput_symbol { font-weight: bold; } .sAutoComplete_suggestions { display: flex; flex-flow: column nowrap; border-top: 1px solid #E0E0E0; padding-bottom: 2px; } .sAutoComplete_suggestion { text-align: start; margin: 2px 2px 0 2px; } .sCompanyLookup_companies { display: flex; flex-flow: column nowrap; border-top: 1px solid #E0E0E0; margin-bottom: 2px; } .sCompanyLookup_company { text-align: start; margin-bottom: 0; } .sNumberSlider_rail { background-color: #9E9E9E; color: #9E9E9E; } .sNumberSlider { position: relative; touch-action: pan-y; } .sNumberSlider_input { flex-grow: 0; } .sNumberSlider_input input[type="number"] { text-align: center; } .sNumberSlider_slider { flex-grow: 1; display: flex; flex-flow: row nowrap; padding: 0 18px; } .sNumberSlider_slider:focus { background: #c3f8ff; } .sNumberSlider_railContainer { position: relative; flex-grow: 1; } .sNumberSlider_rail { height: 6px; width: 100%; border-radius: 3px; position: absolute; margin: auto; top: 0; bottom: 0; } .sNumberSlider_railFill { background: white; height: 3px; position: absolute; top: 1.5px; left: 0; right: 0; z-index: 1; } .sNumberSlider_handle { box-sizing: border-box; z-index: 2; position: absolute; left: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; min-width: 40px; } .sNumberSlider_handle--active { z-index: 3; } .sNumberSlider_handleLabel { padding: 12px 6px; cursor: ew-resize; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); text-align: center; flex-shrink: 1; flex-grow: 0; } .sNumberSlider_markers { display: flex; flex-flow: row nowrap; } .sNumberSlider_marker { flex-grow: 1; flex-basis: 100%; text-align: center; line-height: 8px; margin-top: -8px; } .sNumberSlider_marker:after { content: ' '; display: inline-block; width: 0; height: 0; border: solid; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 8px; } .sNumberSlider_labels { display: flex; flex-flow: row nowrap; } .sNumberSlider_label { flex-grow: 1; flex-basis: 100%; } .sNumberSlider_label--individual { text-align: center; cursor: default; } .sField { display: flex; flex-flow: column nowrap; margin: 0 0 12px 0; } .sField--bordered { background: white; border: 1px solid #E0E0E0; } .sField--bordered .sField_label { color: rgba(0, 0, 0, 0.9); padding: 0 12px; margin: 0; } .sField--bordered .sControl--bordered { border: none; box-shadow: none; } .sField--alt { background: #B3E5FC; padding: 12px; } .sField--hidden { display: none !important; } .sField--labelDisplay-hidden .sField_label, .sField--noLabel .sField_label { display: none; } .sField_label { box-sizing: border-box; font-size: 1.4rem; line-height: 2rem; padding: 6px 12px; margin: 0; padding-left: 0; flex-shrink: 0; } .sField--lg .sField_label { font-size: 2rem; line-height: 2rem; padding: 12px 18px; } .sField--required .sField_labelText { font-weight: bold; } .sField--required .sField_labelText:after { color: red; display: inline-block; content: '*'; padding-left: 4px; } .sField_control { flex-grow: 1; flex-shrink: 1; display: flex; flex-flow: column nowrap; align-items: stretch; max-width: 100%; min-height: 1px; } .sField_errors { font-size: 1.2rem; color: #F44336; } .sField_hint { margin: 0; font-size: 12px; color: #888; } .sField.sField--controlWidth-auto .sField_control { width: auto; flex-grow: 0; align-self: flex-start; } .sField.sField--controlWidth-grow .sField_control { width: auto; flex-grow: 1; align-self: stretch; } .sField.sField--controlWidth-xs .sField_control { width: 80px; } .sField.sField--controlWidth-sm .sField_control { width: 160px; } .sField.sField--controlWidth-md .sField_control { width: 240px; } .sField.sField--controlWidth-lg .sField_control { width: 320px; } .sField.sField--controlWidth-xl .sField_control { width: 400px; } .sField.sField--controlWidth-xxl .sField_control { width: 480px; } .sField--labelText-start .sField_label { text-align: start; } .sField--labelText-end .sField_label { text-align: end; } .sField--align-start .sField_label { align-self: flex-start; } .sField--align-center .sField_label { align-self: center; } .sField--align-end .sField_label { align-self: flex-end; } .sMedia--sm .sField--align-start-sm .sField_label { align-self: flex-start; } .sMedia--sm .sField--align-center-sm .sField_label { align-self: center; } .sMedia--sm .sField--align-end-sm .sField_label { align-self: flex-end; } .sMedia--md .sField--align-start-md .sField_label { align-self: flex-start; } .sMedia--md .sField--align-center-md .sField_label { align-self: center; } .sMedia--md .sField--align-end-md .sField_label { align-self: flex-end; } .sMedia--lg .sField--align-start-lg .sField_label { align-self: flex-start; } .sMedia--lg .sField--align-center-lg .sField_label { align-self: center; } .sMedia--lg .sField--align-end-lg .sField_label { align-self: flex-end; } .sField--indent-none { flex-direction: column !important; } .sField.sField--spread { flex-direction: row; justify-content: space-between; } .sField.sField--spread .sField_label { width: auto; } .sField.sField--spread .sField_control { flex-grow: 0; } .sField.sField--indent, .sField.sField--indent-auto { flex-direction: row; align-items: flex-start; } .sField.sField--indent .sField_label, .sField.sField--indent-auto .sField_label { width: auto; } .sMedia--sm .sField.sField--indent-sm.sField { flex-direction: row; } .sMedia--sm .sField.sField--indent-sm .sField_label { width: 80px; } .sMedia--sm .sField.sField--indent-md.sField { flex-direction: row; } .sMedia--sm .sField.sField--indent-md .sField_label { width: 130px; } .sMedia--sm .sField.sField--indent-lg.sField { flex-direction: row; } .sMedia--sm .sField.sField--indent-lg .sField_label { width: 180px; } .sMedia--sm .sField.sField--indent-xl.sField { flex-direction: row; } .sMedia--sm .sField.sField--indent-xl .sField_label { width: 230px; } .sMedia--sm .sField.sField--indent-xxl.sField { flex-direction: row; } .sMedia--sm .sField.sField--indent-xxl .sField_label { width: 280px; } .sMedia--sm .sField.sField--indent-sm.sField--labelDisplay-hidden .sField_label, .sMedia--sm .sField.sField--indent-md.sField--labelDisplay-hidden .sField_label, .sMedia--sm .sField.sField--indent-lg.sField--labelDisplay-hidden .sField_label, .sMedia--sm .sField.sField--indent-xl.sField--labelDisplay-hidden .sField_label, .sMedia--sm .sField.sField--indent-xxl.sField--labelDisplay-hidden .sField_label, .sMedia--sm .sField.sField--indent-sm.sField--noLabel .sField_label, .sMedia--sm .sField.sField--indent-md.sField--noLabel .sField_label, .sMedia--sm .sField.sField--indent-lg.sField--noLabel .sField_label, .sMedia--sm .sField.sField--indent-xl.sField--noLabel .sField_label, .sMedia--sm .sField.sField--indent-xxl.sField--noLabel .sField_label { display: block; visibility: hidden; } .sMedia--lg .sField--labelText-start-lg .sField_label { text-align: start; } .sMedia--lg .sField--labelText-end-lg .sField_label { text-align: end; } .sMedia--lg .sField.sField--indent-sm-lg.sField { flex-direction: row; } .sMedia--lg .sField.sField--indent-sm-lg .sField_label { width: 80px; } .sMedia--lg .sField.sField--indent-md-lg.sField { flex-direction: row; } .sMedia--lg .sField.sField--indent-md-lg .sField_label { width: 130px; } .sMedia--lg .sField.sField--indent-lg-lg.sField { flex-direction: row; } .sMedia--lg .sField.sField--indent-lg-lg .sField_label { width: 180px; } .sMedia--lg .sField.sField--indent-xl-lg.sField { flex-direction: row; } .sMedia--lg .sField.sField--indent-xl-lg .sField_label { width: 230px; } .sMedia--lg .sField.sField--indent-xxl-lg.sField { flex-direction: row; } .sMedia--lg .sField.sField--indent-xxl-lg .sField_label { width: 280px; } .sMedia--lg .sField.sField--indent-sm-lg.sField--labelDisplay-hidden .sField_label, .sMedia--lg .sField.sField--indent-md-lg.sField--labelDisplay-hidden .sField_label, .sMedia--lg .sField.sField--indent-lg-lg.sField--labelDisplay-hidden .sField_label, .sMedia--lg .sField.sField--indent-xl-lg.sField--labelDisplay-hidden .sField_label, .sMedia--lg .sField.sField--indent-xxl-lg.sField--labelDisplay-hidden .sField_label, .sMedia--lg .sField.sField--indent-sm-lg.sField--noLabel .sField_label, .sMedia--lg .sField.sField--indent-md-lg.sField--noLabel .sField_label, .sMedia--lg .sField.sField--indent-lg-lg.sField--noLabel .sField_label, .sMedia--lg .sField.sField--indent-xl-lg.sField--noLabel .sField_label, .sMedia--lg .sField.sField--indent-xxl-lg.sField--noLabel .sField_label { display: block; visibility: hidden; } a { text-decoration: none; color: #ffdd3a; } .sLink--standalone { color: rgba(0, 0, 0, 0.9); } .sLink--standalone:focus, .sLink--standalone:hover { color: #ffdd3a; } h1, .sHeading--1 { font-size: xx-large; } h2, .sHeading--2 { font-size: x-large; } h3, .sHeading--3 { font-size: large; } h4, .sHeading--4 { font-size: initial; } h5, .sHeading--5 { font-size: small; } .sHeading--alt { font-weight: normal; text-transform: uppercase; } .sText { display: inline-flex; flex-flow: row nowrap; align-items: center; font: 1.4rem 'Open Sans', sans-serif; padding: 6px 12px; line-height: 2rem; } .sText_icon { color: rgba(0, 0, 0, 0.6); } .sText_icon + .sText_label, .sText_label + .sText_icon { margin-left: 6px; } .sText--alt { color: #fff; } .sText--alt a, .sText--alt a:hover { color: #fff; } .sText--nowrap { white-space: nowrap; } .sText--underlined { text-decoration: underline; } .sText--bold { font-weight: bold; } .sText--normal { font-weight: normal; } .sText--uppercase { text-transform: uppercase; } .sText--xs { font-size: 1.1rem; } .sText--sm { font-size: 1.2rem; } .sText--md { font-size: 1.4rem; } .sText--lg { font-size: 2rem; } .sText--xl { font-size: 2.6rem; } .sText--xxl { font-size: 3.6rem; } .sText--base { color: rgba(0, 0, 0, 0.9); } .sText--muted { color: rgba(0, 0, 0, 0.6); } .sText--alt { color: #fff; } .sText--alt--muted { color: rgba(255, 255, 255, 0.6); } .sText--primary { color: #03A9F4; } .sText--success { color: #8BC34A; } .sText--error { color: #F44336; } .sText--errorAlt { background: #FFCDD2; color: #000000; } .sText--warning { color: #FFC107; } .sText--start { text-align: start; } .sText--center { text-align: center; } .sText--end { text-align: end; } .sText--justify { text-align: justify; } .sMedia--sm .sText--start-sm { text-align: start; } .sMedia--sm .sText--center-sm { text-align: center; } .sMedia--sm .sText--end-sm { text-align: end; } .sMedia--sm .sText--justify-sm { text-align: justify; } .sMedia--md .sText--start-md { text-align: start; } .sMedia--md .sText--center-md { text-align: center; } .sMedia--md .sText--end-md { text-align: end; } .sMedia--md .sText--justify-md { text-align: justify; } .sMedia--lg .sText--start-lg { text-align: start; } .sMedia--lg .sText--center-lg { text-align: center; } .sMedia--lg .sText--end-lg { text-align: end; } .sMedia--lg .sText--justify-lg { text-align: justify; } .sList { list-style: none; padding: 0; } .sList > li > p, .sList > div { margin-bottom: 12px; } .sList > dd, .sList > div > dd { margin-left: 0; } .sList > dt, .sList > div > dt { font-weight: bold; } .sMedia--md .sList--tabular { display: table; } .sMedia--md .sList--tabular > div { display: table-row; } .sMedia--md .sList--tabular > div > dt, .sMedia--md .sList--tabular > div > dd { display: table-cell; } .sMedia--md .sList--tabular > div > dt { padding-right: 24px; } .sList--link a { color: rgba(0, 0, 0, 0.9); } .sList--link a.current { font-weight: bold; } .sList--checklist > li { position: relative; padding-left: 24px; } .sList--checklist > li:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ' '; line-height: inherit; display: flex; justify-content: center; align-items: center; width: 18px; content: '\f00c'; position: absolute; left: 0; top: 0; color: #8BC34A; } .sList--bulleted { list-style: disc outside none; margin-left: 24px; } .sList--bulleted > li { position: relative; } .sList--bulleted > li:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ''; line-height: inherit; display: flex; justify-content: center; align-items: center; width: 18px; position: absolute; left: 0; top: 0; color: #8BC34A; } .sReport { position: relative; } .sReport_body { max-width: 100%; overflow: auto; } .sReport_table { border-spacing: 0; border-collapse: collapse; width: 100%; } .sReport_header { padding: 0; border-bottom: 1px solid #03A9F4; padding: 6px 12px; font-weight: normal; text-align: center; vertical-align: top; } .sReport_header[data-sReport-order-by]:hover { cursor: pointer; text-decoration: underline; } .sReport_data { border-bottom: 1px solid #EEEEEE; border-right: 1px solid #F5F5F5; padding: 6px 12px; vertical-align: top; background: white; } .sReport_data:last-child { border-right: none; } .sReport_header--noPad, .sReport_data--noPad { padding: 0 !important; } .sReport_header--min { width: 1%; } .sReport_header--center, .sReport_data--center { text-align: center; } .sReport_header--start, .sReport_data--start { text-align: start; } .sReport_header--end, .sReport_data--end { text-align: end; } .sReport_sortIcon { display: inline-block; position: relative; width: 12px; height: 1em; margin-left: 5px; vertical-align: middle; } .sReport_sortIcon:before, .sReport_sortIcon:after { content: ' '; display: inline-block; position: absolute; opacity: .35; left: 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; } .sReport_sortIcon:before { top: 0; border-bottom: 6px solid; } .sReport_sortIcon:after { bottom: 0; border-top: 6px solid; } .sReport--sortAsc .sReport_sortIcon:before, .sReport--sortDesc .sReport_sortIcon:after { opacity: 1; } .sReport_row--success td { background: #F1F8E9; color: rgba(0, 0, 0, 0.9); border-color: #C5E1A5; } .sReport_row--success td a, .sReport_row--success td a:hover { color: #33691E; text-decoration: underline; } .sReport_row--error td { background: #FFEBEE; color: rgba(0, 0, 0, 0.9); border-color: #FFCDD2; } .sReport_row--error td a, .sReport_row--error td a:hover { color: #B71C1C; text-decoration: underline; } .sReport_row--info td { background: #E1F5FE; color: rgba(0, 0, 0, 0.9); border-color: #B3E5FC; } .sReport_row--info td a, .sReport_row--info td a:hover { color: #01579B; text-decoration: underline; } .sReport_row--warning td { background: #FFF8E1; color: rgba(0, 0, 0, 0.9); border-color: #FFECB3; } .sReport_row--warning td a, .sReport_row--warning td a:hover { color: #FF6F00; text-decoration: underline; } .sReport_removeSortIcon { margin-left: 3px; opacity: .35; } .sReport--sortAsc .sReport_removeSortIcon { opacity: 1; } .sReport_overlay { background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; } .sImage, .sVideo, .sMap { background-size: cover; background-position: center; position: relative; overflow: hidden; align-self: stretch; } .sImage:before, .sVideo:before, .sMap:before { padding: 0 0 100% 0; content: ''; display: block; } .sImage img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; display: block; max-width: 100%; height: auto; } .sVideo iframe, .sMap iframe { border: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; display: block; width: 100%; max-width: 100%; height: 100%; } .sImage--16x9:before, .sVideo--16x9:before, .sMap--16x9:before { padding: 0 0 56.25% 0; } .sImage--8x5:before, .sVideo--8x5:before, .sMap--8x5:before { padding: 0 0 62.5% 0; } .sImage--4x3:before, .sVideo--4x3:before, .sMap--4x3:before { padding: 0 0 75% 0; } .sImage--3x2:before, .sVideo--3x2:before, .sMap--3x2:before { padding: 0 0 66.66666667% 0; } .sNotify { box-sizing: border-box; position: fixed; bottom: 0; right: 0; z-index: 100000; display: none; max-height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden; } .sNotify--visible { display: block; } .sNotify_note { position: relative; } .sMedia--md .sNotify { width: 500px; padding: 18px; } .sMedia--md .sNotify_note { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); margin-bottom: 6px; } .sMedia--md .sNotify_note:last-child { margin-bottom: 0; } .sNotify_noteProgressbar { background: rgba(0, 0, 0, 0.3); position: absolute; height: 2px; left: 2px; right: 2px; bottom: 2px; } .sNotify_noteProgressbarInner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.5); } .sCarousel { overflow: hidden; position: relative; background-color: #eee; } .sCarousel_items { background: white; display: flex; flex-flow: row nowrap; position: relative; left: 0; top: 0; width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); touch-action: pan-y; } .sCarousel_item { flex-shrink: 0; flex-grow: 1; display: flex; flex-flow: column nowrap; align-items: center; flex-basis: 0; } .sCarousel_button { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; text-align: center; vertical-align: middle; font-size: 40px; line-height: 40px; z-index: 1; color: black; text-shadow: 0 0 15px white; } .sCarousel_button--prev { left: 10px; } .sCarousel_button--next { right: 10px; } .sCarousel_button--disabled { opacity: .5; text-shadow: none; } .sTabLayout { display: flex; flex-flow: column nowrap; } .sTabLayout_tabs { display: flex; flex-flow: row nowrap; flex-shrink: 0; } .sTabLayout--tabsCentered { justify-content: center; } .sTabLayout_tab--disabled { opacity: .5; } .sTabLayout--tabsWide .sTabLayout_tab { flex-grow: 1; flex-basis: 100%; } .sTabLayout_panels { position: relative; overflow: hidden; flex-grow: 1; background: white; } .sTabLayout_panel { position: absolute; z-index: -1; width: 100%; height: 100%; left: 100%; top: 0; overflow: auto; } .sTabLayout_panel--active { position: static; } .sNote { background: white; display: flex; flex-flow: row nowrap; } .sNote_iconContainer { align-items: center; font-size: x-large; padding: 6px 12px; display: none; } .sNote_icon { display: inline-block; width: 1em; text-align: center; border-radius: 50px; padding: 12px; } .sMedia--sm .sNote_iconContainer { display: flex; } .sNote_textContainer { flex-grow: 1; padding: 12px 12px 0 12px; align-self: center; } .sNote_title { font-size: initial; font-weight: normal; margin-bottom: 12px; } .sNote_buttonContainer { padding: 6px; } .sNote_buttonClose { border: none; } .sNote--sm .sNote_iconContainer { align-items: center; font-size: large; padding: 6px; } .sNote--sm .sNote_icon { width: 1em; height: 1em; text-align: center; border-radius: 50px; padding: 6px; } .sNote--default { background: #E0E0E0; color: #000000; } .sNote--default .sNote_textContainer, .sNote--default .sNote_title, .sNote--default .sNote_message { color: #000000; } .sNote--default .sNote_buttonClose { background: #E0E0E0; color: #000000; } .sNote--default .sNote_iconContainer { background: #9E9E9E; } .sNote--default .sNote_icon { background: white; color: #9E9E9E; } .sNote--info { background: #1976D2; color: #ffffff; } .sNote--info .sNote_textContainer, .sNote--info .sNote_title, .sNote--info .sNote_message { color: #ffffff; } .sNote--info .sNote_buttonClose { background: #1976D2; color: #ffffff; } .sNote--info .sNote_iconContainer { background: #0D47A1; } .sNote--info .sNote_icon { background: white; color: #0D47A1; } .sNote--info.sNote--defaultIcon .sNote_icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sNote--info.sNote--defaultIcon .sNote_icon:before { content: '\f129'; } .sNote--warning { background: #FFA000; color: #000000; } .sNote--warning .sNote_textContainer, .sNote--warning .sNote_title, .sNote--warning .sNote_message { color: #000000; } .sNote--warning .sNote_buttonClose { background: #FFA000; color: #000000; } .sNote--warning .sNote_iconContainer { background: #FF6F00; } .sNote--warning .sNote_icon { background: white; color: #FF6F00; } .sNote--warning.sNote--defaultIcon .sNote_icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sNote--warning.sNote--defaultIcon .sNote_icon:before { content: '\f071'; } .sNote--error { background: #D32F2F; color: #ffffff; } .sNote--error a, .sNote--error a:hover { color: #ffffff; text-decoration: underline; } .sNote--error .sNote_textContainer, .sNote--error .sNote_title, .sNote--error .sNote_message { color: #ffffff; } .sNote--error .sNote_buttonClose { background: #D32F2F; color: #ffffff; } .sNote--error .sNote_iconContainer { background: #B71C1C; } .sNote--error .sNote_icon { background: white; color: #B71C1C; } .sNote--error.sNote--defaultIcon .sNote_icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sNote--error.sNote--defaultIcon .sNote_icon:before { content: '\f12a'; } .sNote--success { background: #689F38; color: #ffffff; } .sNote--success .sNote_textContainer, .sNote--success .sNote_title, .sNote--success .sNote_message { color: #ffffff; } .sNote--success .sNote_buttonClose { background: #689F38; color: #ffffff; } .sNote--success .sNote_iconContainer { background: #33691E; } .sNote--success .sNote_icon { background: white; color: #33691E; } .sNote--success.sNote--defaultIcon .sNote_icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sNote--success.sNote--defaultIcon .sNote_icon:before { content: '\f00c'; } .sAlert { padding: 6px 12px; border-radius: 3px; } .sAlert_icon { margin-right: 12px; } .sAlert--info { background: #B3E5FC; color: #000000; } .sAlert--info .sAlert_icon { color: #0288D1; } .sAlert--info.sAlert--defaultIcon .sAlert_icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sAlert--info.sAlert--defaultIcon .sAlert_icon:before { content: '\f05a'; } .sAlert--success { background: #DCEDC8; color: #000000; } .sAlert--success .sAlert_icon { color: #689F38; } .sAlert--warning { background: #FFECB3; color: #000000; } .sAlert--warning .sAlert_icon { color: #FFA000; } .sAlert--warning.sAlert--defaultIcon .sAlert_icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sAlert--warning.sAlert--defaultIcon .sAlert_icon:before { content: '\f071'; } .sAlert--error { background: #FFCDD2; color: #000000; } .sAlert--error .sAlert_icon { color: #D32F2F; } .sPage { background: white; min-height: 100%; } .sPage_overlay--active { position: fixed !important; } .sOverlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -10; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.75); } .sOverlay_container { position: relative; } .sOverlay--refresh { position: absolute; z-index: 20; background: rgba(255, 255, 255, 0.75); } .sOverlay--info:after { content: attr(data-title); color: white; font-size: large; } .sLoader { margin: 10px; display: inline-block; font-size: 2px; position: relative; text-indent: -9999em; border-top: 2em solid rgba(68, 68, 68, 0.2); border-right: 2em solid rgba(68, 68, 68, 0.2); border-bottom: 2em solid rgba(68, 68, 68, 0.2); border-left: 2em solid #444; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; border-radius: 50%; width: 10em; height: 10em; } .sLoader:after { border-radius: 50%; width: 10em; height: 10em; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .sLoader--light { margin: 10px; display: inline-block; font-size: 2px; position: relative; text-indent: -9999em; border-top: 2em solid rgba(255, 255, 255, 0.2); border-right: 2em solid rgba(255, 255, 255, 0.2); border-bottom: 2em solid rgba(255, 255, 255, 0.2); border-left: 2em solid #fff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; border-radius: 50%; width: 10em; height: 10em; } .sLoader--light:after { border-radius: 50%; width: 10em; height: 10em; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .sSpinner--inline { margin: 0 auto; vertical-align: middle; } .sSpinner--inline > div { width: 10px; height: 10px; margin: 0 2px; background-color: #2196F3; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .sSpinner--inline > div:nth-child(1) { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .sSpinner--inline > div:nth-child(2) { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } .sCard { display: flex; flex-flow: column nowrap; background: white; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .sCard_body { display: flex; flex-flow: column nowrap; padding: 12px 12px 0 12px; } .sBadge { display: inline-block; padding: 6px 12px; border-radius: .2em; text-transform: uppercase; font-size: 80%; padding: .25em .4em; line-height: 1; } .sBadge--bordered { border-width: 1px; border-style: solid; } .sBadge--default { background: #EEEEEE; } .sBadge--error { background: #FFEBEE; color: rgba(0, 0, 0, 0.9); border-color: #FFCDD2; } .sBadge--error a, .sBadge--error a:hover { color: #B71C1C; text-decoration: underline; } .sBadge--success { background: #F1F8E9; color: rgba(0, 0, 0, 0.9); border-color: #C5E1A5; } .sBadge--success a, .sBadge--success a:hover { color: #33691E; text-decoration: underline; } .sBadge--info { background: #E1F5FE; color: rgba(0, 0, 0, 0.9); border-color: #B3E5FC; } .sBadge--info a, .sBadge--info a:hover { color: #01579B; text-decoration: underline; } .sBadge--warning { background: #FFF8E1; color: rgba(0, 0, 0, 0.9); border-color: #FFECB3; } .sBadge--warning a, .sBadge--warning a:hover { color: #FF6F00; text-decoration: underline; } .sInlineFormset_emptyForm { display: none; } .sInlineFormset_label--required { font-weight: bold; } .sInlineFormset_label--required:after { color: red; display: inline-block; content: '*'; margin-right: -12px; padding-left: 4px; } .sInlineFormset_fieldErrors { border-top: 1px solid #F44336; font-size: 1.2rem; color: #F44336; } .sSidebar { position: absolute; top: 0; left: 0; overflow: auto; z-index: -1; } .sSidebar_panel--right, .sSidebar_panel--left { height: 100%; } .sSidebar--open { position: fixed; } .sPaginator { display: flex; flex-flow: row nowrap; justify-content: center; } .sPaginator_button { padding: 6px; margin: 0 6px; user-select: none; border: none; min-width: 2em; text-align: center; box-sizing: content-box; background: transparent; } .sPaginator_ellipsis { padding: 6px; margin: 0 6px; user-select: none; border: none; min-width: 2em; text-align: center; box-sizing: content-box; background: transparent; margin: 0; font-weight: bold; } .sPaginator_button--disabled { opacity: .5; } /* Icon classes can be used entirely standalone. They are named after their original file names. Example usage in HTML: `display: block` sprite:
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class: // CSS .icon { display: inline-block; } // HTML */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { } @keyframes overlay-spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } body { background: #28282e; } .banner { background-repeat: no-repeat; background-position: center center; background-color: #28282e; background-size: cover; overflow: hidden; background-image: url('../images/home-start-bg.jpg'); position: relative; } .banner_inner { box-sizing: border-box; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end; height: 390px; z-index: 1; position: relative; } .banner_logo { margin-bottom: 10px; display: block; width: 180px; } .banner_slogan { margin: 0; font-size: 24px; line-height: 27px; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 300; color: #fff; text-transform: none; text-align: right; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); } .banner_feefo { margin-top: 20px; border: 1px solid white; display: block; } .banner_video { width: 100%; position: absolute; top: 0; } .home_intro, .home_outro { font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 400; } .services_heading { font-size: 26px; line-height: 30px; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 600; text-align: center; text-transform: uppercase; } .services_service { height: 280px; flex-basis: 100%; background-repeat: no-repeat; background-position: center center; background-color: #28282e; background-size: cover; padding: 24px; position: relative; box-sizing: border-box; display: flex; flex-flow: column nowrap; justify-content: flex-end; } .services_service:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: block; background-color: #414141; opacity: 0.3; } .sMedia--lg .services_service { height: 360px; flex-basis: 33.33333333%; } .services_serviceTitle { position: relative; z-index: 3; width: 100%; font-size: 30px; line-height: 35px; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 400; color: #fff; text-transform: none; } .header { background-color: #28282e; color: #fff; } .header_inner { padding-top: 12px; padding-bottom: 12px; } .header_menuButton { font-size: x-large; } .header_contactsEmail, .header_contactsPhone { font-size: large; } .header_contactsLink { color: white; text-decoration: none; font-weight: 300; } .header_contactsLink:hover, .header_contactsLink:focus { color: #ffe66d; text-decoration: underline; } .header_contactsCallBack { flex-direction: column; border-radius: 8px; padding: 12px 24px; } .header_nav { flex-basis: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-end; } .header_navList { margin-bottom: -12px; } .header_navListItem { padding: 0 12px; } .header_navListItem:last-child { padding-right: 0; } .header_navListItem--current .header_navListItemLink { color: #ffe66d; border-bottom-color: #ffe66d; } .header_navListItemLink { display: inline-block; padding: 6px 0; font-size: 14px; line-height: 19px; font-weight: 400; color: #fff; text-transform: uppercase; border-bottom: 2px solid transparent; } .header_navListItemLink:hover, .header_navListItemLink:focus { text-decoration: none; color: #ffe66d; border-bottom-color: #ffe66d; cursor: pointer; } .infoPage { font-size: 18px; line-height: 30px; font-weight: 400; } .infoPage h1, .infoPage h2, .infoPage h3 { text-transform: uppercase; font-weight: 600; } .infoPage h1 { font-size: 32px; line-height: 38px; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 700; margin-top: 36px; } .infoPage a { font-weight: 600; } .infoPageNav { margin-top: 36px; } .infoPageNav_listItem { margin-bottom: 24px; } .infoPageNav_listLink { position: relative; padding-left: 24px; display: inline-block; font-size: 24px; font-weight: 300; color: rgba(40, 40, 46, 0.6); cursor: pointer; line-height: 30px; } .infoPageNav_listLink:before { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; display: block; content: ''; visibility: hidden; opacity: 0; background-color: #ffe66d; transition: all 0.3s ease; } .infoPageNav_listLink:hover, .infoPageNav_listLink:focus { color: rgba(40, 40, 46, 0.8); transition: all 0.3s ease; } .infoPageNav_listLink:hover:before, .infoPageNav_listLink:focus:before { opacity: 1; visibility: visible; transition: all 0.3s ease; } .infoPageNav_listItem--current .infoPageNav_listLink { font-size: 26px; font-weight: 600; color: rgba(40, 40, 46, 0.8); transition: all 0.3s ease; line-height: 41px; } .infoPageNav_listItem--current .infoPageNav_listLink:before { opacity: 1; visibility: visible; transition: all 0.3s ease; } .infoPageBanner { background-image: url('../images/bg-intro-privacy.jpg'); background-repeat: no-repeat; background-position: center center; background-color: #28282e; background-size: cover; } .infoPageBanner_inner { box-sizing: border-box; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; height: 390px; } .infoPageBanner_title { font-size: 48px; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 600; color: #fff; text-transform: uppercase; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); text-align: end; } .infoPageSidebar.sb-slidebar { background: white; padding: 24px; border-left: 1px solid rgba(40, 40, 46, 0.8); } .infoPageSidebar.sb-slidebar .infoPageNav_listItem { margin-bottom: 18px; } .infoPageSidebar.sb-slidebar .infoPageNav_listLink { font-size: 18px; padding-left: 24px; } .infoPageSidebar.sb-slidebar .infoPageNav_listItem--current.infoPageNav_listLink { font-size: 20px; } .sOverlay--bwp { background: rgba(255, 255, 255, 0.75); z-index: 999; } .sOverlay--bwp .sOverlay_spinner { position: absolute; display: block; width: 50px; height: 50px; border-radius: 25px; box-shadow: 0 2px 0 0 #ffe66d; animation: overlay-spinner 1s linear infinite; } .productTypeSelector { text-align: center; } .productTypeSelector .sButton { font-size: 16px; text-transform: uppercase; color: #28282e; text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin: 0 12px; } .productTypeSelector .sButton:hover { color: #28282e; text-decoration: none; border-bottom: 2px solid #ffe66d; } .productTypeSelector .sButton--current { border-bottom: 2px solid #ffe66d; } .featuredVehicles { min-height: 600px; } .featuredVehicles_item { padding: 18px; } .featuredVehicle { flex-grow: 1; position: relative; overflow: hidden; border: 1px solid #e3e3e3; border-radius: 6px; background-clip: padding-box; display: flex; flex-flow: column nowrap; } .featuredVehicle:after { position: absolute; right: -26px; top: 13px; width: 100px; height: 26px; display: block; text-align: center; font-size: 12px; line-height: 26px; text-transform: uppercase; color: #fff; font-weight: 600; background: #F94F4F; transform: rotate(45deg); content: 'special'; } .featuredVehicle_vehicle { flex-grow: 1; } .featuredVehicle_vehicleDetails { font-size: 18px; font-weight: 600; text-align: center; } .featuredVehicle_dealDerivative { font-weight: 300; font-size: 16px; } .featuredVehicle_dealDescription { font-weight: 300; font-size: 14px; } .sReport--dealResults { color: #777777; flex-grow: 1; } .sReport--dealResults .sReport_header { vertical-align: bottom; font-weight: 600; border-bottom: 2px solid #ffe66d; border-left: 0; background-color: #fff; user-select: none; } .sReport--dealResults .sReport_data { border-right: 2px solid #efefef; border-bottom: none; vertical-align: middle; } .sReport--dealResults .sReport_data:last-child, .sReport--dealResults .sReport_data:nth-last-child(2) { border-right: none; } .sReport--dealResults .sReport_data--noResults { text-align: center; padding: 24px; } .sReport--dealResults .sReport_dataRow:nth-child(2n+1) .sReport_data { background-color: #f7f7f7; } .sPaginator--dealResults { font-size: 16px; font-weight: lighter; padding-top: 30px; } .sPaginator--dealResults .sPaginator_button { color: #28282e; font-weight: 400; background: #ffe66d; border-radius: 3px; font-size: 14px; } .sPaginator--dealResults .sPaginator_button:hover { transition: all 0.3s ease; background: #ffdd3a; } .sPaginator--dealResults .sPaginator_button--current { color: #fff; background: #28282E; } .sPaginator--dealResults .sPaginator_button--current:hover { background: #28282E; } .sReport--dealResults { min-height: 20vh; } .sReport_headerText { display: block; } .sReport--productClass-business .incVat { display: none; } .sReport--productClass-personal .excVat { display: none; } .sControl--bordered { box-shadow: none; border-color: #28282e; } .sField--filter { color: #888888; font-weight: 300; } .sField--filter .sField_label { padding-left: 12px; box-shadow: inset 4px 0 #ffe66d; } .sField--filter.sField--noLabel .sInput_label, .sField--filter .sField_labelText { text-transform: uppercase; color: #28282e; font-weight: 600; } .sCheckbox { background: white; border-color: #9E9E9E; color: white; } :checked ~ .sCheckbox, .sCheckbox--checked { background: #ffe66d; border-color: #28282e; color: #28282e; } :disabled ~ .sCheckbox, .sCheckbox.sCheckbox--disabled { background: #E0E0E0; border-color: #E0E0E0; color: rgba(0, 0, 0, 0.6); } :focus ~ .sCheckbox, .sCheckbox:focus { background: #c3f8ff; color: #28282e; } .footer { background: #28282e; } .footer_text { color: #909090; font-size: 12px; } .footer_menu { text-align: center; padding-bottom: 18px; } .footer_menuLink { color: #ffe66d; font-size: 16px; font-weight: 400; display: block; } .footer_sponsors { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; padding-bottom: 18px; } .footer_sponsorsImageContainer { margin: 0 3px 6px 3px; flex-shrink: 0; flex-grow: 0; } .footer_sponsorsImage { display: block; height: 30px; } .sMedia--md .footer_sponsorsImageContainer { margin: 0 6px 12px 6px; } .sMedia--md .footer_sponsorsImage { height: 40px; } .sMedia--md .footer_menu { text-align: right; } .sMedia--md .footer_menuLink { display: inline-block; padding: 0 8px; border-right: 2px solid #909090; } .sMedia--md .footer_menuLink:last-child { border: none; } .sMedia--lg .footer_sponsorsImageContainer { margin: 0 12px 18px 12px; } .sMedia--lg .footer_sponsorsImage { height: 50px; } .sButton { transition: all 0.3s ease; box-shadow: none; text-transform: none; } .sButton:hover, .sButton:focus { transition: all 0.3s ease; } .sButton--xs { font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 600; } .sButton--primary:hover, .sButton--primary:focus { background: #ffdd3a; } .sButton--rounded { border-radius: 50px; } .sButton--brandRounded { background: #ffe66d; color: #28282e; border-radius: 50px; text-transform: uppercase; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 600; } .sButton--brandRounded:hover, .sButton--brandRounded:focus { background: #ffdd3a; transition: all 0.3s ease; } .enquiryDialog { background: white; border-radius: 18px; } .sField_label { font-weight: 400; color: #a0a3a9; } .sField--required .sField_labelText { font-weight: 400; } .sField--required .sField_labelText:after { color: #a0a3a9; } .sidebar { background: #28282e; color: white; } .sidebar_nav { padding: 12px 0; } .sidebar_navListItem { padding: 12px 0; } .sidebar_navLink { display: block; color: white; text-transform: uppercase; text-align: center; font-size: small; } .testimonials { padding-top: 36px; } .testimonial { display: flex; flex-flow: column nowrap; margin: 0 0 36px 0; } .testimonial_imageContainer { align-self: center; text-align: right; flex-shrink: 0; margin-bottom: 24px; } .testimonial_image { max-height: 75px; max-width: 200px; } .testimonial_companyName { font-weight: 800; font-size: 28px; } .testimonial_author { font-style: italic; font-size: 16px; } .sMedia--md .testimonial { flex-direction: row; } .sMedia--md .testimonial_imageContainer { width: 200px; margin: 0 24px 0 0; align-self: flex-start; } .faq_item { padding: 24px 0; } .faq_question { margin-left: 0; font-size: 25px; padding-left: 30px; font-size: 24px; color: rgba(40, 40, 46, 0.6); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; border-left: 4px solid #ffe66d; line-height: 40px; } .sb-slidebar { height: 100%; overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */ position: fixed; top: 0; z-index: 0; /* Slidebars sit behind sb-site. */ display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */ background-color: #28282e; /* Default Slidebars background colour, overwrite this with your own css. */ -webkit-transform: translate(0px); /* Fixes issues with translated and z-indexed elements on iOS 7. */ } @media screen and (max-width: 1023px) { #sb-site, .sb-site-container, .sb-slidebar { /* Set box model to prevent any user added margins or paddings from altering the widths or heights. */ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { width: 100%; overflow-x: hidden; /* Stops horizontal scrolling. */ } html { height: 100%; /* Site is as tall as device. */ } body { min-height: 100%; height: auto; position: relative; /* Required for static Slidebars to function properly. */ } /* Site scroll locking - prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */ html.sb-scroll-lock.sb-active:not(.sb-static) { overflow: hidden; } /* ---------- * 002 - Site */ #sb-site, .sb-site-container { /* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */ width: 100%; position: relative; z-index: 1; /* Site sits above Slidebars */ background-color: #ffffff; /* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */ } /* --------------- * 003 - Slidebars */ .sb-left { left: 0; /* Set Slidebar to the left. */ } .sb-right { right: 0; /* Set Slidebar to the right. */ } html.sb-static .sb-slidebar, .sb-slidebar.sb-static { position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */ } .sb-slidebar.sb-active { display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */ } .sb-style-overlay { z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */ } .sb-momentum-scrolling { -webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */ } /* Slidebar widths for browsers/devices that don't support media queries. */ .sb-slidebar { width: 30%; } .sb-width-thin { width: 15%; } .sb-width-wide { width: 45%; } /* --------------- * 004 - Animation */ .sb-slide, #sb-site, .sb-site-container, .sb-slidebar { -webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease; -o-transition: -o-transform 400ms ease; transition: transform 400ms ease; -webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */ -webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */ } /* -------------------- * 005 - Helper Classes */ .sb-hide { display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */ } } html.sb-active, .sb-active body { overflow: hidden; }