<button type="button" class="a-button a-button--transparent m-modal__graph-button" data-modal-open="modal-container" data-zoom="Klicka på grafen för att zooma">
    <span class="a-button__text u-visuallyhidden">Open graph modal</span>
    <img src="/assets/images/graph.png" alt="Graf" class="u-border-radius u-b u-b-solid u-b-3 u-b-ash" style="max-width:100%;width:612px;">
</button>
<div id="modal-container" class="m-modal m-modal--has-overlay" aria-hidden="true">
    <div class="m-modal__container m-modal__container--dynamic-width js-modal-graph">
        <button type="button" class="m-modal__overlay-button js-modal-graph-button">
            <span>Scrolla för att se hela grafen</span>
        </button>
        <button type="button" class="a-button a-button--ocean-light m-modal__button-fixed js-toggle-modal" aria-expanded="false" data-a11y-toggle="modal-container" aria-controls="modal-container" data-modal-close>
            <span class="a-button__text">Stäng</span>
        </button>
        <div id="graph-2185" class="background-snow wp-block-graph ">
            <div class="wrapper">
                <div data-iis-graph-parent="" class="iis-graph alignwide u-p-b-4" style="position: relative; z-index:2;">
                    <div class="row align-items-start justify-content-between article__content article__content--full-width">
                        <div class="grid-18 grid-md-auto">
                            <div class="display-flex align-items-center justify-content-md-end">
                                <span class="a-button a-button--transparent a-button--icon m-share__button u-p-r-1" style="overflow: visible">
                                    <span class="a-button__text">Hjälp</span>
                                    <span tabindex="0" class="a-tooltip" id="tooltip-2185" role="tooltip">
                                        <span class="a-tooltip__text" data-tooltip="">Grafen är interaktiv vilket gör att du kan markera ytor med musen för att zooma (gäller enbart desktop) samt själv välja vilka delar du vill ska synas genom att klicka på diagramförklaringarna.</span>
                                        <svg class="icon a-button__icon">
                                            <use xlink:href="#icon-questionmark"></use>
                                        </svg>
                                    </span>
                                </span>
                                <div class="m-context-menu js-context-menu">
                                    <button type="button" class="a-button a-button--transparent a-button--icon js-context-menu-btn" data-a11y-toggle="graph-export-218570df" id="a11y-toggle-0" aria-controls="graph-export-218570df" aria-expanded="false">
                                        <span class="a-button__text">Exportera</span>
                                        <svg class="icon a-button__icon">
                                            <use xlink:href="#icon-download"></use>
                                        </svg>
                                    </button>
                                    <ul class="m-context-menu__list u-list-clean u-z-index-middleground-important" id="graph-export-218570df" data-container="true" data-focus-trap="true" aria-hidden="true" aria-labelledby="a11y-toggle-0">
                                        <li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="pdf" href="#">PDF</a></li>
                                        <li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="png" href="#">PNG</a></li>
                                        <li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="jpg" href="#">JPG</a></li>
                                        <li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="svg" href="#">SVG</a></li>
                                        <li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="csv" href="#">CSV</a></li>
                                        <li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="xlsx" href="#">XLSX</a></li>
                                        <li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="json" href="#">JSON</a></li>
                                    </ul>
                                </div>
                                <a href="#" data-export-type="print" data-export-graph="2185" class="a-button a-button--transparent a-button--icon m-share__button">
                                    <span class="a-button__text">Skriv ut</span>
                                    <svg class="icon a-button__icon">
                                        <use xlink:href="#icon-print"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div data-iis-graph-idle-icon="2185" id="idle-icon" style="position: absolute;top: 50%;margin-top: -40px;margin-left: -40px;width: 80px;display: none;z-index: 99;pointer-events: none">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="100%" height="100%">
                                <g>
                                    <path class="arrow" d="M11.854 5.146a.5.5 0 01-.708.708l-2-2a.5.5 0 010-.708l2-2a.5.5 0 01.708.708L10.707 3H20.5a.5.5 0 110 1h-9.796l1.15 1.146z"></path>
                                </g>
                                <g>
                                    <path class="hand" d="M22.093 13.708l-1.47-2.024a1.495 1.495 0 00-2.45.033l1.418 1.95a.507.507 0 01-.109.702.507.507 0 01-.7-.114l-1.763-2.425a1.495 1.495 0 00-2.448.032l2.005 2.76a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-1.762-2.426a1.495 1.495 0 00-2.449.033l2.593 3.568a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-4.701-6.47a1.495 1.495 0 00-2.095-.331 1.502 1.502 0 00-.332 2.094l5.43 7.475-2.41-1.073a1.495 1.495 0 00-1.979.76 1.502 1.502 0 00.759 1.98l2.65 1.18c.95.53 1.805 1.505 3.651 2.68 2.032 1.292 3.935 1.863 4.17 2.187a.51.51 0 00-.11.698c.162.224.478.271.706.105l7.266-5.278a.51.51 0 00.118-.704.504.504 0 00-.699-.11c-.864-1.191-1.314-5.213-3.671-8.458z"></path>
                                </g>
                                <style>
                                    .arrow {
                                        animation: arrow 3s infinite;
                                        animation-delay: 3s;
                                        opacity: 0;
                                    }

                                    .hand {
                                        animation: hand 3s ease infinite;
                                        transform: translateX(0.2rem);
                                    }

                                    @keyframes hand {
                                        0% {
                                            opacity: 1;
                                        }

                                        50% {
                                            transform: translateX(-0.2rem);
                                            opacity: 1;
                                        }

                                        100% {
                                            transform: translateX(0.2rem);
                                            opacity: 1;
                                        }
                                    }

                                    @keyframes arrow {
                                        0% {
                                            opacity: 0
                                        }

                                        50% {
                                            opacity: 1
                                        }

                                        100% {
                                            opacity: 0
                                        }
                                    }
                                </style>
                            </svg>
                        </div>
                        <div data-iis-graph="2185" data-iis-graph-export="[data-iis-graph-parent]" style="height: 600px; width: 100%; min-width: 1360px;" data-ll-status="entered" class="entered" data-iis-graph-rendered="true" data-iis-graph-mounted="true">
                            <div style="width: 100%; height: 100%; position: relative; left: -0.5px; top: -0.460938px;">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
                                    <defs>
                                        <clipPath id="id-45">
                                            <rect width="1320" height="600"></rect>
                                        </clipPath>
                                        <filter id="filter-id-72" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
                                        <filter id="filter-id-93" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
                                        <clipPath id="id-115">
                                            <rect width="1206" height="486"></rect>
                                        </clipPath>
                                        <clipPath id="id-131">
                                            <path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
                                        </clipPath>
                                        <clipPath id="id-149">
                                            <path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
                                        </clipPath>
                                        <clipPath id="id-167">
                                            <path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
                                        </clipPath>
                                        <clipPath id="id-185">
                                            <path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
                                        </clipPath>
                                        <filter id="filter-id-50" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
                                            <feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
                                            <feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
                                            <feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
                                            <feComposite in2="offsetBlur" operator="in"></feComposite>
                                            <feMerge>
                                                <feMergeNode></feMergeNode>
                                                <feMergeNode in="SourceGraphic"></feMergeNode>
                                            </feMerge>
                                        </filter>
                                        <filter id="filter-id-190" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
                                            <feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
                                            <feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
                                            <feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
                                            <feComposite in2="offsetBlur" operator="in"></feComposite>
                                            <feMerge>
                                                <feMergeNode></feMergeNode>
                                                <feMergeNode in="SourceGraphic"></feMergeNode>
                                            </feMerge>
                                        </filter>
                                        <filter id="filter-id-172" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
                                            <feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
                                            <feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
                                            <feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
                                            <feComposite in2="offsetBlur" operator="in"></feComposite>
                                            <feMerge>
                                                <feMergeNode></feMergeNode>
                                                <feMergeNode in="SourceGraphic"></feMergeNode>
                                            </feMerge>
                                        </filter>
                                        <filter id="filter-id-154" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
                                            <feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
                                            <feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
                                            <feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
                                            <feComposite in2="offsetBlur" operator="in"></feComposite>
                                            <feMerge>
                                                <feMergeNode></feMergeNode>
                                                <feMergeNode in="SourceGraphic"></feMergeNode>
                                            </feMerge>
                                        </filter>
                                        <filter id="filter-id-136" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
                                            <feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
                                            <feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
                                            <feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
                                            <feComposite in2="offsetBlur" operator="in"></feComposite>
                                            <feMerge>
                                                <feMergeNode></feMergeNode>
                                                <feMergeNode in="SourceGraphic"></feMergeNode>
                                            </feMerge>
                                        </filter>
                                        <clipPath id="id-432">
                                            <rect width="1206" height="486"></rect>
                                        </clipPath>
                                    </defs>
                                    <g>
                                        <g fill="#ffffff" fill-opacity="0">
                                            <rect width="1320" height="600"></rect>
                                        </g>
                                        <g>
                                            <g role="region" clip-path="url(&quot;#id-45&quot;)" opacity="1" aria-label="Diagram">
                                                <g transform="translate(15,15)">
                                                    <g fill="#000000" id="id-66" font-size="16" font-weight="regular" display="none">
                                                        <g transform="translate(20,0)" style="user-select: none;">
                                                            <foreignObject width="1281" height="81">
                                                                <div style="text-align: center; overflow-wrap: break-word; color: rgb(0, 0, 0); display: block;">
                                                                    <p>Fråga: Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
                                                                </div>
                                                            </foreignObject>
                                                        </g>
                                                    </g>
                                                    <g>
                                                        <g>
                                                            <g>
                                                                <g>
                                                                    <g>
                                                                        <g>
                                                                            <g style="touch-action: none; user-select: none; -webkit-user-drag: none;" transform="translate(84,0)">
                                                                                <g fill="#ffffff" fill-opacity="0">
                                                                                    <rect width="1206" height="486"></rect>
                                                                                </g>
                                                                                <g>
                                                                                    <g>
                                                                                        <g></g>
                                                                                    </g>
                                                                                    <g>
                                                                                        <g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,-49)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,0)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,49)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,97)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,146)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,194)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,243)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,292)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,340)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,389)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,437)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,486)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,535)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                            <g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,583)">
                                                                                                <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                    <g>
                                                                                        <g>
                                                                                            <g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ff4069" aria-label="Icke-användare" stroke-width="0" id="id-182">
                                                                                                <g>
                                                                                                    <g clip-path="url(&quot;#id-185&quot;)">
                                                                                                        <g>
                                                                                                            <g>
                                                                                                                <g>
                                                                                                                    <g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(434.16,456.84)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                    <g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(1037.16,456.84)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                </g>
                                                                                                            </g>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g></g>
                                                                                                </g>
                                                                                            </g>
                                                                                            <g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ffce2e" aria-label="Sällananvändare" stroke-width="0" id="id-164">
                                                                                                <g>
                                                                                                    <g clip-path="url(&quot;#id-167&quot;)">
                                                                                                        <g>
                                                                                                            <g>
                                                                                                                <g>
                                                                                                                    <g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(313.56,466.56)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                    <g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(916.56,466.56)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                </g>
                                                                                                            </g>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g></g>
                                                                                                </g>
                                                                                            </g>
                                                                                            <g role="group" stroke-opacity="0" fill-opacity="1" stroke="#55c7b4" aria-label="Dagliga användare" stroke-width="0" id="id-146">
                                                                                                <g>
                                                                                                    <g clip-path="url(&quot;#id-149&quot;)">
                                                                                                        <g>
                                                                                                            <g>
                                                                                                                <g>
                                                                                                                    <g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(192.96,48.6)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                    <g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(795.96,48.6)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                </g>
                                                                                                            </g>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g></g>
                                                                                                </g>
                                                                                            </g>
                                                                                            <g role="group" stroke-opacity="0" fill-opacity="1" stroke="#50b2fc" aria-label="Internetanvändare 16+ år" stroke-width="0" id="id-128">
                                                                                                <g>
                                                                                                    <g clip-path="url(&quot;#id-131&quot;)">
                                                                                                        <g>
                                                                                                            <g>
                                                                                                                <g>
                                                                                                                    <g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(72.36,29.16)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                    <g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(675.36,29.16)">
                                                                                                                        <g>
                                                                                                                            <g>
                                                                                                                                <path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
                                                                                                                            </g>
                                                                                                                        </g>
                                                                                                                    </g>
                                                                                                                </g>
                                                                                                            </g>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g></g>
                                                                                                </g>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                    <g clip-path="url(&quot;#id-432&quot;)">
                                                                                        <g>
                                                                                            <g fill="#50b2fc" stroke="#50b2fc">
                                                                                                <g></g>
                                                                                            </g>
                                                                                            <g fill="#55c7b4" stroke="#55c7b4">
                                                                                                <g></g>
                                                                                            </g>
                                                                                            <g fill="#ffce2e" stroke="#ffce2e">
                                                                                                <g></g>
                                                                                            </g>
                                                                                            <g fill="#ff4069" stroke="#ff4069">
                                                                                                <g></g>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                    <g>
                                                                                        <g>
                                                                                            <g>
                                                                                                <g></g>
                                                                                            </g>
                                                                                            <g>
                                                                                                <g></g>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                    <g>
                                                                                        <g></g>
                                                                                    </g>
                                                                                    <g>
                                                                                        <g></g>
                                                                                    </g>
                                                                                    <g opacity="0" clip-path="url(&quot;#id-115&quot;)" style="touch-action: none; user-select: none; -webkit-user-drag: none;" visibility="hidden" aria-hidden="true">
                                                                                        <g>
                                                                                            <g fill-opacity="0.2" fill="#000000" visibility="hidden" style="pointer-events: none;">
                                                                                                <path></path>
                                                                                            </g>
                                                                                            <g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(1206,0)">
                                                                                                <path d=" M0,0  L0,486 "></path>
                                                                                            </g>
                                                                                            <g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(0,178.4)">
                                                                                                <path d=" M0,0  L1206,0 "></path>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                    <g role="button" focusable="true" tabindex="0" opacity="0" visibility="hidden" aria-hidden="true" transform="translate(1166,-3)" aria-labelledby="id-36-title">
                                                                                        <g fill="#6794dc" stroke="#ffffff" fill-opacity="1" stroke-opacity="0" transform="translate(0,8)">
                                                                                            <path d="M17,0 L18,0 a17,17 0 0 1 17,17 L35,17 a17,17 0 0 1 -17,17 L17,34 a17,17 0 0 1 -17,-17 L0,17 a17,17 0 0 1 17,-17 Z"></path>
                                                                                        </g>
                                                                                        <g transform="translate(9,9)">
                                                                                            <g stroke="#ffffff" style="pointer-events: none;" transform="translate(0,8)">
                                                                                                <path d=" M0,0  L11,0 " transform="translate(2.5,7.5)"></path>
                                                                                            </g>
                                                                                            <g fill="#000000" style="pointer-events: none;" transform="translate(17,8)">
                                                                                                <g display="none"></g>
                                                                                            </g>
                                                                                        </g>
                                                                                        <title id="id-36-title">Zooma ut</title>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                            <g>
                                                                                <g>
                                                                                    <g aria-hidden="true">
                                                                                        <g>
                                                                                            <g fill="#000000" transform="translate(0,263) rotate(-90)">
                                                                                                <g display="none"></g>
                                                                                            </g>
                                                                                            <g stroke="#000000" stroke-opacity="0.15" fill="none" transform="translate(84,486)" opacity="1">
                                                                                                <path transform="translate(-0.5,-0.5)" d=" M0,0  L1206,0 "></path>
                                                                                            </g>
                                                                                            <g>
                                                                                                <g>
                                                                                                    <g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(64,243)">
                                                                                                        <g transform="translate(-54,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>100%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,-48.6)" display="none">
                                                                                                        <g transform="translate(-54,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>110%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,0)">
                                                                                                        <g transform="translate(-54,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>100%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,48.6)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>90%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,97.2)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>80%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,145.8)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>70%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,194.4)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>60%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,243)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>50%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,291.6)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>40%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,340.2)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>30%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,388.8)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>20%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,437.4)">
                                                                                                        <g transform="translate(-44,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>10%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,486)">
                                                                                                        <g transform="translate(-34,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>0%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,534.6)" display="none">
                                                                                                        <g transform="translate(-49,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>-10%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                    <g fill="#000000" transform="translate(64,583.2)" display="none">
                                                                                                        <g transform="translate(-49,-12)" style="user-select: none;">
                                                                                                            <text x="0" y="23.5" dy="-6.345">
                                                                                                                <tspan>-20%</tspan>
                                                                                                            </text>
                                                                                                        </g>
                                                                                                    </g>
                                                                                                </g>
                                                                                            </g>
                                                                                            <g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;" transform="translate(64,0)">
                                                                                                <path d=" M0,0  L0,486 " transform="translate(-0.5,-0.5)"></path>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                            <g transform="translate(1290,0)">
                                                                                <g></g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g>
                                                                        <g transform="translate(84,0)"></g>
                                                                    </g>
                                                                    <g transform="translate(0,486)">
                                                                        <g transform="translate(84,0)">
                                                                            <g aria-hidden="true">
                                                                                <g>
                                                                                    <g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;">
                                                                                        <path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
                                                                                    </g>
                                                                                    <g>
                                                                                        <g>
                                                                                            <g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(603,0)">
                                                                                                <g transform="translate(-4.5,10)" style="user-select: none;">
                                                                                                    <text x="0" y="23.5" dy="-6.345">
                                                                                                        <tspan>L</tspan>
                                                                                                    </text>
                                                                                                </g>
                                                                                            </g>
                                                                                            <g fill="#000000" display="none" transform="translate(1507.5,0)">
                                                                                                <g transform="translate(0,10)" display="none"></g>
                                                                                            </g>
                                                                                            <g fill="#000000" transform="translate(301.5,0)">
                                                                                                <g transform="translate(-20.5,10)" style="user-select: none;">
                                                                                                    <text x="0" y="23.5" overflow="hidden" dy="-6.345">
                                                                                                        <tspan>2021</tspan>
                                                                                                    </text>
                                                                                                </g>
                                                                                            </g>
                                                                                            <g fill="#000000" transform="translate(904.5,0)">
                                                                                                <g transform="translate(-20.5,10)" style="user-select: none;">
                                                                                                    <text x="0" y="23.5" overflow="hidden" dy="-6.345">
                                                                                                        <tspan>2022</tspan>
                                                                                                    </text>
                                                                                                </g>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                    <g stroke="#000000" stroke-opacity="0.15" fill="none" display="none" transform="translate(1206,-486)" opacity="0" visibility="hidden" aria-hidden="true">
                                                                                        <path transform="translate(-0.5,-0.5)" d=" M0,0  L0,486 "></path>
                                                                                    </g>
                                                                                    <g fill="#000000" transform="translate(603,44)">
                                                                                        <g display="none"></g>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                            <g role="group" aria-label="Teckenförklaring" transform="translate(0,530)">
                                                                <g>
                                                                    <g focusable="true" tabindex="0" role="switch" aria-controls="id-128" aria-labelledby="id-128" aria-checked="true" style="cursor: pointer;" transform="translate(247,0)">
                                                                        <g fill="#ffffff" fill-opacity="0">
                                                                            <rect width="236" height="40"></rect>
                                                                        </g>
                                                                        <g transform="translate(0,8)">
                                                                            <g fill="#50b2fc" style="pointer-events: none;" transform="translate(0,0.5)">
                                                                                <g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
                                                                                    <rect width="23" height="23"></rect>
                                                                                </g>
                                                                                <g>
                                                                                    <g fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-opacity="1" stroke-width="0">
                                                                                        <path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" aria-label="Internetanvändare 16+ år" style="pointer-events: none;" transform="translate(28,0)">
                                                                                <g style="user-select: none;">
                                                                                    <text x="0" y="23.5" overflow="hidden" dy="-6.345">
                                                                                        <tspan>Internetanvändare 16+ år</tspan>
                                                                                    </text>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" style="pointer-events: none;" display="none">
                                                                                <g display="none"></g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g focusable="true" tabindex="0" role="switch" aria-controls="id-146" aria-labelledby="id-146" aria-checked="true" style="cursor: pointer;" transform="translate(503,0)">
                                                                        <g fill="#ffffff" fill-opacity="0">
                                                                            <rect width="180" height="40"></rect>
                                                                        </g>
                                                                        <g transform="translate(0,8)">
                                                                            <g fill="#55c7b4" style="pointer-events: none;" transform="translate(0,0.5)">
                                                                                <g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
                                                                                    <rect width="23" height="23"></rect>
                                                                                </g>
                                                                                <g>
                                                                                    <g fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-opacity="1" stroke-width="0">
                                                                                        <path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" aria-label="Dagliga användare" style="pointer-events: none;" transform="translate(28,0)">
                                                                                <g style="user-select: none;">
                                                                                    <text x="0" y="23.5" overflow="hidden" dy="-6.345">
                                                                                        <tspan>Dagliga användare</tspan>
                                                                                    </text>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" style="pointer-events: none;" display="none">
                                                                                <g display="none"></g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g focusable="true" tabindex="0" role="switch" aria-controls="id-164" aria-labelledby="id-164" aria-checked="true" style="cursor: pointer;" transform="translate(703,0)">
                                                                        <g fill="#ffffff" fill-opacity="0">
                                                                            <rect width="166" height="40"></rect>
                                                                        </g>
                                                                        <g transform="translate(0,8)">
                                                                            <g fill="#ffce2e" style="pointer-events: none;" transform="translate(0,0.5)">
                                                                                <g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
                                                                                    <rect width="23" height="23"></rect>
                                                                                </g>
                                                                                <g>
                                                                                    <g fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-opacity="1" stroke-width="0">
                                                                                        <path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" aria-label="Sällananvändare" style="pointer-events: none;" transform="translate(28,0)">
                                                                                <g style="user-select: none;">
                                                                                    <text x="0" y="23.5" overflow="hidden" dy="-6.345">
                                                                                        <tspan>Sällananvändare</tspan>
                                                                                    </text>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" style="pointer-events: none;" display="none">
                                                                                <g display="none"></g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g focusable="true" tabindex="0" role="switch" aria-controls="id-182" aria-labelledby="id-182" aria-checked="true" style="cursor: pointer;" transform="translate(889,0)">
                                                                        <g fill="#ffffff" fill-opacity="0">
                                                                            <rect width="154" height="40"></rect>
                                                                        </g>
                                                                        <g transform="translate(0,8)">
                                                                            <g fill="#ff4069" style="pointer-events: none;" transform="translate(0,0.5)">
                                                                                <g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
                                                                                    <rect width="23" height="23"></rect>
                                                                                </g>
                                                                                <g>
                                                                                    <g fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-opacity="1" stroke-width="0">
                                                                                        <path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" aria-label="Icke-användare" style="pointer-events: none;" transform="translate(28,0)">
                                                                                <g style="user-select: none;">
                                                                                    <text x="0" y="23.5" overflow="hidden" dy="-6.345">
                                                                                        <tspan>Icke-användare</tspan>
                                                                                    </text>
                                                                                </g>
                                                                            </g>
                                                                            <g fill="#000000" style="pointer-events: none;" display="none">
                                                                                <g display="none"></g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                            <g>
                                                <g>
                                                    <g role="tooltip" opacity="0" aria-describedby="id-128" transform="translate(822.6,44.16)" visibility="hidden" aria-hidden="true">
                                                        <g fill="#50b2fc" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-136&quot;)" style="pointer-events: none;" transform="translate(-275,-38.1)">
                                                            <path d="M3,0 L266,0 a3,3 0 0 1 3,3 L269,32 a3,3 0 0 1 -3,3 L266,35 L266,35 L275,38.1 L256,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
                                                        </g>
                                                        <g>
                                                            <g fill="#000000" style="pointer-events: none;" transform="translate(-140.5,-38.1)">
                                                                <g transform="translate(-122.5,7)" style="user-select: none;">
                                                                    <text x="0" y="23.5" dy="-6.345">
                                                                        <tspan>Internetanvändare 16+ år: 94%</tspan>
                                                                    </text>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g role="tooltip" opacity="0" aria-describedby="id-146" transform="translate(943.2,63.6)" visibility="hidden" aria-hidden="true">
                                                        <g fill="#55c7b4" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-154&quot;)" style="pointer-events: none;" transform="translate(-219,-17.5)">
                                                            <path d="M3,0 L210,0 a3,3 0 0 1 3,3 L213,3 L213,12.5 L219,17.5 L213,22.5 L213,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
                                                        </g>
                                                        <g>
                                                            <g fill="#000000" style="pointer-events: none;" transform="translate(-112.5,-17.5)">
                                                                <g transform="translate(-94.5,7)" style="user-select: none;">
                                                                    <text x="0" y="23.5" dy="-6.345">
                                                                        <tspan>Dagliga användare: 90%</tspan>
                                                                    </text>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g role="tooltip" opacity="0" aria-describedby="id-182" transform="translate(1184.4,471.84)" visibility="hidden" aria-hidden="true">
                                                        <g fill="#ff4069" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-190&quot;)" style="pointer-events: none;" transform="translate(-184,-47.8)">
                                                            <path d="M3,0 L175,0 a3,3 0 0 1 3,3 L178,32 a3,3 0 0 1 -3,3 L175,35 L175,35 L184,47.8 L165,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
                                                        </g>
                                                        <g>
                                                            <g fill="#ffffff" style="pointer-events: none;" transform="translate(-95,-47.8)">
                                                                <g transform="translate(-77,7)" style="user-select: none;">
                                                                    <text x="0" y="23.5" dy="-6.345">
                                                                        <tspan>Icke-användare: 6%</tspan>
                                                                    </text>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g role="tooltip" opacity="0" aria-describedby="id-164" transform="translate(1063.8,481.56)" visibility="hidden" aria-hidden="true">
                                                        <g fill="#ffce2e" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-172&quot;)" style="pointer-events: none;" transform="translate(-195,-17.5)">
                                                            <path d="M3,0 L186,0 a3,3 0 0 1 3,3 L189,3 L189,12.5 L195,17.5 L189,22.5 L189,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
                                                        </g>
                                                        <g>
                                                            <g fill="#000000" style="pointer-events: none;" transform="translate(-100.5,-17.5)">
                                                                <g transform="translate(-82.5,7)" style="user-select: none;">
                                                                    <text x="0" y="23.5" dy="-6.345">
                                                                        <tspan>Sällananvändare: 4%</tspan>
                                                                    </text>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g role="tooltip" visibility="hidden" opacity="0">
                                                        <g fill="#ffffff" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-50&quot;)" style="pointer-events: none;" transform="translate(0,6)">
                                                            <path d="M3,0 L3,0 L0,-6 L13,0 L21,0 a3,3 0 0 1 3,3 L24,8 a3,3 0 0 1 -3,3 L3,11 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
                                                        </g>
                                                        <g>
                                                            <g fill="#ffffff" style="pointer-events: none;" transform="translate(12,6)">
                                                                <g transform="translate(0,7)" display="none"></g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g visibility="hidden" style="pointer-events: none;" display="none">
                                                        <g fill="#ffffff" opacity="1">
                                                            <rect width="1320" height="600"></rect>
                                                        </g>
                                                        <g>
                                                            <g transform="translate(660,300)">
                                                                <g>
                                                                    <g stroke-opacity="1" fill="#f3f3f3" fill-opacity="0.8">
                                                                        <g>
                                                                            <g>
                                                                                <path d=" M53,0  a53,53,0,0,1,-106,0 a53,53,0,0,1,106,0 M42,0  a42,42,0,0,0,-84,0 a42,42,0,0,0,84,0 L42,0 "></path>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g stroke-opacity="1" fill="#000000" fill-opacity="0.2">
                                                                        <g>
                                                                            <g>
                                                                                <path d=" M50,0  a50,50,0,0,1,-100,0 a50,50,0,0,1,100,0 M45,0  a45,45,0,0,0,-90,0 a45,45,0,0,0,90,0 L45,0 "></path>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g fill="#000000" fill-opacity="0.4">
                                                                        <g transform="translate(-22,-12)" style="user-select: none;">
                                                                            <text x="22px" y="23.5" dy="-6.345" text-anchor="middle">
                                                                                <tspan>100%</tspan>
                                                                            </text>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g role="tooltip" opacity="0" transform="translate(79,200.3)" visibility="hidden" aria-hidden="true">
                                                        <g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-59,-17)">
                                                            <path d="M0,0 L54,0 a0,0 0 0 1 0,0 L54,0 L54,12 L59,17 L54,22 L54,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
                                                        </g>
                                                        <g>
                                                            <g fill="#ffffff" style="pointer-events: none;" transform="translate(-32,-17)">
                                                                <g transform="translate(-17,5)" style="user-select: none;">
                                                                    <text x="0" y="23.5" dy="-6.345">
                                                                        <tspan>62%</tspan>
                                                                    </text>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g role="tooltip" opacity="0" transform="translate(1003.5,501)" visibility="hidden" aria-hidden="true">
                                                        <g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-30.5,5)">
                                                            <path d="M0,0 L25.5,0 L30.5,-5 L35.5,0 L61,0 a0,0 0 0 1 0,0 L61,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
                                                        </g>
                                                        <g>
                                                            <g fill="#ffffff" style="pointer-events: none;" transform="translate(0,5)">
                                                                <g transform="translate(-20.5,5)" style="user-select: none;">
                                                                    <text x="0" y="23.5" dy="-6.345">
                                                                        <tspan>2022</tspan>
                                                                    </text>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="grid-18 grid-md-9 u-m-b-0 u-p-r-0 u-m-r-0">
                        <span class="a-meta u-m-b-1">Diagram 1.1a</span>
                        <p class="u-font-size-medium-plus u-m-b-1"><strong>Bas:</strong> Samtliga 16+ år <strong>Fråga:</strong> Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
                    </div>
                </div>
                <script>
                    if (!('graphs' in window)) {
                        window.graphs = {};
                    }
                    window.graphs['2185'] = {
                        "id": 2185,
                        "name": "Hur ofta anv\u00e4nder du internet? Samtliga 16+ \u00e5r",
                        "number": "1.1a",
                        "publication_id": 19,
                        "publication": {
                            "id": 19,
                            "name": "SOI2022",
                            "slug": "soi2022",
                            "color": "#c27fec",
                            "textColor": "#fff"
                        },
                        "created": "2022-03-04T09:31:11.000000Z",
                        "updated": "2022-07-04T08:20:54.000000Z",
                        "data": [{
                            "key": "creditstitle",
                            "value": "www.svenskarnaochinternet.se CC0"
                        }, {
                            "key": "graph_base",
                            "value": "Samtliga 16+ \u00e5r"
                        }, {
                            "key": "maxvalue",
                            "value": 100
                        }, {
                            "key": "subtitle",
                            "value": "<p>Fr\u00e5ga: Hur ofta anv\u00e4nder du internet? Med internetanv\u00e4ndning avser vi all anv\u00e4ndning oavsett om det \u00e4r p\u00e5 dator, surfplatta, smartmobil (smartphone), spelkonsol etc., \u00c5r 2021\u20132022 (Studie 1)<\/p>"
                        }, {
                            "key": "title",
                            "value": ""
                        }, {
                            "key": "type",
                            "value": "column"
                        }, {
                            "key": "xlsdata",
                            "value": "\tInternetanv\u00e4ndare 16+ \u00e5r\tDagliga anv\u00e4ndare\tS\u00e4llananv\u00e4ndare\tIcke-anv\u00e4ndare\n2021 \t94%\t90%\t4%\t6%\n2022 \t94%\t90%\t4%\t6%\n"
                        }],
                        "colors": {
                            "color0": "50b2fc",
                            "color1": "ff4069",
                            "color2": "55c7b4",
                            "color3": "ffce2e",
                            "color4": "c27fec",
                            "color5": "f99963",
                            "color6": "ff9fb4",
                            "color7": "1f2a36",
                            "color8": "8e9297",
                            "color9": "a7d8fd"
                        },
                        "legends": [
                            ["Dagligen", "f99963"],
                            ["N\u00e5gon g\u00e5ng", "c27fec"],
                            ["Befolkningen", "ffce2e"],
                            ["Internetanv\u00e4ndarna", "50b2fc"],
                            ["Smartmobilanv\u00e4ndarna", "50b2fc"],
                            ["Inte meningsfullt (1+2)", "f99963"],
                            ["Meningsfullt (4+5)", "55c7b4"],
                            ["Totalt", "8e9297"],
                            ["Minst n\u00e5gon g\u00e5ng", "ff4069"],
                            ["Minst varje vecka", "50b2fc"],
                            ["Minst varje dag", "ffce2e"],
                            ["2020 Q1", "ffce2e"],
                            ["2020 Q3", "c27fec"],
                            ["Studerar", "55c7b4"],
                            ["Arbetar", "ffce2e"],
                            ["Pension\u00e4r", "ff4069"],
                            ["Internetanv\u00e4ndare", "50b2fc"],
                            ["Dagliga anv\u00e4ndare", "55c7b4"],
                            ["S\u00e4llananv\u00e4ndare", "ffce2e"],
                            ["Icke-anv\u00e4ndare", "ff4069"],
                            ["Man", "ffce2e"],
                            ["Kvinna", "c27fec"],
                            ["2021", "50b2fc"],
                            ["2022", "0477ce"]
                        ],
                        "combined": []
                    };
                </script>
            </div>
        </div>
    </div>
