@font-face {
   font-family: KPN-Metric;
   src: url("../KPN-Metric/KPNMetricWeb-Regular.eot");
   src: local("‚ò∫"), url("../KPN-Metric/KPNMetricWeb-Regular.woff") format("woff"), url("../KPN-Metric/KPNMetricWeb-Regular.ttf") format("truetype");
   font-weight: normal;
}

@font-face {
   font-family: KPN-Metric;
   src: url("../KPN-Metric/KPNMetricWeb-Bold.eot");
   src: local("‚ò∫"), url("../KPN-Metric/KPNMetricWeb-Bold.woff") format("woff"), url("../KPN-Metric/KPNMetricWeb-Bold.ttf") format("truetype");
   font-weight: 900;
}

@font-face {
   font-family: KPN-Metric;
   src: url("../KPN-Metric/KPNMetricWeb-SemiBold.eot");
   src: local("‚ò∫"), url("../KPN-Metric/KPNMetricWeb-SemiBold.woff") format("woff"), url("../KPN-Metric/KPNMetricWeb-SemiBold.ttf") format("truetype");
   font-weight: bold;
}

@font-face {
   font-family: KPN-Metric-Light;
   src: url("../KPN-Metric/KPNMetricWeb-Light.eot");
   src: local("‚ò∫"), url("../KPN-Metric/KPNMetricWeb-Light.woff") format("woff"), url("../KPN-Metric/KPNMetricWeb-Light.ttf") format("truetype");
   font-weight: normal;
}

strong {
   font-weight: bold;
}

/*
 * Font-icons
 * --------------------------------------------------
 */
@font-face {
   font-family: "KPN-Icons";
   src: url("../KPN-Icons/KPN-Icons.eot");
   src: url("../KPN-Icons/KPN-Icons.eot?#iefix") format("embedded-opentype"), url("../KPN-Icons/KPN-Icons.woff") format("woff"), url("../KPN-Icons/KPN-Icons.ttf") format("truetype"), url("../KPN-Icons/KPN-Icons.svg#KPN-Sans-Icons") format("svg");
   font-weight: normal;
   font-style: normal;
}

.kpn-icon {
   position: relative;
   top: 1px;
   display: inline-block;
   font-family: "KPN-Icons";
   font-style: normal;
   font-weight: 400;
   line-height: 1;
}

/*
 * END Font-icons
 * --------------------------------------------------
 */

.login-page .list-unstyled {
   margin-left: 0;
}

.login-page .login-remember {
   padding-left: 0;
}

body {
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   line-height: 1.42857;
   color: #333333;
   background-color: transparent;
}

input,
button,
select,
textarea {
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: inherit;
   line-height: inherit;
   margin: 0;
}

a {
   color: #0099ff;
   text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
   font-family: "KPN-Metric", verdana, arial, helvetica, sans-serif;
}

h1 {
   color: #009900;
   margin-bottom: 4px;
   font-size: 36px;
   font-weight: 900;
   margin-top: 10px;
}

h2 {
   color: #009900;
   font-size: 21px;
   font-weight: bolder;
}

h3 {
   line-height: 30px;
   font-weight: bold;
}

h4 {
   line-height: 30px;
}

.text-primary {
   color: #0099ff;
}

.text-gray {
   color: #808080;
}

.page-header {
   padding-bottom: 9px;
   margin: 40px 0 20px;
   border-bottom: none;
}

label {
   display: inline-block;
   margin-bottom: 5px;
   font-weight: normal;
}

.btn {
   font-family: "KPN-Metric", verdana, arial, helvetica, sans-serif;
   padding: 10px 30px;
   font-size: 16px;
   line-height: 1;
   border-radius: 3px;
   height: 36px;
}

   .btn.btn-login {
      color: #fff;
      background-color: #009900;
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: 14px;
   }
   .btn.btn-login[disabled] {
      background-color: #E1E1E1;
      color: #000000;
   }

#footer {
   background-color: rgba(0, 0, 0, 0.7);
   width: 100%;
   bottom: 0;
   position: fixed;
}

   #footer ul {
      padding: 0;
   }

      #footer ul li {
         float: left;
         list-style: none;
         margin: 5px 50px 5px 0;
         padding: 0;
      }

         #footer ul li a {
            color: #E5E5E5;
         }

