﻿@keyframes rotate {
    to {
        transform: rotate(360deg)
    }
}

.display-inline {
    display: inline !important
}

.display-inline-block {
    display: inline-block !important
}

.display-flex {
    display: flex !important
}

.display-table {
    display: table !important
}

.display-block,
.shown {
    display: block !important
}

.hidden {
    display: none !important
}

.shown-xs,
.shown-s,
.shown-m,
.shown-l {
    display: none !important
}

@media (min-width: 0px) and (max-width: 767px) {
    .hidden-xs {
        display: none !important
    }

    .shown-xs {
        display: block !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-s {
        display: none !important
    }

    .shown-s {
        display: block !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-m {
        display: none !important
    }

    .shown-m {
        display: block !important
    }
}

@media (min-width: 1200px) {
    .hidden-l {
        display: none !important
    }

    .shown-l {
        display: block !important
    }
}

.scroll-x {
    overflow-x: auto !important
}

.scroll-y {
    overflow-y: auto !important
}

.text-align-center {
    text-align: center !important
}

.text-align-left {
    text-align: left !important
}

.text-align-right {
    text-align: right !important
}

.text-bold {
    font-weight: 700 !important
}

.text-italic {
    font-style: italic !important
}

.text-underline {
    text-decoration: underline !important
}

.margin-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.margin-0 {
    margin: 0 !important
}

.margin-0-5 {
    margin: 4px !important
}

.margin-1 {
    margin: 8px !important
}

.margin-2 {
    margin: 16px !important
}

.margin-3 {
    margin: 24px !important
}

.margin-4 {
    margin: 8px
}

.margin-top-0 {
    margin-top: 0 !important
}

.margin-top-0-5 {
    margin-top: 4px !important
}

.margin-top-1 {
    margin-top: 8px !important
}

.margin-top-2 {
    margin-top: 16px !important
}

.margin-top-3 {
    margin-top: 24px !important
}

.margin-top-4 {
    margin-top: 32px !important
}

.margin-right-0 {
    margin-right: 0 !important
}

.margin-right-0-5 {
    margin-right: 4px !important
}

.margin-right-1 {
    margin-right: 8px !important
}

.margin-right-2 {
    margin-right: 16px !important
}

.margin-right-3 {
    margin-right: 24px !important
}

.margin-right-4 {
    margin-right: 32px !important
}

.margin-bottom-0 {
    margin-bottom: 0 !important
}

.margin-bottom-0-5 {
    margin-bottom: 4px !important
}

.margin-bottom-1 {
    margin-bottom: 8px !important
}

.margin-bottom-2 {
    margin-bottom: 16px !important
}

.margin-bottom-3 {
    margin-bottom: 24px !important
}

.margin-bottom-4 {
    margin-bottom: 32px !important
}

.margin-left-0 {
    margin-left: 0 !important
}

.margin-left-0-5 {
    margin-left: 4px !important
}

.margin-left-1 {
    margin-left: 8px !important
}

.margin-left-2 {
    margin-left: 16px !important
}

.margin-left-3 {
    margin-left: 24px !important
}

.margin-left-4 {
    margin-left: 32px !important
}

.padding-0 {
    padding: 0 !important
}

.padding-0-5 {
    padding: 4px !important
}

.padding-1 {
    padding: 8px !important
}

.padding-2 {
    padding: 16px !important
}

.padding-3 {
    padding: 24px !important
}

.padding-4 {
    padding: 32px !important
}

.padding-top-0 {
    padding-top: 0 !important
}

.padding-top-0-5 {
    padding-top: 4px !important
}

.padding-top-1 {
    padding-top: 8px !important
}

.padding-top-2 {
    padding-top: 16px !important
}

.padding-top-3 {
    padding-top: 24px !important
}

.padding-top-4 {
    padding-top: 32px !important
}

.padding-right-0 {
    padding-right: 0 !important
}

.padding-right-0-5 {
    padding-right: 4px !important
}

.padding-right-1 {
    padding-right: 8px !important
}

.padding-right-2 {
    padding-right: 16px !important
}

.padding-right-3 {
    padding-right: 24px !important
}

.padding-right-4 {
    padding-right: 32px !important
}

.padding-bottom-0 {
    padding-bottom: 0 !important
}

.padding-bottom-0-5 {
    padding-bottom: 4px !important
}

.padding-bottom-1 {
    padding-bottom: 8px !important
}

.padding-bottom-2 {
    padding-bottom: 16px !important
}

.padding-bottom-3 {
    padding-bottom: 24px !important
}

.padding-bottom-4 {
    padding-bottom: 32px !important
}

.padding-left-0 {
    padding-left: 0 !important
}

.padding-left-0-5 {
    padding-left: 4px !important
}

.padding-left-1 {
    padding-left: 8px !important
}

.padding-left-2 {
    padding-left: 16px !important
}

.padding-left-3 {
    padding-left: 24px !important
}

.padding-left-4 {
    padding-left: 32px !important
}

.ratio {
    position: relative
}

.ratio::before {
    display: block;
    content: "";
    width: 100%
}

.ratio.ratio--1-1::before {
    padding-top: 100%
}

.ratio.ratio--4-3::before {
    padding-top: 75%
}

.ratio.ratio--16-9::before {
    padding-top: 56.25%
}

.ratio>* {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
@import url('./lxgwwenkai-regular.css');
html {
    color: var(--grey-dark);
    /*font-family: "system-ui", "Arial", "Helvetica";*/
    font-family: "LXGW WenKai", sans-serif;
    font-size: 15px;
    line-height: 1.5
}

.h1,
.kpn-style h1:not([class]) {
    color: var(--grey-dark);
     /*font-family: "system-ui", "Arial", "Helvetica";*/
    font-family: "LXGW WenKai", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 10px;
    color: var(--green);
    font-size: 25px
}

@media (min-width: 0px) and (max-width: 767px) {

    .h1:not(.h1--impassive),
    .kpn-style h1:not([class]):not(.h1--impassive) {
        font-size: 24px
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .h1:not(.h1--impassive),
    .kpn-style h1:not([class]):not(.h1--impassive) {
        font-size: 25px
    }
}

.h1.h1--calm,
.kpn-style h1:not([class]).h1--calm {
    font-weight: 300
}

.h2,
.kpn-style h2:not([class]) {
    color: var(--grey-dark);
     /*font-family: "system-ui", "Arial", "Helvetica";*/
    font-family: "LXGW WenKai", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 10px;
    font-size: 15px
}

@media (min-width: 0px) and (max-width: 767px) {

    .h2:not(.h2--impassive),
    .kpn-style h2:not([class]):not(.h2--impassive) {
        font-size: 15px
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .h2:not(.h2--impassive),
    .kpn-style h2:not([class]):not(.h2--impassive) {
        font-size: 15px
    }
}

.h2.h2--strong,
.kpn-style h2:not([class]).h2--strong {
    color: var(--green)
}

.h2.h2--calm,
.kpn-style h2:not([class]).h2--calm {
    font-weight: 300
}

.h3,
.kpn-style h3:not([class]) {
    color: var(--grey-dark);
     /*font-family: "system-ui", "Arial", "Helvetica";*/
     font-family: "LXGW WenKai", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 10px;
    font-size: 15px
}

@media (min-width: 0px) and (max-width: 767px) {

    .h3:not(.h3--impassive),
    .kpn-style h3:not([class]):not(.h3--impassive) {
        font-size: 15px
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .h3:not(.h3--impassive),
    .kpn-style h3:not([class]):not(.h3--impassive) {
        font-size: 15px
    }
}

.h3.h3--strong,
.kpn-style h3:not([class]).h3--strong {
    color: var(--green)
}

.h3.h3--calm,
.kpn-style h3:not([class]).h3--calm {
    font-weight: 300
}

.h4,
.kpn-style h4:not([class]) {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 10px;
    font-family: "system-ui", "Arial", "Helvetica";
    font-size: 16px
}

@media (min-width: 0px) and (max-width: 767px) {

    .h4:not(.h4--impassive),
    .kpn-style h4:not([class]):not(.h4--impassive) {
        font-size: 16px
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .h4:not(.h4--impassive),
    .kpn-style h4:not([class]):not(.h4--impassive) {
        font-size: 16px
    }
}

.h4.h4--strong,
.kpn-style h4:not([class]).h4--strong {
    color: var(--green)
}

.h4.h4--calm,
.kpn-style h4:not([class]).h4--calm {
    font-weight: 400
}

.p,
.kpn-style p:not([class]) {
     /*font-family: "system-ui", "Arial", "Helvetica";*/
    font-family: "LXGW WenKai", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
    margin-top: 0
}

.p.p--small,
.kpn-style p:not([class]).p--small {
    font-size: 13px;
    line-height: 1.2
}

.p.p--large,
.kpn-style p:not([class]).p--large {
    font-size: 20px;
    line-height: 1.7
}

.hr,
.kpn-style hr:not([class]) {
    background-color: var(--grey-light-silver);
    border: none;
    height: 1px;
    margin-bottom: 16px;
    margin-top: 16px
}

.blockquote,
.kpn-style blockquote:not([class]) {
    margin: 15px 0 12px 0;
  padding: 0 1em;
  font-size: 13px;
  color: var(--grey-dark);
  border-left: 0.25em solid #dfe2e5;
}

@media (min-width: 0px) and (max-width: 767px) {

    .blockquote,
    .kpn-style blockquote:not([class]) {
        font-size: 14px;
        quotes: none;
    }
}

/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
@font-face {
    font-family: system-ui;
    font-style: normal;
    font-weight: 300;
    src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma")
}

@font-face {
    font-family: system-ui;
    font-style: italic;
    font-weight: 300;
    src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma")
}

@font-face {
    font-family: system-ui;
    font-style: normal;
    font-weight: 400;
    src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma")
}

@font-face {
    font-family: system-ui;
    font-style: italic;
    font-weight: 400;
    src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma")
}

@font-face {
    font-family: system-ui;
    font-style: normal;
    font-weight: 500;
    src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold")
}

@font-face {
    font-family: system-ui;
    font-style: italic;
    font-weight: 500;
    src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold")
}

@font-face {
    font-family: system-ui;
    font-style: normal;
    font-weight: 700;
    src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold")
}

@font-face {
    font-family: system-ui;
    font-style: italic;
    font-weight: 700;
    src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold")
}

[class^="ui-"],
[class*=" ui-"] {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-family: "kpn-ui-icons";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    text-transform: none
}

[class^="ui-"].ui--small,
[class*=" ui-"].ui--small {
    font-size: 18px
}

[class^="ui-"].ui--large,
[class*=" ui-"].ui--large {
    font-size: 36px
}

.ui-30-seconds-backwords::before {
    content: ""
}

.ui-30-seconds-forwards::before {
    content: ""
}

.ui-account-diap::before {
    content: ""
}

.ui-account::before {
    content: ""
}

.ui-add::before {
    content: ""
}

.ui-arrow-down::before {
    content: ""
}

.ui-arrow-left::before {
    content: ""
}

.ui-arrow-right::before {
    content: ""
}

.ui-arrow-up::before {
    content: ""
}

.ui-arrow-upleft::before {
    content: ""
}

.ui-assemble::before {
    content: ""
}

.ui-asterisk::before {
    content: ""
}

.ui-audio::before {
    content: ""
}

.ui-backspace::before {
    content: ""
}

.ui-backward::before {
    content: ""
}

.ui-bookmark::before {
    content: ""
}

.ui-bulb::before {
    content: ""
}

.ui-business-diap::before {
    content: ""
}

.ui-business::before {
    content: ""
}

.ui-calendar::before {
    content: ""
}

.ui-call-ending::before {
    content: ""
}

.ui-call-incoming::before {
    content: ""
}

.ui-call-outgoing::before {
    content: ""
}

.ui-camera::before {
    content: ""
}

.ui-car::before {
    content: ""
}

.ui-caret-down::before {
    content: ""
}

.ui-caret-up::before {
    content: ""
}

.ui-chat-diap::before {
    content: ""
}

.ui-chat::before {
    content: ""
}

.ui-check::before {
    content: ""
}

.ui-chevron-down::before {
    content: ""
}

.ui-chevron-left::before {
    content: ""
}

.ui-chevron-right::before {
    content: ""
}

.ui-chevron-up::before {
    content: ""
}

.ui-chromecast::before {
    content: ""
}

.ui-circle-diap::before {
    content: ""
}

.ui-circle::before {
    content: ""
}

.ui-clock::before {
    content: ""
}

.ui-close::before {
    content: ""
}

.ui-cloud::before {
    content: ""
}

.ui-cross::before {
    content: ""
}

.ui-csv-file::before {
    content: ""
}

.ui-delete-all::before {
    content: ""
}

.ui-delete::before {
    content: ""
}

.ui-dialpad::before {
    content: ""
}

.ui-diamond-diap::before {
    content: ""
}

.ui-diamond::before {
    content: ""
}

.ui-doc-file::before {
    content: ""
}

.ui-document::before {
    content: ""
}

.ui-download::before {
    content: ""
}

.ui-dropdown::before {
    content: ""
}

.ui-edit::before {
    content: ""
}

.ui-emoticon-happy::before {
    content: ""
}

.ui-emoticon-neutral::before {
    content: ""
}

.ui-emoticon-sad::before {
    content: ""
}

.ui-envelop::before {
    content: ""
}

.ui-error::before {
    content: ""
}

.ui-euro::before {
    content: ""
}

.ui-external-link::before {
    content: ""
}

.ui-facebook::before {
    content: ""
}

.ui-female::before {
    content: ""
}

.ui-filter::before {
    content: ""
}

.ui-fingerprint::before {
    content: ""
}

.ui-fire::before {
    content: ""
}

.ui-flag::before {
    content: ""
}

.ui-folder::before {
    content: ""
}

.ui-forward::before {
    content: ""
}

.ui-fullscreen-enter::before {
    content: ""
}

.ui-fullscreen-exit::before {
    content: ""
}

.ui-graphview::before {
    content: ""
}

.ui-gridview::before {
    content: ""
}

.ui-hash::before {
    content: ""
}

.ui-heart::before {
    content: ""
}

.ui-help::before {
    content: ""
}

.ui-hide::before {
    content: ""
}

.ui-history::before {
    content: ""
}

.ui-home-diap::before {
    content: ""
}

.ui-home::before {
    content: ""
}

.ui-infinite::before {
    content: ""
}

.ui-info-diap::before {
    content: ""
}

.ui-info::before {
    content: ""
}

.ui-internet::before {
    content: ""
}

.ui-kijkwijzer-6plus::before {
    content: ""
}

.ui-kijkwijzer-9plus::before {
    content: ""
}

.ui-kijkwijzer-12plus::before {
    content: ""
}

.ui-kijkwijzer-16plus::before {
    content: ""
}

.ui-kijkwijzer-alle-leeftijden::before {
    content: ""
}

.ui-kijkwijzer-angst::before {
    content: ""
}

.ui-kijkwijzer-discriminatie::before {
    content: ""
}

.ui-kijkwijzer-drugs::before {
    content: ""
}

.ui-kijkwijzer-geweld::before {
    content: ""
}

.ui-kijkwijzer-sex::before {
    content: ""
}

.ui-kijkwijzer-taalgebruik::before {
    content: ""
}

.ui-laptop::before {
    content: ""
}

.ui-library::before {
    content: ""
}

.ui-link::before {
    content: ""
}

.ui-list::before {
    content: ""
}

.ui-listview::before {
    content: ""
}

.ui-locate::before {
    content: ""
}

.ui-lock-closed::before {
    content: ""
}

.ui-lock-open::before {
    content: ""
}

.ui-logout::before {
    content: ""
}

.ui-mail::before {
    content: ""
}

.ui-male::before {
    content: ""
}

.ui-manual::before {
    content: ""
}

.ui-map-view::before {
    content: ""
}

.ui-marker-diap::before {
    content: ""
}

.ui-marker::before {
    content: ""
}

.ui-menu::before {
    content: ""
}

.ui-message::before {
    content: ""
}

.ui-microphone-off::before {
    content: ""
}

.ui-microphone-on::before {
    content: ""
}

.ui-minus::before {
    content: ""
}

.ui-mobile::before {
    content: ""
}

.ui-more::before {
    content: ""
}

.ui-movie::before {
    content: ""
}

.ui-multiple::before {
    content: ""
}

.ui-network-diap::before {
    content: ""
}

.ui-network::before {
    content: ""
}

.ui-notifications-off::before {
    content: ""
}

.ui-notifications-on::before {
    content: ""
}

.ui-notifications::before {
    content: ""
}

.ui-pause::before {
    content: ""
}

.ui-payment::before {
    content: ""
}

.ui-pdf-file::before {
    content: ""
}

.ui-person::before {
    content: ""
}

.ui-phone-ringing::before {
    content: ""
}

.ui-phone::before {
    content: ""
}

.ui-photo::before {
    content: ""
}

.ui-play-disabled::before {
    content: ""
}

.ui-play::before {
    content: ""
}

.ui-playback::before {
    content: ""
}

.ui-plus::before {
    content: ""
}

.ui-plusminus::before {
    content: ""
}

.ui-power::before {
    content: ""
}

.ui-preferences::before {
    content: ""
}

.ui-present::before {
    content: ""
}

.ui-products-diap::before {
    content: ""
}

.ui-products::before {
    content: ""
}

.ui-record-all::before {
    content: ""
}

.ui-record-disabled::before {
    content: ""
}

.ui-record::before {
    content: ""
}

.ui-recordings::before {
    content: ""
}

.ui-redo::before {
    content: ""
}

.ui-refresh::before {
    content: ""
}

.ui-remove-diap::before {
    content: ""
}

.ui-remove::before {
    content: ""
}

.ui-renew::before {
    content: ""
}

.ui-rewind::before {
    content: ""
}

.ui-robot::before {
    content: ""
}

.ui-scroll-to-top::before {
    content: ""
}

.ui-search::before {
    content: ""
}

.ui-secure::before {
    content: ""
}

.ui-select::before {
    content: ""
}

.ui-send::before {
    content: ""
}

.ui-settings::before {
    content: ""
}

.ui-share::before {
    content: ""
}

.ui-shift::before {
    content: ""
}

.ui-shop::before {
    content: ""
}

.ui-shoppingbasket::before {
    content: ""
}

.ui-show::before {
    content: ""
}

.ui-simcard::before {
    content: ""
}

.ui-star-diap::before {
    content: ""
}

.ui-star::before {
    content: ""
}

.ui-stop::before {
    content: ""
}

.ui-tablet::before {
    content: ""
}

.ui-text::before {
    content: ""
}

.ui-ticket-diap::before {
    content: ""
}

.ui-ticket::before {
    content: ""
}

.ui-tv-guide::before {
    content: ""
}

.ui-tv::before {
    content: ""
}

.ui-twitter::before {
    content: ""
}

.ui-undo::before {
    content: ""
}

.ui-upload::before {
    content: ""
}

.ui-video::before {
    content: ""
}

.ui-voicemail::before {
    content: ""
}

.ui-volume-high::before {
    content: ""
}

.ui-volume-low::before {
    content: ""
}

.ui-volume-medium::before {
    content: ""
}

.ui-volume-off::before {
    content: ""
}

.ui-warning::before {
    content: ""
}

.ui-watch::before {
    content: ""
}

.ui-watchlist::before {
    content: ""
}

.ui-whatsapp::before {
    content: ""
}

.ui-wifi-disabled::before {
    content: ""
}

.ui-wifi::before {
    content: ""
}

.ui-zip-file::before {
    content: ""
}

[class^="si-"],
[class*=" si-"] {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-family: "kpn-service-icons";
    font-size: 96px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    text-transform: none
}

.si-247::before {
    content: "\e900"
}

.si-add::before {
    content: "\e901"
}

.si-alles-in-een::before {
    content: "\e902"
}

.si-app-netflix::before {
    content: "\e903"
}

.si-bike::before {
    content: "\e904"
}

.si-browser::before {
    content: "\e905"
}

.si-business-serie-l::before,
.si-business-large::before {
    content: "\e906"
}

.si-business-serie-m::before,
.si-business-medium::before {
    content: "\e907"
}

.si-business-serie-s::before,
.si-business-small::before {
    content: "\e908"
}

.si-business-serie-xl::before,
.si-business-extra-large::before {
    content: "\e909"
}

.si-businessman::before {
    content: "\e90a"
}

.si-calendar::before {
    content: "\e90b"
}

.si-callcenter-agent::before {
    content: "\e90c"
}

.si-chat::before {
    content: "\e90d"
}

.si-checkbox::before,
.si-check::before {
    content: "\e90e"
}

.si-cloud::before {
    content: "\e90f"
}

.si-device-locked::before,
.si-mobile-locked::before {
    content: "\e910"
}

.si-devolo::before {
    content: "\e911"
}

.si-digitenne::before {
    content: "\e912"
}

.si-document::before {
    content: "\e913"
}

.si-dustbin::before,
.si-delete::before {
    content: "\e914"
}

.si-edit::before {
    content: "\e915"
}

.si-education::before,
.si-graduation-cap::before {
    content: "\e916"
}

.si-email::before,
.si-mail::before {
    content: "\e917"
}

.si-envelop::before {
    content: "\e918"
}

.si-error::before {
    content: "\e919"
}

.si-ethernet::before,
.si-cable::before {
    content: "\e91a"
}

.si-euro::before {
    content: "\e91b"
}

.si-experiabox::before {
    content: "\e91c"
}

.si-fixed-phone::before,
.si-phone::before {
    content: "\e91d"
}

.si-food::before {
    content: "\e91e"
}

.si-forum::before {
    content: "\e91f"
}

.si-gaming::before,
.si-game::before {
    content: "\e920"
}

.si-giftbox::before,
.si-gift::before {
    content: "\e921"
}

.si-glass::before,
.si-drink::before {
    content: "\e922"
}

.si-globe::before {
    content: "\e923"
}

.si-graph::before,
.si-graph-up::before {
    content: "\e924"
}

.si-hd-quality::before,
.si-hd::before {
    content: "\e925"
}

.si-health::before {
    content: "\e926"
}

.si-heart::before {
    content: "\e927"
}

.si-history::before {
    content: "\e928"
}

.si-home::before {
    content: "\e929"
}

.si-info::before {
    content: "\e92a"
}

.si-internet::before {
    content: "\e92b"
}

.si-key::before {
    content: "\e92c"
}

.si-laptop::before {
    content: "\e92d"
}

.si-lightbulb::before,
.si-bulb::before {
    content: "\e92e"
}

.si-location::before,
.si-marker::before {
    content: "\e92f"
}

.si-locked::before,
.si-lock::before {
    content: "\e930"
}

.si-lost::before,
.si-question::before {
    content: "\e931"
}

.si-low-battery::before,
.si-battery::before {
    content: "\e932"
}

.si-manual::before {
    content: "\e933"
}

.si-mapview::before {
    content: "\e934"
}

.si-mechanic::before {
    content: "\e935"
}

.si-mobiel::before,
.si-mobile::before {
    content: "\e936"
}

.si-mobile-deviceset::before,
.si-deviceset-mobile::before {
    content: "\e937"
}

.si-mobile-incomming-call::before {
    content: "\e938"
}

.si-mobile-multiple::before {
    content: "\e939"
}

.si-mobile-switch-off::before {
    content: "\e93a"
}

.si-modular::before,
.si-grid::before {
    content: "\e93b"
}

.si-montage::before,
.si-assemble::before {
    content: "\e93c"
}

.si-multiple-apps::before {
    content: "\e93d"
}

.si-music::before,
.si-audio::before {
    content: "\e93e"
}

.si-navigation::before {
    content: "\e93f"
}

.si-network::before,
.si-mast::before {
    content: "\e940"
}

.si-no-wifi::before,
.si-wifi-disabled::before {
    content: "\e941"
}

.si-number-0::before {
    content: "\e942"
}

.si-number-1::before {
    content: "\e943"
}

.si-number-2::before {
    content: "\e944"
}

.si-number-3::before {
    content: "\e945"
}

.si-number-4::before {
    content: "\e946"
}

.si-number-5::before {
    content: "\e947"
}

.si-number-6::before {
    content: "\e948"
}

.si-number-7::before {
    content: "\e949"
}

.si-number-8::before {
    content: "\e94a"
}

.si-number-9::before {
    content: "\e94b"
}

.si-pauze::before,
.si-pause::before {
    content: "\e94c"
}

.si-person::before {
    content: "\e94d"
}

.si-pinpoint-small::before,
.si-marker-small::before {
    content: "\e94e"
}

.si-play-button::before {
    content: "\e94f"
}

.si-questionmark::before,
.si-help::before {
    content: "\e950"
}

.si-radio::before {
    content: "\e951"
}

.si-replay-tv::before,
.si-playback::before {
    content: "\e952"
}

.si-robot::before {
    content: "\e953"
}

.si-search::before {
    content: "\e954"
}

.si-security::before,
.si-secure::before {
    content: "\e955"
}

.si-send::before {
    content: "\e956"
}

.si-settings-gear::before,
.si-settings::before {
    content: "\e957"
}

.si-share::before {
    content: "\e958"
}

.si-shop::before {
    content: "\e959"
}

.si-shoppingcard::before,
.si-shoppingbasket::before {
    content: "\e95a"
}

.si-sim-card::before,
.si-simcard::before {
    content: "\e95b"
}

.si-smartlife::before,
.si-smarthome::before {
    content: "\e95c"
}

.si-smiley-wink::before {
    content: "\e95d"
}

.si-speed::before {
    content: "\e95e"
}

.si-sports::before,
.si-baseball::before {
    content: "\e95f"
}

.si-suitcase::before {
    content: "\e960"
}

.si-sun::before {
    content: "\e961"
}

.si-tablet-deviceset::before,
.si-deviceset-tablet::before {
    content: "\e962"
}

.si-tablet::before {
    content: "\e963"
}

.si-thief::before {
    content: "\e964"
}

.si-thumbs-down::before {
    content: "\e965"
}

.si-thumbs-up::before {
    content: "\e966"
}

.si-tickets::before,
.si-ticket::before {
    content: "\e967"
}

.si-touch-id::before,
.si-fingerprint::before {
    content: "\e968"
}

.si-transport::before,
.si-truck::before {
    content: "\e969"
}

.si-tv-remote::before,
.si-remote::before {
    content: "\e96a"
}

.si-tv::before {
    content: "\e96b"
}

.si-warning::before {
    content: "\e96c"
}

.si-wifi-extender::before {
    content: "\e96d"
}

.si-wifi::before {
    content: "\e96e"
}

.si-alarm::before {
    content: "\e96f"
}

.si-message::before {
    content: "\e970"
}

.si-binders::before {
    content: "\e971"
}

.si-camera::before {
    content: "\e972"
}

.si-car::before {
    content: "\e973"
}

.si-chess::before {
    content: "\e974"
}

.si-circle::before {
    content: "\e975"
}

.si-clipboard::before {
    content: "\e976"
}

.si-clock::before {
    content: "\e977"
}

.si-consultant::before {
    content: "\e978"
}

.si-contract-end::before {
    content: "\e979"
}

.si-contract-renew::before {
    content: "\e97a"
}

.si-contract-transfer::before {
    content: "\e97b"
}

.si-database::before {
    content: "\e97c"
}

.si-design::before {
    content: "\e97d"
}

.si-dialpad::before {
    content: "\e97e"
}

.si-digitalisation::before {
    content: "\e97f"
}

.si-download::before {
    content: "\e980"
}

.si-emoticon-angry::before {
    content: "\e981"
}

.si-emoticon-grimacing::before {
    content: "\e982"
}

.si-emoticon-helpless::before {
    content: "\e983"
}

.si-emoticon-neutral::before {
    content: "\e984"
}

.si-emoticon-sad::before {
    content: "\e985"
}

.si-emoticon-smile::before {
    content: "\e986"
}

.si-emoticon-surprised::before {
    content: "\e987"
}

.si-emoticon-tongue::before {
    content: "\e988"
}

.si-emoticon-wink::before {
    content: "\e989"
}

.si-environment::before {
    content: "\e98a"
}

.si-experiabox8::before {
    content: "\e98b"
}

.si-experiabox9::before {
    content: "\e98c"
}

.si-experiabox10::before {
    content: "\e98d"
}

.si-experiabox10a::before {
    content: "\e98e"
}

.si-file-csv::before {
    content: "\e98f"
}

.si-file-doc::before {
    content: "\e990"
}

.si-file-exe::before {
    content: "\e991"
}

.si-file-pdf::before {
    content: "\e992"
}

.si-file-zip::before {
    content: "\e993"
}

.si-fullscreen::before {
    content: "\e994"
}

.si-government::before {
    content: "\e995"
}

.si-graph-down::before {
    content: "\e996"
}

.si-handshake::before {
    content: "\e997"
}

.si-hourglass::before {
    content: "\e999"
}

.si-identity-card::before {
    content: "\e99a"
}

.si-industry::before {
    content: "\e99b"
}

.si-invoice::before {
    content: "\e99c"
}

.si-ip-adress::before {
    content: "\e99d"
}

.si-mobile-apps::before {
    content: "\e99f"
}

.si-mobile-damage-water::before {
    content: "\e9a0"
}

.si-mobile-damage::before {
    content: "\e9a1"
}

.si-mobile-phone::before {
    content: "\e9a2"
}

.si-mobile-screensize::before {
    content: "\e9a3"
}

.si-mobile-screentype::before {
    content: "\e9a4"
}

.si-mobile-smile::before {
    content: "\e9a5"
}

.si-one-day-back::before {
    content: "\e998"
}

.si-password::before {
    content: "\e99e"
}

.si-payment::before {
    content: "\e9a6"
}

.si-photo::before {
    content: "\e9a7"
}

.si-play::before {
    content: "\e9a8"
}

.si-preferences::before {
    content: "\e9a9"
}

.si-productcombi-internet-phone::before {
    content: "\e9aa"
}

.si-productcombi-internet-tv-phone::before {
    content: "\e9ab"
}

.si-productcombi-internet-tv::before {
    content: "\e9ac"
}

.si-promise::before {
    content: "\e9ad"
}

.si-reward::before {
    content: "\e9ae"
}

.si-sensor::before {
    content: "\e9af"
}

.si-simcard-activate::before {
    content: "\e9b0"
}

.si-simcard-add::before {
    content: "\e9b1"
}

.si-simcard-esim-activate::before {
    content: "\e9b2"
}

.si-simcard-esim-add::before {
    content: "\e9b3"
}

.si-simcard-esim-pukcode::before {
    content: "\e9b4"
}

.si-simcard-esim-unlock::before {
    content: "\e9b5"
}

.si-simcard-esim::before {
    content: "\e9b6"
}

.si-simcard-pukcode::before {
    content: "\e9b7"
}

.si-simcard-unlock::before {
    content: "\e9b8"
}

.si-soccer::before {
    content: "\e9b9"
}

.si-square::before {
    content: "\e9ba"
}

.si-star::before {
    content: "\e9bb"
}

.si-triangle::before {
    content: "\e9bc"
}

.si-tv-error::before {
    content: "\e9bd"
}

.si-tv-record::before {
    content: "\e9be"
}

.si-unicorn::before {
    content: "\e9bf"
}

.si-upload::before {
    content: "\e9c0"
}

.si-voicemail::before {
    content: "\e9c1"
}

.si-wifi-extender-wireless::before {
    content: "\e9c2"
}

.si-wifi-love::before {
    content: "\e9c3"
}

.a,
.kpn-style a:not([class]) {
    color: var(--blue);
    cursor: pointer;
    text-decoration: none
}

.a:hover,
.kpn-style a:not([class]):hover {
    text-decoration: underline
}

.a.a--disabled,
.kpn-style a:not([class]).a--disabled {
    color: var(--grey-silver);
    pointer-events: none
}

.a.a--left::before,
.a.a--right::after,
.kpn-style a:not([class]).a--left::before,
.kpn-style a:not([class]).a--right::after {
    display: inline-block;
    font: 24px/1 "kpn-ui-icons";
    vertical-align: top
}

.a.a--left::before,
.kpn-style a:not([class]).a--left::before {
    content: ""
}

.a.a--right::after,
.kpn-style a:not([class]).a--right::after {
    content: ""
}

.a i,
.kpn-style a:not([class]) i {
    vertical-align: top
}

.a i:first-child,
.kpn-style a:not([class]) i:first-child {
    margin-right: 4px
}

.a i:last-child,
.kpn-style a:not([class]) i:last-child {
    margin-left: 4px
}

.container {
    padding: 0px 24px 24px 24px
}

@media (min-width: 0px) and (max-width: 991px) {
    .container {
        padding: 16px
    }
}

.container.container--centered {
    margin-left: auto;
    margin-right: auto
}

.container.container--limited,
.container.container--main {
    max-width: 1200px
}

.container.container--tall,
.container.container--main {
    padding: 40px 24px
}

@media (min-width: 0px) and (max-width: 991px) {

    .container.container--tall,
    .container.container--main {
        padding: 32px 16px
    }
}

.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 24px
}

.accordion .accordion__item {
    border-top: 1px solid var(--grey-light-silver);
    cursor: pointer;
    user-select: none
}

.accordion .accordion__item.accordion__item--expanded .accordion__title {
    color: var(--green)
}

.accordion .accordion__item.accordion__item--expanded .accordion__title::after {
    content: ""
}

.accordion .accordion__item.accordion__item--expanded .accordion__content {
    height: auto;
    margin-bottom: 14px;
    padding-right: calc(24px + 8px)
}

.accordion .accordion__title {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 20px;
    margin: 0;
    padding-bottom: 14px;
    padding-top: 14px;
    padding-right: calc(24px + 8px);
    position: relative
}

.accordion .accordion__title::after {
    content: "";
    font: 24px/1 "kpn-ui-icons";
    position: absolute;
    right: 0;
    top: calc(50% - 0.5em)
}

.accordion .accordion__title:hover {
    color: var(--blue)
}

.accordion .accordion__content {
    height: 0;
    overflow: hidden
}

.accordion .accordion__content>:last-child {
    margin-bottom: 0
}

.action-menu {
    display: inline-block;
    position: relative;
    text-align: left;
    white-space: nowrap
}

.action-menu.action-menu--active .action-menu__list {
    display: block
}

.action-menu.action-menu--right .action-menu__list {
    right: auto;
    left: 100%
}

.action-menu .action-menu__trigger {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--grey-silver)
}

.action-menu .action-menu__trigger:hover {
    color: var(--blue)
}

.action-menu .action-menu__trigger::before {
    content: "";
    font: 24px/1 "kpn-ui-icons"
}

.action-menu .action-menu__list {
    border: 1px solid var(--grey-light-silver);
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--grey-white);
    display: none;
    padding-bottom: 4px;
    padding-top: 4px;
    position: absolute;
    right: 100%;
    top: 0;
    z-index: 1
}

.action-menu .action-menu__list .action-menu__link {
    color: var(--blue);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    display: block;
    padding: 2px 16px
}

.action-menu .action-menu__list .action-menu__link:hover {
    text-decoration: underline
}

.block {
    background-color: var(--grey-subtle);
    display: block;
    font-size: 16px;
    margin-bottom: 24px
}

.block.block--stretch {
    height: calc(100% - 24px)
}

.block.block--green,
.block.block--blue {
    color: var(--grey-white)
}

.block.block--green .block__title,
.block.block--green .p,
.block.block--blue .block__title,
.block.block--blue .p {
    color: var(--grey-white)
}

.block.block--green .block__link:hover,
.block.block--blue .block__link:hover {
    color: var(--grey-black)
}

.block.block--green .block__link::before,
.block.block--blue .block__link::before {
    background-color: var(--grey-white);
    color: var(--green)
}

.block.block--green {
    background-color: var(--green)
}

.block.block--blue {
    background-color: var(--blue)
}

.block .block__body {
    padding: 32px 16px;
    text-align: center
}

.block .block__body>:last-child {
    margin-bottom: 0
}

.block .block__title {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 8px
}

.block .block__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    display: block;
    font-weight: 700
}

.block .block__link:hover {
    color: var(--blue)
}

.block .block__link::before {
    background-color: var(--grey-dark);
    border-radius: 50%;
    color: var(--grey-white);
    content: "";
    font: 16px "kpn-ui-icons";
    margin-right: 8px;
    position: relative;
    top: 2px
}

.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--grey-medium);
    margin-bottom: 24px
}

.breadcrumb .breadcrumb__item {
    display: inline-block
}

.breadcrumb .breadcrumb__item:not(:last-child)::after {
    content: "";
    display: inline-block;
    font: 24px/1.1 "kpn-ui-icons";
    vertical-align: top
}

.breadcrumb .breadcrumb__item:not(:last-child) .breadcrumb__link:hover {
    color: var(--blue);
    text-decoration: underline
}

.breadcrumb .breadcrumb__item:last-child .breadcrumb__link {
    color: var(--grey-dark);
    cursor: default
}

.breadcrumb .breadcrumb__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none
}