</div>
<button type="button" class="a-button a-button--transparent m-modal__graph-button" data-modal-open="modal-container" data-zoom="Klicka på grafen för att zooma">
	<span class="a-button__text u-visuallyhidden">Open graph modal</span>
	<img src="/assets/images/graph.png" alt="Graf" class="u-border-radius u-b u-b-solid u-b-3 u-b-ash" style="max-width:100%;width:612px;">
</button>
<div id="modal-container" class="m-modal m-modal--has-overlay" aria-hidden="true">
	<div class="m-modal__container m-modal__container--dynamic-width js-modal-graph">
		<button type="button" class="m-modal__overlay-button js-modal-graph-button">
			<span>Scrolla för att se hela grafen</span>
		</button>
		<button type="button" class="a-button a-button--ocean-light m-modal__button-fixed js-toggle-modal" aria-expanded="false" data-a11y-toggle="modal-container" aria-controls="modal-container" data-modal-close>
			<span class="a-button__text">Stäng</span>
		</button>
		<div id="graph-2185" class="background-snow wp-block-graph ">
			<div class="wrapper">
				<div data-iis-graph-parent="" class="iis-graph alignwide u-p-b-4" style="position: relative; z-index:2;">
					<div class="row align-items-start justify-content-between article__content article__content--full-width">
						<div class="grid-18 grid-md-auto">
							<div class="display-flex align-items-center justify-content-md-end">
								<span class="a-button a-button--transparent a-button--icon m-share__button u-p-r-1" style="overflow: visible">
									<span class="a-button__text">Hjälp</span>
									<span tabindex="0" class="a-tooltip" id="tooltip-2185" role="tooltip">
										<span class="a-tooltip__text" data-tooltip="">Grafen är interaktiv vilket gör att du kan markera ytor med musen för att zooma (gäller enbart desktop) samt själv välja vilka delar du vill ska synas genom att klicka på diagramförklaringarna.</span>
										<svg class="icon a-button__icon">
										<use xlink:href="#icon-questionmark"></use>
										</svg>
									</span>
								</span>
								<div class="m-context-menu js-context-menu">
									<button type="button" class="a-button a-button--transparent a-button--icon js-context-menu-btn" data-a11y-toggle="graph-export-218570df" id="a11y-toggle-0" aria-controls="graph-export-218570df" aria-expanded="false">
										<span class="a-button__text">Exportera</span>
										<svg class="icon a-button__icon">
										<use xlink:href="#icon-download"></use>
										</svg>
									</button>
									<ul class="m-context-menu__list u-list-clean u-z-index-middleground-important" id="graph-export-218570df" data-container="true" data-focus-trap="true" aria-hidden="true" aria-labelledby="a11y-toggle-0">
										<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="pdf" href="#">PDF</a></li>
										<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="png" href="#">PNG</a></li>
										<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="jpg" href="#">JPG</a></li>
										<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="svg" href="#">SVG</a></li>
										<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="csv" href="#">CSV</a></li>
										<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="xlsx" href="#">XLSX</a></li>
										<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="json" href="#">JSON</a></li>
									</ul>
								</div>
								<a href="#" data-export-type="print" data-export-graph="2185" class="a-button a-button--transparent a-button--icon m-share__button">
									<span class="a-button__text">Skriv ut</span>
									<svg class="icon a-button__icon">
										<use xlink:href="#icon-print"></use>
									</svg>
								</a>
							</div>
						</div>
					</div>
					<div>
						<div data-iis-graph-idle-icon="2185" id="idle-icon" style="position: absolute;top: 50%;margin-top: -40px;margin-left: -40px;width: 80px;display: none;z-index: 99;pointer-events: none">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="100%" height="100%">
								<g>
									<path class="arrow" d="M11.854 5.146a.5.5 0 01-.708.708l-2-2a.5.5 0 010-.708l2-2a.5.5 0 01.708.708L10.707 3H20.5a.5.5 0 110 1h-9.796l1.15 1.146z"></path>
								</g>
								<g>
									<path class="hand" d="M22.093 13.708l-1.47-2.024a1.495 1.495 0 00-2.45.033l1.418 1.95a.507.507 0 01-.109.702.507.507 0 01-.7-.114l-1.763-2.425a1.495 1.495 0 00-2.448.032l2.005 2.76a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-1.762-2.426a1.495 1.495 0 00-2.449.033l2.593 3.568a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-4.701-6.47a1.495 1.495 0 00-2.095-.331 1.502 1.502 0 00-.332 2.094l5.43 7.475-2.41-1.073a1.495 1.495 0 00-1.979.76 1.502 1.502 0 00.759 1.98l2.65 1.18c.95.53 1.805 1.505 3.651 2.68 2.032 1.292 3.935 1.863 4.17 2.187a.51.51 0 00-.11.698c.162.224.478.271.706.105l7.266-5.278a.51.51 0 00.118-.704.504.504 0 00-.699-.11c-.864-1.191-1.314-5.213-3.671-8.458z"></path>
								</g>
								<style>.arrow { animation: arrow 3s infinite; animation-delay: 3s; opacity: 0; } .hand { animation: hand 3s ease infinite; transform: translateX(0.2rem); } @keyframes hand { 0% { opacity: 1; } 50% { transform: translateX(-0.2rem); opacity: 1; } 100% { transform: translateX(0.2rem); opacity: 1; } } @keyframes arrow { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } }</style>
							</svg>
						</div>
						<div data-iis-graph="2185" data-iis-graph-export="[data-iis-graph-parent]" style="height: 600px; width: 100%; min-width: 1360px;" data-ll-status="entered" class="entered" data-iis-graph-rendered="true" data-iis-graph-mounted="true">
							<div style="width: 100%; height: 100%; position: relative; left: -0.5px; top: -0.460938px;">
								<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
								<defs>
									<clipPath id="id-45">
										<rect width="1320" height="600"></rect>
									</clipPath>
									<filter id="filter-id-72" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
									<filter id="filter-id-93" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
									<clipPath id="id-115">
										<rect width="1206" height="486"></rect>
									</clipPath>
									<clipPath id="id-131">
										<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
									</clipPath>
									<clipPath id="id-149">
										<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
									</clipPath>
									<clipPath id="id-167">
										<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
									</clipPath>
									<clipPath id="id-185">
										<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
									</clipPath>
									<filter id="filter-id-50" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
										<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
										<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
										<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
										<feComposite in2="offsetBlur" operator="in"></feComposite>
										<feMerge>
											<feMergeNode></feMergeNode>
											<feMergeNode in="SourceGraphic"></feMergeNode>
										</feMerge>
									</filter>
									<filter id="filter-id-190" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
										<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
										<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
										<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
										<feComposite in2="offsetBlur" operator="in"></feComposite>
										<feMerge>
											<feMergeNode></feMergeNode>
											<feMergeNode in="SourceGraphic"></feMergeNode>
										</feMerge>
									</filter>
									<filter id="filter-id-172" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
										<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
										<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
										<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
										<feComposite in2="offsetBlur" operator="in"></feComposite>
										<feMerge>
											<feMergeNode></feMergeNode>
											<feMergeNode in="SourceGraphic"></feMergeNode>
										</feMerge>
									</filter>
									<filter id="filter-id-154" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
										<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
										<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
										<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
										<feComposite in2="offsetBlur" operator="in"></feComposite>
										<feMerge>
											<feMergeNode></feMergeNode>
											<feMergeNode in="SourceGraphic"></feMergeNode>
										</feMerge>
									</filter>
									<filter id="filter-id-136" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
										<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
										<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
										<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
										<feComposite in2="offsetBlur" operator="in"></feComposite>
										<feMerge>
											<feMergeNode></feMergeNode>
											<feMergeNode in="SourceGraphic"></feMergeNode>
										</feMerge>
									</filter>
									<clipPath id="id-432">
										<rect width="1206" height="486"></rect>
									</clipPath>
								</defs>
								<g>
									<g fill="#ffffff" fill-opacity="0">
										<rect width="1320" height="600"></rect>
									</g>
									<g>
										<g role="region" clip-path="url(&quot;#id-45&quot;)" opacity="1" aria-label="Diagram">
											<g transform="translate(15,15)">
											<g fill="#000000" id="id-66" font-size="16" font-weight="regular" display="none">
												<g transform="translate(20,0)" style="user-select: none;">
													<foreignObject width="1281" height="81">
														<div style="text-align: center; overflow-wrap: break-word; color: rgb(0, 0, 0); display: block;">
														<p>Fråga: Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
														</div>
													</foreignObject>
												</g>
											</g>
											<g>
												<g>
													<g>
														<g>
														<g>
															<g>
																<g style="touch-action: none; user-select: none; -webkit-user-drag: none;" transform="translate(84,0)">
																	<g fill="#ffffff" fill-opacity="0">
																	<rect width="1206" height="486"></rect>
																	</g>
																	<g>
																	<g>
																		<g></g>
																	</g>
																	<g>
																		<g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,-49)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,0)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,49)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,97)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,146)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,194)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,243)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,292)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,340)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,389)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,437)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,486)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,535)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																			<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,583)">
																				<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																		</g>
																	</g>
																	<g>
																		<g>
																			<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ff4069" aria-label="Icke-användare" stroke-width="0" id="id-182">
																				<g>
																				<g clip-path="url(&quot;#id-185&quot;)">
																					<g>
																						<g>
																							<g>
																							<g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(434.16,456.84)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							<g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(1037.16,456.84)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							</g>
																						</g>
																					</g>
																				</g>
																				<g></g>
																				</g>
																			</g>
																			<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ffce2e" aria-label="Sällananvändare" stroke-width="0" id="id-164">
																				<g>
																				<g clip-path="url(&quot;#id-167&quot;)">
																					<g>
																						<g>
																							<g>
																							<g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(313.56,466.56)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							<g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(916.56,466.56)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							</g>
																						</g>
																					</g>
																				</g>
																				<g></g>
																				</g>
																			</g>
																			<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#55c7b4" aria-label="Dagliga användare" stroke-width="0" id="id-146">
																				<g>
																				<g clip-path="url(&quot;#id-149&quot;)">
																					<g>
																						<g>
																							<g>
																							<g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(192.96,48.6)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							<g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(795.96,48.6)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							</g>
																						</g>
																					</g>
																				</g>
																				<g></g>
																				</g>
																			</g>
																			<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#50b2fc" aria-label="Internetanvändare 16+ år" stroke-width="0" id="id-128">
																				<g>
																				<g clip-path="url(&quot;#id-131&quot;)">
																					<g>
																						<g>
																							<g>
																							<g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(72.36,29.16)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							<g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(675.36,29.16)">
																								<g>
																									<g>
																										<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
																									</g>
																								</g>
																							</g>
																							</g>
																						</g>
																					</g>
																				</g>
																				<g></g>
																				</g>
																			</g>
																		</g>
																	</g>
																	<g clip-path="url(&quot;#id-432&quot;)">
																		<g>
																			<g fill="#50b2fc" stroke="#50b2fc">
																				<g></g>
																			</g>
																			<g fill="#55c7b4" stroke="#55c7b4">
																				<g></g>
																			</g>
																			<g fill="#ffce2e" stroke="#ffce2e">
																				<g></g>
																			</g>
																			<g fill="#ff4069" stroke="#ff4069">
																				<g></g>
																			</g>
																		</g>
																	</g>
																	<g>
																		<g>
																			<g>
																				<g></g>
																			</g>
																			<g>
																				<g></g>
																			</g>
																		</g>
																	</g>
																	<g>
																		<g></g>
																	</g>
																	<g>
																		<g></g>
																	</g>
																	<g opacity="0" clip-path="url(&quot;#id-115&quot;)" style="touch-action: none; user-select: none; -webkit-user-drag: none;" visibility="hidden" aria-hidden="true">
																		<g>
																			<g fill-opacity="0.2" fill="#000000" visibility="hidden" style="pointer-events: none;">
																				<path></path>
																			</g>
																			<g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(1206,0)">
																				<path d=" M0,0  L0,486 "></path>
																			</g>
																			<g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(0,178.4)">
																				<path d=" M0,0  L1206,0 "></path>
																			</g>
																		</g>
																	</g>
																	<g role="button" focusable="true" tabindex="0" opacity="0" visibility="hidden" aria-hidden="true" transform="translate(1166,-3)" aria-labelledby="id-36-title">
																		<g fill="#6794dc" stroke="#ffffff" fill-opacity="1" stroke-opacity="0" transform="translate(0,8)">
																			<path d="M17,0 L18,0 a17,17 0 0 1 17,17 L35,17 a17,17 0 0 1 -17,17 L17,34 a17,17 0 0 1 -17,-17 L0,17 a17,17 0 0 1 17,-17 Z"></path>
																		</g>
																		<g transform="translate(9,9)">
																			<g stroke="#ffffff" style="pointer-events: none;" transform="translate(0,8)">
																				<path d=" M0,0  L11,0 " transform="translate(2.5,7.5)"></path>
																			</g>
																			<g fill="#000000" style="pointer-events: none;" transform="translate(17,8)">
																				<g display="none"></g>
																			</g>
																		</g>
																		<title id="id-36-title">Zooma ut</title>
																	</g>
																	</g>
																</g>
																<g>
																	<g>
																	<g aria-hidden="true">
																		<g>
																			<g fill="#000000" transform="translate(0,263) rotate(-90)">
																				<g display="none"></g>
																			</g>
																			<g stroke="#000000" stroke-opacity="0.15" fill="none" transform="translate(84,486)" opacity="1">
																				<path transform="translate(-0.5,-0.5)" d=" M0,0  L1206,0 "></path>
																			</g>
																			<g>
																				<g>
																				<g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(64,243)">
																					<g transform="translate(-54,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>100%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,-48.6)" display="none">
																					<g transform="translate(-54,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>110%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,0)">
																					<g transform="translate(-54,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>100%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,48.6)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>90%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,97.2)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>80%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,145.8)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>70%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,194.4)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>60%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,243)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>50%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,291.6)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>40%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,340.2)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>30%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,388.8)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>20%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,437.4)">
																					<g transform="translate(-44,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>10%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,486)">
																					<g transform="translate(-34,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>0%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,534.6)" display="none">
																					<g transform="translate(-49,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>-10%</tspan>
																						</text>
																					</g>
																				</g>
																				<g fill="#000000" transform="translate(64,583.2)" display="none">
																					<g transform="translate(-49,-12)" style="user-select: none;">
																						<text x="0" y="23.5" dy="-6.345">
																							<tspan>-20%</tspan>
																						</text>
																					</g>
																				</g>
																				</g>
																			</g>
																			<g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;" transform="translate(64,0)">
																				<path d=" M0,0  L0,486 " transform="translate(-0.5,-0.5)"></path>
																			</g>
																		</g>
																	</g>
																	</g>
																</g>
																<g transform="translate(1290,0)">
																	<g></g>
																</g>
															</g>
														</g>
														<g>
															<g transform="translate(84,0)"></g>
														</g>
														<g transform="translate(0,486)">
															<g transform="translate(84,0)">
																<g aria-hidden="true">
																	<g>
																	<g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;">
																		<path d=" M0,0  L1206,0 " transform="translate(-0.5,-0.5)"></path>
																	</g>
																	<g>
																		<g>
																			<g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(603,0)">
																				<g transform="translate(-4.5,10)" style="user-select: none;">
																				<text x="0" y="23.5" dy="-6.345">
																					<tspan>L</tspan>
																				</text>
																				</g>
																			</g>
																			<g fill="#000000" display="none" transform="translate(1507.5,0)">
																				<g transform="translate(0,10)" display="none"></g>
																			</g>
																			<g fill="#000000" transform="translate(301.5,0)">
																				<g transform="translate(-20.5,10)" style="user-select: none;">
																				<text x="0" y="23.5" overflow="hidden" dy="-6.345">
																					<tspan>2021</tspan>
																				</text>
																				</g>
																			</g>
																			<g fill="#000000" transform="translate(904.5,0)">
																				<g transform="translate(-20.5,10)" style="user-select: none;">
																				<text x="0" y="23.5" overflow="hidden" dy="-6.345">
																					<tspan>2022</tspan>
																				</text>
																				</g>
																			</g>
																		</g>
																	</g>
																	<g stroke="#000000" stroke-opacity="0.15" fill="none" display="none" transform="translate(1206,-486)" opacity="0" visibility="hidden" aria-hidden="true">
																		<path transform="translate(-0.5,-0.5)" d=" M0,0  L0,486 "></path>
																	</g>
																	<g fill="#000000" transform="translate(603,44)">
																		<g display="none"></g>
																	</g>
																	</g>
																</g>
															</g>
														</g>
														</g>
													</g>
													<g role="group" aria-label="Teckenförklaring" transform="translate(0,530)">
														<g>
														<g focusable="true" tabindex="0" role="switch" aria-controls="id-128" aria-labelledby="id-128" aria-checked="true" style="cursor: pointer;" transform="translate(247,0)">
															<g fill="#ffffff" fill-opacity="0">
																<rect width="236" height="40"></rect>
															</g>
															<g transform="translate(0,8)">
																<g fill="#50b2fc" style="pointer-events: none;" transform="translate(0,0.5)">
																	<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
																	<rect width="23" height="23"></rect>
																	</g>
																	<g>
																	<g fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-opacity="1" stroke-width="0">
																		<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
																	</g>
																	</g>
																</g>
																<g fill="#000000" aria-label="Internetanvändare 16+ år" style="pointer-events: none;" transform="translate(28,0)">
																	<g style="user-select: none;">
																	<text x="0" y="23.5" overflow="hidden" dy="-6.345">
																		<tspan>Internetanvändare 16+ år</tspan>
																	</text>
																	</g>
																</g>
																<g fill="#000000" style="pointer-events: none;" display="none">
																	<g display="none"></g>
																</g>
															</g>
														</g>
														<g focusable="true" tabindex="0" role="switch" aria-controls="id-146" aria-labelledby="id-146" aria-checked="true" style="cursor: pointer;" transform="translate(503,0)">
															<g fill="#ffffff" fill-opacity="0">
																<rect width="180" height="40"></rect>
															</g>
															<g transform="translate(0,8)">
																<g fill="#55c7b4" style="pointer-events: none;" transform="translate(0,0.5)">
																	<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
																	<rect width="23" height="23"></rect>
																	</g>
																	<g>
																	<g fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-opacity="1" stroke-width="0">
																		<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
																	</g>
																	</g>
																</g>
																<g fill="#000000" aria-label="Dagliga användare" style="pointer-events: none;" transform="translate(28,0)">
																	<g style="user-select: none;">
																	<text x="0" y="23.5" overflow="hidden" dy="-6.345">
																		<tspan>Dagliga användare</tspan>
																	</text>
																	</g>
																</g>
																<g fill="#000000" style="pointer-events: none;" display="none">
																	<g display="none"></g>
																</g>
															</g>
														</g>
														<g focusable="true" tabindex="0" role="switch" aria-controls="id-164" aria-labelledby="id-164" aria-checked="true" style="cursor: pointer;" transform="translate(703,0)">
															<g fill="#ffffff" fill-opacity="0">
																<rect width="166" height="40"></rect>
															</g>
															<g transform="translate(0,8)">
																<g fill="#ffce2e" style="pointer-events: none;" transform="translate(0,0.5)">
																	<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
																	<rect width="23" height="23"></rect>
																	</g>
																	<g>
																	<g fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-opacity="1" stroke-width="0">
																		<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
																	</g>
																	</g>
																</g>
																<g fill="#000000" aria-label="Sällananvändare" style="pointer-events: none;" transform="translate(28,0)">
																	<g style="user-select: none;">
																	<text x="0" y="23.5" overflow="hidden" dy="-6.345">
																		<tspan>Sällananvändare</tspan>
																	</text>
																	</g>
																</g>
																<g fill="#000000" style="pointer-events: none;" display="none">
																	<g display="none"></g>
																</g>
															</g>
														</g>
														<g focusable="true" tabindex="0" role="switch" aria-controls="id-182" aria-labelledby="id-182" aria-checked="true" style="cursor: pointer;" transform="translate(889,0)">
															<g fill="#ffffff" fill-opacity="0">
																<rect width="154" height="40"></rect>
															</g>
															<g transform="translate(0,8)">
																<g fill="#ff4069" style="pointer-events: none;" transform="translate(0,0.5)">
																	<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
																	<rect width="23" height="23"></rect>
																	</g>
																	<g>
																	<g fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-opacity="1" stroke-width="0">
																		<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
																	</g>
																	</g>
																</g>
																<g fill="#000000" aria-label="Icke-användare" style="pointer-events: none;" transform="translate(28,0)">
																	<g style="user-select: none;">
																	<text x="0" y="23.5" overflow="hidden" dy="-6.345">
																		<tspan>Icke-användare</tspan>
																	</text>
																	</g>
																</g>
																<g fill="#000000" style="pointer-events: none;" display="none">
																	<g display="none"></g>
																</g>
															</g>
														</g>
														</g>
													</g>
												</g>
											</g>
											</g>
										</g>
										<g>
											<g>
											<g role="tooltip" opacity="0" aria-describedby="id-128" transform="translate(822.6,44.16)" visibility="hidden" aria-hidden="true">
												<g fill="#50b2fc" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-136&quot;)" style="pointer-events: none;" transform="translate(-275,-38.1)">
													<path d="M3,0 L266,0 a3,3 0 0 1 3,3 L269,32 a3,3 0 0 1 -3,3 L266,35 L266,35 L275,38.1 L256,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
												</g>
												<g>
													<g fill="#000000" style="pointer-events: none;" transform="translate(-140.5,-38.1)">
														<g transform="translate(-122.5,7)" style="user-select: none;">
														<text x="0" y="23.5" dy="-6.345">
															<tspan>Internetanvändare 16+ år: 94%</tspan>
														</text>
														</g>
													</g>
												</g>
											</g>
											<g role="tooltip" opacity="0" aria-describedby="id-146" transform="translate(943.2,63.6)" visibility="hidden" aria-hidden="true">
												<g fill="#55c7b4" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-154&quot;)" style="pointer-events: none;" transform="translate(-219,-17.5)">
													<path d="M3,0 L210,0 a3,3 0 0 1 3,3 L213,3 L213,12.5 L219,17.5 L213,22.5 L213,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
												</g>
												<g>
													<g fill="#000000" style="pointer-events: none;" transform="translate(-112.5,-17.5)">
														<g transform="translate(-94.5,7)" style="user-select: none;">
														<text x="0" y="23.5" dy="-6.345">
															<tspan>Dagliga användare: 90%</tspan>
														</text>
														</g>
													</g>
												</g>
											</g>
											<g role="tooltip" opacity="0" aria-describedby="id-182" transform="translate(1184.4,471.84)" visibility="hidden" aria-hidden="true">
												<g fill="#ff4069" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-190&quot;)" style="pointer-events: none;" transform="translate(-184,-47.8)">
													<path d="M3,0 L175,0 a3,3 0 0 1 3,3 L178,32 a3,3 0 0 1 -3,3 L175,35 L175,35 L184,47.8 L165,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
												</g>
												<g>
													<g fill="#ffffff" style="pointer-events: none;" transform="translate(-95,-47.8)">
														<g transform="translate(-77,7)" style="user-select: none;">
														<text x="0" y="23.5" dy="-6.345">
															<tspan>Icke-användare: 6%</tspan>
														</text>
														</g>
													</g>
												</g>
											</g>
											<g role="tooltip" opacity="0" aria-describedby="id-164" transform="translate(1063.8,481.56)" visibility="hidden" aria-hidden="true">
												<g fill="#ffce2e" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-172&quot;)" style="pointer-events: none;" transform="translate(-195,-17.5)">
													<path d="M3,0 L186,0 a3,3 0 0 1 3,3 L189,3 L189,12.5 L195,17.5 L189,22.5 L189,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
												</g>
												<g>
													<g fill="#000000" style="pointer-events: none;" transform="translate(-100.5,-17.5)">
														<g transform="translate(-82.5,7)" style="user-select: none;">
														<text x="0" y="23.5" dy="-6.345">
															<tspan>Sällananvändare: 4%</tspan>
														</text>
														</g>
													</g>
												</g>
											</g>
											<g role="tooltip" visibility="hidden" opacity="0">
												<g fill="#ffffff" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url(&quot;#filter-id-50&quot;)" style="pointer-events: none;" transform="translate(0,6)">
													<path d="M3,0 L3,0 L0,-6 L13,0 L21,0 a3,3 0 0 1 3,3 L24,8 a3,3 0 0 1 -3,3 L3,11 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
												</g>
												<g>
													<g fill="#ffffff" style="pointer-events: none;" transform="translate(12,6)">
														<g transform="translate(0,7)" display="none"></g>
													</g>
												</g>
											</g>
											<g visibility="hidden" style="pointer-events: none;" display="none">
												<g fill="#ffffff" opacity="1">
													<rect width="1320" height="600"></rect>
												</g>
												<g>
													<g transform="translate(660,300)">
														<g>
														<g stroke-opacity="1" fill="#f3f3f3" fill-opacity="0.8">
															<g>
																<g>
																	<path d=" M53,0  a53,53,0,0,1,-106,0 a53,53,0,0,1,106,0 M42,0  a42,42,0,0,0,-84,0 a42,42,0,0,0,84,0 L42,0 "></path>
																</g>
															</g>
														</g>
														<g stroke-opacity="1" fill="#000000" fill-opacity="0.2">
															<g>
																<g>
																	<path d=" M50,0  a50,50,0,0,1,-100,0 a50,50,0,0,1,100,0 M45,0  a45,45,0,0,0,-90,0 a45,45,0,0,0,90,0 L45,0 "></path>
																</g>
															</g>
														</g>
														<g fill="#000000" fill-opacity="0.4">
															<g transform="translate(-22,-12)" style="user-select: none;">
																<text x="22px" y="23.5" dy="-6.345" text-anchor="middle">
																	<tspan>100%</tspan>
																</text>
															</g>
														</g>
														</g>
													</g>
												</g>
											</g>
											<g role="tooltip" opacity="0" transform="translate(79,200.3)" visibility="hidden" aria-hidden="true">
												<g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-59,-17)">
													<path d="M0,0 L54,0 a0,0 0 0 1 0,0 L54,0 L54,12 L59,17 L54,22 L54,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
												</g>
												<g>
													<g fill="#ffffff" style="pointer-events: none;" transform="translate(-32,-17)">
														<g transform="translate(-17,5)" style="user-select: none;">
														<text x="0" y="23.5" dy="-6.345">
															<tspan>62%</tspan>
														</text>
														</g>
													</g>
												</g>
											</g>
											<g role="tooltip" opacity="0" transform="translate(1003.5,501)" visibility="hidden" aria-hidden="true">
												<g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-30.5,5)">
													<path d="M0,0 L25.5,0 L30.5,-5 L35.5,0 L61,0 a0,0 0 0 1 0,0 L61,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
												</g>
												<g>
													<g fill="#ffffff" style="pointer-events: none;" transform="translate(0,5)">
														<g transform="translate(-20.5,5)" style="user-select: none;">
														<text x="0" y="23.5" dy="-6.345">
															<tspan>2022</tspan>
														</text>
														</g>
													</g>
												</g>
											</g>
											</g>
										</g>
									</g>
								</g>
								</svg>
							</div>
						</div>
					</div>
					<div class="grid-18 grid-md-9 u-m-b-0 u-p-r-0 u-m-r-0">
						<span class="a-meta u-m-b-1">Diagram 1.1a</span>
						<p class="u-font-size-medium-plus u-m-b-1"><strong>Bas:</strong> Samtliga 16+ år <strong>Fråga:</strong> Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
					</div>
				</div>
				<script>if (!('graphs' in window)) {window.graphs = {};}window.graphs['2185'] = {"id":2185,"name":"Hur ofta anv\u00e4nder du internet? Samtliga 16+ \u00e5r","number":"1.1a","publication_id":19,"publication":{"id":19,"name":"SOI2022","slug":"soi2022","color":"#c27fec","textColor":"#fff"},"created":"2022-03-04T09:31:11.000000Z","updated":"2022-07-04T08:20:54.000000Z","data":[{"key":"creditstitle","value":"www.svenskarnaochinternet.se CC0"},{"key":"graph_base","value":"Samtliga 16+ \u00e5r"},{"key":"maxvalue","value":100},{"key":"subtitle","value":"<p>Fr\u00e5ga: Hur ofta anv\u00e4nder du internet? Med internetanv\u00e4ndning avser vi all anv\u00e4ndning oavsett om det \u00e4r p\u00e5 dator, surfplatta, smartmobil (smartphone), spelkonsol etc., \u00c5r 2021\u20132022 (Studie 1)<\/p>"},{"key":"title","value":""},{"key":"type","value":"column"},{"key":"xlsdata","value":"\tInternetanv\u00e4ndare 16+ \u00e5r\tDagliga anv\u00e4ndare\tS\u00e4llananv\u00e4ndare\tIcke-anv\u00e4ndare\n2021 \t94%\t90%\t4%\t6%\n2022 \t94%\t90%\t4%\t6%\n"}],"colors":{"color0":"50b2fc","color1":"ff4069","color2":"55c7b4","color3":"ffce2e","color4":"c27fec","color5":"f99963","color6":"ff9fb4","color7":"1f2a36","color8":"8e9297","color9":"a7d8fd"},"legends":[["Dagligen","f99963"],["N\u00e5gon g\u00e5ng","c27fec"],["Befolkningen","ffce2e"],["Internetanv\u00e4ndarna","50b2fc"],["Smartmobilanv\u00e4ndarna","50b2fc"],["Inte meningsfullt (1+2)","f99963"],["Meningsfullt (4+5)","55c7b4"],["Totalt","8e9297"],["Minst n\u00e5gon g\u00e5ng","ff4069"],["Minst varje vecka","50b2fc"],["Minst varje dag","ffce2e"],["2020 Q1","ffce2e"],["2020 Q3","c27fec"],["Studerar","55c7b4"],["Arbetar","ffce2e"],["Pension\u00e4r","ff4069"],["Internetanv\u00e4ndare","50b2fc"],["Dagliga anv\u00e4ndare","55c7b4"],["S\u00e4llananv\u00e4ndare","ffce2e"],["Icke-anv\u00e4ndare","ff4069"],["Man","ffce2e"],["Kvinna","c27fec"],["2021","50b2fc"],["2022","0477ce"]],"combined":[]};</script>
			</div>
		</div>
	</div>