.btn-default {
   color: #333333;
   background-color: #ffffff;
}

   .btn-default:hover,
   .btn-default:focus,
   .btn-default:active,
   .btn-default.active,
   .open .dropdown-toggle.btn-default {
      color: #333333;
      background-color: #ebebeb;
   }

   .btn-default.disabled,
   .btn-default[disabled],
   fieldset[disabled] .btn-default,
   .btn-default.disabled:hover,
   .btn-default[disabled]:hover,
   fieldset[disabled] .btn-default:hover,
   .btn-default.disabled:focus,
   .btn-default[disabled]:focus,
   fieldset[disabled] .btn-default:focus,
   .btn-default.disabled:active,
   .btn-default[disabled]:active,
   fieldset[disabled] .btn-default:active,
   .btn-default.disabled.active,
   .btn-default[disabled].active,
   fieldset[disabled] .btn-default.active {
      background-color: #ffffff;
   }

.btn-primary {
   color: #ffffff;
   background-color: #4444bb;
}

   .btn-primary:hover,
   .btn-primary:focus,
   .btn-primary:active,
   .btn-primary.active,
   .open .dropdown-toggle.btn-primary {
      color: #ffffff;
      background-color: #000099;
      border-color: #285e8e;
   }

   .btn-primary.disabled,
   .btn-primary[disabled],
   fieldset[disabled] .btn-primary,
   .btn-primary.disabled:hover,
   .btn-primary[disabled]:hover,
   fieldset[disabled] .btn-primary:hover,
   .btn-primary.disabled:focus,
   .btn-primary[disabled]:focus,
   fieldset[disabled] .btn-primary:focus,
   .btn-primary.disabled:active,
   .btn-primary[disabled]:active,
   fieldset[disabled] .btn-primary:active,
   .btn-primary.disabled.active,
   .btn-primary[disabled].active,
   fieldset[disabled] .btn-primary.active {
      background-color: #b2b2b2;
      border-color: #357ebd;
   }

   .btn-primary .badge {
      color: #0099ff;
      background-color: #fff;
   }

.btn-link {
   color: #0099ff;
   font-weight: normal;
   cursor: pointer;
   border-radius: 0;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
   color: #ffffff;
   text-decoration: none;
   outline: 0;
   background-color: #0099ff;
}

.navbar {
   display: none;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
   background-color: #0099ff;
   border-color: #0099ff;
   cursor: default;
}

.label {
   display: inline;
   padding: .2em .6em .3em;
   font-size: 12px;
   font-weight: bold;
   line-height: 1;
   color: #ffffff;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: .25em;
}

.label-primary {
   background-color: #0099ff;
}

a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
   color: #0099ff;
   background-color: #ffffff;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
   border-color: #0099ff;
}

.progress-bar {
   float: left;
   width: 0%;
   height: 100%;
   font-size: 12px;
   line-height: 20px;
   color: #ffffff;
   text-align: center;
   background-color: #0099ff;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-transition: width 0.6s ease;
   transition: width 0.6s ease;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
   z-index: 2;
   color: #ffffff;
   background-color: #0099ff;
   border-color: #0099ff;
}

.panel {
   box-shadow: none;
   margin-bottom: 20px;
   background-color: #ffffff;
   border: 0px solid transparent;
   border-radius: 0px;
}

.panel-danger {
   color: red;
   font-style: italic;
}

.panel-body {
   padding: 15px 0px;
}

.panel-heading {
   padding: 10px 0px;
   border-bottom: 1px solid transparent;
}

.panel-default > .panel-heading {
   color: #009900;
   background-color: #ffffff;
   border-color: #cccccc;
}

.panel-primary {
   border-color: #0099ff;
}

   .panel-primary > .panel-heading {
      color: #ffffff;
      background-color: #0099ff;
      border-color: #cccccc;
   }

      .panel-primary > .panel-heading + .panel-collapse .panel-body {
         border-top-color: #0099ff;
      }

   .panel-primary > .panel-footer + .panel-collapse .panel-body {
      border-bottom-color: #0099ff;
   }