.button,
.kpn-style button:not([class]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    user-select: none;
    background-color: var(--blue);
    border-radius: 20px;
    border: 1px solid var(--blue);
    color: var(--grey-white);
    font-size: 16px;
    height: 40px;
    justify-content: center;
    padding: 0 24px
}

.button:not(.button--disabled):not([disabled]):hover,
.kpn-style button:not([class]):not(.button--disabled):not([disabled]):hover {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark)
}

.button:focus,
.kpn-style button:not([class]):focus {
    border-color: var(--grey-dark)
}

.button i,
.kpn-style button:not([class]) i {
    font-size: 1.25em;
    margin-right: 6px
}

.button.button--disabled,
.button[disabled],
.kpn-style button:not([class]).button--disabled,
.kpn-style button:not([class])[disabled] {
    background-color: var(--grey-silver);
    border-color: var(--grey-silver);
    cursor: default
}

.button.button--secondary,
.kpn-style button:not([class]).button--secondary {
    background-color: var(--grey-white);
    border-color: var(--blue);
    color: var(--blue-dark)
}

.button.button--secondary:not(.button--disabled):not([disabled]):hover,
.kpn-style button:not([class]).button--secondary:not(.button--disabled):not([disabled]):hover {
    border-color: var(--blue-dark);
    color: var(--grey-white)
}

