/* roboto-regular - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../../assets/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../../../assets/fonts/roboto-v30-latin-regular.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../../../assets/fonts/roboto-v30-latin-regular.woff') format('woff2'), /* Super Modern Browsers */
		 url('../../../assets/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('../../../assets/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../../../assets/fonts/roboto-v30-latin-regular.svg') 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('../../../assets/fonts/roboto-v30-latin-500.woff') format('woff2'), /* Super Modern Browsers */
		 url('../../../assets/fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
		 url('../../../assets/fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../../../assets/fonts/roboto-v30-latin-500.svg') format('svg'); /* Legacy iOS */
  }
  
  body {
    margin: 0px;
    padding: 0px;
    display: block; 
   
  }
  
  .darkmode{
    margin-bottom: -15px;
    fill: #7c7c7c;
    padding-top: 16px;
    display: none;
    cursor: pointer;
  
  }
  #daymode{
    
  }
  .darkmode:hover{
    fill: #404040;
  }

  
  .ConnectError{
  display: none;
  }
   
  
  .openSpeedtestApp{
      height: 100vh;
       width: 100vw;
       display: none;
  
  
   }
  .main-Gaugebg{
      fill: none;
      stroke: rgb(231, 231, 232);
      stroke-linecap: round;
      stroke-linejoin:round;
      stroke-width: 22px;
      stroke-dasharray: 681;
      }
   .main-GaugeBlue{
       fill: none;
      stroke: url(https://open.cachefly.net/assets/css/widget-app.css?v=1.4#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: #d2d1d2;
      font-family: Roboto-Medium, Roboto;
      font-weight: 500;
      text-anchor:middle;
  }
  .uiBg{
      fill: #d2d1d2;
  }
  .progressbg{
  
  stroke: rgb(231, 231, 232);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
  }
  .Cards{
  fill: #f2f2f2;	
  }
  .Symbol{
  fill : url(https://open.cachefly.net/assets/css/widget-app.css?v=1.4#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(https://open.cachefly.net/assets/css/widget-app.css?v=1.4#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: #56c4fb;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
   
   
  }
  .progressElmstart{
  stroke: #56c4fb;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
  display: block;
  }
  .Startsettings{
  fill: url(https://open.cachefly.net/assets/css/widget-app.css?v=1.4#RadialGradient1);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  cursor:pointer;
  pointer-events:visible; 
  opacity: 0.10;
  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(https://open.cachefly.net/assets/css/widget-app.css?v=1.4#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: #14b0fe;
  display: none;
  }
  #downSymbolDesk{
  fill: #14b0fe;
  display: none;
  }
  #upSymbolMob{
  fill: #14b0fe;
  display: none;
  } 
  #downSymbolMob{
  fill: #14b0fe;
  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.0) }
  }
  
  @keyframes sk-bouncedelay {
    0%, 80%, 100% { 
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% { 
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
  }
  
  
  .Mobile,.Desktop{visibility: hidden;}
  .Mobile,.Desktop{width: 100%; height: 100%;}
  
  
  @media only screen and (min-width: 500px){
      .Mobile { visibility: hidden; }
     .Desktop { visibility: visible; }
  }
  
  @media only screen and (max-width: 499px) {
    .spinner {
      top: 42vh;
      left: 42vw;
    }
    .Mobile { visibility: visible; }
    .Desktop { visibility: hidden; }
  }