UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

1,438 lines (1,169 loc) 37.3 kB
@charset "UTF-8"; @font-face { font-family: 'AltinnNo'; src: url(/Static/icon/icons/icons.eot); src: url(/Static/icon/icons/icons.eot?#iefix) format("embedded-opentype"), url(/Static/icon/icons/icons.woff2) format("woff2"), url(/Static/icon/icons/icons.woff) format("woff"), url(/Static/icon/icons/icons.ttf) format("truetype"), url(/Static/icon/icons/icons.otf) format("opentype"); font-weight: normal; font-style: normal; } .ai { display: inline-block; font: normal normal normal 14px/1 'AltinnNo'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ai-phone:before { content: ''; } .ai-exit:before { content: ''; } .ai-search:before { content: ''; } .ai-back:before { content: ''; } .ai-arrowright:before { content: ''; } .ai-send:before { content: ''; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } h1 { font-size: 2em; margin: .67em 0; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } button, input { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button { text-transform: none; } button, html [type=button] { -webkit-appearance: button; } [type=button]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } @media print { *, ::after, ::before, div::first-letter, div::first-line, li::first-letter, li::first-line, p::first-letter, p::first-line { text-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } h2, p { orphans: 3; widows: 3; } h2 { page-break-after: avoid; } } html { -webkit-box-sizing: border-box; box-sizing: border-box; } *, ::after, ::before { -webkit-box-sizing: inherit; box-sizing: inherit; } @-ms-viewport { width: device-width; } html { -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1.5; color: #6a6a6a; background-color: #fff; } [tabindex="-1"]:focus { outline: 0 !important; } h1, h2 { margin-top: 0; margin-bottom: .5rem; } p { margin-top: 0; margin-bottom: 1rem; } ul { margin-top: 0; margin-bottom: 1rem; } a { color: #1eaef7; text-decoration: none; } a:focus, a:hover { color: #0783c2; text-decoration: underline; } a, button, input, label { -ms-touch-action: manipulation; touch-action: manipulation; } label { display: inline-block; margin-bottom: .5rem; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } button, input { line-height: inherit; } input[type=search] { -webkit-appearance: none; } h1, h2 { margin-bottom: 6px; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } .container { position: relative; margin-left: auto; margin-right: auto; padding-right: 12px; padding-left: 12px; } @media (min-width: 576px) { .container { padding-right: 12px; padding-left: 12px; } } @media (min-width: 768px) { .container { padding-right: 12px; padding-left: 12px; } } @media (min-width: 992px) { .container { padding-right: 12px; padding-left: 12px; } } @media (min-width: 1200px) { .container { padding-right: 12px; padding-left: 12px; } } @media (min-width: 576px) { .container { width: 540px; max-width: 100%; } } @media (min-width: 768px) { .container { width: 720px; max-width: 100%; } } @media (min-width: 992px) { .container { width: 960px; max-width: 100%; } } @media (min-width: 1200px) { .container { width: 1056px; max-width: 100%; } } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; } @media (min-width: 576px) { .row { margin-right: -12px; margin-left: -12px; } } @media (min-width: 768px) { .row { margin-right: -12px; margin-left: -12px; } } @media (min-width: 992px) { .row { margin-right: -12px; margin-left: -12px; } } @media (min-width: 1200px) { .row { margin-right: -12px; margin-left: -12px; } } .col-lg-10, .col-lg-8, .col-sm-12 { position: relative; width: 100%; min-height: 1px; padding-right: 12px; padding-left: 12px; } @media (min-width: 576px) { .col-lg-10, .col-lg-8, .col-sm-12 { padding-right: 12px; padding-left: 12px; } } @media (min-width: 768px) { .col-lg-10, .col-lg-8, .col-sm-12 { padding-right: 12px; padding-left: 12px; } } @media (min-width: 992px) { .col-lg-10, .col-lg-8, .col-sm-12 { padding-right: 12px; padding-left: 12px; } } @media (min-width: 1200px) { .col-lg-10, .col-lg-8, .col-sm-12 { padding-right: 12px; padding-left: 12px; } } @media (min-width: 576px) { .col-sm-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (min-width: 992px) { .col-lg-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; } .col-lg-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; } .offset-lg-1 { margin-left: 8.33333%; } .offset-lg-2 { margin-left: 16.66667%; } } .form-control { display: block; width: 100%; padding: .375rem .75rem; font-size: 1.6rem; line-height: 1.25; color: #6a6a6a; background-color: #fff; background-image: none; background-clip: padding-box; border: 1px solid #ccc; border-radius: .25rem; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; } .form-control::-ms-expand { background-color: transparent; border: 0; } .form-control:focus { color: #6a6a6a; background-color: #fff; border-color: #99dafb; outline: 0; } .form-control::-webkit-input-placeholder { color: #efefef; opacity: 1; } .form-control:-ms-input-placeholder { color: #efefef; opacity: 1; } .form-control::-ms-input-placeholder { color: #efefef; opacity: 1; } .form-control:disabled { background-color: #f5f5f5; opacity: 1; } .form-control:disabled { cursor: not-allowed; } .form-group { margin-bottom: 12px; } .btn { display: inline-block; font-weight: 400; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: .375rem 1rem; font-size: 1.6rem; border-radius: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .btn:focus, .btn:hover { text-decoration: none; } .btn:focus { outline: 0; -webkit-box-shadow: 0 0 0 2px rgba(30, 174, 247, 0.25); box-shadow: 0 0 0 2px rgba(30, 174, 247, 0.25); } .btn:disabled { cursor: not-allowed; opacity: .65; } .btn:active { background-image: none; } .btn-secondary { color: #6a6a6a; background-color: #fff; border-color: #ccc; } .btn-secondary:hover { color: #6a6a6a; background-color: #e6e6e6; border-color: #adadad; } .btn-secondary:focus { -webkit-box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5); box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5); } .btn-secondary:disabled { background-color: #fff; border-color: #ccc; } .btn-secondary:active { color: #6a6a6a; background-color: #e6e6e6; background-image: none; border-color: #adadad; } .collapse { display: none; } .collapse.show { display: block; } .input-group { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .input-group .form-control { position: relative; z-index: 2; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 1%; margin-bottom: 0; } .input-group .form-control:active, .input-group .form-control:focus, .input-group .form-control:hover { z-index: 3; } .input-group .form-control, .input-group-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .input-group-btn { white-space: nowrap; vertical-align: middle; } .input-group .form-control:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group-btn:not(:first-child) > .btn { border-bottom-left-radius: 0; border-top-left-radius: 0; } .input-group-btn { position: relative; font-size: 0; white-space: nowrap; } .input-group-btn > .btn { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .input-group-btn > .btn:active, .input-group-btn > .btn:focus, .input-group-btn > .btn:hover { z-index: 3; } .input-group-btn:not(:first-child) > .btn { z-index: 2; margin-left: -1px; } .input-group-btn:not(:first-child) > .btn:active, .input-group-btn:not(:first-child) > .btn:focus, .input-group-btn:not(:first-child) > .btn:hover { z-index: 3; } .d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .mb-0 { margin-bottom: 0 !important; } .pt-2 { padding-top: 24px !important; } .mr-auto { margin-right: auto !important; } .ml-auto { margin-left: auto !important; } @media (min-width: 992px) { .pt-lg-3 { padding-top: 36px !important; } } * { -webkit-box-sizing: border-box; box-sizing: border-box; } body, div, h1, h2, html, iframe, label, li, p, ul { padding: 0; margin: 0; } button, input { font-family: DIN-reg; font-weight: 400; } h1 { font-size: 24px; font-size: 2.4rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 768px) { h1 { font-size: 28px; font-size: 2.8rem; line-height: 1.4; -webkit-font-smoothing: subpixel-antialiased; } } @media (min-width: 992px) { h1 { font-size: 36px; font-size: 3.6rem; line-height: 1.2; -webkit-font-smoothing: subpixel-antialiased; } } h2 { font-size: 18px; font-size: 1.8rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 768px) { h2 { font-size: 22px; font-size: 2.2rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } } @media (min-width: 992px) { h2 { font-size: 24px; font-size: 2.4rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } } @media (min-width: 1200px) { h2 { font-size: 28px; font-size: 2.8rem; line-height: 1.4; -webkit-font-smoothing: subpixel-antialiased; } } .a-h3, .a-linkFeatured { font-size: 16px; font-size: 1.6rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 768px) { .a-h3, .a-linkFeatured { font-size: 18px; font-size: 1.8rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } } @media (min-width: 992px) { .a-h3, .a-linkFeatured { font-size: 20px; font-size: 2rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } } .a-btn, .a-text, .a-text p { font-size: 16px; font-size: 1.6rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } @media (min-width: 768px) { .a-btn, .a-text, .a-text p { font-size: 18px; font-size: 1.8rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } } .a-form-group .a-form-label, .form-group .a-form-label, p { font-size: 16px; font-size: 1.6rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } input::-webkit-input-placeholder { overflow: visible; color: #6a6a6a !important; opacity: 1 !important; -webkit-font-smoothing: subpixel-antialiased; } input:-ms-input-placeholder { overflow: visible; color: #6a6a6a !important; opacity: 1 !important; -webkit-font-smoothing: subpixel-antialiased; } input::-ms-input-placeholder { overflow: visible; color: #6a6a6a !important; opacity: 1 !important; -webkit-font-smoothing: subpixel-antialiased; } input:focus::-webkit-input-placeholder { color: transparent !important; } input:focus:-ms-input-placeholder { color: transparent !important; } input:focus::-ms-input-placeholder { color: transparent !important; } input:focus::-moz-placeholder { color: transparent !important; } .a-form-group, .form-group { position: relative; } .a-form-group .a-form-group-items, .a-form-group .input-group, .form-group .a-form-group-items, .form-group .input-group { position: relative !important; } .a-form-group .a-form-group-items button, .a-form-group .a-form-group-items input, .a-form-group .input-group button, .a-form-group .input-group input, .form-group .a-form-group-items button, .form-group .a-form-group-items input, .form-group .input-group button, .form-group .input-group input { background-color: transparent; } .a-form-group .a-form-label, .form-group .a-form-label { font-family: DIN-medium; font-weight: 400; display: block; margin-bottom: 6px; } .a-form-group .form-control, .form-group .form-control { font-size: 16px; font-size: 1.6rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; font-family: DIN-reg; font-weight: 400; min-width: 0; min-height: 36px; padding: 2px 12px 0 12px; margin-left: -1px; color: #000 !important; letter-spacing: normal; border: 2px solid #1eaef7; border-radius: 0; -webkit-transition: none; transition: none; } .a-form-group .form-control:focus, .form-group .form-control:focus { border: 2px solid #0062ba; } .a-form-group .input-group-btn, .form-group .input-group-btn { border: 2px solid #1eaef7; border-left: none; } .a-form-group .input-group-btn .btn, .form-group .input-group-btn .btn { min-width: 48px; height: 100%; padding: 0; padding-right: 6px; color: #000; text-align: right; cursor: pointer; border: none; -webkit-transition: none; transition: none; } .a-form-group .input-group-btn .btn:active, .a-form-group .input-group-btn .btn:focus, .a-form-group .input-group-btn .btn:hover, .form-group .input-group-btn .btn:active, .form-group .input-group-btn .btn:focus, .form-group .input-group-btn .btn:hover { background: #cff0ff; outline: 0; } .a-form-group .input-group .form-control, .form-group .input-group .form-control { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .a-form-group .input-group .form-control::-ms-reveal, .form-group .input-group .form-control::-ms-reveal { width: 0; height: 0; } .a-form-group .input-group .form-control.a-hasButton, .form-group .input-group .form-control.a-hasButton { border-right: none; } .a-form-group .input-group:hover .form-control, .a-form-group .input-group:hover .input-group-btn, .form-group .input-group:hover .form-control, .form-group .input-group:hover .input-group-btn { z-index: 4; background-color: #fff; border-color: #0062ba; } .a-switch input[type=checkbox]:not(:checked) + label, .a-switch input[type=radio]:not(:checked) + label { border: 2px dotted #1eaef7; border-radius: 36px; -webkit-transition: border .2s,background-color .2s; transition: border .2s,background-color .2s; } .a-form-group .a-switch input[type=checkbox]:not(:checked) + .disabled.a-form-label-inline, .a-form-group .a-switch input[type=radio]:not(:checked) + .disabled.a-form-label-inline, .a-switch .a-form-group input[type=checkbox]:not(:checked) + .disabled.a-form-label-inline, .a-switch .a-form-group input[type=radio]:not(:checked) + .disabled.a-form-label-inline, .a-switch .form-group input[type=checkbox]:not(:checked) + .disabled.a-form-label-inline, .a-switch .form-group input[type=radio]:not(:checked) + .disabled.a-form-label-inline, .a-switch input[type=checkbox]:not(:checked) + label.disabled, .a-switch input[type=radio]:not(:checked) + label.disabled, .form-group .a-switch input[type=checkbox]:not(:checked) + .disabled.a-form-label-inline, .form-group .a-switch input[type=radio]:not(:checked) + .disabled.a-form-label-inline { padding: 8px 18px; background-color: #fff; background-image: url(../images/disabled-background.svg); border: none; } .a-form-group .a-switch input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i, .a-form-group .a-switch input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i, .a-switch .a-form-group input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i, .a-switch .a-form-group input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i, .a-switch .form-group input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i, .a-switch .form-group input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i, .a-switch input[type=checkbox]:not(:checked) + label.a-toggle-icon i, .a-switch input[type=radio]:not(:checked) + label.a-toggle-icon i, .form-group .a-switch input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i, .form-group .a-switch input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i { color: #1eaef7; } .a-form-group .a-switch input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1), .a-form-group .a-switch input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1), .a-switch .a-form-group input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1), .a-switch .a-form-group input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1), .a-switch .form-group input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1), .a-switch .form-group input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1), .a-switch input[type=checkbox]:not(:checked) + label.a-toggle-icon i:nth-of-type(1), .a-switch input[type=radio]:not(:checked) + label.a-toggle-icon i:nth-of-type(1), .form-group .a-switch input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1), .form-group .a-switch input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(1) { display: inline-block; } .a-form-group .a-switch input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2), .a-form-group .a-switch input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2), .a-switch .a-form-group input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2), .a-switch .a-form-group input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2), .a-switch .form-group input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2), .a-switch .form-group input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2), .a-switch input[type=checkbox]:not(:checked) + label.a-toggle-icon i:nth-of-type(2), .a-switch input[type=radio]:not(:checked) + label.a-toggle-icon i:nth-of-type(2), .form-group .a-switch input[type=checkbox]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2), .form-group .a-switch input[type=radio]:not(:checked) + .a-toggle-icon.a-form-label-inline i:nth-of-type(2) { display: none; } html { width: 1px; min-width: 100%; font-size: 62.5% !important; } body { font-family: DIN-reg; font-weight: 400; font-size: 16px; font-size: 1.6rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; color: #000; letter-spacing: normal; background-color: #efefef; } ::-moz-selection { color: #000; background: #e0daf7; } .container:focus, .row:focus { -webkit-box-shadow: none !important; box-shadow: none !important; } a { position: relative; padding-bottom: 2px; color: #000; text-decoration: none; cursor: pointer; border-bottom: 2px solid #1eaef7; } a:active, a:focus, a:hover { color: #000; text-decoration: none; cursor: pointer; border-bottom: 2px solid #0062ba; } a > i { position: relative; } .a-linkFeatured { font-family: DIN-bold; font-weight: 400; color: #022f51; border: none; } .a-linkFeatured:active, .a-linkFeatured:focus, .a-linkFeatured:hover { color: #022f51; border-color: #022f51; } .a-linkFeatured i { margin-top: -5px; } h1 { margin-bottom: 12px; } h2 { font-family: DIN-medium; font-weight: 400; margin-bottom: 12px; } @media (min-width: 768px) { h2 { font-family: DIN-reg; font-weight: 400; } } .a-h3 { font-family: DIN-bold; font-weight: 400; margin-bottom: 6px; } .a-fontBold { font-family: DIN-bold; font-weight: 400; } p { font-family: DIN-reg; font-weight: 400; margin-bottom: 18px; } .a-btn { font-family: DIN-reg; font-weight: 400; position: relative; display: inline-block; padding: 6px 24px 4px 24px; margin-bottom: 12px; color: #000; cursor: pointer; background: #1eaef7; border: none; border-radius: 0; } .a-btn:hover { color: #000; text-decoration: none; background: #37b7f8; border: none; } .a-btn:focus { color: #000; text-decoration: none; background: #37b7f8; border-bottom: none; outline: 0; } .a-btn:active { color: #000; background: #1eaef7; background-image: none; outline: 0; } .a-btn:disabled { color: #000; cursor: not-allowed; background-color: #efefef; -webkit-box-shadow: 0 0 0 1px #fff; box-shadow: 0 0 0 1px #fff; } .a-btn::after { position: absolute; top: -6px; left: 0; width: 100%; height: 48px; content: ''; } .a-btn::before { position: absolute; top: 0; left: 0; width: auto; min-height: auto; content: ''; } .switch-container .radio input[type=radio]:not(:checked):focus + label { background-color: #cff0ff; } .a-form-group .switch-container .radio input[type=radio]:not(:checked) + .a-form-label-inline:hover, .form-group .switch-container .radio input[type=radio]:not(:checked) + .a-form-label-inline:hover, .switch-container .radio .a-form-group input[type=radio]:not(:checked) + .a-form-label-inline:hover, .switch-container .radio .form-group input[type=radio]:not(:checked) + .a-form-label-inline:hover, .switch-container .radio input[type=radio]:not(:checked) + label:hover { background-color: #cff0ff; } .ai { font-size: 2.25em; -webkit-font-smoothing: subpixel-antialiased; line-height: 0; width: 1em; text-align: center; vertical-align: middle; } .ai.ai-sm { font-size: 1.8em; } .ai.ai-nw { width: auto; } .ai.ai-nw-pl { padding-left: 6px; } .form-group i { margin-top: -2px; font-size: 1.8em; } .container { padding: 0 12px; } @media (min-width: 576px) { .container { padding: 0 24px; } } @media (min-width: 1200px) { .container { padding: 0; } } ul.no-decoration { margin: 0; list-style: none; } .a-text p > a { border-width: 1px; } .a-text p a { position: relative; z-index: 1; } .a-text p a::before { position: absolute; top: -16px; left: -12px; z-index: -1; width: calc(100% + 24px); min-height: 48px; cursor: pointer; content: ''; } .a-bgWhite { background-color: #fff; } @font-face { font-family: DIN-light; src: url(../fonts/DINWeb-Light.woff); } @font-face { font-family: DIN-reg; src: url(../fonts/DINWeb.woff); } @font-face { font-family: DIN-medium; src: url(../fonts/DINWeb-Medium.woff); } @font-face { font-family: DIN-bold; src: url(../fonts/DINWeb-Bold.woff); } @media print { .a-btn, .a-linkFeatured, .form-group, button { display: none !important; } } .a-compare-category .a-compare-container:not(:nth-of-type) { border-right: 1px solid #a5bcc4; } .a-stickyHelp-body { position: fixed; width: 100%; overflow: hidden; } .a-stickyHelp-open { font-family: DIN-medium; font-weight: 400; position: fixed; right: 24px; bottom: 24px; z-index: 1051; padding: 14px 24px 9px 24px; margin-bottom: 0; color: #fff; background: #3f3161; border-radius: 50px; } .a-stickyHelp-open:active, .a-stickyHelp-open:focus, .a-stickyHelp-open:hover { color: #fff; background: #4a3a72; } .a-stickyHelp-open.a-stickyHelp-animationHint { -webkit-animation: hintTextSlideIn .4s; animation: hintTextSlideIn .4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .a-stickyHelp-open.a-stickyHelp-animationHint .a-stickyHelp-openText { position: absolute; left: 0; display: block; float: left; width: 100%; height: auto; padding-top: 5px; padding-right: 18px; clip: auto; opacity: 0; -webkit-animation: hintTextAppear .3s; animation: hintTextAppear .3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-delay: 2.7s; animation-delay: 2.7s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .a-stickyHelp-open[aria-expanded=true].a-stickyHelp-animationHint { -webkit-animation: none; animation: none; } .a-stickyHelp-open[aria-expanded=true].a-stickyHelp-animationHint .a-stickyHelp-openText { -webkit-animation: none; animation: none; } .a-stickyHelp-open i { font-size: 30px; font-size: 3rem; line-height: 1.3; -webkit-font-smoothing: subpixel-antialiased; font-style: normal; } @-webkit-keyframes hintTextSlideIn { 0% { padding-left: 24px; } 100% { padding-left: 180px; } } @keyframes hintTextSlideIn { 0% { padding-left: 24px; } 100% { padding-left: 180px; } } @-webkit-keyframes hintTextAppear { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hintTextAppear { 0% { opacity: 0; } 100% { opacity: 1; } } .a-iframeToggle { position: fixed; bottom: 12px; left: 12px; z-index: 1052; width: calc(100% - 24px) !important; max-width: 100% !important; background: 0 0; -webkit-transition: all .4s; transition: all .4s; -webkit-transform: translate(0, 0); transform: translate(0, 0); } @media (min-width: 576px) { .a-iframeToggle { right: 12px; left: auto; width: 356px !important; max-width: 356px !important; } } .a-iframeToggle::before { position: absolute; top: 100%; right: 5%; bottom: 30px; width: 1px; height: 1px; content: ''; background: 0 0; border-radius: 90%; -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } .a-iframeToggle.collapsing { margin-right: 24px; margin-bottom: 24px; } .a-iframeToggle.collapsing::before { background: #3f3161; } .a-iframeToggle.collapsing .a-stickyHelp-close { opacity: 0; } .a-iframeToggle iframe { width: 100% !important; max-width: 100% !important; height: 414px !important; max-height: calc(100vh - 24px); opacity: 0; } @media (min-width: 576px) { .a-iframeToggle iframe { width: 356px !important; max-width: 356px !important; } } .a-iframeToggle .a-stickyHelp-close { opacity: 0; } .a-iframeToggle.show { right: 12px; bottom: 6px; display: block; visibility: visible; -webkit-transition: all .4s; transition: all .4s; -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; } .a-iframeToggle.show::before { top: auto; right: 0; bottom: 8px; display: block; width: 100% !important; max-width: 100% !important; height: 414px !important; margin-top: -261px; margin-left: -178px; border-radius: 0; -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (min-width: 576px) { .a-iframeToggle.show::before { width: 356px !important; max-width: 356px !important; height: 414px !important; background: #fff; } } .a-iframeToggle.show iframe { position: relative; overflow: hidden; background: #fff; border: none; -webkit-box-shadow: 1px 1px 4px 0 rgba(137, 137, 137, 0.5); box-shadow: 1px 1px 4px 0 rgba(137, 137, 137, 0.5); opacity: 1; -webkit-transition: all .2s ease .4s; transition: all .2s ease .4s; } .a-iframeToggle.show .a-stickyHelp-close { position: absolute; top: 12px; right: 12px; z-index: 9999; width: 30px; height: 30px; padding: 3px 0 6px 0; margin-bottom: 0; pointer-events: auto; cursor: pointer; background: #fff; border: none; border-radius: 50%; opacity: 0; -webkit-animation: showCloseButtonAfterLoad .1s; animation: showCloseButtonAfterLoad .1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-delay: .6s; animation-delay: .6s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes showCloseButtonAfterLoad { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes showCloseButtonAfterLoad { 0% { opacity: 0; } 100% { opacity: 1; } } .a-iframeToggle.show .a-stickyHelp-close:hover { border: none; opacity: .7; } .a-iframeToggle.show .a-stickyHelp-close:focus { background: #cff0ff; border: none; } .a-iframeToggle.show .a-stickyHelp-close::before { position: absolute; top: -15px; left: -16px; z-index: 1; width: calc(100% + 30px); min-height: 60px; cursor: pointer; content: ''; } .a-stickyHelp .a-stickyHelp-header { position: relative; min-height: 54px; padding: 12px; color: #fff; background: #3f3161; } .a-stickyHelp .a-stickyHelp-header h1 { font-family: DIN-medium; font-weight: 400; text-align: center; -ms-flex-item-align: center; align-self: center; } .a-stickyHelp .a-stickyHelp-header h1 i { margin-top: -4px; } .a-stickyHelp .a-stickyHelp-header .a-stickyHelp-back { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; padding: 3px 0 6px 0; margin-bottom: 0; cursor: pointer; background: #fff; border: none; border-radius: 50%; } .a-stickyHelp .a-stickyHelp-header .a-stickyHelp-back:hover { border: none; opacity: .7; } .a-stickyHelp .a-stickyHelp-header .a-stickyHelp-back:focus { background: #cff0ff; border: none; } .a-stickyHelp .a-stickyHelp-header .a-stickyHelp-back i { line-height: 0 !important; } .a-stickyHelp .a-stickyHelp-search { padding: 12px 12px 0 12px; } .a-stickyHelp .a-page { height: 300px; overflow-x: hidden; overflow-y: scroll; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.3, 1, 0.5, 1); transition: -webkit-transform 0.5s cubic-bezier(0.3, 1, 0.5, 1); transition: transform 0.5s cubic-bezier(0.3, 1, 0.5, 1); transition: transform 0.5s cubic-bezier(0.3, 1, 0.5, 1), -webkit-transform 0.5s cubic-bezier(0.3, 1, 0.5, 1); } .a-stickyHelp .a-page.a-next-page { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .a-stickyHelp .a-page.a-current-page { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .a-stickyHelp .a-page.a-previous-page { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .a-stickyHelp .a-page + .a-page { margin-top: -300px; } .a-stickyHelp .a-page .a-stickyHelp-articleIntro { padding: 10px 12px 8px 12px; padding-left: 52px; } .a-stickyHelp .a-page .a-stickyHelp-articleIntro h1 { font-size: 20px; font-size: 2rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; padding-top: 0; margin-top: 0; } .a-stickyHelp .a-page .a-stickyHelp-articleIntro .a-leadText, .a-stickyHelp .a-page .a-stickyHelp-articleIntro p { font-size: 16px; font-size: 1.6rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; } .a-stickyHelp .a-page .a-text.epi-wysiwyg { padding: 10px 12px 8px 12px; padding-left: 52px; } .a-stickyHelp .a-page .a-text.epi-wysiwyg.pt-2 { padding-top: 0 !important; } .a-stickyHelp .a-page .a-text.epi-wysiwyg.pt-lg-3 { padding-top: 0 !important; } .a-stickyHelp .a-page .a-text.epi-wysiwyg h2 { font-size: 18px; font-size: 1.8rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; padding-top: 0; padding-left: 0; margin-top: 0; } .a-stickyHelp .a-page .a-text.epi-wysiwyg .a-circle-list { width: calc(100% + 26px); margin-left: -52px; } .a-stickyHelp .a-page .a-text.epi-wysiwyg .a-circle-list li { width: calc(100% + 40px); padding: 12px 12px 12px 52px; margin-bottom: 12px; margin-left: 0; border-bottom: 1px solid #efefef; } .a-stickyHelp .a-page .a-text.epi-wysiwyg .a-circle-list li::before { padding: 7px 9px 4px; margin-right: 10px; margin-left: -41px; } .a-stickyHelp .a-page .a-text.epi-wysiwyg .a-circle-list li:first-child { border-top: 1px solid #efefef; } .a-stickyHelp .a-page .a-text.epi-wysiwyg .a-circle-list li:last-child { margin-bottom: 0; border-bottom: none; } .a-stickyHelp .a-page .a-text.epi-wysiwyg .a-stickyHelp-footer { width: calc(100% + 64px); margin-left: -52px; } .a-stickyHelp .a-page .a-text .a-stickyHelp-footer { width: calc(100% + 24px); margin-left: -12px; } .a-stickyHelp .a-page-hasArticleInside { overflow: hidden; } .a-stickyHelp-content-target { overflow: hidden; background: #fff; } .a-stickyHelp-content-target h2 { font-size: 18px; font-size: 1.8rem; line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; padding: 10px 12px 8px 12px; padding-left: 52px; margin-bottom: 0; } .a-stickyHelp-content-target .a-stickyHelp-questionList li { border-bottom: 1px solid #efefef; } .a-stickyHelp-content-target .a-stickyHelp-questionList li a { display: block; padding: 10px 12px 8px 12px; padding-left: 52px; border: none; } .a-stickyHelp-content-target .a-stickyHelp-questionList li a:active, .a-stickyHelp-content-target .a-stickyHelp-questionList li a:focus, .a-stickyHelp-content-target .a-stickyHelp-questionList li a:hover { background: #f5f5f5; } .a-stickyHelp-content-target .a-stickyHelp-questionList li a.a-stickyHelp-iconLeft { padding-left: 23px; } .a-stickyHelp-content-target .a-stickyHelp-questionList li a i { margin-top: -3px; } .a-stickyHelp-content-target .a-stickyHelp-questionList li:first-child { border-top: 1px solid #efefef; } .a-stickyHelp-content-target .a-stickyHelp-footer { width: 100%; color: #000; } .a-stickyHelp-content-target .a-stickyHelp-footer a { font-family: DIN-medium; font-weight: 400; display: block; padding: 10px 12px 8px 12px; padding-left: 52px; border-bottom: 1px solid #efefef; } .a-stickyHelp-content-target .a-stickyHelp-footer a:active, .a-stickyHelp-content-target .a-stickyHelp-footer a:focus, .a-stickyHelp-content-target .a-stickyHelp-footer a:hover { background: #f5f5f5; } .a-stickyHelp-content-target .a-stickyHelp-footer a:first-child { border-top: 1px solid #efefef; } .a-stickyHelp-content-target .a-stickyHelp-footer a.a-stickyHelp-iconLeft { padding-left: 25px; } .a-stickyHelp-content-target .a-stickyHelp-footer a i { margin-top: -3px; } .a-stickyHelp-content-target .a-stickyHelp-questionList + .a-stickyHelp-footer a:first-child { border-top: none !important; } @font-face { font-family: DIN-light; src: url(/Static/font/DINWeb-Light.woff); } @font-face { font-family: DIN-reg; src: url(/Static/font/DINWeb.woff); } @font-face { font-family: DIN-medium; src: url(/Static/font/DINWeb-Medium.woff); } @font-face { font-family: DIN-bold; src: url(/Static/font/DINWeb-Bold.woff); }