.button.button--secondary:focus,
.kpn-style button:not([class]).button--secondary:focus {
    border-color: var(--grey-dark)
}

.button.button--secondary.button--disabled,
.button.button--secondary[disabled],
.kpn-style button:not([class]).button--secondary.button--disabled,
.kpn-style button:not([class]).button--secondary[disabled] {
    background-color: var(--grey-white);
    border-color: var(--grey-silver);
    color: var(--grey-silver)
}

.button.button--link,
.kpn-style button:not([class]).button--link {
    background-color: transparent;
    border-color: transparent;
    color: var(--blue)
}

.button.button--link:not(.button--disabled):not([disabled]):hover,
.kpn-style button:not([class]).button--link:not(.button--disabled):not([disabled]):hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--blue);
    text-decoration: underline
}

.button.button--link:focus,
.kpn-style button:not([class]).button--link:focus {
    border-color: var(--grey-dark)
}

.button.button--link.button--disabled,
.button.button--link[disabled],
.kpn-style button:not([class]).button--link.button--disabled,
.kpn-style button:not([class]).button--link[disabled] {
    color: var(--grey-silver)
}

.button.button--spinner::before,
.kpn-style button:not([class]).button--spinner::before {
    animation: rotate 0.75s linear infinite;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: currentColor;
    box-sizing: border-box;
    content: "";
    height: 1.5em;
    margin-left: -16px;
    margin-right: 16px;
    width: 1.5em
}

