UNPKG

@duetds/components

Version:

This package includes Duet Components and related tools.

447 lines 68.2 kB
import { r as registerInstance, h, g as getElement } from './chunk-5cdff7bc.js'; import { i as initTabHandler, r as removeTabHandler } from './chunk-7601659c.js'; import { c as classNames } from './chunk-ea56b96b.js'; import { d as duetIcons } from './chunk-94f81923.js'; var DuetButton = /** @class */ (function () { function DuetButton(hostRef) { registerInstance(this, hostRef); /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ this.accessibleExpanded = false; /** * Tells screen reader the element is pressed. */ this.accessiblePressed = false; /** * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain. */ this.variation = "default"; /** * Theme of the button. Can be one of: default, turva. */ this.theme = ""; /** * Expands the button to fill 100% of the container width. */ this.expand = false; /** * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies. */ this.disabled = false; /** * Allows the button to submit a form. */ this.submit = false; /** * Forces URL to open in a new browser tab. Used together with URL prop. */ this.external = false; /** * Icon to display to the left of the button content */ this.icon = ""; /** * Show icon on the right side of the button content. */ this.iconRight = false; } /** * Component lifecycle events. */ DuetButton.prototype.componentWillLoad = function () { initTabHandler(); // Check whether global Turva theme is active if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) { this.theme = "turva"; } }; DuetButton.prototype.componentDidUnload = function () { removeTabHandler(); }; /** * render() function. * Always the last one in the class. */ DuetButton.prototype.render = function () { // Set constants for button type and classes used. if (this.expand) { this.element.classList.add("duet-expand"); } var type = this.submit ? "submit" : "button"; var TagName = this.url ? "a" : "button"; var containerClasses = classNames("duet-button-container", { "duet-theme-turva": this.theme === "turva", }); var buttonClasses = classNames("duet-button", "" + this.variation, { disabled: this.disabled, icon: this.icon !== "", "icon-right": this.iconRight, }); var iconClasses = classNames("duet-button-icon", { right: this.iconRight, }); return (h("div", { class: containerClasses }, h(TagName, { type: type, href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, h("span", { class: "duet-button-contents" }, this.icon !== "" ? h("span", { class: iconClasses, innerHTML: duetIcons[this.icon].svg }) : "", h("slot", null))), this.variation === "loading" ? h("duet-spinner", null) : "")); }; Object.defineProperty(DuetButton.prototype, "element", { get: function () { return getElement(this); }, enumerable: true, configurable: true }); Object.defineProperty(DuetButton, "style", { get: function () { return ":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:4px;margin-bottom:8px;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;width:auto;max-width:100%}:host(.duet-expand){width:100%}.duet-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:15px 28px 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-width:2px;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:#fff;color:#0077b3;border-radius:20rem;font-weight:600;line-height:1;-webkit-transition:.3s ease;transition:.3s ease;min-width:6.875rem;z-index:100;width:100%;outline:0;border-style:solid;position:relative;display:block;text-align:center;text-decoration:none;cursor:pointer}.duet-theme-turva .duet-button{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-button-container{position:relative;width:100%;height:100%}.duet-button-contents{position:relative;margin:0 auto;display:inline}.duet-button.icon{padding-left:52px}.duet-button.icon-right{padding-left:28px;padding-right:52px}.duet-button svg{fill:currentColor}.duet-button-icon{width:16px;height:16px;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%;left:-28px}.duet-button-icon.right{right:-28px;left:auto}.duet-button:active{-webkit-transition:none;transition:none;opacity:.75}:host-context(.user-is-tabbing) .duet-button:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-button.disabled,.duet-button[disabled]{cursor:not-allowed!important;border-color:#e1e3e6!important;background:#e1e3e6!important;color:#657787!important}.duet-theme-turva .duet-button.disabled,.duet-theme-turva .duet-button[disabled]{background:#e6e6e6!important;color:#757575!important;border-color:#e6e6e6!important}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{border-color:#e6e6e6;color:#c60c30}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.primary{color:#fff;border-color:#0077b3;background:#0077b3}.duet-theme-turva .duet-button.primary{background:#c60c30;border-color:#c60c30}.duet-button.primary:hover{background:#004d80;border-color:#004d80}.duet-theme-turva .duet-button.primary:hover{background:#940925;border-color:#940925}.duet-button.secondary{border-color:#00294d;color:#00294d;background:#fff}.duet-button.secondary:hover{border-color:#0077b3;color:#0077b3}.duet-theme-turva .duet-button.secondary:hover{border-color:#c60c30;color:#c60c30}.duet-button.loading{background:#0077b3;color:#fff;border-color:#0077b3;text-indent:-9999px;pointer-events:none;overflow:hidden}.duet-theme-turva .duet-button.loading{background:#c60c30;border-color:#c60c30}.duet-button.loading.duet-button-icon{display:none}.duet-button.negative{color:#00294d;background:#fff;border-color:#fff}.duet-theme-turva .duet-button.negative{color:#111}.duet-button.negative:hover{border-color:#fff;background:transparent;color:#fff}.duet-button.destructive{color:#fff;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive{background:#e02a0d;border-color:#e02a0d}.duet-button.destructive:hover{background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover{background:#b3220a;border-color:#b3220a}.duet-button.plain{border-color:transparent;padding-left:0;padding-right:0;border:0;min-width:0}.duet-button.plain.icon{padding-left:28px}.duet-button.plain.icon-right{padding-left:0;padding-right:28px}.duet-button.plain.disabled,.duet-button.plain[disabled]{border-color:transparent!important;background:transparent!important;color:#657787!important}.duet-theme-turva .duet-button.plain.disabled,.duet-theme-turva .duet-button.plain[disabled]{background:transparent!important;color:transparent!important;border-color:#e6e6e6!important}.duet-theme-turva .duet-button.plain{color:#c60c30}.duet-button.plain:hover{color:#004d80}.duet-theme-turva .duet-button.plain:hover{color:#940925}"; }, enumerable: true, configurable: true }); return DuetButton; }()); // Older browsers don't support event options, feature detect it. // Adopted and modified solution from Bohdan Didukh (2017) // https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi var hasPassiveEvents = false; if (typeof window !== 'undefined') { var passiveTestOptions = { get passive() { hasPassiveEvents = true; return undefined; } }; window.addEventListener('testPassive', null, passiveTestOptions); window.removeEventListener('testPassive', null, passiveTestOptions); } var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform); var locks = []; var documentListenerAdded = false; var initialClientY = -1; var previousBodyOverflowSetting; var previousBodyPaddingRight; // returns true if `el` should be allowed to receive touchmove events var allowTouchMove = function (el) { return locks.some(function (lock) { if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) { return true; } return false; }); }; var preventDefault = function (rawEvent) { var e = rawEvent || window.event; // For the case whereby consumers adds a touchmove event listener to document. // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false }) // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then // the touchmove event on document will break. if (allowTouchMove(e.target)) { return true; } // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom) if (e.touches.length > 1) return true; if (e.preventDefault) e.preventDefault(); return false; }; var setOverflowHidden = function (options) { // Setting overflow on body/documentElement synchronously in Desktop Safari slows down // the responsiveness for some reason. Setting within a setTimeout fixes this. setTimeout(function () { // If previousBodyPaddingRight is already set, don't set it again. if (previousBodyPaddingRight === undefined) { var reserveScrollBarGap = !!options && options.reserveScrollBarGap === true; var scrollBarGap = window.innerWidth - document.documentElement.clientWidth; if (reserveScrollBarGap && scrollBarGap > 0) { previousBodyPaddingRight = document.body.style.paddingRight; document.body.style.paddingRight = scrollBarGap + "px"; } } // If previousBodyOverflowSetting is already set, don't set it again. if (previousBodyOverflowSetting === undefined) { previousBodyOverflowSetting = document.body.style.overflow; document.body.style.overflow = 'hidden'; } }); }; var restoreOverflowSetting = function () { // Setting overflow on body/documentElement synchronously in Desktop Safari slows down // the responsiveness for some reason. Setting within a setTimeout fixes this. setTimeout(function () { if (previousBodyPaddingRight !== undefined) { document.body.style.paddingRight = previousBodyPaddingRight; // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it // can be set again. previousBodyPaddingRight = undefined; } if (previousBodyOverflowSetting !== undefined) { document.body.style.overflow = previousBodyOverflowSetting; // Restore previousBodyOverflowSetting to undefined // so setOverflowHidden knows it can be set again. previousBodyOverflowSetting = undefined; } }); }; // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions var isTargetElementTotallyScrolled = function (targetElement) { return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false; }; var handleScroll = function (event, targetElement) { var clientY = event.targetTouches[0].clientY - initialClientY; if (allowTouchMove(event.target)) { return false; } if (targetElement && targetElement.scrollTop === 0 && clientY > 0) { // element is at the top of its scroll return preventDefault(event); } if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) { // element is at the top of its scroll return preventDefault(event); } event.stopPropagation(); return true; }; var disableBodyScroll = function (targetElement, options) { if (isIosDevice) { // targetElement must be provided, and disableBodyScroll must not have been // called on this targetElement before. if (!targetElement) { // eslint-disable-next-line no-console console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'); return; } if (targetElement && !locks.some(function (lock) { return lock.targetElement === targetElement; })) { var lock = { targetElement: targetElement, options: options || {} }; locks = locks.concat([lock]); targetElement.ontouchstart = function (event) { if (event.targetTouches.length === 1) { // detect single touch initialClientY = event.targetTouches[0].clientY; } }; targetElement.ontouchmove = function (event) { if (event.targetTouches.length === 1) { // detect single touch handleScroll(event, targetElement); } }; if (!documentListenerAdded) { document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); documentListenerAdded = true; } } } else { setOverflowHidden(options); var lock = { targetElement: targetElement, options: options || {} }; locks = locks.concat([lock]); } }; var enableBodyScroll = function (targetElement) { if (isIosDevice) { if (!targetElement) { // eslint-disable-next-line no-console console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'); return; } targetElement.ontouchstart = null; targetElement.ontouchmove = null; locks = locks.filter(function (lock) { return lock.targetElement !== targetElement; }); if (documentListenerAdded && locks.length === 0) { document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); documentListenerAdded = false; } } else if (locks.length === 1 && locks[0].targetElement === targetElement) { restoreOverflowSetting(); locks = []; } else { locks = locks.filter(function (lock) { return lock.targetElement !== targetElement; }); } }; var DuetHeader = /** @class */ (function () { function DuetHeader(hostRef) { registerInstance(this, hostRef); /** * Theme of the header. Can be one of: default, turva. */ this.theme = ""; /** * Show public or private style variant. Can be one of: public, private. */ this.variant = "private"; /** * Position of the primary navigation. Can be one of: sticky, normal. */ this.position = "sticky"; } /** * Component lifecycle events. */ DuetHeader.prototype.componentWillLoad = function () { // Check whether global Turva theme is active if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) { this.theme = "turva"; } }; /** * componentDidLoad() function */ DuetHeader.prototype.componentDidLoad = function () { if (this.position === "normal") { this.element.classList.add("duet-component-static"); } var lastPosition = -1; var ticking = false; var loop = function () { // Avoid calculations if not needed var pos = window.pageYOffset; if (lastPosition === pos) { ticking = false; } else { lastPosition = pos; } if (pos > 66) { navi.classList.add("fixed"); } else { navi.classList.remove("fixed"); } ticking = false; }; var navi = this.element.querySelector("nav"); window.addEventListener("scroll", function () { if (!ticking) { requestAnimationFrame(loop); ticking = true; } }, false); var toggles = this.element.querySelectorAll(".dropdown-toggle"); var dropdowns = this.element.querySelectorAll(".dropdown-content"); var button = this.element.querySelector(".mobile-menu"); var nav = this.element.querySelector(".menus"); var langBtns = this.element.querySelectorAll(".language button"); var langDisplay = this.element.querySelector(".language-selector"); var contextBtns = this.element.querySelectorAll(".context button"); var contextDisplay = this.element.querySelector(".context-selector"); var mainLinks = this.element.querySelectorAll(".main-link"); var logo = this.element.querySelector(".logo"); for (var i = 0, len = contextBtns.length; i < len; i++) { contextBtns[i].addEventListener("click", function (event) { event.preventDefault(); var target = event.target; for (var i = 0, len = contextBtns.length; i < len; i++) { contextBtns[i].classList.remove("selected"); } target.classList.add("selected"); contextDisplay.innerHTML = target.innerHTML; }); } logo.addEventListener("click", function (event) { event.preventDefault(); for (var i = 0, len = mainLinks.length; i < len; i++) { mainLinks[i].classList.remove("selected"); } mainLinks[0].classList.add("selected"); nav.classList.remove("active"); button.classList.remove("open"); enableBodyScroll(nav); }); for (var i = 0, len = mainLinks.length; i < len; i++) { mainLinks[i].addEventListener("click", function (event) { event.preventDefault(); var target = event.target; for (var i = 0, len = mainLinks.length; i < len; i++) { mainLinks[i].classList.remove("selected"); } target.classList.add("selected"); nav.classList.remove("active"); button.classList.remove("open"); enableBodyScroll(nav); }); } for (var i = 0, len = langBtns.length; i < len; i++) { langBtns[i].addEventListener("click", function (event) { event.preventDefault(); var target = event.target; for (var i = 0, len = langBtns.length; i < len; i++) { langBtns[i].classList.remove("selected"); } target.classList.add("selected"); if (target.getAttribute("data-lang") === "FI") { langDisplay.innerHTML = "FI"; } else if (target.getAttribute("data-lang") === "SV") { langDisplay.innerHTML = "SV"; } else { langDisplay.innerHTML = "EN"; } }); } button.addEventListener("click", function (event) { event.preventDefault(); if (!nav.classList.contains("active")) { nav.classList.add("active"); button.classList.add("open"); disableBodyScroll(nav); } else { nav.classList.remove("active"); button.classList.remove("open"); enableBodyScroll(nav); } }); document.documentElement.addEventListener("click", function () { for (var i = 0, len = dropdowns.length; i < len; i++) { dropdowns[i].classList.remove("active"); } for (var i = 0, len = toggles.length; i < len; i++) { toggles[i].classList.remove("active"); } }); for (var i = 0, len = toggles.length; i < len; i++) { toggles[i].addEventListener("click", function (event) { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); var target = event.currentTarget; for (var i = 0, len = dropdowns.length; i < len; i++) { dropdowns[i].classList.remove("active"); } if (target.classList.contains("active")) { for (var i = 0, len = toggles.length; i < len; i++) { toggles[i].classList.remove("active"); } } else { for (var i = 0, len = toggles.length; i < len; i++) { toggles[i].classList.remove("active"); } var next = target.nextSibling; target.classList.add("active"); next.classList.add("active"); } }); } }; /** * render() function * Always the last one in the class. */ DuetHeader.prototype.render = function () { // Set constants for card type and classes used. var headerClasses = classNames("duet-header", { "duet-theme-turva": this.theme === "turva", "normal-position": this.position === "normal", }); return (h("span", null, h("header", { class: headerClasses }, h("a", { href: "#", class: "logo" }, h("svg", { role: "img", "aria-labelledby": "uniqueTitle32423", viewBox: "0 0 144 30", xmlns: "http://www.w3.org/2000/svg" }, h("title", { id: "uniqueTitle32423" }, "L\u00E4hiTapiola"), h("path", { d: "M42.11 20.151a3.79 3.79 0 0 1-.026.498 1.463 1.463 0 0 1-.073.336.402.402 0 0 1-.124.19.26.26 0 0 1-.18.045h-5.853a.805.805 0 0 1-.545-.19.79.79 0 0 1-.22-.626V8.835a.263.263 0 0 1 .062-.175.439.439 0 0 1 .212-.128 2.22 2.22 0 0 1 .4-.08c.418-.035.839-.035 1.258 0 .133.015.266.042.395.08.08.021.153.066.208.128a.27.27 0 0 1 .066.175v10.263h4.025a.274.274 0 0 1 .172.054.366.366 0 0 1 .124.176c.039.105.064.214.073.326.02.165.028.331.026.497M51.845 6.117a1.35 1.35 0 0 1-.274.966 2.1 2.1 0 0 1-2.056 0 1.339 1.339 0 0 1-.26-.937c-.037-.347.06-.695.27-.973a1.463 1.463 0 0 1 1.029-.27c.363-.042.73.051 1.028.263.206.267.3.604.263.94zm-3.615 4.79l-1.803 5.421h3.618zm-.691-4.8c.035.344-.061.689-.27.965a1.463 1.463 0 0 1-1.029.274 1.485 1.485 0 0 1-1.028-.263 1.32 1.32 0 0 1-.263-.937 1.357 1.357 0 0 1 .274-.973 2.111 2.111 0 0 1 2.056 0c.205.268.298.605.26.94zm6.545 14.161c.064.183.114.37.15.56a.34.34 0 0 1-.08.311.655.655 0 0 1-.384.128c-.187 0-.44.026-.761.026h-.783a2.034 2.034 0 0 1-.428-.059.432.432 0 0 1-.209-.124.651.651 0 0 1-.095-.209l-.86-2.56h-4.789l-.808 2.49a.867.867 0 0 1-.103.235.435.435 0 0 1-.208.146c-.13.044-.266.069-.403.073-.175 0-.402.022-.688.022a5.828 5.828 0 0 1-.706-.033.527.527 0 0 1-.366-.142.366.366 0 0 1-.065-.322c.03-.187.08-.371.146-.549l3.933-11.312a1.01 1.01 0 0 1 .139-.275.505.505 0 0 1 .249-.157 1.88 1.88 0 0 1 .479-.066h1.734c.181.001.362.023.538.066a.501.501 0 0 1 .274.165c.066.089.114.19.143.296zM65.824 20.88a.293.293 0 0 1-.065.179.468.468 0 0 1-.213.128 1.983 1.983 0 0 1-.395.076 4.818 4.818 0 0 1-.622.033 5.009 5.009 0 0 1-.633-.033 1.88 1.88 0 0 1-.395-.076.476.476 0 0 1-.208-.128.289.289 0 0 1-.063-.18v-5.147h-4.756v5.147a.285.285 0 0 1-.058.18.435.435 0 0 1-.209.128 1.939 1.939 0 0 1-.391.076 6.03 6.03 0 0 1-1.259 0 1.972 1.972 0 0 1-.398-.076.468.468 0 0 1-.213-.128.289.289 0 0 1-.062-.18V8.835c0-.063.023-.125.062-.175a.439.439 0 0 1 .213-.128 2.22 2.22 0 0 1 .398-.08c.42-.035.84-.035 1.259 0 .133.014.264.041.391.08a.41.41 0 0 1 .209.128c.039.05.06.112.058.175v4.702h4.756V8.835c.001-.063.023-.125.063-.175a.443.443 0 0 1 .208-.128c.13-.04.261-.067.395-.08.21-.02.422-.029.633-.026.208-.003.416.006.622.025.134.015.266.042.395.08a.439.439 0 0 1 .213.129c.04.05.064.111.065.175zM71.202 20.88a.289.289 0 0 1-.062.179.49.49 0 0 1-.212.128 1.983 1.983 0 0 1-.395.076 5.996 5.996 0 0 1-1.255 0 2.016 2.016 0 0 1-.402-.076.435.435 0 0 1-.209-.128.27.27 0 0 1-.066-.18V8.835a.27.27 0 0 1 .066-.175.417.417 0 0 1 .216-.128c.13-.039.264-.065.399-.08.206-.02.414-.029.622-.026.21-.003.42.006.629.025.134.015.266.042.395.08a.457.457 0 0 1 .212.129c.04.05.062.112.062.175zM82.485 9.549c0 .162-.008.325-.025.486-.013.112-.039.22-.077.326a.428.428 0 0 1-.12.18.26.26 0 0 1-.165.058h-3.194v10.28a.267.267 0 0 1-.063.18.468.468 0 0 1-.212.128c-.13.039-.263.065-.399.076a5.96 5.96 0 0 1-1.25 0 1.972 1.972 0 0 1-.4-.076.446.446 0 0 1-.212-.128.27.27 0 0 1-.066-.18V10.61h-3.19a.238.238 0 0 1-.168-.058.428.428 0 0 1-.12-.179 1.463 1.463 0 0 1-.074-.326 4.599 4.599 0 0 1-.022-.486 4.928 4.928 0 0 1 .022-.505 1.39 1.39 0 0 1 .073-.33.406.406 0 0 1 .12-.179.27.27 0 0 1 .17-.05h8.985a.3.3 0 0 1 .164.05c.056.048.098.11.12.18.04.106.066.216.078.329.017.168.026.336.025.505M86.989 10.917l-1.804 5.422h3.619zm5.854 9.355c.065.182.115.37.15.56a.34.34 0 0 1-.08.31.655.655 0 0 1-.367.129c-.183 0-.435.025-.757.025h-.787a1.851 1.851 0 0 1-.428-.055.402.402 0 0 1-.204-.124.651.651 0 0 1-.1-.208l-.859-2.561h-4.807l-.824 2.473a.768.768 0 0 1-.102.234.435.435 0 0 1-.208.146 1.39 1.39 0 0 1-.403.073c-.176 0-.402.022-.684.022a5.894 5.894 0 0 1-.71-.033.527.527 0 0 1-.366-.142.388.388 0 0 1-.07-.322c.034-.187.083-.37.147-.549l3.933-11.312c.034-.098.08-.19.14-.275a.501.501 0 0 1 .252-.157c.155-.042.314-.065.475-.066h1.734c.182.001.362.023.538.066a.527.527 0 0 1 .278.165c.064.09.112.19.143.296zM100.65 12.541a2.283 2.283 0 0 0-.238-1.097 1.61 1.61 0 0 0-.582-.64 1.928 1.928 0 0 0-.731-.264 5.44 5.44 0 0 0-.783-.055h-1.098v4.325h1.164a2.77 2.77 0 0 0 1.039-.169c.262-.098.498-.258.688-.464a2.1 2.1 0 0 0 .402-.732c.095-.295.141-.604.139-.915m2.711-.186a5.045 5.045 0 0 1-.337 1.902 3.688 3.688 0 0 1-.976 1.398 4.306 4.306 0 0 1-1.57.86c-.712.21-1.453.31-2.195.296h-1.065v4.08a.27.27 0 0 1-.066.179.435.435 0 0 1-.208.128 1.983 1.983 0 0 1-.395.076 5.996 5.996 0 0 1-1.255 0 1.92 1.92 0 0 1-.399-.076.435.435 0 0 1-.208-.128.285.285 0 0 1-.059-.18V9.41a.918.918 0 0 1 .242-.694.87.87 0 0 1 .636-.235h3.004c.303 0 .589 0 .863.037.33.033.657.083.98.15a4.23 4.23 0 0 1 1.16.417c.377.196.715.457 1 .772.279.321.493.694.628 1.098.152.452.227.927.22 1.405M107.97 20.88a.267.267 0 0 1-.061.179.468.468 0 0 1-.213.128 1.983 1.983 0 0 1-.395.076 5.993 5.993 0 0 1-1.255 0 1.92 1.92 0 0 1-.398-.076.446.446 0 0 1-.213-.128.27.27 0 0 1-.065-.18V8.835a.27.27 0 0 1 .065-.175.417.417 0 0 1 .216-.128c.13-.039.264-.065.399-.08a5.81 5.81 0 0 1 .618-.026c.212-.003.423.005.633.025.134.015.266.042.395.08a.439.439 0 0 1 .213.129.263.263 0 0 1 .062.175zM119.502 14.85a9.684 9.684 0 0 0-.157-1.83 3.93 3.93 0 0 0-.538-1.408 2.561 2.561 0 0 0-1.002-.907 3.428 3.428 0 0 0-1.577-.322 3.194 3.194 0 0 0-1.595.366c-.42.23-.779.558-1.043.958-.267.43-.451.907-.541 1.405a8.682 8.682 0 0 0-.161 1.698c-.005.629.048 1.257.157 1.877.086.504.267.987.534 1.423.238.39.58.708.988.914.497.224 1.04.33 1.584.311a3.293 3.293 0 0 0 1.599-.365 2.872 2.872 0 0 0 1.032-.966c.274-.437.464-.92.56-1.427a8.96 8.96 0 0 0 .16-1.727m2.722-.139a9.424 9.424 0 0 1-.395 2.85 5.693 5.693 0 0 1-1.174 2.122 5.027 5.027 0 0 1-1.925 1.332c-.848.32-1.75.475-2.656.457a7.83 7.83 0 0 1-2.597-.388 4.47 4.47 0 0 1-1.848-1.189 5.03 5.03 0 0 1-1.097-2.03 10.112 10.112 0 0 1-.366-2.927 9.011 9.011 0 0 1 .395-2.784 5.612 5.612 0 0 1 1.17-2.104 5.093 5.093 0 0 1 1.929-1.332 7.112 7.112 0 0 1 2.663-.464 7.683 7.683 0 0 1 2.561.387c.705.233 1.34.64 1.848 1.182.513.58.889 1.27 1.097 2.016.265.934.388 1.902.366 2.872M131.407 20.151a3.79 3.79 0 0 1-.025.498 1.687 1.687 0 0 1-.07.336.465.465 0 0 1-.124.19.263.263 0 0 1-.172.06h-5.854a.801.801 0 0 1-.549-.191.78.78 0 0 1-.223-.626V8.835a.27.27 0 0 1 .066-.175.406.406 0 0 1 .212-.128c.13-.04.261-.066.395-.08.21-.02.42-.029.63-.026.21-.003.42.006.629.025.134.015.266.042.395.08a.439.439 0 0 1 .212.129.263.263 0 0 1 .062.175v10.263h4.025c.062-.001.122.018.172.054a.424.424 0 0 1 .124.176c.036.105.06.215.07.326.019.165.028.331.025.497M137.528 10.917l-1.796 5.422h3.618zm5.854 9.355c.063.183.112.37.146.56a.366.366 0 0 1-.077.31.67.67 0 0 1-.388.129c-.183 0-.435.025-.757.025h-.783a1.83 1.83 0 0 1-.428-.055.432.432 0 0 1-.208-.124.651.651 0 0 1-.1-.208l-.859-2.561h-4.785l-.809 2.491a.768.768 0 0 1-.102.234.424.424 0 0 1-.205.147 1.42 1.42 0 0 1-.406.073c-.176 0-.403.022-.684.022a5.854 5.854 0 0 1-.71-.033.527.527 0 0 1-.366-.143.366.366 0 0 1-.07-.322c.035-.187.085-.37.15-.549l3.93-11.312c.033-.097.08-.19.139-.274a.501.501 0 0 1 .252-.158c.155-.042.315-.064.476-.065h1.738c.18 0 .359.022.534.065a.512.512 0 0 1 .278.165c.064.09.112.19.142.296zM2.195 19.756a6.454 6.454 0 0 1 0-9.11L10.9 1.95a6.45 6.45 0 0 1 7.35-1.255l-.022.022-8.568 8.568-.022.022a2.142 2.142 0 0 0 3.029 3.03l1.518-1.519c.856-.856 1.712-.874 2.459-.128l3.263 3.249c.89.889.98 1.624 0 2.601l-3.077 3.092c-.856.856-1.664.936-2.601 0l-5.952-5.938a2.142 2.142 0 0 0-3.03 3.03l7.559 7.554a3.798 3.798 0 0 0 5.367 0l6.38-6.388a3.798 3.798 0 0 0 0-5.367L19.676 7.65c-.765-.765-.696-1.628.08-2.4l1.57-1.573c.07-.07.135-.146.194-.227l6.106 6.106a7.99 7.99 0 0 1 0 11.301l-6.513 6.513a7.994 7.994 0 0 1-11.308 0z" }))), this.variant === "public" ? (h("div", null)) : (h("div", { class: "seutu private" }, h("span", { class: "text" }, "P\u00E4\u00E4kaupunkiseutu"))), h("button", { class: "mobile-menu" }, h("span", { class: "name" }, "Valikko"), h("div", { class: "nav-icon" }, h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" })))), h("div", { class: "menus" }, this.variant === "public" ? (h("nav", { class: "primary-nav public" }, h("div", { class: "dropdown" }, h("button", { class: "dropdown-toggle" }, h("span", { class: "text context-selector" }, "Henkil\u00F6asiakas"), h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), h("div", { class: "dropdown-content context" }, h("button", { class: "selected" }, "Henkil\u00F6asiakas"), h("button", null, "Maatila-asiakas"), h("button", null, "Yritysasiakas"))), h("a", { href: "#", class: "main-link selected" }, "Etusivu"), h("a", { href: "#", class: "main-link" }, "Edut"), h("a", { href: "#", class: "main-link" }, "Vakuutukset"), h("a", { href: "#", class: "main-link" }, "S\u00E4\u00E4st\u00F6t ja sijoitukset"), h("a", { href: "#", class: "main-link" }, "Ilmoita vahingosta"), h("a", { href: "#", class: "main-link" }, "Asiakaspalvelu"), h("a", { href: "#", class: "main-link" }, "Pankki ja rahoitus"))) : (h("nav", { class: "primary-nav private" }, h("a", { href: "#", class: "main-link selected" }, "Etusivu"), h("a", { href: "#", class: "main-link" }, "Vakuutukset"), h("a", { href: "#", class: "main-link" }, "Korvaukset"), h("a", { href: "#", class: "main-link" }, "S\u00E4\u00E4st\u00F6t ja sijoitukset"), h("a", { href: "#", class: "main-link" }, "Laskut"), h("a", { href: "#", class: "main-link" }, "Omat viestit ", h("span", { class: "indicator" }, "(Lukemattomia viestej\u00E4)")))), h("div", { class: "secondary-nav" }, h("div", { class: "dropdown" }, h("button", { class: "dropdown-toggle" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-contact-dropdown"].svg }), h("span", { class: "text" }, "Ota yhteytt\u00E4"), h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), this.variant === "public" ? (h("div", { class: "dropdown-content" }, h("a", { href: "#" }, "Kaikki yhteystiedot"), h("a", { href: "#" }, "Asiakaspalvelu"), h("a", { href: "#" }, "Kysy chatissa"))) : (h("div", { class: "dropdown-content" }, h("a", { href: "index-logged.html" }, "Kaikki yhteystiedot"), h("a", { href: "index-logged.html" }, "Omat viestit"), h("a", { href: "index-logged.html" }, "Aloita chat")))), h("div", { class: "dropdown" }, h("button", { class: "dropdown-toggle" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-language"].svg }), h("span", { class: "text language-selector" }, "FI"), h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), h("div", { class: "dropdown-content language" }, h("button", { "data-lang": "FI", class: "selected" }, "Suomeksi"), h("button", { "data-lang": "SV" }, "P\u00E5 Svenska"), h("button", { "data-lang": "EN" }, "In English"))), this.variant === "public" ? (h("a", { href: "index-logged.html", class: "menu-item" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-login"].svg }), h("span", { class: "text" }, "Kirjaudu sis\u00E4\u00E4n"))) : (h("div", null, h("a", { class: "menu-item", href: "index-logged.html" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-user"].svg }), h("span", { class: "text" }, "Laura-Karoliina")), h("a", { class: "menu-item", href: "index.html" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-logout"].svg }), h("span", { class: "text" }, "Kirjaudu ulos")))))))); }; Object.defineProperty(DuetHeader.prototype, "element", { get: function () { return getElement(this); }, enumerable: true, configurable: true }); Object.defineProperty(DuetHeader, "style", { get: function () { return ":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-bottom:48px;position:fixed;z-index:300;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:.875rem;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;top:0;left:0;width:100%}\@media only screen and (min-width:64.0625em){:host{position:relative;top:auto;left:auto;z-index:auto}}*{-webkit-tap-highlight-color:rgba(0,0,0,0)}header{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom:1px solid #e1e3e6;background:#fff;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:.875rem;font-weight:400;line-height:1.5;z-index:301;height:67.2px;width:100%;display:-ms-flexbox!important;display:flex!important;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;position:relative;-webkit-box-shadow:0 2px 6px 0 rgba(0,41,77,.07);box-shadow:0 2px 6px 0 rgba(0,41,77,.07)}\@media only screen and (min-width:64.0625em){header{-webkit-box-shadow:none;box-shadow:none;position:relative;top:auto;left:auto}}.logo{margin-left:28px;height:100%;display:-ms-flexbox;display:flex}\@media only screen and (max-width:47.9375em){.logo{margin-left:20px}}.logo svg{width:130px;height:auto}.logo svg path{fill:#00a1d4}.dropdown-toggle,.menu-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-transition:color .3s ease,-webkit-box-shadow .3s ease;transition:color .3s ease,-webkit-box-shadow .3s ease;transition:color .3s ease,box-shadow .3s ease;transition:color .3s ease,box-shadow .3s ease,-webkit-box-shadow .3s ease;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;font-size:1rem;line-height:1.5;padding:16px;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;color:#00294d;border-bottom:1px solid #e1e3e6;height:48px;padding-left:28px;width:100%;display:-ms-flexbox;display:flex;text-align:left;-ms-flex-pack:start;justify-content:flex-start}\@media only screen and (max-width:47.9375em){.dropdown-toggle,.menu-item{padding-left:20px}}\@media only screen and (min-width:64.0625em){.dropdown-toggle,.menu-item{padding-left:16px;font-size:.875rem;height:100%}.dropdown-toggle:after,.menu-item:after{content:\"\";position:absolute;background:#e1e3e6;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:0;height:20px;width:1px}.dropdown-toggle:last-child:after,.menu-item:last-child:after{display:none}}.dropdown-toggle:hover,.menu-item:hover{color:#004d80}.dropdown-toggle:active,.menu-item:active{-webkit-transition:none;transition:none}.menu-item{height:54px}\@media only screen and (min-width:64.0625em){.menu-item{height:100%}}.mobile-user-menu{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;color:#00294d;width:48px;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle}.mobile-user-menu svg{pointer-events:none;width:26.4px;height:26.4px}.mobile-menu{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;color:#00294d;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;cursor:pointer;padding-left:28px;padding-right:28px}\@media only screen and (min-width:64.0625em){.mobile-menu{display:none}}\@media only screen and (max-width:47.9375em){.mobile-menu{padding-right:20px}}.mobile-menu:focus{outline:0}.mobile-menu .name{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0;display:block;text-indent:-999px}.mobile-menu svg{pointer-events:none;width:24px;height:24px}.menus{background:#f5f8fa;-webkit-transition:opacity .3s ease-in-out,visibility .3s ease-in-out;transition:opacity .3s ease-in-out,visibility .3s ease-in-out;-webkit-overflow-scrolling:touch;z-index:300;position:fixed;text-align:left;overflow:hidden;overflow-y:auto;width:100%;top:67.2px;opacity:0;visibility:hidden;bottom:0;left:0;will-change:opacity,visibility}\@media only screen and (min-width:64.0625em){.menus{background:transparent;z-index:auto;-webkit-transition:none;transition:none;position:static;will-change:auto;-webkit-overflow-scrolling:auto;overflow:visible;opacity:1;visibility:visible;bottom:auto;left:auto;top:auto}}.menus.active{opacity:1;visibility:visible}.secondary-nav{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,-webkit-transform .6s ease;transition:transform .6s ease,opacity .6s ease;transition:transform .6s ease,opacity .6s ease,-webkit-transform .6s ease;will-change:transform,opacity;-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-font-smoothing:antialiased;opacity:0}.active .secondary-nav{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}\@media only screen and (min-width:64.0625em){.secondary-nav{z-index:302;height:67.2px;-webkit-transition:none;transition:none;opacity:1;-webkit-transform:none;transform:none;position:absolute;top:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;vertical-align:middle;margin-right:20px}.secondary-nav>*,.secondary-nav span{height:100%;display:-ms-flexbox;display:flex;border:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}}.secondary-nav .dropdown-toggle{-ms-flex-direction:row;flex-direction:row;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}\@media only screen and (min-width:64.0625em){.secondary-nav .dropdown-toggle{-ms-flex-pack:center;justify-content:center;border-bottom:0}}.secondary-nav .dropdown-toggle.active{border-bottom:0}\@media only screen and (min-width:64.0625em){.secondary-nav .dropdown-toggle.active{color:#004d80;-webkit-box-shadow:inset 0 -3px 0 #0077b3;box-shadow:inset 0 -3px 0 #0077b3}}.secondary-nav .dropdown-toggle.active .icon-mobile{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.secondary-nav .dropdown-toggle:focus{outline:0}.secondary-nav .icon-mobile{height:100%;-webkit-transition:.3s ease;transition:.3s ease;width:48px;color:#00294d;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:50%;-webkit-transform:translateY(-50%) rotate(0deg);transform:translateY(-50%) rotate(0deg);right:0}\@media only screen and (min-width:64.0625em){.secondary-nav .icon-mobile{display:none}}.secondary-nav .icon-mobile svg{margin:auto;vertical-align:top;width:10px;height:10px}.secondary-nav svg{width:16px;height:16px;margin-right:8px;margin-bottom:-3px}\@media only screen and (min-width:64.0625em){.secondary-nav svg{margin-bottom:0;margin-top:-1px}}nav{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;display:block;-webkit-font-smoothing:antialiased;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;font-weight:400;line-height:1.5;z-index:300;background:#fff;width:100%;position:relative;will-change:transform,opacity;-webkit-transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,-webkit-transform .6s ease;transition:transform .6s ease,opacity .6s ease;transition:transform .6s ease,opacity .6s ease,-webkit-transform .6s ease;-webkit-transform:translateY(-30px);transform:translateY(-30px);opacity:0}.active nav{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}\@media only screen and (min-width:64.0625em){nav{font-size:.875rem;opacity:1;-webkit-transition:none;transition:none;-webkit-transform:none;transform:none;top:67.2px;-webkit-box-shadow:0 2px 6px 0 rgba(0,41,77,.07);box-shadow:0 2px 6px 0 rgba(0,41,77,.07);height:48px;display:-ms-flexbox!important;display:flex!important;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}nav.private{padding-left:20px}nav.fixed{position:fixed;top:0;left:0;right:0}}\@media only screen and (min-width:64.0625em){nav .dropdown{margin-right:20px}}nav .dropdown-toggle{background:#00294d;color:#fff;padding:0 28px;border-bottom:0;height:54px;font-weight:600;display:-ms-flexbox;display:flex;min-width:186px;z-index:601;-ms-flex-align:center;align-items:center;line-height:58px;-ms-flex-pack:start;justify-content:flex-start;vertical-align:top}\@media only screen and (min-width:64.0625em){nav .dropdown-toggle{height:48px;line-height:51px;padding:0 20px 0 36px}}\@media only screen and (max-width:47.9375em){nav .dropdown-toggle{padding:0 20px}}nav .dropdown-toggle .text{margin-top:-2px}nav .dropdown-toggle .icon-mobile{display:block;will-change:transform;-webkit-transition:.3s ease;transition:.3s ease;margin-top:-2px;margin-left:8px;position:absolute;top:0;right:20px}\@media only screen and (min-width:64.0625em){nav .dropdown-toggle .icon-mobile{position:relative;top:auto;right:auto}}nav .dropdown-toggle .icon-mobile svg{width:10px;height:10px}nav .dropdown-toggle:hover{color:#fff}nav .dropdown-toggle:focus{outline:0}nav .dropdown-toggle:after{display:none}nav .dropdown-toggle.active .icon-mobile{-webkit-transform:rotate(180deg);transform:rotate(180deg)}nav .dropdown-content{background:#00294d;color:#fff;width:100%}nav .dropdown-content button{padding-left:0;color:#fff}\@media only screen and (min-width:64.0625em){nav .dropdown-content button{padding-left:36px}nav .dropdown-content button:hover{background:#0d3456}}\@media only screen and (min-width:64.0625em){nav .dropdown-content{padding-top:0;will-change:transform,opacity,visibility;-webkit-transform:translateZ(0) translateY(-100%);transform:translateZ(0) translateY(-100%)}}\@media only screen and (min-width:64.0625em){nav .dropdown-content.active{opacity:1;visibility:visible;-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0)}}nav a{line-height:51px;font-weight:600;border-bottom:1px solid #e1e3e6;display:block;position:relative;white-space:nowrap;padding:0 12px;height:51px;color:#00294d;text-decoration:none;padding-left:28px}\@media only screen and (max-width:47.9375em){nav a{padding-left:20px}}\@media only screen and (min-width:64.0625em){nav a{line-height:47px;padding-left:12px;height:100%;border:0}nav a:after{content:\"\";bottom:0;-webkit-transition:.3s ease;transition:.3s ease;background:#fff;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100%;max-width:0;height:3px}}\@media only screen and (min-width:64.0625em){nav a.public:first-child{padding-left:0}nav a.public:first-child:after{left:0!important}}nav a.selected{color:#0077b3}nav a.selected:hover{color:#0077b3}\@media only screen and (min-width:64.0625em){nav a.selected:after{background:#0077b3;max-width:calc(100% - 24px)}}\@media (max-width:64em){nav a.selected:after{content:\"\";background:#0077b3;position:absolute;left:0;top:0;bottom:0;width:3px}}nav a:hover{color:#004d80}.indicator{overflow:hidden;text-indent:-9999px;display:-ms-inline-flexbox;display:inline-flex;top:16px;position:relative;width:7.1428571429px;height:7.1428571429px;border-radius:50%;background:#f7b228}\@media only screen and (min-width:64.0625em){.indicator{right:-3px;top:10px;width:10px;height:10px;position:absolute}}.dropdown{position:relative}.dropdown-content{padding-bottom:16px;background:#f5f8fa;border-bottom:1px solid #e1e3e6;padding-left:36px;text-align:left;display:none}\@media only screen and (max-width:47.9375em){.dropdown-content{padding-left:28px}}\@media only screen and (min-width:64.0625em){.dropdown-content{padding-top:16px;padding-left:0;border:0;-webkit-transition:.3s ease;transition:.3s ease;-webkit-box-shadow:0 4px 10px 0 rgba(0,41,77,.15);box-shadow:0 4px 10px 0 rgba(0,41,77,.15);z-index:600;min-width:130px;left:0;top:100%;position:absolute;display:block;opacity:0;visibility:hidden;will-change:transform,opacity,visibility;-webkit-transform:scale(.85) translateZ(0) translateY(-20px);transform:scale(.85) translateZ(0) translateY(-20px)}}.dropdown-content.active{display:block}\@media only screen and (min-width:64.0625em){.dropdown-content.active{opacity:1;visibility:visible;-webkit-transform:scale(1) translateZ(0) translateY(0);transform:scale(1) translateZ(0) translateY(0)}}.dropdown-content a,.dropdown-content button{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:3px 8px 4px;-webkit-transition:.3s ease;transition:.3s ease;padding-left:16px;padding-right:16px;cursor:pointer;text-decoration:none;position:relative;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:.875rem;font-weight:400;line-height:1.5;color:#00294d;width:100%;white-space:nowrap;display:block;text-align:left}\@media only screen and (min-width:64.0625em){.dropdown-content a:hover,.dropdown-content button:hover{background:#e6f2f8}}.dropdown-content a:focus,.dropdown-content button:focus{outline:0}.dropdown-content a.selected,.dropdown-content button.selected{pointer-events:none;-webkit-font-smoothing:subpixel-antialiased;font-weight:600;padding-right:36px;vertical-align:baseline}\@media only screen and (min-width:64.0625em){.dropdown-content a.selected,.dropdown-content button.selected{-webkit-font-smoothing:antialiased;color:#fff;background:#0077b3}}.dropd