/* style.css */
@font-face {
	font-family: ui-icon;
	src: url(https://www.kpn.com/public/fonts/icon-font/ui-icon.woff2) format("woff2"), url(https://www.kpn.com/public/fonts/icon-font/ui-icon.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: si-icons;
    src: url(https://www.kpn.com/public/fonts/icon-font/si-icons.woff2) format("woff2"), url(https://www.kpn.com/public/fonts/icon-font/si-icons.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: li-icons;
    src: url(https://www.kpn.com/public/fonts/icon-font/li-icons.woff2) format("woff2"),url(https://www.kpn.com/public/fonts/icon-font/li-icons.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: KPN-Metric;
    src: url(https://www.kpn.com/public/fonts/KPN-Metric/metric-bold.woff2) format("woff2"), url(/public/fonts/KPN-Metric/metric-bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: KPN-Metric;
    src: url(https://www.kpn.com/public/fonts/KPN-Metric/metric-light.woff2) format("woff2"), url(/public/fonts/KPN-Metric/metric-light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: KPN-Metric;
    src: url(https://www.kpn.com/public/fonts/KPN-Metric/metric-semibold.woff2) format("woff2"), url(/public/fonts/KPN-Metric/metric-semibold.woff) format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
.backtop a {
    background: #212121;
    padding: 10px 15px;
    border-radius: 50px;
    color: #fff !important;
    text-decoration: none;
}
.backtop a:hover {
    opacity: 0.69;
}
.backtop a:before {
    font-family: si-icons !important;
    content: "\e942";
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 0.5em;
    font-size: 1.5em;
    vertical-align: middle;
}

* {
    box-sizing: border-box;
} 

body {
    font-family: "KPN-Metric", "Arial", "Arial Unicode MS", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16pt;
    background-color: #F3F3F3;
    margin: 0px 0px 0px 0px;
    position: relative;
    min-height: 400px;
    min-height: 100vh;
}

.kpn-top-navigation:before {
    content: "";
    position: absolute;
    background-image: url(https://ksp.kpnnet.org/static/gfx/KSP-vormen.svg?ts=1NUgZg);
    background-repeat: no-repeat;
    background-position-y: -559px;
    background-position-x: 80%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

* {
	 transition: all 1s ease;
}

p {
    font-size: 16pt;
    font-weight: normal;
    font-style: normal;
}
p.explanation,
p.rationale,
p.check {
    font-weight: bold;
}

h1, h2, h3, h4, h5 {
	margin-top: 0px;
}

h1 {
    font-size: 22pt;
}

h2 {
    font-size: 20pt;
}

h3 {
    font-size: 18pt;
}
h4 {
    font-size: 13pt;
    margin-bottom: 15px;
}
h5 {
    font-size: 14pt;
}
h6 {
    font-size: 14pt;
}
ol,
ul,
li {
    font-weight: normal;
    font-style: normal;
    font-size: 12pt;
}
div,
span {
    font-weight: normal;
    font-style: normal;
/*    font-size: 14pt;*/
}

.kpn-heading {
    font-size: 1.6em;
    color: #fff;
    font-weight: normal;
}

input[type="submit"] {
	background: #09f;
    border: 2px solid #09f;
    border-radius: 100px;
    padding: 6px 25px;
    color: #fff;
    text-decoration: none;
    font-size: 0.85em;
    margin-right: 10px;
    margin-top: 1.5em;
    clear: both;
    display: block;
}

input[type="submit"]:hover {
	background: #07c;
	border: 2px solid #07c;
	cursor: pointer;
}

#button-container {
    display: flex;
    justify-content: flex-start;
    padding: 15px 0px;
    flex-wrap: wrap;
}

#button-container button {
    cursor: pointer;
    background: #09f;
    border: 2px solid #09f;
    border-radius: 100px;
    padding: 6px 25px;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    margin: 5px;
/*    flex: 1 1 auto;*/
}

#button-container button:hover {
    background: #07c;
    border: 2px solid #07c;
}

#button-container .xl-icon {
    font-weight: 900;
}

#button-container span {
    margin-right: 0.25em;
}

#redraw-button {
    display: none;
}

.button.blue {
    background: #09f;
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 8px 1.5em 6px 1.5em;
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    margin-right: 10px;
    clear: both;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,.125);
}

.button.blue:hover {
    background: #07c;
    border: 1px solid #fff;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,.125);
}

.login-container .button.blue {
    font-size: .9em;
}

.button.white {
    background: #fff;
    border: 1px solid #09f;
    border-radius: 100px;
    padding: 8px 1.5em 6px 1.5em;
    color: #09f;
    text-decoration: none;
    font-size: 1.2em;
    margin-right: 10px;
    clear: both;
    display: block;
    box-shadow: 0 1px 2px rgba(0,0,0,.125);
}

.button.white:hover {
    background: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,.125);
}

a.back {
    margin: 0 auto;
    display: table; 
    width: auto;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    vertical-align: middle;
    font-size: 1em;
}

a.back:hover {
    color: #555;
}

a.back span {
    font-weight: 900;
    font-size: 1.69em;
    vertical-align: middle;
}

a.back:hover span {
    color: #00c300;
}

input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button {
    background: #232323;
    color: #fff;
    border: 1px solid #111;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover {
    opacity: .69;
}

/*GUI CSS */

.gui-element-block {
	padding: 20px;
    background: white;
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.gui-element-block h2 {
    color: #090 !important;
}

.width-750 {
	width: 750px;
}

.width-80p {
	width: 80%;
}

.width-100p {
    width: 100%;
}

.width-35p {
    width: calc(40% - 15px);
}


.width-25p {
    width: calc(28% - 15px);
}


.width-50p {
    width: calc(50% - 15px);
}

.width-1240 {
    width: 80%;
}

.centered {
	margin: 0 auto;
}

.top-space-100 {
	margin-top: 100px;
}

.top-space-20 {
	margin-top: 20px;
}

.scroll-wrapper {
    overflow: auto;
    margin-bottom: 20px;
}

.gui-element-block h2 span {
    font-weight: 900;
    font-size: 3em;
    vertical-align: middle;
    color: #00c300;
}

.gui-element-block-wrapper {
    width: 80%;
    margin: 100px auto 0px auto;
}

.gui-element-block-wrapper h1 {
    color: #232323;
    font-size: 1.75em;
}

.gui-element-text-block {

}

.gui-element-text-block span {
    font-size: 1.5em;
    font-weight: 900;
    vertical-align: middle;
    color: #00ad00;
}

.green {
    color: #090 !important;
}

.text-centered {
    text-align: center;
}

#scope-items {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  /*border-collapse: separate;
  border-spacing: 0px;*/
  width: 100%;
}

#scope-items td, #scope-items th {
  border: 1px solid #ddd;
  padding: 8px;
  font-size: 12px;
}