.button.button--small,
.kpn-style button:not([class]).button--small {
    border-radius: 16px;
    height: 32px;
    font-size: 13px;
    padding: 0 16px
}

.button.button--large,
.kpn-style button:not([class]).button--large {
    border-radius: 28px;
    height: 56px;
    font-size: 20px;
    padding: 0 32px
}

.button.button--1,
.kpn-style button:not([class]).button--1 {
    max-width: 100%;
    min-width: 8.33%
}

.button.button--2,
.kpn-style button:not([class]).button--2 {
    max-width: 100%;
    min-width: 16.67%
}

.button.button--3,
.kpn-style button:not([class]).button--3 {
    max-width: 100%;
    min-width: 25%
}

.button.button--4,
.kpn-style button:not([class]).button--4 {
    max-width: 100%;
    min-width: 33.33%
}

.button.button--fluid,
.kpn-style button:not([class]).button--fluid {
    display: flex;
    width: 100%
}

.button-group {
    display: flex;
    flex-wrap: wrap
}

@media (min-width: 0px) and (max-width: 767px) {
    .button-group.button-group--respond .button {
        display: flex;
        margin-right: 0 !important;
        width: 100%
    }
}

.button-group.button-group--right {
    justify-content: flex-end
}

.button-group.button-group--reverse {
    flex-direction: row-reverse
}

.button-group.button-group--reverse .button:first-child {
    margin-right: 0
}

.button-group.button-group--reverse .button:last-child {
    margin-right: 16px
}

.button-group.button-group--reverse .button:only-child {
    margin-right: 0
}

.button-group .button {
    margin-bottom: 16px
}

.button-group .button:not(:last-child) {
    margin-right: 16px
}

.card {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: block;
    background-color: var(--grey-white);
    margin-bottom: 32px;
    position: relative
}

.card.card--stretch {
    height: calc(100% - 32px)
}

.card .card__header {
    padding: 16px 16px 0;
    display: flex;
    justify-content: space-between
}

.card .card__body {
    padding: 16px 8px 16px;
    margin-left: 8px;
    margin-right: 8px
}

.card .card__body>:last-child {
    margin-bottom: 0
}

.card .card__body+.card__body {
    border-top: 1px solid var(--grey-light-silver)
}

.card .card__footer {
    border-top: 1px solid var(--grey-light-silver);
    padding: 16px 16px 24px
}

.card .card__footer>:last-child {
    margin-bottom: 0
}

.card .card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 8px
}

.card .card__list {
    list-style: none;
    margin: 0;
    padding: 0
}

.card .card__list>li:not(:last-child) {
    margin-bottom: 16px
}

.content {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: block;
    background-color: var(--grey-white);
    margin-bottom: 32px;
    position: relative
}

.content.content--stretch {
    height: calc(100% - 32px)
}

.content .content__header {
    padding: 16px 16px 0
}

.content .content__body {
    padding: 16px 8px 16px;
    margin-left: 8px;
    margin-right: 8px
}

.content .content__body>:last-child {
    margin-bottom: 0
}

.content .content__body+.content__body {
    border-top: 1px solid var(--grey-light-silver)
}

.content .content__footer {
    border-top: 1px solid var(--grey-light-silver);
    padding: 16px 16px 24px
}

.content .content__footer>:last-child {
    margin-bottom: 0
}

.content .content__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 8px
}

.content .content__list {
    list-style: none;
    margin: 0;
    padding: 0
}

.content .content__list>li:not(:last-child) {
    margin-bottom: 16px
}

.dialog {
    border-radius: 2px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    background-color: var(--grey-white);
    display: none;
    left: 50%;
    position: fixed;
    top: 50%;
    z-index: 300
}

.dialog.dialog--active {
    display: block
}

@media (min-width: 0px) and (max-width: 767px) {
    .dialog {
        left: 16px;
        right: 16px;
        transform: translateY(-50%)
    }
}

@media (min-width: 768px) {
    .dialog {
        transform: translate(-50%, -50%);
        width: 40vw
    }
}

.dialog .dialog__header {
    display: flex;
    justify-content: space-between;
    padding: 8px 8px 16px 16px
}

.dialog .dialog__close {
    align-items: center;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    user-select: none;
    align-self: flex-start
}

.dialog .dialog__close::before {
    content: "";
    font: 24px/1 "kpn-ui-icons"
}

.dialog .dialog__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    margin-top: 24px
}

.dialog .dialog__body {
    padding-left: 16px;
    padding-right: 16px
}

.dialog .dialog__footer {
    padding: 48px 16px 0
}

.input-field {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.input-field.input-field--error .input-field__input::after {
    color: var(--red);
    content: ""
}

.input-field.input-field--error .input-field__input .input {
    border-color: var(--red);
    padding-right: 40px
}

.input-field.input-field--error .input-field__input .label-for {
    color: var(--red);
    padding-right: 40px
}

.input-field.input-field--error .input-field__feedback {
    color: var(--red);
    display: block
}

.input-field .label {
    width: 100%
}

.input-field .input-field__input {
    flex-grow: 1;
    position: relative
}

.input-field .input-field__input::after {
    font: 24px/1 "kpn-ui-icons";
    position: absolute;
    right: 8px;
    top: calc(50% - 0.5em)
}

.input-field .input-field__input .input {
    margin-bottom: 0;
    position: relative
}

.input-field .input-field__input .label-for {
    margin-bottom: 0
}

.input-field .input-field__action-button {
    align-items: center;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    user-select: none;
    border: 1px solid var(--grey-light-silver);
    background-color: var(--grey-white);
    font-size: 13px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -1px
}

.input-field .input-field__action-button:hover {
    background-color: var(--grey-subtle)
}

.input-field .input-field__action-button:focus {
    border-color: var(--blue);
    z-index: 1
}

.input-field .input-field__feedback {
    display: none;
    margin-top: 8px;
    width: 100%
}

.label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px
}

.label-for {
    align-items: baseline;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 8px;
    margin-right: 16px
}

.label-for .input {
    margin-right: 8px
}

.input[type="date"],
.input[type="email"],
.input[type="number"],
.input[type="password"],
.input[type="tel"],
.input[type="text"],
.input[type="url"] {
    border: 1px solid var(--grey-light-silver);
    background-color: var(--grey-white);
    box-sizing: border-box;
    color: var(--grey-dark);
    display: block;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 16px;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    height: 30px
}

.input[type="date"]:focus,
.input[type="email"]:focus,
.input[type="number"]:focus,
.input[type="password"]:focus,
.input[type="tel"]:focus,
.input[type="text"]:focus,
.input[type="url"]:focus {
    border-color: var(--blue)
}

.input[type="checkbox"],
.input[type="radio"] {
    font-size: inherit
}

.select {
    border: 1px solid var(--grey-light-silver);
    background-color: var(--grey-white);
    box-sizing: border-box;
    color: var(--grey-dark);
    display: block;
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    height: 40px
}

.select:focus {
    border-color: var(--blue)
}

.textarea {
    border: 1px solid var(--grey-light-silver);
    background-color: var(--grey-white);
    box-sizing: border-box;
    color: var(--grey-dark);
    display: block;
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    min-height: 120px;
    padding-bottom: 8px;
    padding-top: 8px
}

.textarea:focus {
    border-color: var(--blue)
}

.ul,
.kpn-style ul:not([class]) {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 24px
}

