@import url('https://fonts.cdnfonts.com/css/museo-sans-rounded');
@import url('https://fonts.cdnfonts.com/css/roboto');

body {
  font-family: sans-serif;
  margin: 0 auto;
  display:flex;
}

.speedtest {
  display: block;
  border-radius: 8px;
  width: 732px;
  height: 386px;
  background-color: #274856;
  position: relative;
  left:0;
  top:0;
}

.launchScreen {
  display: inline-block;
}

.launchScreen .title {
  font-family: 'Museo Sans Rounded', sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #ffffff;
  top: 25px;
  left: 25px;
  position: absolute;
}

.launchScreen .checklist {
  background-color: #ffffff;
  box-shadow: 0px 8px 15px #00000029;
  border-radius: 8px;
  max-width: 326px;
  top: 150px;
  left: 25px;
  height: 108px;
  position: absolute;
  padding: 50px 0px 20px 20px;
}
.launchScreen .checklist table {
  width: 100%;
}

.launchScreen .checklist td {
  vertical-align: middle;
}

.launchScreen .checklist .check {
  background: transparent url('assets/check_round.svg') 0% 0% no-repeat padding-box;
  width: 24px;
  height: 24px;
}

.launchScreen .checklist .text {
  font-family: 'Museo Sans Rounded', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 14px;
  height: 52px;
  line-height: 22px;
  padding-inline-start: 7px;
}



.launchScreen .illus-ethernet {
  background: transparent url('assets/illustration-ethernet.svg') 0% 0% no-repeat padding-box;
  top: 73px;
  left: 124px;
  width: 146px;
  height: 126px;
  position: absolute;
}

.launchScreen .caption {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #ffffff;
  top: 348px;
  left: 25px;
  position: absolute;
}

.launchScreen .caption > a {
  color: #ffffff;
}


.launchScreen .loader {
  display: none;
  background: transparent url('assets/loader.svg') 100% 100% no-repeat;
  background-size: contain;
  top: 65px;
  left: 422px;
  width: 256px;
  height: 256px;
  position: absolute;
}

.launchScreen .button {
  display: inline-block;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  line-height: 256px;
  width: 256px;
  height: 256px;
  border: 4px solid #ffffff;
  position: absolute;
  top: 65px;
  left: 422px;
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: bolder;
  cursor: pointer;
}

.launchScreen .error {
  display: none;
  color: #ffffff;
  text-align: center;
  line-height: 256px;
  width: 256px;
  height: 256px;
  position: absolute;
  top: 65px;
  left: 422px;
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: bolder;
}

.testScreen {
  display: none;
}


.testScreen .loader {
  background: transparent url('assets/loader.svg') 100% 100% no-repeat;
  background-size: contain;
  top: 162px;
  left: 266px;
  width: 200px;
  height: 200px;
  position: absolute;
}
.testScreen .fusee {
  display: none;
  border-radius: 50%;
  background: transparent url('assets/fusee.gif') 100% 100% no-repeat;
  background-size: contain;
  top: 162px;
  left: 266px;
  width: 200px;
  height: 200px;
  position: absolute;
}

.testScreen .test {
  left: 308px;
  top: 24px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: -0.45px;
  color: #ffffff;
  position: absolute;
}

.testScreen .value {
  left: 308px;
  top: 54px;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  color: #ffffff;
  position: absolute;
}

.skeleton-box {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: #6A808A;
}
.skeleton-box::after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   transform: translateX(-100%);
   background-image: linear-gradient(
           90deg,
           rgba(255,255,255 , 0) 0,
           rgba(255,255,255, 0.2) 20%,
           rgba(255,255,255, 0.5) 60%,
           rgba(255,255,255, 0)
   );
   animation: shimmer 2s infinite;
   content: '';
}

@keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
}


.testScreen .unit {
  left: 308px;
  top: 119px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #ffffff;
  position: absolute;
}

.resultScreen {
  display: none;
}

.resultScreen .kpis {
  position: absolute;
  top: 0;
  left: 0;
  width: 732px;
  height: 162px;
}