#scope-items tr:nth-child(even) {
	background-color: #f2f2f2;
}

#scope-items tr:hover {
	background-color: #ddd;
}

#scope-items th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #00c300;
  border-color: #00a100;
  color: white;
}

#scope-items.backup th {
  background-color: #00AAFF;
  border-color: #0a96dc;
}

.message-box {
	padding: 15px 15px;
	background: #afdefd;
	font-size: .95em;
	width: fit-content;
	margin: 1em 0px;
	border-radius: 5px; 
	display: flex;
	align-items: center;
}

.message-box p {
	margin: 0px;
	display: flex;
	align-items: center;
}

.information {
	background: #afdefd;
}

.information .ui-icon {
	color: #09f;
/*    color: #17a2b8;*/
}

.success {
	background: #b5ffb5;
    background: #cef1ce;
}

.success .ui-icon {
	color: #00c300;
}

.error {
	background: #ffc4c4;
/*	margin: 100px auto;*/
}

.pop-up {
  margin: 100px auto;
}

.pop-up.home {
    position: absolute;
    z-index: 99999;
    top: 0;
    box-shadow: 0px 0px 10000px 100px #333333ff;
}

.error .ui-icon {
	color: #ef1a1a;
    color: #E5243B;
}

.warning {
    background: #fde5b8;
}

.warning .si-icon {
    color: #FFA500;
    color: #ea9739;
    font-weight: 900;
}

.session-termination-wrapper .success, .session-termination-wrapper .error, .session-termination-wrapper .warning {
    margin: 10px auto !important;
}

.xl-icon {
	font-size: 1.5em;
	vertical-align: middle;
	margin-right: .5em;
}

#icon-overview {
    font-size: 40px;
    width: 800px;
    margin: 100px auto;
    word-wrap:break-word;
}



.message-text {
    margin-left: 2px; /* Ruimte tussen het icoontje en de tekst */
    flex: 1;
}

.hidden-div {
	display: none;
}

table#sample-details, table#backup-sample-details {
    font-size: 1em;
    line-height: 1.2em;
    padding: 0px;
    margin-bottom: 1em;
}

table#sample-details span, table#backup-sample-details span {
    margin-right: .5em;
    color: #00AAFF;
    font-size: 1.2em;
    vertical-align: middle;
    font-weight: bold;
}

form {
	/*border: 1px solid #f3f3f3;
    padding: 30px;
    border-radius: 10px;*/
}

.form-section {
    padding: 15px;
    border: 1px solid #ededed;
    margin: 5px 0px;
    border-radius: 5px;
}

#clear-session-delete-file {
    display: none;
}

/*Navigation CSS*/

.kpn-top-navigation {
    border-bottom: 1px solid #e3e3e3;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    z-index: 1;
    background-color: #fff;
    flex: 0 0 auto;
    position: relative;
    width: 100%;
}