.ul>li,
.kpn-style ul:not([class])>li {
    margin-bottom: 5px;
    padding-left: 24px;
    position: relative;
    font-size: 14px;
}

.ul>li:last-child,
.kpn-style ul:not([class])>li:last-child {
    margin-bottom: 0
}

.ul>li::before,
.kpn-style ul:not([class])>li::before {
    background-color: currentColor;
    border-radius: 50%;
    content: "";
    height: 4px;
    left: 8px;
    position: absolute;
    top: 0.63em;
    width: 4px
}

.ol,
.kpn-style ol:not([class]) {
    margin: 0;
    padding: 0;
    margin-bottom: 24px;
    padding-left: 32px
}

.ol>li,
.kpn-style ol:not([class])>li {
    margin-bottom: 8px;
    padding-left: 8px
}

.ol>li:last-child,
.kpn-style ol:not([class])>li:last-child {
    margin-bottom: 0
}

.dl {
    margin: 0;
    margin-bottom: 24px
}

.dl dd {
    margin-left: 0
}

.dl dt {
    font-weight: 700;
    margin-bottom: 4px
}

.dl dd:not(:last-child) {
    margin-bottom: 16px
}

.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 24px
}

.check-list.check-list--inverted {
    color: var(--grey-white)
}

.check-list.check-list--inverted>li::before {
    color: inherit
}

.check-list>li {
    font-weight: 700;
    margin-bottom: 8px;
    padding-left: 32px;
    position: relative
}

.check-list>li:last-child {
    margin-bottom: 0
}

.check-list>li::before {
    font: 24px/1 "kpn-ui-icons";
    content: "";
    color: var(--green);
    left: 0;
    position: absolute
}

.notification {
    color: var(--grey-dark);
    margin-bottom: 8px;
    position: relative
}

.notification::before {
    font: 24px/1 "kpn-ui-icons";
    left: 12px;
    position: absolute;
    top: 14px
}

.notification.notification--informative::before {
    color: var(--blue);
    content: ""
}

.notification.notification--informative .notification__header {
    background-color: #c2e1f5
}

.notification.notification--informative .notification__body {
    border-color: #c2e1f5
}

.notification.notification--error::before {
    color: var(--red);
    content: ""
}

.notification.notification--error .notification__header {
    background-color: #f5cccc
}

.notification.notification--error .notification__body {
    border-color: #f5cccc
}

.notification.notification--caution::before {
    color: var(--orange);
    content: ""
}

.notification.notification--caution .notification__header {
    background-color: #f5e1c2
}

.notification.notification--caution .notification__body {
    border-color: #f5e1c2
}

.notification.notification--success::before {
    color: var(--green);
    content: ""
}

.notification.notification--success .notification__header {
    background-color: #c2e1c2
}

.notification.notification--success .notification__body {
    border-color: #c2e1c2
}

.notification .notification__header {
    padding: 14px calc(1em + 24px)
}

.notification .notification__body {
    border: 2px solid;
    border-top: none;
    padding: 14px
}

.notification .notification__body>:last-child {
    margin-bottom: 0
}

.notification .notification__close::after {
    content: "";
    cursor: pointer;
    font: 24px/1 "kpn-ui-icons";
    right: 12px;
    position: absolute;
    top: 14px
}

.modal {
    border-radius: 2px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    background-color: var(--grey-white);
    display: none;
    left: 50%;
    position: fixed;
    top: 50%;
    z-index: 300
}

.modal.modal--active {
    display: block
}

@media (min-width: 0px) and (max-width: 767px) {
    .modal {
        left: 8px;
        right: 8px;
        transform: translateY(-50%)
    }
}

@media (min-width: 768px) {
    .modal {
        transform: translate(-50%, -50%);
        max-width: 1200px;
        width: 80vw
    }
}

.modal .modal__close {
    align-items: center;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    user-select: none;
    position: absolute;
    right: 24px;
    top: 16px
}

.modal .modal__close::before {
    content: "";
    font: 24px/1 "kpn-ui-icons"
}

.modal .modal__body {
    box-sizing: border-box;
    overflow-y: auto;
    padding: 32px calc(32px + 24px) 32px 32px
}

@media (min-width: 0px) and (max-width: 767px) {
    .modal .modal__body {
        max-height: calc(100vh - 16px);
        padding: 16px calc(16px + 24px) 16px 16px
    }
}

@media (min-width: 768px) {
    .modal .modal__body {
        max-height: 80vh
    }
}

.mouseover {
    position: relative
}

.mouseover:not(.mouseover--no-hover):hover .mouseover__body,
.mouseover.mouseover--active .mouseover__body {
    opacity: 1;
    transition: opacity 0s 1s
}

@media (min-width: 0px) and (max-width: 991px) {
    .mouseover .mouseover__body {
        display: none
    }
}

@media (min-width: 992px) {
    .mouseover .mouseover__body {
        border-radius: 2px;
        background-color: var(--grey-dark);
        bottom: calc(100% + 4px + 10px);
        color: var(--grey-white);
        display: table;
        left: 50%;
        max-width: 320px;
        opacity: 0;
        padding: 16px 8px;
        position: absolute;
        transform: translateX(-50%)
    }

    .mouseover .mouseover__body::after {
        border: solid transparent;
        border-top-color: var(--grey-dark);
        border-width: 10px;
        content: "";
        height: 0;
        left: calc(50% - 10px);
        position: absolute;
        top: 100%;
        width: 0;
        z-index: 1
    }
}

.pagination {
    margin-bottom: 16px;
    position: relative
}

.pagination .pagination__pager {
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: baseline;
    display: flex;
    justify-content: center;
    text-align: center
}

@media (min-width: 0px) and (max-width: 767px) {

    .pagination .pagination__pager li:first-child [data-direction]::before,
    .pagination .pagination__pager li:last-child [data-direction]::before {
        font: 24px/1 "kpn-ui-icons";
        vertical-align: sub
    }

    .pagination .pagination__pager li:first-child [data-direction]::before {
        content: ""
    }

    .pagination .pagination__pager li:last-child [data-direction]::before {
        content: ""
    }
}

.pagination .pagination__link {
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--blue);
    cursor: pointer;
    display: inline-block;
    line-height: 1.75em;
    margin-left: 4px;
    margin-right: 4px;
    min-width: 1.75em;
    user-select: none
}

.pagination .pagination__link:not(.pagination__link--active):not([data-direction]):hover {
    border-color: var(--grey-light-silver)
}

.pagination .pagination__link[data-direction]::before {
    content: attr(data-direction)
}

.pagination .pagination__link[data-direction]:hover {
    text-decoration: underline
}

.pagination .pagination__link.pagination__link--active {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--grey-white)
}

.pagination .pagination__select-field {
    line-height: 1;
    padding: 8px;
    text-align: center
}

@media (min-width: 1200px) {
    .pagination .pagination__select-field {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }
}

.pagination .pagination__select {
    background-color: transparent;
    border: none;
    font: inherit
}

.progress-spinner {
    display: block;
    position: relative;
    min-height: 28px
}

.progress-spinner.progress-spinner--white::before {
    border-color: var(--grey-white);
    border-top-color: var(--green)
}

.progress-spinner.progress-spinner--blocking::after {
    background-color: rgba(var(--grey-subtle), 0.9);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.progress-spinner::before {
    animation: rotate 0.75s linear infinite;
    border: 3px solid var(--grey-light-silver);
    border-radius: 50%;
    border-top-color: var(--green);
    box-sizing: border-box;
    content: "";
    left: calc(50% - 28px / 2);
    position: absolute;
    top: calc(50% - 28px / 2);
    height: 28px;
    width: 28px;
    z-index: 1
}

.progress-spinner .progress-spinner__text {
    left: 50%;
    position: absolute;
    top: calc(50% + 28px / 2);
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1
}

.progress-bar {
    display: block;
    min-height: 4px;
    position: relative
}

.progress-bar.progress-bar--blocking::after {
    background-color: rgba(var(--grey-subtle), 0.9);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.progress-bar .progress-bar__meter {
    height: 4px;
    left: 50%;
    max-width: 240px;
    position: absolute;
    top: calc(50% - 4px / 2);
    transform: translateX(-50%);
    width: 100%;
    z-index: 1
}

.progress-bar .progress-bar__meter::before,
.progress-bar .progress-bar__meter .progress-bar__value {
    border-radius: 2px;
    content: "";
    height: 100%;
    position: absolute
}

.progress-bar .progress-bar__meter::before {
    background-color: var(--grey-light-silver);
    width: 100%
}

.progress-bar .progress-bar__meter .progress-bar__value {
    background-color: var(--green)
}

.progress-bar .progress-bar__text {
    left: 50%;
    position: absolute;
    top: calc(50% + 4px + 4px);
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1
}

.slider {
    display: block;
    padding-left: 16px;
    padding-right: 16px
}

.slider:not(.slider--disabled):hover {
    cursor: pointer
}

.slider:not(.slider--disabled):hover .slider__thumb {
    background-color: var(--blue-dark)
}

.slider.slider--range .slider__fill {
    height: 6px
}

.slider.slider--disabled .slider__fill,
.slider.slider--disabled .slider__thumb {
    background-color: var(--grey-silver)
}

.slider .slider__track {
    align-items: center;
    margin-bottom: 16px;
    display: flex;
    height: 32px;
    position: relative
}

.slider .slider__track::before {
    background-color: var(--grey-silver);
    content: "";
    height: 2px;
    position: absolute;
    width: 100%
}

.slider .slider__fill {
    background-color: var(--blue);
    height: 4px;
    position: absolute;
    width: 0
}

.slider .slider__thumb {
    background-color: var(--blue);
    border-radius: 50%;
    height: 32px;
    margin-left: -16px;
    position: absolute;
    width: 32px;
    z-index: 1
}

.slider .slider__scale {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 13px
}

.slider .slider__scale li {
    flex-basis: 100%;
    text-align: center
}

.tab {
    background-color: var(--grey-white)
}

.tab .tab__menu {
    border-bottom: 1px solid var(--grey-light-silver);
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    padding-left: 16px;
    padding-right: 16px
}

.tab .tab__item:not(:last-child) {
    margin-right: 16px
}

.tab .tab__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    display: block;
    line-height: 1;
    padding: 16px 8px
}

.tab .tab__link.tab__link--active {
    border-color: var(--green);
    font-weight: 700
}

.table,
.kpn-style table:not([class]) {
    border-top: 1px solid var(--grey-light-silver);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 16px;
    width: 100%
}

.table th,
.table td,
.kpn-style table:not([class]) th,
.kpn-style table:not([class]) td {
    border-bottom: 1px solid var(--grey-light-silver);
    padding: 12px 8px
}

.table th,
.kpn-style table:not([class]) th {
    font-weight: 700;
    text-align: left
}

.table td,
.kpn-style table:not([class]) td {
    vertical-align: top
}

.table .table__col-shrinked,
.table .table__col-shrank,
.kpn-style table:not([class]) .table__col-shrinked,
.kpn-style table:not([class]) .table__col-shrank {
    width: 1px
}

.table .table__row-selected,
.kpn-style table:not([class]) .table__row-selected {
    background-color: var(--blue-subtle)
}

.table .table__row-pointer:hover,
.kpn-style table:not([class]) .table__row-pointer:hover {
    background-color: var(--blue-subtle);
    cursor: pointer
}

.table .table__row-collapsed:hover,
.table .table__row-expanded:hover,
.kpn-style table:not([class]) .table__row-collapsed:hover,
.kpn-style table:not([class]) .table__row-expanded:hover {
    background-color: var(--blue-subtle);
    cursor: pointer
}

.table .table__row-collapsed:hover td:last-child::after,
.table .table__row-expanded:hover td:last-child::after,
.kpn-style table:not([class]) .table__row-collapsed:hover td:last-child::after,
.kpn-style table:not([class]) .table__row-expanded:hover td:last-child::after {
    border-radius: 50%;
    background-color: var(--blue);
    color: var(--grey-white)
}

.table .table__row-collapsed td:last-child,
.table .table__row-expanded td:last-child,
.kpn-style table:not([class]) .table__row-collapsed td:last-child,
.kpn-style table:not([class]) .table__row-expanded td:last-child {
    position: relative;
    padding-right: calc(1em + 24px)
}

.table .table__row-collapsed td:last-child::after,
.table .table__row-expanded td:last-child::after,
.kpn-style table:not([class]) .table__row-collapsed td:last-child::after,
.kpn-style table:not([class]) .table__row-expanded td:last-child::after {
    font: 24px/1 "kpn-ui-icons";
    position: absolute;
    right: 8px;
    top: calc(50% - 0.5em)
}

.table .table__row-collapsed td:last-child::after,
.kpn-style table:not([class]) .table__row-collapsed td:last-child::after {
    content: ""
}

.table .table__row-collapsed+.table__row-content,
.kpn-style table:not([class]) .table__row-collapsed+.table__row-content {
    display: none
}

.table .table__row-expanded,
.kpn-style table:not([class]) .table__row-expanded {
    color: var(--green);
    font-weight: 700
}

.table .table__row-expanded td:last-child::after,
.kpn-style table:not([class]) .table__row-expanded td:last-child::after {
    content: ""
}

.table .table__row-content td,
.kpn-style table:not([class]) .table__row-content td {
    padding-bottom: 24px;
    padding-top: 24px
}

.table .table__row-content td>:last-child,
.kpn-style table:not([class]) .table__row-content td>:last-child {
    margin-bottom: 0
}

.table-toolbar {
    margin-bottom: 16px
}

@media (min-width: 992px) {
    .table-toolbar {
        align-items: center;
        display: flex;
        justify-content: space-between
    }
}

.table-toolbar .table-toolbar__data {
    padding-left: 8px
}

@media (min-width: 0px) and (max-width: 991px) {
    .table-toolbar .table-toolbar__data {
        margin-bottom: 8px
    }
}

@media (min-width: 992px) {
    .table-toolbar .table-toolbar__action {
        display: flex;
        justify-content: flex-end
    }
}

.table-toolbar .table-toolbar__action>* {
    flex-grow: 1
}

@media (min-width: 0px) and (max-width: 991px) {
    .table-toolbar .table-toolbar__action>*:not(:last-child) {
        margin-bottom: 16px
    }
}

@media (min-width: 992px) {
    .table-toolbar .table-toolbar__action>*:not(:last-child) {
        margin-bottom: 0;
        margin-right: 16px
    }
}

.sort {
    cursor: pointer;
    display: inline-block;
    padding-right: calc(1em + 6px);
    position: relative;
    user-select: none;
    white-space: nowrap
}

.sort::before,
.sort::after {
    color: var(--grey-silver);
    font: 1.25em/1 "kpn-ui-icons";
    position: absolute;
    right: 0
}

.sort::before {
    content: "";
    top: -0.1em
}

.sort::after {
    bottom: -0.1em;
    content: ""
}

.sort.sort--ascending::before {
    color: var(--grey-dark)
}

.sort.sort--descending::after {
    color: var(--grey-dark)
}

.tile {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: block;
    background-color: var(--grey-white);
    display: block;
    font-size: 16px;
    margin-bottom: 16px
}

.tile.tile--stretch {
    height: calc(100% - 16px)
}

.tile .tile__body {
    padding: 32px 16px;
    text-align: center
}

.tile .tile__body>:last-child {
    margin-bottom: 0
}

.tile .tile__icon {
    margin-bottom: 16px;
    color: var(--green);
    font-size: 48px
}

.tile .tile__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 8px
}