.resultScreen .kpis .downLabel {
  left: 32px;
  top: 24px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: -0.45px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .downValue {
  left: 32px;
  top: 54px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 57px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .downUnit {
  left: 32px;
  top: 119px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .rect {
  left: 429px;
  top: 27px;
  width: 271px;
  height: 108px;
  background: #0000004D 0% 0% no-repeat padding-box;
  border-radius: 8px;
  position: absolute;
}

.resultScreen .kpis .upLabel {
  left: 16px;
  top: 16px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: -0.45px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .upValue {
  left: 16px;
  top: 36px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 36px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .upUnit {
  left: 16px;
  top: 79px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .latLabel {
  left: 154px;
  top: 16px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: -0.45px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .latValue {
  left: 154px;
  top: 36px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 36px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .latUnit {
  left: 154px;
  top: 79px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .jitLabel {
  left: 224px;
  top: 16px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: -0.45px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .jitValue {
  left: 224px;
  top: 36px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-size: 36px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .kpis .jitUnit {
  left: 224px;
  top: 79px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #ffffff;
  position: absolute;
}

.resultScreen .usages {
  position: absolute;
  top: 162px;
  left: 0;
  width: 732px;
  height: 224px;
  background-color: #f4f4f4;
}

.resultScreen .usages .icon {
  position: absolute;
  background: transparent url('assets/user.svg') 0 0 no-repeat;
  background-size: 80%;
  width: 24px;
  height: 24px;
}


.resultScreen .usages .title {
  font-family: 'Museo Sans Rounded', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 14px;
  top: 24px;
  position: absolute;
  left: 24px;
}

.resultScreen .usages .label {
  font-size: 14px;
  position: absolute;
}

.resultScreen .usages .icon > .score {
  top: 10px;
  left: 10px;
  width: 12px;
  height: 12px;
  background: #D4007A 0 0 no-repeat padding-box;
  border-radius: 7px;
  position: absolute;
  color: #ffffff;
  font-family: 'Museo Sans Rounded', sans-serif;
  font-weight: 300;
  font-size: 10px;
  padding: 1px;
  text-align: center;
}

.resultScreen .usages .game > .icon {
  top: 104px;
  left: 24px;
}

.resultScreen .usages .game > .label {
  top: 107px;
  left: 57px;
}

.resultScreen .usages .smartphone > .icon {
  top: 64px;
  left: 251px;
}

.resultScreen .usages .smartphone > .label {
  top: 67px;
  left: 284px;
}

.resultScreen .usages .iot > .icon {
  top: 64px;
  left: 478px;
}

.resultScreen .usages .iot > .label {
  top: 67px;
  left: 511px;
}

.resultScreen .usages .streaming > .icon {
  top: 64px;
  left: 24px;
}

.resultScreen .usages .streaming > .label {
  top: 67px;
  left: 57px;
}

.resultScreen .usages .webcam > .icon {
  top: 104px;
  left: 251px;
}

.resultScreen .usages .webcam > .label {
  top: 107px;
  left: 284px;
}

.resultScreen .usages .tv4k > .icon {
  top: 104px;
  left: 478px;
}

.resultScreen .usages .tv4k > .label {
  top: 107px;
  left: 511px;
}

.resultScreen .usages .restart-button {
  background: #7DB200 0 0 no-repeat padding-box;
  border-radius: 22px;
  top: 156px;
  left: 24px;
  width: 191px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Museo Sans Rounded', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #ffffff;
  position: absolute;
  cursor: pointer;
}

/* Responsive mode */
@media screen and (max-width: 731px) {
  .speedtest {
    width: 328px;
    height: 669px;
  }
  
  .launchScreen .title {
    top: 24px;
    left: 16px;
  }
  
  .launchScreen .checklist {
    max-width: 284px;
    top: 144px;
    left: 16px;
    height: 114px;
    padding-left: 12px;
  }
  
  .launchScreen .checklist table {
    width:96%;
  }
  
  .launchScreen .illus-ethernet {
    top: 66px;
    left: 91px;
  }
  
  .launchScreen .caption {
    top: 338px;
    left: 16px;
  }
  
  
  .launchScreen .loader {
    top: 389px;
    left: 36px;
  }
  
  .launchScreen .button {
    top: 389px;
    left: 36px;
  }
  
  .launchScreen .error {
    top: 389px;
    left: 36px;
  }
  
  .testScreen .loader {
    top: 304px;
    left: 64px;
  }
  .testScreen .fusee {
    top: 304px;
    left: 64px;
  }
  
  .testScreen .test {
    left: 111px;
    top: 26px;
  }
  
  .testScreen .value {
    left: 111px;
    top: 56px;
  }
  
  .testScreen .unit {
    left: 111px;
    top: 120px;
  }
  
  .resultScreen .kpis {
    width: 328px;
    height: 295px;
  }
  
  .resultScreen .kpis .downLabel {
    left: 24px;
    top: 26px;
  }
  
  .resultScreen .kpis .downValue {
    left: 24px;
    top: 51px;
  }
  
  .resultScreen .kpis .downUnit {
    left: 24px;
    top: 118px;
  }
  
  .resultScreen .kpis .rect {
    left: 16px;
    top: 154px;
    width: 296px;
    height: 109px;
  }
  
  .resultScreen .usages {
    top: 295px;
    left: 0;
    width: 328px;
    height: 374px;
  }
  
  .resultScreen .usages .game > .icon {
    top: 184px;
    left: 24px;
  }
  
  .resultScreen .usages .game > .label {
    top: 187px;
    left: 57px;
  }
  
  .resultScreen .usages .smartphone > .icon {
    top: 104px;
    left: 24px;
  }
  
  .resultScreen .usages .smartphone > .label {
    top: 107px;
    left: 57px;
  }
  
  .resultScreen .usages .iot > .icon {
    top: 144px;
    left: 24px;
  }
  
  .resultScreen .usages .iot > .label {
    top: 147px;
    left: 57px;
  }
  
  .resultScreen .usages .streaming > .icon {
    top: 64px;
    left: 24px;
  }
  
  .resultScreen .usages .streaming > .label {
    top: 67px;
    left: 57px;
  }
  
  .resultScreen .usages .webcam > .icon {
    top: 224px;
    left: 24px;
  }
  
  .resultScreen .usages .webcam > .label {
    top: 227px;
    left: 57px;
  }
  
  .resultScreen .usages .tv4k > .icon {
    top: 264px;
    left: 24px;
  }
  
  .resultScreen .usages .tv4k > .label {
    top: 267px;
    left: 57px;
  }
  
  .resultScreen .usages .restart-button {
    top: 306px;
    left: 24px;
    width: 191px;
    height: 44px;
  }
}