.kpn-top-navigation-content {
    margin: 0 auto;
    max-width: 1200px;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
}

.kpn-top-navigation, .kpn-top-navigation * {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.kpn-top-navigation {
    --top-navigation-service-mobile-url: url(https://static.kpn.com/ssi/svg/top-navigation-service-mobile.svg);
    --top-navigation-service-url: url(https://static.kpn.com/ssi/svg/top-navigation-service.svg);
    -webkit-font-smoothing: antialiased;
    color: #232323;
    font-family: KPN-Extended, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 16px;
    font-style: normal;
    left: 0;
    line-height: normal;
    position: fixed;
    top: 0;
    width: 100%;
}

.kpn-top-navigation a {
    color: #000;
    line-height: 16px;
    text-decoration: none;
}

.kpn-top-navigation-left-wrapper {
    align-items: center;
    display: flex;
    gap: 32px;
    height: 100%;
    gap: 64px;
}

.kpn-top-navigation-logo {
	align-items: center;
    display: inline-flex;
    text-decoration: none;
}

.kpn-top-navigation-menu-wrapper {

}

.kpn-top-navigation-menu {
	display: flex;
}

.no-list-style, .no-list-style li {
	list-style: none;
    margin: 0;
    padding: 0;
}

.kpn-top-navigation-menu-item {
	margin-bottom: 0;
    align-items: center;
    display: flex;
    margin: 0 0.5px;
    z-index: 1;
}

.kpn-top-navigation label, .kpn-top-navigation li {
    margin-bottom: 0;
}

.kpn-top-navigation-menu-item-button {
    font-size: 1rem;
    align-items: center;
    background-color: transparent;
    border: 0px;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-weight: 400;
    padding: 0;
    text-align: left;
    position: relative;
    border-bottom: 2px solid #fff;
}

.kpn-top-navigation-menu-item-button:hover {
	border-bottom: 2px solid #090;
}

.kpn-top-navigation-menu-item-button>.kpn-top-navigation-menu-button-text {
    align-items: center;
    display: flex;
    height: 67px;
    line-height: normal;
    padding: 0 8px;
}

.kpn-top-navigation-menu-item>.kpn-top-navigation-menu-button .kpn-top-navigation-menu-button-title {
    display: inline-block;
}

.kpn-top-navigation-logo-image {
    height: 35px;
}


/* Checkbox List */

.group-number-label {
    font-weight: 600;
    min-width: 80px;
}

.checkbox-list {
  font-family: Arial, sans-serif;
}

.checkbox-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.checkbox-list ul li:last-child {
    margin-bottom: 0;
}

.checkbox-list li {
  margin-bottom: 5px;
}

.checkbox-list input[type="checkbox"] {
  display: none;
}

.checkbox-list label {
  display: flex;
  padding: 10px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  align-items: center;
}

.checkbox-list input[type="checkbox"]:checked + label {
  background-color: #f3f3f3;
  color: #111;
}

.checkbox-list input[type="checkbox"] + label {
	background: #fff;
	color: #111;
}

.checkbox-list input[type="checkbox"] + label .si-icon {
	font-size: 1.5em;
	font-weight: bold;
    border: 2.5px solid #ccc;
    border-radius: 4px;
}

.checkbox-list input[type="checkbox"]:checked + label .si-icon {
  color: #00ad00; /* Kleur van het icoontje als de checkbox is aangevinkt */
  border-color: #00ad00;
}

.checkbox-list input[type="checkbox"]:not(:checked) + label .si-icon {
  color: #eee; /* Kleur van het icoontje als de checkbox niet is aangevinkt */
  border-color: #ccc;
}

.checkbox-list input[type="checkbox"]:focus + label {
  border: 1px solid #007bff;
}

/* Number Input */
input[type="number"] {
    border: 1px solid #d3d3d3;
    background-color: #fff;
    box-sizing: border-box;
    color: #333;
    display: block;
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    height: 40px;
}

/* Text Input */
input[type="text"] {
    border: 1px solid #d3d3d3;
    background-color: #fff;
    box-sizing: border-box;
    color: #333;
    display: block;
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    height: 40px;
}

/* Password Input */
input[type="password"] {
    border: 1px solid #d3d3d3;
    background-color: #fff;
    box-sizing: border-box;
    color: #333;
    display: block;
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    height: 40px;
}

/* Textarea Input */
textarea {
    border: 1px solid #d3d3d3;
    background-color: #fff;
    box-sizing: border-box;
    color: #333;
    display: block;
    font-family: inherit;
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
/*    height: 40px;*/
}

/* Banner */
section.banner {
    width: 100%;
    padding: 150px 100px 100px 150px;
    background: #00c300;
    margin-top: 50px;
}

.banner-image {
    position: absolute;
    width: auto;
    right: 150px;
    top: 0;
    height: 348px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

section.banner p {
    color: #fff;
}

section.banner span.ui-icon.ui-forum {
    font-size: 10em;
    float: right;
    color: #fff;
    margin-right: 100px;
}

/* Products */
section.products {
    width: 100%;
    padding: 50px 30px;
    background: #f7f7f7;
    margin: 0 auto;
}       

.products-content-wrapper {
    width: 100%;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.products-content-wrapper .button {
    font-size: .9em;
}

.products-content-block {
    padding: 20px;
    background: white;
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    display: inline-grid;
    margin: 20px;
    text-align: left;
}

.products-content-block p {
    min-height: 70px;
}

section.products h3 span {
    font-size: 1.5em;
    vertical-align: middle;
    font-weight: 900;
}

/* USPs */
section.usps {
    width: 100%;
    padding: 50px 30px;
    background: #fff;
    margin: 0 auto;
}       

.usps-content-wrapper {
    width: 100%;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.usps-content-block {
    /*padding: 20px;
    background: white;
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.1);*/
    display: inline-block;
    margin: 20px;
    text-align: center;
}


body.samplefire---home {
  height: 100vh;
  background: url('https://samplefire.com/images/jordie-nijhuis-asset-overview.png') repeat-x center center fixed;
  background-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  position: relative;
  padding-top: 200px;
  animation: scrollBackground 60s linear infinite;
}

@keyframes scrollBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.69);
}

.slider-thumb {
  position: absolute;
  width: 300px;
  height: 300px;
}

.blue-blob::before,
.green-blob::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  will-change: border-radius, transform;
  animation: sliderShape 10s ease-in-out infinite;
  display: block;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.blue-blob::before {
  background: linear-gradient(90deg, rgba(0, 123, 255, 1) 0%, rgba(0, 82, 204, 1) 100%);
  animation: blueSliderShape 12s ease-in-out infinite;
}

.green-blob::before {
  background: linear-gradient(90deg, rgba(201, 252, 4, 1) 0%, rgba(0, 195, 0, 1) 100%);
}

@keyframes sliderShape {
  0%, 100% {
    border-radius: 42% 58% 72% 28% / 34% 58% 42% 66%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  10% {
    border-radius: 50% 50% 65% 35% / 45% 55% 40% 60%;
    transform: translate(-52%, -48%) rotate(3deg);
  }
  20% {
    border-radius: 55% 45% 60% 40% / 60% 30% 70% 40%;
    transform: translate(-54%, -46%) rotate(6deg);
  }
  30% {
    border-radius: 48% 52% 34% 66% / 68% 34% 66% 32%;
    transform: translate(-50%, -50%) rotate(-3deg);
  }
  40% {
    border-radius: 40% 60% 55% 45% / 55% 65% 35% 45%;
    transform: translate(-48%, -52%) rotate(-6deg);
  }
  50% {
    border-radius: 60% 40% 50% 50% / 50% 70% 30% 50%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  60% {
    border-radius: 45% 55% 60% 40% / 65% 35% 55% 45%;
    transform: translate(-52%, -48%) rotate(6deg);
  }
  70% {
    border-radius: 55% 45% 48% 52% / 48% 72% 28% 52%;
    transform: translate(-50%, -50%) rotate(-6deg);
  }
  80% {
    border-radius: 40% 60% 64% 36% / 54% 38% 62% 46%;
    transform: translate(-48%, -52%) rotate(3deg);
  }
  90% {
    border-radius: 50% 50% 72% 28% / 38% 58% 42% 62%;
    transform: translate(-50%, -50%) rotate(-3deg);
  }
}

@keyframes blueSliderShape {
  0%, 100% {
    border-radius: 50% 50% 65% 35% / 45% 55% 40% 60%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  10% {
    border-radius: 55% 45% 60% 40% / 60% 30% 70% 40%;
    transform: translate(-54%, -46%) rotate(6deg);
  }
  20% {
    border-radius: 48% 52% 34% 66% / 68% 34% 66% 32%;
    transform: translate(-50%, -50%) rotate(-3deg);
  }
  30% {
    border-radius: 40% 60% 55% 45% / 55% 65% 35% 45%;
    transform: translate(-48%, -52%) rotate(-6deg);
  }
  40% {
    border-radius: 60% 40% 50% 50% / 50% 70% 30% 50%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    border-radius: 45% 55% 60% 40% / 65% 35% 55% 45%;
    transform: translate(-52%, -48%) rotate(6deg);
  }
  60% {
    border-radius: 55% 45% 48% 52% / 48% 72% 28% 52%;
    transform: translate(-50%, -50%) rotate(-6deg);
  }
  70% {
    border-radius: 40% 60% 64% 36% / 54% 38% 62% 46%;
    transform: translate(-48%, -52%) rotate(3deg); 
  }
  80% {
    border-radius: 50% 50% 72% 28% / 38% 58% 42% 62%;
    transform: translate(-50%, -50%) rotate(-3deg);
  }
  90% {
    border-radius: 42% 58% 72% 28% / 34% 58% 42% 66%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

.login-container {
  position: absolute;
  z-index: 1000;
  background: none;
  text-align: center;
}

.login-container h2 {
  margin-bottom: 1em;
}

.login-container label {
  display: block;
  margin-bottom: 0.5em;
}

.login-container input {
  width: 100%;
  padding: 0.5em;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-container button {
  padding: 0.5em 2em;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.login-container button:hover {
  background-color: #0056b3;
}

.login-container form button {
    display: inline !important;
}


/*.checkbox-list input[type="checkbox"]:checked + label::before {
    font-family: si-icons;
    content: "\e931";
    display: inline-block;
    margin-right: 5px;
    color: #00ad00;
    font-size: 1.2em
    font-weight: 900;
}
*/
/*.kpn-top-navigation-menu-item:focus, .kpn-top-navigation-menu-item:hover {
    z-index: 0;
}

.kpn-top-navigation-menu-item:focus>.kpn-top-navigation-menu-button .kpn-top-navigation-menu-button-title:before, .kpn-top-navigation-menu-item:hover>.kpn-top-navigation-menu-button .kpn-top-navigation-menu-button-title:before {
    font-weight: 400;
    letter-spacing: 0;
}

.kpn-top-navigation-menu-item>.kpn-top-navigation-menu-button .kpn-top-navigation-menu-button-title:before {
    content: attr(data-inner-text);
    display: block;
    font-weight: 700;
    height: 0;
    letter-spacing: -.035em;
    overflow: hidden;
    visibility: hidden;
}

.kpn-top-navigation-menu-button-text:after {
    border-bottom: 2px solid #090;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    width: 100%;
}*/

/*

#footer
>old {
    height: 255px;
    background: url('https://www.overons.kpn/dist/assets/home-footer-bg-CQZ7hl2F.png') no-repeat;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: none;
}*/

#footer {
    padding: 20px;
}

#footer-content {
    background: linear-gradient(122deg, #8d0 1.82%, #00c300 85.59%);
    padding: 40px 20px;
    color: #fff;
    /* font-weight: 700; */
    border-radius: 20px;
    text-align: center;
}

#footer-content span {
    font-weight: 700;
}

body.samplefire---home #footer, body.kpn-samplefire---home---logged-in #footer {
    background-color: #fff;
}

/* Icons */

.ui-icon {
	font-family: ui-icon !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.si-icon {
	font-family: si-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.li-icon {
	font-family: li-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
}

.ui-accessibility:before {
    content: "\e9ee";
}

.ui-airplay:before {
    content: "\e9ef"
}

.ui-arrow-upright:before {
    content: "\e9f0"
}

.ui-envelop-diap:before {
    content: "\e9f1"
}

.ui-esim:before {
    content: "\e9f2"
}

.ui-face-id:before {
    content: "\e9f3"
}

.ui-face-recognition:before {
    content: "\e9f4"
}

.ui-forum:before {
    content: "\e9ed"
}

.ui-folder-diap:before {
    content: "\e9f5"
}

.ui-help-diap:before {
    content: "\e9f6"
}

.ui-kijkwijzer-14plus:before {
    content: "\e9f7"
}

.ui-kijkwijzer-18plus:before {
    content: "\e9f8"
}

.ui-next:before {
    content: "\e9f9"
}

.ui-notifications-diap:before {
    content: "\e9fa"
}

.ui-people:before {
    content: "\e9fb"
}

.ui-play-diap:before {
    content: "\e9fc"
}

.ui-previous:before {
    content: "\e9fd"
}

.ui-record-check:before {
    content: "\e9fe"
}

.ui-record-fail:before {
    content: "\e9ff"
}

.ui-remote:before {
    content: "\ea00"
}

.ui-settings-diap:before {
    content: "\ea01"
}

.ui-search-diap:before {
    content: "\ea02"
}

.ui-sleep-diap:before {
    content: "\ea03"
}

.ui-sleep:before {
    content: "\ea04"
}

.ui-source:before {
    content: "\ea05"
}

.ui-teletext:before {
    content: "\ea06"
}

.ui-thumbs-down:before {
    content: "\ea07"
}

.ui-thumbs-up:before {
    content: "\ea08"
}

.ui-tv-guide-diap:before {
    content: "\ea09"
}

.ui-speed:before {
    content: "\e9ec"
}

.ui-archive:before {
    content: "\e9e8"
}

.ui-add-diap:before {
    content: "\e9ea"
}

.ui-subtract:before {
    content: "\e9eb"
}

.ui-subtract-diap:before {
    content: "\e9e9"
}

.ui-paperclip:before {
    content: "\e9e7"
}

.ui-tablets-smartwatches:before {
    content: "\e9e6"
}

.ui-shopping-cart:before {
    content: "\e9e2";
}

.ui-picture-in-picture:before {
    content: "\e9df"
}

.ui-pin-diap:before {
    content: "\e9e0"
}

.ui-pin:before {
    content: "\e9e1"
}

.ui-subtitles:before {
    content: "\e9e2"
}

.ui-unpin-diap:before {
    content: "\e9e3"
}

.ui-unpin:before {
    content: "\e9e4"
}

.ui-hussel-diap:before {
    content: "\e9dd"
}

.ui-hussel:before {
    content: "\e9de"
}

.ui-environment:before {
    content: "\e9dc"
}

.ui-moon-diap:before {
    content: "\e9a6"
}

.ui-moon:before {
    content: "\e9d9"
}

.ui-sun-diap:before {
    content: "\e9da"
}

.ui-sun:before {
    content: "\e9db"
}

.ui-gaming:before {
    content: "\e9a4"
}

.ui-callcenter-agent:before {
    content: "\e9d3"
}

.ui-device-iot:before {
    content: "\e9d4"
}

.ui-graph-down:before {
    content: "\e9d5"
}

.ui-graph-up:before {
    content: "\e9d6"
}

.ui-truck:before {
    content: "\e9d7"
}

.ui-unlink:before {
    content: "\e9d8"
}

.ui-bookmark-diap:before {
    content: "\e9bf"
}

.ui-calendar-diap:before {
    content: "\e9c0"
}

.ui-carousel-diap:before {
    content: "\e9c1"
}

.ui-carousel:before {
    content: "\e9c2"
}

.ui-creditcard:before {
    content: "\e9c3"
}

.ui-document-diap:before {
    content: "\e9c4"
}

.ui-gridview-diap:before {
    content: "\e9c5"
}

.ui-heart-diap:before {
    content: "\e9c6"
}

.ui-hexagon-diap:before {
    content: "\e9c7"
}

.ui-hexagon:before {
    content: "\e9c8"
}

.ui-message-diap:before {
    content: "\e9c9"
}

.ui-navigation:before {
    content: "\e9ca"
}

.ui-planet:before {
    content: "\e9cb"
}

.ui-pricetag:before {
    content: "\e9cc"
}

.ui-qr:before {
    content: "\e9cd"
}

.ui-shop-diap:before {
    content: "\e9ce"
}

.ui-shopping-bag-diap:before {
    content: "\e9cf"
}

.ui-shopping-bag:before {
    content: "\e9d0"
}

.ui-soccer:before {
    content: "\e9d1"
}

.ui-wps:before {
    content: "\e9d2"
}

.ui-sort-down:before {
    content: "\e9a3"
}

.ui-sort-up:before {
    content: "\e9a5"
}

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

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

.si-arrow-down:before {
    content: "\e913"
}

.si-arrow-right:before {
    content: "\e914"
}

.si-arrow-up:before {
    content: "\e915"
}

.si-arrow-left:before {
    content: "\e917"
}

.si-arrow-upleft:before {
    content: "\e918"
}

.si-arrow-upright:before {
    content: "\e919"
}

.si-backspace:before {
    content: "\e91a"
}

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

.si-bookmark:before {
    content: "\e91d"
}

.si-call-ending:before {
    content: "\e91e"
}

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

.si-call-outgoing:before {
    content: "\e920"
}

.si-carrousel:before {
    content: "\e921"
}

.si-chromecast:before {
    content: "\e922"
}

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

.si-device-iot:before {
    content: "\e924"
}

.si-diamond:before {
    content: "\e9d5"
}

.si-external-link:before {
    content: "\e9e3"
}

.si-face-id:before {
    content: "\e9e4"
}

.si-face-recognition:before {
    content: "\e9e5"
}

.si-female:before {
    content: "\e9e6"
}

.si-fire:before {
    content: "\e9e7"
}

.si-folder:before {
    content: "\e9e8"
}

.si-flag:before {
    content: "\e9e9"
}

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

.si-forward:before {
    content: "\e9eb"
}

.si-graphview:before {
    content: "\e9ec"
}

.si-hash:before {
    content: "\e9ed"
}

.si-hexagon:before {
    content: "\e9ee"
}

.si-hide:before {
    content: "\e9ef"
}

.si-infinite:before {
    content: "\e9f0"
}

.si-library:before {
    content: "\e9f1"
}

.si-locate:before {
    content: "\e9f2"
}

.si-listview:before {
    content: "\e9f3"
}

.si-list:before {
    content: "\e9f4"
}

.si-lock-open:before {
    content: "\e9f5"
}

.si-logout:before {
    content: "\e9f6"
}

.si-male:before {
    content: "\e9f7"
}

.si-microphone-off:before {
    content: "\e9f8"
}

.si-microphone-on:before {
    content: "\e9f9"
}

.si-moon:before {
    content: "\e9fa"
}

.si-movie:before {
    content: "\e9fb"
}

.si-next:before {
    content: "\e9fc"
}

.si-notification-off:before {
    content: "\e9fd"
}

.si-notification-on:before {
    content: "\e9fe"
}

.si-notification:before {
    content: "\e9ff"
}

.si-paperclip:before {
    content: "\ea00"
}

.si-people:before {
    content: "\ea01"
}

.si-phone-ringing:before {
    content: "\ea02"
}

.si-pin:before {
    content: "\ea03"
}

.si-plus:before {
    content: "\ea04"
}

.si-play-disabled:before {
    content: "\ea05"
}

.si-planet:before {
    content: "\ea06"
}

.si-power:before {
    content: "\ea07"
}

.si-plusminus:before {
    content: "\ea08"
}

.si-previous:before {
    content: "\ea09"
}

.si-pricetag:before {
    content: "\ea0a"
}

.si-productcombi-internet-phonesvg:before {
    content: "\ea0b"
}

.si-qr:before {
    content: "\ea0c"
}

.si-record-check:before {
    content: "\ea0d"
}

.si-record-all:before {
    content: "\ea0e"
}

.si-record-disabled:before {
    content: "\ea0f"
}

.si-record-fail:before {
    content: "\ea10"
}

.si-record:before {
    content: "\ea11"
}

.si-recordings:before {
    content: "\ea12"
}

.si-refresh:before {
    content: "\ea13"
}

.si-renew:before {
    content: "\ea14"
}

.si-rewind:before {
    content: "\ea15"
}

.si-select:before {
    content: "\ea16"
}

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

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

.si-sleep:before {
    content: "\ea19"
}

.si-source:before {
    content: "\ea1a"
}

.si-subtitles:before {
    content: "\ea1b"
}

.si-teletext:before {
    content: "\ea1c"
}

.si-tickets:before {
    content: "\ea1d"
}

.si-tv-guide:before {
    content: "\ea1e"
}

.si-unpin:before {
    content: "\ea1f"
}

.si-video:before {
    content: "\ea20"
}

.si-volume-high:before {
    content: "\ea21"
}

.si-volume-low:before {
    content: "\ea22"
}

.si-volume-medium:before {
    content: "\ea23"
}

.si-volume-off:before {
    content: "\ea24"
}

.si-watchlist:before {
    content: "\ea25"
}

.si-cookie:before {
    content: "\e910"
}

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

.si-tablets-smartwatches:before {
    content: "\e90e"
}

.si-contract-default:before {
    content: "\e9e2"
}

.si-shopping-cart:before {
    content: "\e9e1"
}

.si-watch:before {
    content: "\e9dd"
}

.si-mobile-transfer:before {
    content: "\e9de"
}

.si-products:before {
    content: "\e9df"
}

.si-sim-to-esim:before {
    content: "\e9e0"
}

.si-usb-dongle:before {
    content: "\e9dc"
}

.si-connection-point:before {
    content: "\e9db"
}

.si-fritzbox-copper:before {
    content: "\e9d8"
}

.si-fritzbox-fiber:before {
    content: "\e9d9"
}

.si-fritzbox-xs4all:before {
    content: "\e9da"
}

.si-4k:before {
    content: "\e900"
}

.si-8k:before {
    content: "\e901"
}

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

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

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

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

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

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

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

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

.si-racecar:before {
    content: "\e9c9"
}

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

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

.si-experiabox12:before {
    content: "\e9cc"
}

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

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

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

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

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

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

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

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

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

.si-assemble:before {
    content: "\e908"
}

.si-audio:before {
    content: "\e909"
}

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

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

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

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

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

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

.si-business-extra-large:before {
    content: "\e927"
}

.si-business-large:before {
    content: "\e928"
}

.si-business-medium:before {
    content: "\e929"
}

.si-business-small:before {
    content: "\e92a"
}

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

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

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

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

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

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

.si-check:before {
    content: "\e931"
}

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

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

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

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

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

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

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

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

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

.si-delete:before {
    content: "\e93b"
}

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

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

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

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

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

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

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

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

.si-drink:before {
    content: "\e944"
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.si-game:before {
    content: "\e95c"
}

.si-gift:before {
    content: "\e95d"
}

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

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

.si-graduation-cap:before {
    content: "\e960"
}

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

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

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

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

.si-hd:before {
    content: "\e965"
}

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

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

.si-help:before {
    content: "\e968"
}

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

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

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

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

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

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

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

.si-ip-address:before {
    content: "\e970"
}

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

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

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

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

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

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

.si-marker-small:before {
    content: "\e977"
}

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

.si-mast:before {
    content: "\e979"
}

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

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

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

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

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

.si-mobile-locked:before {
    content: "\e97f"
}

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

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

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

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

.si-mobile:before {
    content: "\e984"
}

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

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

.si-network:before {
    content: "\e987"
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.si-playback:before {
    content: "\e99a"
}

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

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

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

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

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

.si-question:before {
    content: "\e9a0"
}

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

.si-remote:before {
    content: "\e9a2"
}

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

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

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

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

.si-send:before {
    content: "\e9a7";
    display: none;
}

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

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

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

.si-shoppingbasket:before {
    content: "\e9ab"
}

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

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

.si-simcard-pukcode1:before {
    content: "\e9ae"
}

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

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

.si-smarthome:before {
    content: "\e9b1"
}

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

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

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

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

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

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

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

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

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

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

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

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

.si-truck:before {
    content: "\e9be"
}

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

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

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

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

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

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

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

.si-wifi-disabled:before {
    content: "\e9d3"
}

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

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

.si-hussel:before {
    content: "\e9d7"
}

.li-kpn:before {
    content: "\e900"
}

.li-5g:before {
    content: "\e9d5"
}

.li-4g:before {
    content: "\e90e"
}

.li-android:before {
    content: "\e90f"
}

.li-apple-itunes:before {
    content: "\e910"
}

.li-apple:before {
    content: "\e911"
}

.li-cisco:before {
    content: "\e912"
}

.li-dropbox:before {
    content: "\e913"
}

.li-facebook-messenger:before {
    content: "\e914"
}

.li-facebook:before {
    content: "\e915"
}

.li-google-drive:before {
    content: "\e917"
}

.li-google-play:before {
    content: "\e918"
}

.li-ideal:before {
    content: "\e919"
}

.li-linkedin:before {
    content: "\e91a"
}

.li-microsoft-office:before {
    content: "\e91c"
}

.li-pinterest:before {
    content: "\e91d"
}

.li-skype:before {
    content: "\e91e"
}

.li-slack:before {
    content: "\e91f"
}

.li-soundcloud:before {
    content: "\e920"
}

.li-twitter:before {
    content: "\e921"
}

.li-whatsapp:before {
    content: "\e922"
}

.li-windows:before {
    content: "\e923"
}

.li-youtube:before {
    content: "\e924"
}

.li-things:before {
    content: "\e901"
}

.li-small-linkedin:before {
    content: "\e903"
}

.li-small-youtube:before {
    content: "\e904"
}

.li-small-whatsapp:before {
    content: "\e905"
}

.li-small-facebook:before {
    content: "\e939"
}

.li-small-twitter:before {
    content: "\e9b0"
}

.li-small-things:before {
    content: "\e902"
}



@media print {

    /* NO PRINT */
    .no-print, .no-print *, .hidden-div {
        display: none !important;
    }

    body {
      margin: 0mm 0mm 0mm 0mm !important;
      background: #fff !important;
    }

    .width-750, .width-80p, .width-100p {
        width: 100%;
        margin-top: 0px;
    }

    .gui-element-block {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-radius: 0px !important;
        border: 0px !important;
        padding: 0px;
    }

    .gui-element-block-wrapper {
        padding: 0px;
        margin: 30px;
    }

    td, tr {
        background-color: transparent !important;
        font-size: 14px;
    }

    th {
        font-size: 15px !important;
    }

    td:nth-child(n+5), th:nth-child(n+5) {
        display: none;
    }

    table {
        border: 1px solid #ddd;
        width: 100% !important;
    }

    .gui-element-block.width-100p.centered.top-space-20 {
        page-break-before: always;
        padding-top: 50px;
    }

}

/* MEDIUM SCREEN */

@media (max-width: 1200px) { /* Pas dit aan op basis van je behoeften */
    #button-container {
        flex-direction: column; /* Zet items onder elkaar in plaats van naast elkaar */
    }

    #button-container button {
        margin-right: 0; /* Verwijdert de marge rechts, aangezien dit niet nodig is in kolomlayout */
        text-align: center;
    }

    #button-container a {
        margin: 3px 0px;
        text-align: center;
    }

    section.banner {
        padding: 100px 10px;
    }

    section.banner img {
        display: none;
    }
}


/* SMALL SCREEN */

@media (max-width: 600px) { /* Pas dit aan op basis van je behoeften */
    #button-container {
        flex-direction: column; /* Zet items onder elkaar in plaats van naast elkaar */
    }

    #button-container button {
        margin-right: 0; /* Verwijdert de marge rechts, aangezien dit niet nodig is in kolomlayout */
        text-align: center;
    }

    #button-container a {
        margin: 3px 0px;
        text-align: center;
    }

    section.banner {
        padding: 100px 10px;
    }

    section.banner img {
        display: none;
    }
}