.tile .p {
    font-size: inherit
}

.tooltip {
    position: relative
}

.tooltip.tooltip--active .tooltip__trigger::before {
    content: ""
}

.tooltip.tooltip--active .tooltip__body {
    border: 1px solid var(--grey-light-silver);
    box-sizing: border-box;
    display: block;
    margin-bottom: 8px;
    margin-top: 8px;
    padding: 8px 8px 8px 12px;
    position: relative
}

.tooltip.tooltip--active .tooltip__body::before {
    background-color: var(--blue);
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    width: 4px
}

.tooltip .tooltip__trigger {
    align-items: center;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    user-select: none;
    color: var(--blue);
    display: inline-block;
    font: 18px "kpn-ui-icons";
    vertical-align: sub
}

.tooltip .tooltip__trigger:hover {
    color: var(--blue-dark)
}

.tooltip .tooltip__trigger::before {
    content: ""
}

.tooltip .tooltip__body {
    display: none
}

.backdrop {
    background-color: rgba(var(--grey-dark), 0.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200
}

.backdrop.backdrop--active {
    display: block
}

.banner {
    padding: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 350px;
    overflow: hidden;
    position: relative
}

@media (min-width: 0px) and (max-width: 991px) {
    .banner {
        padding: 16px
    }
}

@media (min-width: 992px) {
    .banner {
        align-items: center;
        display: flex
    }
}

.banner::before {
    background: linear-gradient(rgba(var(--blue), 0.8) 20%, rgba(var(--green), 0.9) 40%, rgba(var(--green-darkest), 0.8) 60%);
    border-radius: 50%;
    content: "";
    height: 1225px;
    top: calc(50% - 1225px / 2);
    transform: rotate(20deg);
    left: -612.5px;
    position: absolute;
    width: 1225px
}

@media (min-width: 0px) and (max-width: 991px) {
    .banner::before {
        left: calc(50% - 1225px / 2);
        top: -980px;
        transform: rotate(100deg)
    }
}

.banner .banner__body {
    position: relative;
    width: 445.45455px;
    z-index: 1
}

@media (min-width: 0px) and (max-width: 991px) {
    .banner .banner__body {
        padding-top: 16px;
        text-align: center;
        width: auto
    }
}

.banner .banner__title,
.banner .banner__sub-title {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    color: var(--grey-white);
    line-height: 1
}

.banner .banner__title {
    font-size: 44px
}

@media (min-width: 0px) and (max-width: 767px) {
    .banner .banner__title {
        font-size: 36px
    }
}

.banner .banner__sub-title {
    font-size: 36px;
    font-weight: 400
}

@media (min-width: 0px) and (max-width: 767px) {
    .banner .banner__sub-title {
        font-size: 28px
    }
}

.footer {
    /*background-color: var(--grey-dove);*/
    color: var(--grey-white);
    font-size: 13px
}

.footer .footer__list {
    margin: 0;
    margin-bottom: 24px
}

.footer .footer__list dd {
    margin-left: 0
}

.footer .footer__list dt {
    font-weight: 700
}

.footer .footer__body {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    padding-top: 32px;
    padding-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px
}

@media (min-width: 0px) and (max-width: 991px) {
    .footer .footer__body {
        padding-left: 16px;
        padding-right: 16px
    }
}

.footer .footer__body+.footer__body {
    border-top: 1px solid var(--grey-white);
    position: relative
}

.footer .footer__inline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px
}

.footer .footer__inline-list.footer__inline-list--separated li:not(:last-child)::after {
    color: var(--grey-white);
    content: " |";
    display: inline-block;
    margin-left: 16px
}

.footer .footer__inline-list li {
    margin-left: 8px;
    margin-right: 8px
}

.footer .footer__link {
    color: var(--grey-white);
    cursor: pointer;
    display: inline-block;
    padding-bottom: 8px;
    padding-top: 8px
}

.footer .footer__link:hover {
    text-decoration: underline
}

.footer .footer__logo {
    display: block
}

@media (min-width: 0px) and (max-width: 991px) {
    .footer .footer__logo {
        margin-bottom: 24px
    }
}

@media (min-width: 992px) {
    .footer .footer__logo {
        bottom: 32px;
        left: 24px;
        position: absolute
    }
}

.footer .footer__logo img {
    margin: 0 auto;
    display: block;
    width: 80px
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    margin-right: -8px;
    margin-left: -8px
}

.row.row--reverse {
    flex-direction: row-reverse
}

@media (min-width: 992px) {
    .row.row--reverse-m {
        flex-direction: row-reverse
    }
}

.row.row--spread {
    justify-content: space-between
}

.col {
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-grow: 1;
    max-width: 100%;
    padding-right: 8px;
    padding-left: 8px;
    width: 100%
}

@media (min-width: 0px) {
    .col.col--xs {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }

    .col.col--1 {
        flex-basis: 8.33%;
        max-width: 8.33%
    }

    .col.col--2 {
        flex-basis: 16.66%;
        max-width: 16.66%
    }

    .col.col--3 {
        flex-basis: 25%;
        max-width: 25%
    }

    .col.col--4 {
        flex-basis: 33.33%;
        max-width: 33.33%
    }

    .col.col--5 {
        flex-basis: 41.66%;
        max-width: 41.66%
    }

    .col.col--6 {
        flex-basis: 50%;
        max-width: 50%
    }

    .col.col--7 {
        flex-basis: 58.33%;
        max-width: 58.33%
    }

    .col.col--8 {
        flex-basis: 66.66%;
        max-width: 66.66%
    }

    .col.col--9 {
        flex-basis: 75%;
        max-width: 75%
    }

    .col.col--10 {
        flex-basis: 83.33%;
        max-width: 83.33%
    }

    .col.col--11 {
        flex-basis: 91.66%;
        max-width: 91.66%
    }

    .col.col--12 {
        flex-basis: 100%;
        max-width: 100%
    }
}

@media (min-width: 768px) {
    .col.col--s {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }

    .col.col--s-1 {
        flex-basis: 8.33%;
        max-width: 8.33%
    }

    .col.col--s-2 {
        flex-basis: 16.66%;
        max-width: 16.66%
    }

    .col.col--s-3 {
        flex-basis: 25%;
        max-width: 25%
    }

    .col.col--s-4 {
        flex-basis: 33.33%;
        max-width: 33.33%
    }

    .col.col--s-5 {
        flex-basis: 41.66%;
        max-width: 41.66%
    }

    .col.col--s-6 {
        flex-basis: 50%;
        max-width: 50%
    }

    .col.col--s-7 {
        flex-basis: 58.33%;
        max-width: 58.33%
    }

    .col.col--s-8 {
        flex-basis: 66.66%;
        max-width: 66.66%
    }

    .col.col--s-9 {
        flex-basis: 75%;
        max-width: 75%
    }

    .col.col--s-10 {
        flex-basis: 83.33%;
        max-width: 83.33%
    }

    .col.col--s-11 {
        flex-basis: 91.66%;
        max-width: 91.66%
    }

    .col.col--s-12 {
        flex-basis: 100%;
        max-width: 100%
    }
}

@media (min-width: 992px) {
    .col.col--m {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }

    .col.col--m-1 {
        flex-basis: 8.33%;
        max-width: 8.33%
    }

    .col.col--m-2 {
        flex-basis: 16.66%;
        max-width: 16.66%
    }

    .col.col--m-3 {
        flex-basis: 25%;
        max-width: 25%
    }

    .col.col--m-4 {
        flex-basis: 33.33%;
        max-width: 33.33%
    }

    .col.col--m-5 {
        flex-basis: 41.66%;
        max-width: 41.66%
    }

    .col.col--m-6 {
        flex-basis: 50%;
        max-width: 50%
    }

    .col.col--m-7 {
        flex-basis: 58.33%;
        max-width: 58.33%
    }

    .col.col--m-8 {
        flex-basis: 66.66%;
        max-width: 66.66%
    }

    .col.col--m-9 {
        flex-basis: 75%;
        max-width: 75%
    }

    .col.col--m-10 {
        flex-basis: 83.33%;
        max-width: 83.33%
    }

    .col.col--m-11 {
        flex-basis: 91.66%;
        max-width: 91.66%
    }

    .col.col--m-12 {
        flex-basis: 100%;
        max-width: 100%
    }
}

