/* roboto-regular - latin */
@font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("..fonts/roboto-v30-latin-regular.eot"); /* IE9 Compat Modes */
      src: local(""),
        url("../fonts/roboto-v30-latin-regular.eot?#iefix")
          format("embedded-opentype"),
        /* IE6-IE8 */ url("../fonts/roboto-v30-latin-regular.woff2")
          format("woff2"),
        /* Super Modern Browsers */
          url("../fonts/roboto-v30-latin-regular.woff") format("woff"),
        /* Modern Browsers */ url("../fonts/roboto-v30-latin-regular.ttf")
          format("truetype"),
        /* Safari, Android, iOS */
          url("../fonts/roboto-v30-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
    }
    /* roboto-500 - latin */
    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("assets/fonts/roboto-v30-latin-500.eot"); /* IE9 Compat Modes */
      src: local(""),
        url("assets/fonts/roboto-v30-latin-500.eot?#iefix")
          format("embedded-opentype"),
        /* IE6-IE8 */ url("../fonts/roboto-v30-latin-500.woff2")
          format("woff2"),
        /* Super Modern Browsers */ url("../fonts/roboto-v30-latin-500.woff")
          format("woff"),
        /* Modern Browsers */ url("../fonts/roboto-v30-latin-500.ttf")
          format("truetype"),
        /* Safari, Android, iOS */
          url("../fonts/roboto-v30-latin-500.svg#Roboto") format("svg"); /* Legacy iOS */
    }
    
    body {
      margin: 0px;
      padding: 0px;
      display: block;
    }
    
    ::-webkit-scrollbar {
      display: none;
    }
    html {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
    .Credits {
    color: rgb(125 119 119);
    text-align: center;
    font-size:14px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    }
    .Credits a {
      text-decoration: none;
      color: rgb(113, 113, 113);
    }
    .Credits a:hover {
    color: #14b0fe;
    }
    
    .ConnectError {
      display: none;
    
    }
    
    .openSpeedtestApp {
    
      height: 100vh;
      width: 100vw;
      display: none;
      overflow: hidden;
    }
    .main-Gaugebg {
      fill: none;
      /* stroke: rgb(231, 231, 232); */
      stroke: rgb(246, 246, 247);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 22px;
      stroke-dasharray: 681;
    }
    .main-GaugeBlue {
      fill: none;
      stroke: url(#gradient);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 22px;
      stroke-dasharray: 681;
      stroke-opacity: 0;
    }
    .main-GaugeWhite {
      fill: none;
      stroke: rgb(255, 255, 255);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 15px;
      stroke-dasharray: 0, 681;
      stroke-dashoffset: 1;
      stroke-opacity: 0;
    }
    .oDo-Meter {
      font-size: 16.633283615112305px;
      fill: gray;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
    }
    .oDoLive-Speed {
      font-size: 28px;
      fill: #201e1e;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
    }
    
    .oDoLive-Status {
      font-size: 10px;
      fill: #D2D2D6;
      /* fill: #F6F6F7; */
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
    }
    .uiBg {
      fill: #D2D2D6;
      /* fill: #F6F6F7; */
    }
    .progressbg {
      stroke: rgb(246, 246, 247);
      stroke-width: 8px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 400;
      stroke-dashoffset: 0;
    }
    .Cards {
      fill: #F6F6F7;
    }
    .Symbol {
      fill: url(#gradient);
    }
    .rtext {
      font-size: 12px;
      fill: #333;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
    }
    .rtextnum {
      font-size: 23px;
      fill: #201e1e;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
    }
    .rtextmbms {
      font-size: 12px;
      fill: #5f5f5f;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
    }
    .jitter-Mob {
      font-size: 9px;
      fill: #5f5f5f;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
    }
    .startButton {
      fill: url(#RadialGradient1);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      pointer-events: visible;
    }
    .buttonTxt {
      font-size: 40px;
      fill: #ffffff;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
    }
    
    .intro-Progress {
      stroke: #1024CC;
      stroke-width: 8px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 400;
      stroke-dashoffset: 0;
    }
    .progressElmstart {
      stroke: #1024CC;
      stroke-width: 8px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 400;
      stroke-dashoffset: 0;
      display: block;
    }
    .Startsettings {
      fill: url(#RadialGradient1);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      pointer-events: visible;
      opacity: 0.1;
      transition: opacity 1s ease-in-out;
    }
    .Startsettings:hover {
      opacity: 1;
    }
    
    .progressbg {
      stroke: rgb(231, 231, 232);
      stroke-width: 8px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 400;
      stroke-dashoffset: 0;
    }
    .deskStart {
      fill: none;
      stroke: rgb(231, 231, 232);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 22px;
      stroke-dasharray: 681;
      stroke: url(#gradient);
    }
    #UI-Desk {
      display: none;
    }
    #UI-Mob {
      display: none;
    }
    .oDoTop-Speed {
      font-size: 16.96px;
      fill: gray;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: end;
    }
    #upSymbolDesk {
      fill: #1024CC;
      display: none;
    }
    #downSymbolDesk {
      fill: #1024CC;
      display: none;
    }
    #upSymbolMob {
      fill: #1024CC;
      display: none;
    }
    #downSymbolMob {
      fill: #1024CC;
      display: none;
    }
    
    #ipMob {
      font-size: 15px;
      fill: #201e1e;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
      display: none;
    }
    #ipDesk {
      font-size: 15px;
      fill: #201e1e;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor: middle;
      display: none;
    }
    
    .spinner {
      position: absolute;
      z-index: 999;
      top: 50vh;
      left: 50vw;
      text-align: center;
    }
    
    .spinner > div {
      width: 20px;
      height: 20px;
      background-color: #2196f3;
    
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    
    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    
    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    
    @-webkit-keyframes sk-bouncedelay {
      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
      }
      40% {
        -webkit-transform: scale(1);
      }
    }
    
    @keyframes sk-bouncedelay {
      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    
    .darkmode {
      margin-bottom: -15px;
      fill: #75757a99;
      padding-top: 16px;
      display: none;
      cursor: pointer;
      margin-right: 30px;
    }
    #daymode {
      margin-right: 40px;
    }
    .darkmode:hover {
      fill: #000000;
    }
    
    .Mobile,
    .Desktop {
      visibility: hidden;
      width: 100vw;
      height: 100vh;
    }
    
    @media only screen and (orientation: landscape) {
      .Mobile {
        visibility: hidden;
      }
      .Desktop {
        visibility: visible;
      }
    }
    
    @media only screen and (orientation: portrait) {
      .spinner {
        top: 42vh;
        left: 42vw;
      }
      .Mobile {
        visibility: visible;
      }
      .Desktop {
        visibility: hidden;
      }
    }
    @media only screen and (max-width: 300px) {
      .Credits{
        display: none;
      }
    }