/* 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;
	background-color: #181818;
}

::-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;
	fill: #ffffff;
}

.openSpeedtestApp {

	height: 100vh;
	width: 100vw;
	display: none;
	overflow: hidden;
}

.main-Gaugebg {
	fill: none;
	stroke: #000000;
	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: #ffffff;
	font-family: Roboto-Medium, Roboto;
	font-weight: 500;
	text-anchor: middle;
}

.oDoLive-Status {
	font-size: 10px;
	fill: aliceblue;
	font-family: Roboto-Medium, Roboto;
	font-weight: 500;
	text-anchor: middle;
}

.uiBg {
	fill: #000000;
}

.progressbg {
	stroke: #202020;
	stroke-width: 8px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 400;
	stroke-dashoffset: 0;
}

.Cards {
	fill: #000000;
}

.Symbol {
	fill: url(#gradient);
}

.rtext {
	font-size: 12px;
	fill: #ffffff;
	font-family: Roboto-Medium, Roboto;
	font-weight: 500;
}

.rtextnum {
	font-size: 23px;
	fill: #ffffff;
	font-family: Roboto-Medium, Roboto;
	font-weight: 500;
	text-anchor: middle;
}

.rtextmbms {
	font-size: 12px;
	fill: #ffffff;
	font-family: Roboto-Medium, Roboto;
	font-weight: 500;
	text-anchor: middle;
}

.jitter-Mob {
	font-size: 9px;
	fill: #ffffff;
	font-family: Roboto-Medium, Roboto;
	font-weight: 500;
	text-anchor: middle;
}

.startButton {
	fill: url(#RadialGradient1);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	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(#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: #14b0fe;
	display: none;
}

#downSymbolDesk {
	fill: #14b0fe;
	display: none;
}

#upSymbolMob {
	fill: #14b0fe;
	display: none;
}

#downSymbolMob {
	fill: #14b0fe;
	display: none;
}

#ipMob {
	font-size: 15px;
	fill: aliceblue;
	font-family: Roboto-Medium, Roboto;
	font-weight: 500;
	text-anchor: middle;
	display: none;
}

#ipDesk {
	font-size: 15px;
	fill: aliceblue;
	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;
	}
}

#YourIP{
	fill: #2196f3;
}

img{
	border-radius: 50%;
}

#personLeft, #doc{
	fill: gray;
}