</div>
{
  "title": "Du har sparat FooCoding Graduation!",
  "text": "En påminnelse kommer skickas till din adress <a href=\"https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/\" class=\"u-link\">15 minuter</a> innan streamen startar.",
  "button_text": "Stäng",
  "aria_controls": "",
  "is_hidden": false,
  "button_primary_color": "#e0bff5",
  "button_primary_hover_color": "#c27fec",
  "button_primary_border_color": "#c27fec",
  "button_primary_text_color": "#1f2a36",
  "button_secondary_color": "#ff9fb4",
  "button_secondary_hover_color": "#ff4069",
  "button_secondary_border_color": "#ff4069",
  "button_secondary_text_color": "#1f2a36"
}
  • Content:
    @include molecule(modal) {
    	display: flex;
    	position: fixed;
    	z-index: z_index(foreground);
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	align-items: center;
    	justify-content: center;
    
    	&[aria-hidden='true'] {
    		display: none;
    	}
    
    	// Adjust close button position
    	@include m(has-overlay) {
    		&::after {
    			content: '';
    			position: absolute;
    			z-index: z_index(foregroundMinus);
    			top: 0;
    			right: 0;
    			bottom: 0;
    			left: 0;
    			background: rgba(0, 0, 0, 0.5);
    		}
    	}
    
    	@include e(container) {
    		display: flex;
    		position: relative;
    		z-index: z_index(foreground);
    		flex-direction: column;
    		width: 100%;
    		max-height: calc(100vh - #{rhythm(2)});
    		margin: rhythm(1);
    		padding: rhythm(4) rhythm(2) rhythm(4) rhythm(2);
    		overflow-y: auto;
    		border-radius: $border-radius;
    		background: var(--snow-color);
    
    		> button {
    			position: absolute;
    			z-index: z_index(background);
    			top: rhythm(1);
    			right: rhythm(1);
    		}
    
    		@include bp-up(sm) {
    			padding: rhythm(4) rhythm(4) rhythm(6) rhythm(4);
    			width: auto;
    			min-width: rem(576px);
    		}
    
    		@include bp-up(md) {
    			padding: rhythm(8) rhythm(8) rhythm(6) rhythm(8);
    		}
    
    		@include bp-up(lg) {
    			max-width: rem(961px);
    		}
    
    		@include m(no-max-width) {
    			max-width: none;
    		}
    
    		@include m(dynamic-width) {
    			width: 100%;
    			max-width: calc(100vw);
    			min-width: 0;
    			max-height: calc(100% - #{rhythm(2)});
    			padding: 0;
    			overflow: auto;
    
    			svg {
    				pointer-events: none;
    			}
    		}
    	}
    
    	@include bp-up(md) {
    		@include e(input-wrapper) {
    			display: flex;
    			justify-content: space-between;
    			margin-bottom: rhythm(2);
    		}
    	}
    
    	@include e(content) {
    		position: relative;
    		margin-right: rhythm(2);
    
    		@include bp-up(sm) {
    			margin-right: 0;
    		}
    
    		@include m(form-name) {
    			flex: 0 0 45%;
    		}
    
    		@include m(form-lname) {
    			flex: 0 0 45%;
    		}
    
    		@include e(input-wrapper) {
    			display: flex;
    			justify-content: space-between;
    			margin-bottom: rhythm(2);
    		}
    
    		@include bp-up(md) {
    
    			@include m(form-email) {
    				margin-bottom: rhythm(2);
    			}
    
    			@include m(form-username) {
    				margin-bottom: rhythm(2);
    			}
    		}
    		@include m(form-check) {
    			display: flex;
    		}
    
    		@include m(form-text) {
    			display: flex;
    			justify-content: center;
    			margin-top: rhythm(2);
    		}
    	}
    
    	@include e(buttons) {
    		display: flex;
    		flex-shrink: 0;
    		justify-content: flex-end;
    	}
    
    	@include e(button-primary) {
    		color: var(--m-modal-button-primary-color) !important;
    		box-shadow: 0 0 0 1px inset var(--m-modal-button-primary-border-color) !important;
    
    		> [class*='text'] {
    			color: var(--m-modal-button-primary-text-color) !important;
    		}
    
    		&:hover,
    		&:focus {
    			color: var(--m-modal-button-primary-hover-color) !important;
    		}
    	}
    
    	@include e(button-secondary) {
    		color: var(--m-modal-button-secondary-color) !important;
    		box-shadow: 0 0 0 1px inset var(--m-modal-button-secondary-border-color) !important;
    
    		> [class*='text'] {
    			color: var(--m-modal-button-secondary-text-color) !important;
    		}
    
    		&:hover,
    		&:focus {
    			color: var(--m-modal-button-secondary-hover-color) !important;
    		}
    	}
    
    	@include e(graph-button) {
    		padding: 0;
    		position: relative;
    
    		&:hover,
    		&:focus {
    			@extend %input-focus;
    		}
    
    		&::after {
    			content: attr(data-zoom);
    			color: $color-snow;
    			padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
    			display: block;
    			position: absolute;
    			top: 0;
    			left: 0;
    			border-top-left-radius: $border-radius;
    			border-bottom-right-radius: $border-radius;
    			width: auto;
    			line-height: 1;
    			height: $icon-size-large * 1.4;
    			background-color: rgba($color-cyberspace, 0.7);
    			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
    			background-position: rhythm(1) center;
    			background-size: $icon-size-medium $icon-size-medium;
    			background-repeat: no-repeat;
    
    		}
    	}
    
    	@include e(button-fixed) {
    		position: fixed !important;
    		top: rhythm(2) !important;
    		right: rhythm(3) !important;
    		z-index: z_index(foreground) !important;
    	}
    
    	@include e(overlay-button) {
    		position: fixed !important;
    		color: $color-snow;
    		display: flex;
    		align-items: center;
    		text-align: center;
    		justify-content: center;
    		padding: 0;
    		z-index: z_index(foregroundMinus) !important;
    		top: 0 !important;
    		right: 0 !important;
    		bottom: 0 !important;
    		left: 0 !important;
    		background: rgba(0, 0, 0, 0.5);
    		text-shadow: 0 0 rhythm(0.5) $color-cyberspace;
    		font-family: $font-family-headings;
    		border: 0;
    		width: 100vw;
    
    		&.is-hidden {
    			display: none;
    		}
    
    		@include bp-up(xxl) {
    			display: none;
    		}
    	}
    
    	@include b(field-group) {
    		margin-bottom: rhythm(1);
    	}
    }
    
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src/molecules/modal/_modal.scss
  • Size: 4.9 KB
  • Content:
    /**
     * Close overlay on graph modal
     */
    
    const graphModals = document.querySelectorAll('.js-modal-graph');
    const graphModalButtons = document.querySelectorAll('.js-modal-graph-button');
    
    const addMultipleListeners = (el, types, listener, options, useCapture) => {
    	types.forEach((type) => el.addEventListener(type, listener, options, useCapture));
    };
    
    function closeOverlay(graphModalButton) {
    	// Close overlay button on 'click' on itself
    	graphModalButton.addEventListener('click', () => {
    		graphModalButton.classList.add('is-hidden');
    		graphModalButton.blur();
    	});
    
    	[].forEach.call(graphModals, (graphModal) => {
    		const closeButton = graphModal.querySelector('.js-toggle-modal');
    
    		closeButton.addEventListener('click', () => {
    			graphModalButton.classList.remove('is-hidden');
    		});
    
    		// Close overlay button on 'wheel', 'scroll', 'touchstart' on modal container
    		addMultipleListeners(
    			graphModal,
    			['wheel', 'scroll', 'touchstart'],
    			() => {
    				graphModalButton.classList.add('is-hidden');
    				console.log('fire!');
    			},
    		);
    	});
    }
    
    if (graphModalButtons && graphModals) {
    	[].forEach.call(graphModalButtons, closeOverlay);
    }
    
  • URL: /components/raw/modal/modal-graph.js
  • Filesystem Path: src/molecules/modal/modal-graph.js
  • Size: 1.1 KB
  • Content:
    import focusTrap from '../../focusTrap';
    import className from '../../assets/js/className';
    
    /**
     * Modal action
     * @typedef {Object} ModalAction
     * @property {string} icon - icon name
     * @property {string} color - styleguide color
     * @property {string} modifier - styleguide modifier
     * @property {string} text - action content
     * @property {string} url - action link url
     * @property {string} target - action link target
     * @property {string} key - action click handler key shortcut
     * @property {function} onClick - action click handler
     * @property {object} attrs – action element attributes
     */
    
    /**
     * Modal content
     * @typedef {Object} ModalContent
     * @property {string} title - Modal title
     * @property {string} content - Modal content
     * @property {ModalAction[]} actions - Modal actions
     */
    
    /**
     * Modal settings
     * @typedef {Object} ModalSettings
     * @property {boolean} replaceCurrent - Replace currently displayed modal
     * @property {boolean} skipIfCurrent - Skip if currently displaying modal
     * @property {function} onClose - onClose callback
     * @property {function} onOpen - onOpen callback
     */
    
    const queue = [];
    const globalOnCloseCallbacks = [];
    const globalOnOpenCallbacks = [];
    let active = null;
    let incrementId = 0;
    let modal = null;
    let modalContent = null;
    let modalActions = null;
    let modalClose = null;
    let keyHandlers = {};
    
    /**
     * Increase increment ID and return the latest
     *
     * @returns {number}
     */
    function getId() {
    	incrementId += 1;
    
    	return incrementId;
    }
    
    function objectToAttributes(obj) {
    	return Object.entries(obj)
    		.filter(([, value]) => value !== undefined)
    		.map(([key, value]) => ((value !== null) ? `${key}=${value}` : key))
    		.join(' ');
    }
    
    /**
     * Create an action DOM node and append to modal actions container.
     *
     * @param {ModalAction} action
     */
    function addAction(action) {
    	const icon = (action.icon) ? `
    		<svg class="icon ${className('a-button__icon')}">
    			<use xlink:href="#icon-${action.icon}"></use>
    		</svg>
    	` : '';
    
    	let cls = `${className('a-button')} u-m-l-2`;
    
    	if (action.color) {
    		cls += ` ${className(`a-button--${action.color}`)}`;
    	}
    
    	if (action.modifier) {
    		cls += ` ${className(`m-modal__button-${action.modifier}`)}`;
    	}
    
    	if (action.icon) {
    		cls += ` ${className('a-button--icon')}`;
    	}
    
    	const tag = (action.url) ? 'a' : 'button';
    	const button = `
    		<${tag} ${objectToAttributes({ ...action.attrs, href: action.url, target: action.target })} class="${cls}">
    			<span class="${className('a-button__text')}">${action.text}</span>
    			${icon}
    		</${tag}>
    	`;
    
    	const dummy = document.createElement('div');
    
    	dummy.innerHTML = button;
    
    	const el = dummy.firstElementChild;
    	modalActions.appendChild(el);
    
    	if (action.onClick) {
    		el.addEventListener('click', (e) => {
    			// eslint-disable-next-line no-use-before-define
    			action.onClick(e, modal, close);
    		});
    	}
    }
    
    function handleKeyUp(e) {
    	Object.entries(keyHandlers).forEach(([key, handler]) => {
    		if (e.key.toLowerCase() === key) {
    			// eslint-disable-next-line no-use-before-define
    			handler(e, modal, close);
    		}
    	});
    }
    
    /**
     * Global onOpen handler
     *
     * @param {Function} cb
     * @returns {number}
     */
    export function onOpen(cb) {
    	const index = globalOnOpenCallbacks.push(cb) - 1;
    
    	return () => {
    		globalOnOpenCallbacks.splice(index, 1);
    	};
    }
    
    function dispatchOnOpenHandlers(el, id) {
    	globalOnOpenCallbacks.forEach((cb) => cb(el, id));
    }
    
    /**
     * Display the active modal.
     */
    function display() {
    	if (active.content.nodeName) {
    		// Content is a custom modal
    		active.el = active.content;
    	} else {
    		active.el = modal;
    		modalContent.innerHTML = `
    			<h1>${active.content.title}</h1>
    			${active.content.content}
    		`;
    
    		if (active.content.actions) {
    			modalActions.innerHTML = '';
    			active.content.actions.forEach(addAction);
    
    			modalActions.classList.remove('u-hide');
    		} else {
    			modalActions.classList.add('u-hide');
    		}
    	}
    
    	focusTrap(active.el);
    
    	active.el.setAttribute('aria-hidden', 'false');
    	active.el.setAttribute('data-a11y-toggle-open', 'true');
    
    	if (active.settings.onOpen) {
    		active.settings.onOpen(active.id, active.el);
    	}
    
    	dispatchOnOpenHandlers(active.el, active.id);
    
    	setTimeout(() => {
    		if (active.el.focusTrap) {
    			active.el.focusTrap.activate();
    		}
    	}, 1);
    
    	// Just to make sure
    	keyHandlers = {};
    
    	if (active.content.actions) {
    		active.content.actions.forEach((action) => {
    			if (action.key && action.onClick) {
    				keyHandlers[action.key] = action.onClick;
    			}
    		});
    	}
    
    	document.addEventListener('keyup', handleKeyUp);
    }
    
    /**
     * Dispatch the next modal in queue.
     */
    function dispatch() {
    	if (!modal || active || !queue.length) {
    		return;
    	}
    
    	active = queue.shift();
    
    	display();
    }
    
    /**
     * Global onClose handler
     *
     * @param {Function} cb
     * @returns {number}
     */
    export function onClose(cb) {
    	const index = globalOnCloseCallbacks.push(cb) - 1;
    
    	return () => {
    		globalOnCloseCallbacks.splice(index, 1);
    	};
    }
    
    function dispatchOnCloseHandlers(el, id) {
    	globalOnCloseCallbacks.forEach((cb) => cb(el, id));
    }
    
    /**
     * Close currently active modal
     * and dispatch next in queue.
     */
    function close() {
    	if (active) {
    		active.el.setAttribute('aria-hidden', 'true');
    		active.el.removeAttribute('data-a11y-toggle-open');
    
    		if (active.settings.onClose) {
    			active.settings.onClose(active.id);
    		}
    
    		dispatchOnCloseHandlers(active.el, active.id);
    
    		document.removeEventListener('keyup', handleKeyUp);
    
    		if (active.el.focusTrap) {
    			active.el.focusTrap.deactivate();
    		}
    
    		keyHandlers = {};
    		active = null;
    	}
    
    	setTimeout(() => {
    		dispatch();
    	}, 1);
    }
    
    /**
     * Create the modal skeleton and add it to the DOM.
     * Done once and cached.
     */
    function createModal() {
    	if (modal) {
    		return;
    	}
    
    	const id = 'iisModal';
    	const dummy = document.createElement('div');
    
    	dummy.innerHTML = `
    		<div id="${id}" class="${className('m-modal m-modal--has-overlay')}" data-container="true" aria-hidden="true" aria-labelledby="${id}-close">
    			<div class="${className('m-modal__container')}">
    				<button type="button" class="${className('a-button a-button--standalone-icon a-button--transparent')}" data-modal-close aria-expanded="false" data-a11y-toggle="${id}" aria-controls="${id}" id="${id}-close">
    					<span class="${className('a-button__text')} u-visuallyhidden">Stäng</span>
    					<svg class="icon ${className('a-button__icon')}">
    						<use xlink:href="#icon-close"></use>
    					</svg>
    				</button>
    				<div class="${className('m-modal__content')}" data-modal-content></div>
    				<div class="${className('m-modal__buttons')} u-m-t-2 u-hide" data-modal-actions></div>
    			</div>
    		</div>
    	`;
    
    	modal = dummy.firstElementChild;
    	modalContent = modal.querySelector('[data-modal-content]');
    	modalActions = modal.querySelector('[data-modal-actions]');
    	modalClose = modal.querySelector('[data-modal-close]');
    
    	document.body.appendChild(modal);
    
    	modalClose.addEventListener('click', close);
    
    	setTimeout(() => {
    		dispatch();
    	}, 1);
    }
    
    /**
     * Clear the current modal queue
     */
    function clearQueue() {
    	queue.length = 0;
    }
    
    /**
     * Open a modal.
     *
     * @param {ModalContent|HTMLElement} content
     * @param {ModalSettings} settings
     */
    function open(content, settings = {}) {
    	if (active && settings.skipIfCurrent) {
    		return;
    	}
    
    	queue.push({
    		id: getId(),
    		content,
    		settings,
    	});
    
    	if (settings.replaceCurrent) {
    		close();
    	} else {
    		dispatch();
    	}
    }
    
    function delegate(e) {
    	const openModal = e.target.closest('[data-modal-open]');
    
    	if (openModal) {
    		e.preventDefault();
    		e.stopPropagation();
    
    		const id = openModal.getAttribute('data-modal-open');
    		const modalEl = document.getElementById(id);
    		document.querySelector('body').classList.add('prevent-scroll');
    
    		if (modalEl) {
    			open(modalEl, {
    				replaceCurrent: openModal.hasAttribute('data-modal-replace'),
    				skipIfCurrent: openModal.hasAttribute('data-modal-skip'),
    			});
    
    			[].forEach.call(document.querySelectorAll(`[aria-controls="${id}"]`), (el) => {
    				el.setAttribute('aria-expanded', 'true');
    			});
    		}
    
    		return false;
    	}
    
    	const closeModal = e.target.closest('[data-modal-close]');
    
    	if (closeModal) {
    		e.preventDefault();
    		e.stopPropagation();
    
    		const id = closeModal.getAttribute('data-modal-close') || (active && active.el.id);
    		document.querySelector('body').classList.remove('prevent-scroll');
    
    		if (active && active.el.id === id) {
    			close();
    
    			[].forEach.call(document.querySelectorAll(`[aria-controls="${id}"]`), (el) => {
    				el.setAttribute('aria-expanded', 'false');
    			});
    		}
    
    		return false;
    	}
    
    	return true;
    }
    
    /**
     * Attach global listeners
     */
    function attach() {
    	document.body.addEventListener('click', delegate);
    }
    
    createModal();
    attach();
    
    export {
    	clearQueue,
    	open,
    	close,
    };
    
  • URL: /components/raw/modal/modal.js
  • Filesystem Path: src/molecules/modal/modal.js
  • Size: 8.7 KB

No notes defined.