html, body {
   height: 100%;
   position: relative;
}

body {
   font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   margin: 0;
   overflow: hidden;
   padding: 20px 0 0 20px;
}
body.inFrame {
   padding: 0;
}
.page-header {
   border-bottom: 4px solid #001D41;
   height: 68px;
   left: 0;
   padding: 0 0 16px 20px;
   position: absolute;
   right: 0;
   top: 20px;
   z-index: 99;
}
.page-header .logo-container {
   height: 68px;
   position: absolute;
   width: 160px;
}
.page-header .pdfButton {
   position: absolute;
   right: 8px;
   top: 32px;
}
.page-header .pdfButton a {
   display: none;
   background-color: #001D41;
   border: 1px solid #001D41;
   border-radius: 8px;
   color: #ffffff;
   cursor: pointer;
   padding: 4px 12px;
   text-decoration: none;
}
.page-header .tab {
   background-color: #c0c0c0;
   border-radius: 10px 10px 0 0;
   color: #383838;
   cursor: pointer;
   height: 26px;
   padding: 2px 0 0 0;
   position: absolute;
   text-align: center;
   top: 56px;
   width: 112px;
}
.page-header .tab.active {
   background-color: #001D41;
   color: #ffffff;
}
.page-header #tabh {
   left: 20px;
}
.page-header #tabs {
   left: 134px;
}
.page-header #tabd {
   left: 248px;
}
.page-header #tabi {
   left: 362px;
}

.header, .slidecontainer {
   display: table;
}
.header {
   border-bottom: 2px solid #001D41;
   margin: 0 0 12px 0;
   padding: 0 0 12px 0;
   position: relative;
   top: 100px;
   width: 100%;
}
body.inFrame .header {
   padding: 0;
   top: 0;
}
.header h1 {
   font-size: 1.6rem;
   margin: 0 0 1em 0;
   white-space: nowrap;
}
.header .col.left {
   vertical-align: top;
}
.header .col.right {
   height: 120px;
   padding: 0 0 0 199px;
   position: relative;
}

body.inFrame .header .col.right {
  padding: 0 0 0 172px;
}

.header #benchmark {
/*   border-bottom: 2px solid #001D41;*/
   display: none;
   margin-top: -80px;
}
.header #density {
   font-size: 0.8rem;
   left: 28px;
   position: absolute;
   top: 8px;
}
body.inFrame .header #density {
   top: 48px;
}

.bodywrap {
   bottom: 0;
   left: 20px;
   margin: 20px auto;
   min-width: 66%;
   max-width: 96%;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
   right: 0;
   top: 248px;
}
body.inFrame .bodywrap {
   left: 0;
   margin: 0;
   max-width: 100%;
   top: 148px;
}

.info {
   cursor: help;
}

.slidecontainer {
   border-bottom: 1px dotted #383838;
   margin: 0 0 16px 0;
   max-width: 95%;
   padding: 0 0 16px 0;
   position: relative;
   width: auto;
}
.slidecontainer.last {
   border-bottom: 0px none;
   margin: 0 0 48px 0;
}

.col {
   display: table-cell;
   margin: 0;
}
.col.left {
   height: 48px;
   min-width: 496px;
   max-width: 496px;
   padding: 0 16px 0 0;
   position: relative;
   vertical-align: middle;
   width: 496px;
}
.col.right {
   width: auto;
   max-width: 640px;
}

.sliderwrap {
   min-width: 400px;
   padding: 20px 0 0 0;
   position: relative;
}
.sliderscale {
   font-size: 0.66em;
   position: absolute;
   top: 0;
   width: auto;
   max-width: 190px;
}
.sliderscale.min {
   left: 0;
}
.sliderscale.max {
   right: 0;
}
.sliderscale.middle {
   border-right: 1px dotted #001D41;
   height: 1.5em;
   left:50%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  min-width: 400px;
  height: 25px;
  background: #d3d3d3;
  border-radius: 3px;
  outline: none;
  opacity: 0.7;
  position: relative;
  -webkit-transition: .2s;
  transition: opacity .2s;
  z-index: 5;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #001D41;
  cursor: pointer;
  -webkit-box-shadow: 4px 4px 8px 0px rgba(89,88,89,1);
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #001D41;
  cursor: pointer;
  -moz-box-shadow: 4px 4px 8px 0px rgba(89,88,89,1);
}

.bubble {
   background: #c0c0ff;
   color: #000000;
   font-size: 0.66rem;
   height: 0.8rem;
   padding: 4px;
   position: absolute;
   border: 1px dotted #383838;
   border-radius: 0.8rem;
   left: 40px;
   text-align: center;
   top: 12px;
   transform: translateX(-50%);
   vertical-align: middle;
   width: 0.8rem;
   z-index:6;
}

.gscore {
   width: 100%;
   min-width: 400px;
/* Balken:        * /
   height: 16px;
   min-height: 16px;
   max-height: 16px;
/* Pointer:       */
   height: 48px;
   min-height: 48px;
   max-height: 48px;
   position: absolute;
   left: 0;
   top: 16px;
   z-index: 1;
/* -------------- */
}