@media (min-width: 1200px) {
    .col.col--l {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }

    .col.col--l-1 {
        flex-basis: 8.33%;
        max-width: 8.33%
    }

    .col.col--l-2 {
        flex-basis: 16.66%;
        max-width: 16.66%
    }

    .col.col--l-3 {
        flex-basis: 25%;
        max-width: 25%
    }

    .col.col--l-4 {
        flex-basis: 33.33%;
        max-width: 33.33%
    }

    .col.col--l-5 {
        flex-basis: 41.66%;
        max-width: 41.66%
    }

    .col.col--l-6 {
        flex-basis: 50%;
        max-width: 50%
    }

    .col.col--l-7 {
        flex-basis: 58.33%;
        max-width: 58.33%
    }

    .col.col--l-8 {
        flex-basis: 66.66%;
        max-width: 66.66%
    }

    .col.col--l-9 {
        flex-basis: 75%;
        max-width: 75%
    }

    .col.col--l-10 {
        flex-basis: 83.33%;
        max-width: 83.33%
    }

    .col.col--l-11 {
        flex-basis: 91.66%;
        max-width: 91.66%
    }

    .col.col--l-12 {
        flex-basis: 100%;
        max-width: 100%
    }
}

.jumbotron {
    background-color: var(--grey-dove);
    color: var(--grey-white);
    font-size: 20px
}

@media (min-width: 768px) {
    .jumbotron {
        align-items: center;
        display: flex
    }
}

.jumbotron .jumbotron__body {
    padding: 32px 48px;
    max-width: 768px
}

.jumbotron .jumbotron__body>:last-child {
    margin-bottom: 0
}

@media (min-width: 0px) and (max-width: 767px) {
    .jumbotron .jumbotron__body {
        padding: 24px 16px;
        text-align: center
    }

    .jumbotron .jumbotron__body+.jumbotron__body {
        padding-top: 0
    }
}

@media (min-width: 768px) {
    .jumbotron .jumbotron__body+.jumbotron__body {
        padding-left: 0
    }
}

.jumbotron .jumbotron__title {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    color: inherit;
    font-size: 44px
}

.jumbotron .jumbotron__subtitle {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    color: inherit;
    font-size: 24px
}

.jumbotron .p {
    color: inherit;
    font-size: inherit
}

.jumbotron .a {
    color: inherit
}

.mega-menu {
    padding-left: 24px;
    padding-right: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    align-items: center;
    background-color: var(--grey-white);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    position: relative
}

@media (min-width: 0px) and (max-width: 991px) {
    .mega-menu {
        padding-left: 16px;
        padding-right: 16px
    }
}

.mega-menu .mega-menu__logo {
    display: block;
    margin-right: 32px
}

.mega-menu .mega-menu__logo img {
    display: block;
    height: 50px;
    margin-top: -10px
}

@media (min-width: 0px) and (max-width: 991px) {
    .mega-menu .mega-menu__logo img {
        height: 30px;
        margin-top: 0
    }
}

@media (min-width: 0px) and (max-width: 991px) {
    .mega-menu .mega-menu__primary {
        background-color: var(--grey-subtle);
        box-sizing: border-box;
        position: absolute
    }

    .mega-menu .mega-menu__primary .mega-menu__menu {
        background-color: var(--grey-white);
        display: block;
        height: auto
    }

    .mega-menu .mega-menu__primary .mega-menu__menu .mega-menu__item {
        height: auto
    }

    .mega-menu .mega-menu__primary .mega-menu__menu .mega-menu__link {
        border-bottom: 1px solid var(--grey-light-silver);
        display: block;
        line-height: 48px;
        padding-left: 24px;
        padding-right: 0;
        position: relative;
        user-select: none
    }

    .mega-menu .mega-menu__primary .mega-menu__menu .mega-menu__link:hover::after,
    .mega-menu .mega-menu__primary .mega-menu__menu .mega-menu__link.mega-menu__link--active::after {
        content: none
    }

    .mega-menu .mega-menu__primary .mega-menu__menu .mega-menu__link.mega-menu__link--active {
        font-weight: 700
    }
}

.mega-menu .mega-menu__secondary {
    margin-left: auto
}

.mega-menu .mega-menu__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex
}

.mega-menu .mega-menu__menu .mega-menu__item {
    height: 90px
}

@media (min-width: 0px) and (max-width: 991px) {
    .mega-menu .mega-menu__menu .mega-menu__item {
        height: 56px
    }
}

.mega-menu .mega-menu__menu .mega-menu__item:not(:first-child) {
    margin-left: 4px
}

@media (min-width: 992px) {
    .mega-menu .mega-menu__menu .mega-menu__item:not(:first-child) {
        margin-left: 20px
    }
}

.mega-menu .mega-menu__menu .mega-menu__item:hover .mega-menu__sub-menu {
    opacity: 1;
    visibility: visible
}

.mega-menu .mega-menu__menu .mega-menu__item.mega-menu__item--trigger {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding-left: 8px;
    user-select: none
}

.mega-menu .mega-menu__menu .mega-menu__item.mega-menu__item--trigger::before {
    content: "";
    font: 24px/1 "kpn-ui-icons";
    vertical-align: sub
}

@media (min-width: 992px) {
    .mega-menu .mega-menu__menu .mega-menu__item.mega-menu__item--trigger {
        display: none
    }
}

.mega-menu .mega-menu__menu .mega-menu__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    display: flex;
    height: inherit;
    line-height: 1.2;
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
    user-select: none
}

.mega-menu .mega-menu__menu .mega-menu__link:hover,
.mega-menu .mega-menu__menu .mega-menu__link.mega-menu__link--active {
    color: var(--green)
}

.mega-menu .mega-menu__menu .mega-menu__link:hover::after,
.mega-menu .mega-menu__menu .mega-menu__link.mega-menu__link--active::after {
    background-color: var(--green);
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%
}

.mega-menu .mega-menu__menu .mega-menu__link i {
    margin-right: 8px;
    vertical-align: sub
}

.mega-menu .mega-menu__sub-menu {
    border-bottom: 1px solid var(--grey-light-silver);
    border-top: 1px solid var(--grey-light-silver);
    padding: 24px;
    background-color: var(--grey-white);
    box-sizing: border-box;
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 90px;
    transition: opacity 0s 0.5s, visibility 0s 0.5s;
    visibility: hidden;
    width: 100%;
    z-index: 1
}

@media (min-width: 0px) and (max-width: 991px) {
    .mega-menu .mega-menu__sub-menu {
        padding: 16px
    }
}

.mega-menu .mega-menu__sub-menu.mega-menu__sub-menu--active {
    opacity: 1;
    visibility: visible
}

.mega-menu .mega-menu__sub-menu .mega-menu__group {
    list-style: none;
    margin: 0;
    padding: 0
}

.mega-menu .mega-menu__sub-menu .mega-menu__group:not(:last-child) {
    margin-right: 48px
}

.mega-menu .mega-menu__sub-menu .mega-menu__link {
    font-weight: 400;
    height: auto
}

.mega-menu .mega-menu__sub-menu .mega-menu__link:hover {
    color: var(--blue)
}

.mega-menu .mega-menu__sub-menu .mega-menu__link:hover::after {
    content: none
}

@media (min-width: 0px) and (max-width: 991px) {
    .mega-menu .mega-menu__sub-menu .mega-menu__link {
        padding-left: 64px
    }
}

@media (min-width: 992px) {
    .mega-menu .mega-menu__sub-menu .mega-menu__link {
        line-height: 32px
    }
}

.mega-menu .mega-menu__sub-menu .mega-menu__link.mega-menu__link--active {
    color: inherit;
    font-weight: 700
}

.mega-menu .mega-menu__action-bar {
    align-items: center;
    background-color: var(--green);
    display: flex;
    height: 56px;
    margin-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px
}

@media (min-width: 992px) {
    .mega-menu .mega-menu__action-bar {
        display: none
    }
}

.mega-menu .mega-menu__action-bar .mega-menu__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    cursor: pointer;
    color: var(--grey-white)
}

.mega-menu .mega-menu__action-bar .mega-menu__link::after {
    content: "";
    font: 18px "kpn-ui-icons";
    vertical-align: sub
}

.mega-menu .mega-menu__action-bar .mega-menu__link i {
    vertical-align: sub;
    margin-right: 4px
}

.mega-menu .mega-menu__action-bar .mega-menu__close {
    align-items: center;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    user-select: none;
    color: var(--grey-white);
    cursor: pointer;
    flex-direction: column;
    font-size: 13px;
    line-height: 1;
    margin-left: auto
}

.mega-menu .mega-menu__action-bar .mega-menu__close::before {
    content: "";
    font: 24px/1 "kpn-ui-icons";
    display: block
}

.pitch {
    background-color: var(--grey-subtle);
    margin-bottom: 24px;
    position: relative
}

.pitch::after {
    border: solid transparent;
    border-top-color: var(--grey-subtle);
    border-width: 20px;
    content: "";
    height: 0;
    left: calc(50% - 20px);
    position: absolute;
    top: 100%;
    width: 0;
    z-index: 1
}

.pitch+.pitch,
.pitch.pitch--next {
    margin-top: -24px;
    padding-top: 20px
}

.pitch.pitch--green {
    color: var(--grey-white);
    background-color: var(--green)
}

.pitch.pitch--green::after {
    border-top-color: var(--green)
}

.pitch.pitch--green .pitch__title {
    color: var(--grey-white)
}

.pitch.pitch--blue {
    color: var(--grey-white);
    background-color: var(--blue)
}

.pitch.pitch--blue::after {
    border-top-color: var(--blue)
}

.pitch.pitch--blue .pitch__title {
    color: var(--grey-white)
}

.pitch.pitch--white {
    background-color: var(--grey-white)
}

.pitch.pitch--white::after {
    border-top-color: var(--grey-white)
}

.pitch.pitch--limited .pitch__body {
    max-width: 1200px
}

.pitch.pitch--centered .pitch__body {
    margin-left: auto;
    margin-right: auto
}

.pitch.pitch--last::after {
    border: none
}

.pitch .pitch__body {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
    padding-top: 32px
}

@media (min-width: 0px) and (max-width: 991px) {
    .pitch .pitch__body {
        padding-left: 16px;
        padding-right: 16px
    }
}

.pitch .pitch__title {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    color: var(--green);
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 24px
}

.pitch .pitch__visual {
    display: inline-block;
    height: auto;
    width: 100%
}

.side-bar {
    background-color: var(--grey-subtle);
    box-sizing: border-box;
    font-size: 14px;
    padding-bottom: 32px;
    padding-top: 20px;
    width: 280px
}

@media (min-width: 0px) and (max-width: 991px) {
    .side-bar {
        padding-bottom: 0;
        padding-top: 0;
        width: auto
    }
}

@media (min-width: 992px) {
    .side-bar {
        border-right: 1px solid var(--grey-light-silver);
        background-color: var(--grey-white)
    }
}

.side-bar .side-bar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--grey-white)
}

.side-bar .side-bar__menu .side-bar__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    display: block;
    line-height: 1.5;
    padding-left: calc(24px + 24px);
    position: relative;
    user-select: none;
    margin-top: .4em;
}

@media (min-width: 0px) and (max-width: 991px) {
    .side-bar .side-bar__menu .side-bar__link {
        border-bottom: 1px solid var(--grey-light-silver)
    }
}

.side-bar .side-bar__menu .side-bar__link:hover {
    color: var(--green);
    text-decoration: underline;
}

.side-bar .side-bar__menu .side-bar__link.side-bar__link--active {
    color: var(--green);
}

.side-bar .side-bar__menu .side-bar__link.side-bar__link--active {
    font-weight: 700
}

