/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('/css/fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('/css/fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/css/fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/css/fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: auto;
  src: url('/css/fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('/css/fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/css/fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/css/fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

body {
  margin: 0px;
  padding: 0px;
  display: block; 
 
}
 
.ConnectError{
display: none;
}
 

.openSpeedtestApp{
	height: 100vh;
 	width: 100vw;
 	display: none;


 }
.main-Guagebg{
	fill: none;
	stroke: rgb(231, 231, 232);
    stroke-linecap: round;
    stroke-linejoin:round;
    stroke-width: 22px;
    stroke-dasharray: 681;
    }
 .main-GuageBlue{
 	fill: none;
	stroke: url(#gradient);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 22px;
	stroke-dasharray: 681;
	stroke-opacity: 0;
 }
.main-GuageWhite{
	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(#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;
}
.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(#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(#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: fixed;
    z-index: 999;
    margin-top: 48vh;
    margin-left: 49.5vw;
}

.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 : 321px) {
			.Mobile { visibility: hidden; }
			.Desktop { visibility: visible; }
}
 

@media only screen
and (max-width : 320px) {
			.Mobile { visibility: visible; }
			.Desktop { visibility: hidden; }
			 
}
 

@media only screen
and (min-device-width : 600px)
and (max-device-width : 960px)
and (orientation : portrait) {
			.Mobile { visibility: visible; }
			.Desktop { visibility: hidden; }

			 
}
 
 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

			.Mobile { visibility: hidden; }
			.Desktop { visibility: visible; }

			 
}
 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
			.Mobile { visibility: visible; }
			.Desktop { visibility: hidden; }
}

@media only screen
and (min-width : 1224px) {
			.Mobile { visibility: hidden; }
			.Desktop { visibility: visible; }
}

@media only screen
and (min-width : 1824px) {
			.Mobile { visibility: hidden; }
			.Desktop { visibility: visible; }
}


@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
			.Mobile { visibility: hidden; }
			.Desktop { visibility: visible; }
}
 

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
			.Mobile { visibility: visible; }
			.Desktop { visibility: hidden; }
}