.button-blue, .button-gray, .button-grey, .button-orange {
   box-sizing: content-box;
   display: inline-block;
   text-decoration: none;
   font-size: 16px;
   padding: 12px 28px;
   border-radius: 3px;
   height: auto;
   line-height: 19px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
   text-align: center;
}

input.button-blue, input.button-gray, input.button-grey, input.button-orange {
   line-height: 17px;
}

.button-blue:hover, .button-gray:hover, .button-grey:hover, .button-orange:hover {
   text-decoration: none;
}

.button-blue {
   background: #0099ff; /* Old Browsers */
   background: -moz-linear-gradient(top, #50b9ff 0%, #0099ff 100%); /* FF3.6+ */
   background: -webkit-gradient(left top, left bottom, color-stop(0%, #50b9ff), color-stop(100%, #0099ff)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #50b9ff 0%, #0099ff 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #50b9ff 0%, #0099ff 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #50b9ff 0%, #0099ff 100%); /* IE 10+ */
   background: linear-gradient(to bottom, #50b9ff 0%, #0099ff 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50b9ff', endColorstr='#0099ff', GradientType=0 ); /* IE6-9 */
   border: 2px solid rgb(255, 255, 255);
   border: 2px solid rgba(255, 255, 255, 0.5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   color: #FFF;
}

   .button-blue:hover {
      background: #0099ff;
      -webkit-background-clip: padding-box; /* for Safari */
      background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   }

.button-gray, .button-grey {
   background: #fff; /* Old Browsers */
   background: -moz-linear-gradient(top, #fff 0%, #f2f2f2 100%); /* FF3.6+ */
   background: -webkit-gradient(left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #fff 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #fff 0%, #f2f2f2 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #fff 0%, #f2f2f2 100%); /* IE 10+ */
   background: linear-gradient(to bottom, #fff 0%, #f2f2f2 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0 ); /* IE6-9 */
   color: #09f;
   border: 2px solid rgb(0, 153, 255);
   border: 2px solid rgba(0, 153, 255, 0.5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   color: #333;
}

   .button-gray:hover, .button-grey:hover {
      background: #fff;
      -webkit-background-clip: padding-box; /* for Safari */
      background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   }

.button-orange {
   background: #f90; /* Old Browsers */
   background: -moz-linear-gradient(top, #ffb544 0%, #f90 100%); /* FF3.6+ */
   background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffb544), color-stop(100%, #f90)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #ffb544 0%, #f90 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #ffb544 0%, #f90 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #ffb544 0%, #f90 100%); /* IE 10+ */
   background: linear-gradient(to bottom, #ffb544 0%, #f90 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb544', endColorstr='#ff9900', GradientType=0 ); /* IE6-9 */
   color: #fff;
   border: 2px solid rgb(255, 255, 255);
   border: 2px solid rgba(255, 255, 255, 0.5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

   .button-orange:hover {
      background: #f90;
      -webkit-background-clip: padding-box; /* for Safari */
      background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   }

.js-on .button-blue.inactive, .js-on .button-gray.inactive, .js-on .button-grey.inactive, .js-on .button-orange.inactive,
.js-on .button-blue.inactive:hover, .js-on .button-gray.inactive:hover, .js-on .button-grey.inactive:hover, .js-on .button-orange.inactive:hover {
   background: #f1f1f1; /* Old Browsers */
   background: -moz-linear-gradient(top, #f1f1f1 0%, #e7e6e6 100%); /* FF3.6+ */
   background: -webkit-gradient(left top, left bottom, color-stop(0%, #f1f1f1), color-stop(100%, #e7e6e6)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f1f1f1 0%, #e7e6e6 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f1f1f1 0%, #e7e6e6 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f1f1f1 0%, #e7e6e6 100%); /* IE 10+ */
   background: linear-gradient(to bottom, #f1f1f1 0%, #e7e6e6 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e7e6e6', GradientType=0 ); /* IE6-9 */
   color: #c1c1c1;
   border: 2px solid rgb(255, 255, 255);
   border: 2px solid rgba(255, 255, 255, 0.5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   cursor: auto;
}

@media screen and (max-width: 768px) {
   body {
      margin-top: 0;
   }
}