.pdfDialog {
   background-color: #fdfdf0;
   border: 2px solid #001D41;
   border-radius: 8px;
   box-shadow: 8px 8px 24px #484848;
   clear: both;
   display: none;
   height: 240px;
   left: 50%;
   margin: -120px auto auto -210px;
   padding: 24px;
   position: fixed;
   top: 50%;
   width: 420px;
   z-index: 333;
}
body.inFrame .pdfDialog {
   top: 136px;
}
.pdfDialog .buttonWrap {
   margin-top: 32px;
}
.pdfDialog button {
   background-color: #001D41;
   border: 1px solid #001D41;
   border-radius: 8px;
   cursor: pointer;
   color: #ffffff;
/*   min-width: 64px;*/
   padding: 4px 12px;
   text-decoration: none;
   width: 4em;
}
.pdfDialog .left {
   float: left;
   margin-left: 16px;
}
.pdfDialog .right {
   float: right;
   margin-right: 16px;
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
   .col.right {
      max-width: 440px;
   }
   .header h1 {
      white-space: normal;
   }
   .header .col.right {
      padding: 0 0 0 79px;
   }
}
@media only screen and (min-width: 641px) and (max-width: 1024px) {
   body {
      font-size: 0.8rem;
      font-weight: 400;
      line-height: 1.3;
      padding: 12px 0 0 12px;
   }
   .slidecontainer {
      border-bottom: 1px dotted #383838;
      margin: 0 0 12px 0;
      padding: 0 0 12px 0;
   }
   .slidecontainer.last {
      border-bottom: 0px none;
      margin: 0 0 24px 0;
   }
   .col.left {
      height: 48px;
      min-width: 360px;
      max-width: 360px;
      padding: 0 10px 0 0;
      vertical-align: middle;
      width: 360px;
   }
   .header h1 {
      white-space: normal;
   }
   .header .col.right {
      padding: 0 0 0 154px;
   }
   .header #density {
      left: 18px;
   }
}
@media only screen and (min-width: 641px) and (max-width: 800px) {
   .col.right {
      max-width: 380px;
   }
   .header .col.right {
      padding: 0 0 0 28px;
   }
   .header #benchmark {
      border-bottom: 0 none;
      margin-top: -82px;
   }
   .sliderwrap, .slider, .gscore {
      min-width: 300px;
   }
}
@media only screen and (max-width: 640px) {
   .page-header #tabh {
      left: 10px;
      width: 90px;
   }
   .page-header #tabs {
      left: 102px;
      width: 90px;
   }
   .page-header #tabd {
      left: 194px;
      width: 68px;
   }
   .page-header #tabi {
      left: 264px;
      width: 102px;
   }
   .header, .slidecontainer {
      display: block;
   }
   .header {
      height: 160px;
   }
   .header h1 {
      margin: 0;
      white-space: normal;
   }
   .header .col.left {
      margin: 0;
   }
   .header .col.right {
      padding: 0 0 0 36px;
   }
   .header #density {
      left: 12px;
      top: 108px;
   }
   body.inFrame .header #density {
     top: 128px;
   }
   .header #benchmark {
      border-bottom: 0 none;
      margin: -115px 0 0 -40px;
   }
   .bodywrap {
      top: 308px;
      margin: 0 auto;
   }
   body.inFrame .bodywrap {
      top: 168px;
   }
   .slidecontainer {
      padding: 12px 0;
      width: 96%;
   }
   .col {
      display: block;
      height: auto;
      width: 100%;
   }
   .col.left {
      height: auto;
      margin: 0 0 12px 0;
      min-width: 96%;
      max-width: 100%;
      width: 100%;
   }
   .col-right {
      max-width: 100%;
   }
   .sliderwrap, .slider {
      min-width: 240px;
   }
   .sliderwrap {
      padding: 20px 10px 0 0;
   }
   .sliderscale.max {
      right: 10px;
   }
}
@media only screen and (max-width: 380px) {
   .header {
      height: 180px;
   }
   .header .col.right {
      padding: 0;
   }
   .header #density {
      left: 12px;
      top: 88px;
   }
   body.inFrame .header #density {
      left: 0;
      top: 124px;
   }
   .header #benchmark {
      border-bottom: 0 none;
      margin: -96px 0 0 -56px;
   }
   body.inFrame .bodywrap {
      top: 184px;
   }
}
.iframewrap {
   bottom: 0;
   height: auto;
   left: 20px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   right: 0;
   top: 108px;
   visibility: hidden;
   width: auto;
   transition: opacity 1s ease-out, visibility 2s;
}
.iframewrap.active {
   opacity: 1;
   visibility: visible;
   transition: opacity 2s ease-in, visibility 3s;
}
.iframewrap iframe {
   border: 0 none;
   height: 100%;
   margin: 0;
   padding: 0;
   width: 100%
}