@media (min-width: 992px) {
    .side-bar .side-bar__menu .side-bar__link.side-bar__link--active::before {
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        width: 4px;
        background-color: currentColor
    }
}

.side-bar .side-bar__menu .side-bar__link.side-bar__link--collapsed::after,
.side-bar .side-bar__menu .side-bar__link.side-bar__link--expanded::after {
    font: 24px/1 "kpn-ui-icons";
    position: absolute;
    right: 16px;
    top: calc(50% - 0.5em)
}

.side-bar .side-bar__menu .side-bar__link.side-bar__link--collapsed::after {
    content: ""
}

.side-bar .side-bar__menu .side-bar__link.side-bar__link--expanded::after {
    content: ""
}

.side-bar .side-bar__menu .side-bar__link>i {
    line-height: inherit;
    left: 16px;
    position: absolute
}

.side-bar .side-bar__sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none
}

.side-bar .side-bar__sub-menu.side-bar__sub-menu--visible {
    display: block
}

.side-bar .side-bar__sub-menu .side-bar__link {
    font-weight: 400
}

@media (min-width: 0px) and (max-width: 991px) {
    .side-bar .side-bar__sub-menu .side-bar__link {
        padding-left: 64px
    }
}

@media (min-width: 992px) {
    .side-bar .side-bar__sub-menu .side-bar__link {
        line-height: 32px
    }
}

.side-bar .side-bar__sub-menu .side-bar__link.side-bar__link--active {
    color: inherit;
    font-weight: 700
}

.side-bar .side-bar__sub-menu .side-bar__link.side-bar__link--active::before {
    background-color: transparent
}

.side-bar .side-bar__action-bar {
    align-items: center;
    background-color: var(--green);
    display: flex;
    height: 56px;
    margin-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px
}

@media (min-width: 992px) {
    .side-bar .side-bar__action-bar {
        display: none
    }
}

.side-bar .side-bar__action-bar .side-bar__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    cursor: pointer;
    color: var(--grey-white)
}

.side-bar .side-bar__action-bar .side-bar__link::after {
    content: "";
    font: 18px "kpn-ui-icons";
    vertical-align: sub
}

.side-bar .side-bar__action-bar .side-bar__link i {
    vertical-align: sub;
    margin-right: 4px
}

.side-bar .side-bar__action-bar .side-bar__close {
    align-items: center;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    user-select: none;
    color: var(--grey-white);
    cursor: pointer;
    flex-direction: column;
    font-size: 13px;
    line-height: 1;
    margin-left: auto
}

.side-bar .side-bar__action-bar .side-bar__close::before {
    content: "";
    font: 24px/1 "kpn-ui-icons";
    display: block
}

.title-bar {
    padding-left: 24px;
    padding-right: 24px;
    align-items: center;
    background-color: var(--green);
    display: flex;
    height: 32px
}

@media (min-width: 0px) and (max-width: 991px) {
    .title-bar {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media (min-width: 992px) {
    .title-bar {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
    }
}

.title-bar .title-bar__title {
    color: var(--grey-dark);
    font-family: "kpn-metric", "Arial", "Helvetica";
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0;
    color: var(--grey-white);
    font-size: 28px;
    margin-bottom: 0 !important
}

.top-bar {
    padding-left: 24px;
    padding-right: 24px;
    align-items: center;
    background-color: var(--grey-white);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    height: 56px
}

@media (min-width: 0px) and (max-width: 991px) {
    .top-bar {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media (min-width: 0px) and (max-width: 991px) {
    .top-bar {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
    }
}

.top-bar .top-bar__logo {
    display: block;
    margin-right: 16px
}

.top-bar .top-bar__logo img {
    display: block;
    height: 32px;
    margin-top: -4px
}

.top-bar .top-bar__title {
    color: var(--green);
    margin-right: 24px;
    text-decoration: none
}

@media (min-width: 0px) and (max-width: 991px) {
    .top-bar .top-bar__title {
        display: none
    }
}

.top-bar .top-bar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: auto
}

.top-bar .top-bar__menu .top-bar__item {
    position: relative;
    height: 56px
}

.top-bar .top-bar__menu .top-bar__item:not(:first-child) {
    margin-left: 4px
}

.top-bar .top-bar__menu .top-bar__item.top-bar__item--trigger {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding-left: 8px;
    user-select: none
}

.top-bar .top-bar__menu .top-bar__item.top-bar__item--trigger::before {
    content: "";
    font: 24px/1 "kpn-ui-icons";
    vertical-align: sub
}

@media (min-width: 992px) {
    .top-bar .top-bar__menu .top-bar__item.top-bar__item--trigger {
        display: none
    }
}

.top-bar .top-bar__menu .top-bar__link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    display: flex;
    height: inherit;
    padding-left: 8px;
    padding-right: 8px;
    user-select: none
}

.top-bar .top-bar__menu .top-bar__item>.top-bar__link {
    position: relative
}

.top-bar .top-bar__menu .top-bar__item>.top-bar__link:not(.top-bar__link--collapsed):not(.top-bar__link--expanded):hover,
.top-bar .top-bar__menu .top-bar__item>.top-bar__link.top-bar__link--active {
    color: var(--green)
}

.top-bar .top-bar__menu .top-bar__item>.top-bar__link:not(.top-bar__link--collapsed):not(.top-bar__link--expanded):hover::after,
.top-bar .top-bar__menu .top-bar__item>.top-bar__link.top-bar__link--active::after {
    background-color: var(--green);
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%
}

.top-bar .top-bar__menu .top-bar__item>.top-bar__link.top-bar__link--collapsed::after,
.top-bar .top-bar__menu .top-bar__item>.top-bar__link.top-bar__link--expanded::after {
    content: "";
    font: 18px "kpn-ui-icons";
    padding-left: 8px;
    vertical-align: text-bottom
}

.top-bar .top-bar__menu .top-bar__item>.top-bar__link.top-bar__link--expanded::after {
    content: ""
}

.top-bar .top-bar__menu .top-bar__item>.top-bar__link i {
    margin-right: 4px;
    vertical-align: sub
}

.top-bar .top-bar__action-menu {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--grey-white);
    display: none;
    right: 8px;
    line-height: 1.5;
    padding: 8px 16px;
    position: absolute;
    top: 56px;
    z-index: 1
}

.top-bar .top-bar__action-menu.top-bar__action-menu--visible {
    display: block
}

.top-bar .top-bar__action-menu .top-bar__link {
    display: block;
    padding-bottom: 4px;
    padding-top: 4px;
    white-space: nowrap
}

.top-bar .top-bar__action-menu .top-bar__link:hover {
    color: var(--blue)
}

.top-bar .top-bar__action-menu small {
    display: block;
    font-size: 0.7em;
    padding: 4px 8px 0
}

.app-body {
    background-color: var(--grey-subtle);
    margin: 0
}

.app-layout {
    overflow-x: hidden
}

@media (min-width: 992px) {

    .app-layout.app-layout--has-side-bar .app-layout__main,
    .app-layout.app-layout--has-side-bar .title-bar__title {
        margin-left: 280px
    }
}

@media (min-width: 0px) and (max-width: 991px) {
    .app-layout.app-layout--active-side-bar .side-bar {
        transform: translateX(100%)
    }
}

.app-layout .app-layout__top-bar {
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 101
}

.app-layout .app-layout__side-bar.side-bar,
.app-layout .app-layout__side-bar .side-bar {
    overflow-y: auto;
    position: fixed
}

@media (min-width: 0px) and (max-width: 991px) {

    .app-layout .app-layout__side-bar.side-bar,
    .app-layout .app-layout__side-bar .side-bar {
        height: 100vh;
        left: -100%;
        transition: transform 0.5s ease-in-out;
        z-index: 101;
        width: 100%
    }
}

@media (min-width: 992px) {

    .app-layout .app-layout__side-bar.side-bar,
    .app-layout .app-layout__side-bar .side-bar {
        height: calc(100vh - 112px);
        left: 0;
        top: 100px
    }

    .app-layout .app-layout__side-bar.side-bar+.app-layout__main,
    .app-layout .app-layout__side-bar .side-bar+.app-layout__main {
        margin-left: 280px
    }

    .app-layout .app-layout__side-bar.side-bar+.app-layout__main .title-bar__title,
    .app-layout .app-layout__side-bar .side-bar+.app-layout__main .title-bar__title {
        margin-left: 280px
    }
}

.app-layout .app-layout__main {
    display: block
}

@media (min-width: 0px) and (max-width: 991px) {
    .app-layout .app-layout__main {
        padding-top: 56px;
        transition: transform 0.5s
    }
}

@media (min-width: 992px) {
    .app-layout .app-layout__main {
        padding-top: 100px
    }
}

@media (min-width: 992px) {
    .app-layout .app-layout__title-bar {
        left: 0;
        position: fixed;
        top: 56px;
        width: 100%;
        z-index: 100
    }
}

.web-body {
    background-color: var(--grey-white);
    margin: 0
}

.web-layout {
    overflow-x: hidden
}

@media (min-width: 0px) and (max-width: 991px) {
    .web-layout.web-layout--active-mega-menu .web-layout__mega-menu .mega-menu__primary {
        transform: translateX(100%)
    }
}

.web-layout .web-layout__mega-menu {
    position: fixed;
    width: 100%;
    z-index: 101
}

@media (min-width: 0px) and (max-width: 991px) {
    .web-layout .web-layout__mega-menu .mega-menu__primary {
        height: 100vh;
        top: 0;
        left: -100%;
        transition: transform 0.5s ease-in-out;
        width: 100%;
        z-index: 1
    }
}

.web-layout .web-layout__mega-menu+.web-layout__main {
    display: block
}

@media (min-width: 0px) and (max-width: 991px) {
    .web-layout .web-layout__mega-menu+.web-layout__main {
        padding-top: 56px
    }
}

@media (min-width: 992px) {
    .web-layout .web-layout__mega-menu+.web-layout__main {
        padding-top: 90px
    }
}

@font-face {
    font-family: "kpn-metric";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/kpn-metric-light.eot");
    src: url("fonts/kpn-metric-light.eot?#iefix") format("embedded-opentype"), url("fonts/kpn-metric-light.woff") format("woff"), url("fonts/kpn-metric-light.ttf") format("truetype"), url("fonts/kpn-metric-light.svg#kpn-metric") format("svg")
}

@font-face {
    font-family: "kpn-metric";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/kpn-metric-normal.eot");
    src: url("fonts/kpn-metric-normal.eot?#iefix") format("embedded-opentype"), url("fonts/kpn-metric-normal.woff") format("woff"), url("fonts/kpn-metric-normal.ttf") format("truetype"), url("fonts/kpn-metric-normal.svg#kpn-metric") format("svg")
}

@font-face {
    font-family: "kpn-metric";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/kpn-metric-bold.eot");
    src: url("fonts/kpn-metric-bold.eot?#iefix") format("embedded-opentype"), url("fonts/kpn-metric-bold.woff") format("woff"), url("fonts/kpn-metric-bold.ttf") format("truetype"), url("fonts/kpn-metric-bold.svg#kpn-metric") format("svg")
}

@font-face {
    font-family: "kpn-ui-icons";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/kpn-ui-icons.eot");
    src: url("fonts/kpn-ui-icons.eot?#iefix") format("embedded-opentype"), url("fonts/kpn-ui-icons.woff") format("woff"), url("fonts/kpn-ui-icons.ttf") format("truetype"), url("fonts/kpn-ui-icons.svg#kpn-ui-icons") format("svg")
}

@font-face {
    font-family: "kpn-service-icons";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/kpn-service-icons.eot");
    src: url("fonts/kpn-service-icons.eot?#iefix") format("embedded-opentype"), url("fonts/kpn-service-icons.woff") format("woff"), url("fonts/kpn-service-icons.ttf") format("truetype"), url("fonts/kpn-service-icons.svg#kpn-service-icons") format("svg")
}