body {
	text-align: center !important;
	background: #434343 !important;
	font-family: 'Tajawal', sans-serif;
}

#startStopBtnTop,
#startStopBtnBtm {
	font-family: 'Track' !important;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	margin-left: auto !important;
	margin-right: auto !important;
	color: #ffffff;
	color: #fff;
	background-color: #1e7e34;
	border: 0.15em solid #218838;
	border-radius: 0.3em;
	box-sizing: border-box;
	width: 18rem;
	transition: all 0.3s;
	padding: .5rem 1rem;
	font-size: 1.5rem;
	line-height: 1.5;
	border-radius: .3rem;
	-webkit-appearance: button;
	appearance: button;
	text-transform: none;
	overflow: visible;
}

#startStopBtnTop:hover,
#startStopBtnBtm:hover {
	color: #fff;
	background-color: #218838;
	border-color: #1e7e34;
}

#startStopBtnTop.running,
#startStopBtnBtm.running {
	color: #fff;
	background-color: #dc3545;
	border-color: #bb2d3b;
}

#startStopBtnTop:before,
#startStopBtnBtm:before {
	content: "Start";
}

#startStopBtnTop.running:before,
#startStopBtnBtm.running:before {
	content: "Abort";
}

#test {
	margin-top: 2em;
	margin-bottom: 12em;
}

div.testArea {
	display: inline-block;
	width: 14em;
	height: 9em;
	position: relative;
	box-sizing: border-box;
}

div.testName {
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 100%;
	font-size: 1.4em;
	z-index: 9;
}

#progressBar {
	width: 90%;
	height: 3em;
	border-radius: .25em;
	position: relative;
	display: block;

}

#progress {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	transition: width 2s;
	border-radius: .25em;
	background-image:
		-webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%),
		-webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)),
		-webkit-linear-gradient(left, #3199BB, #F8991D);
	background-image:
		-moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%),
		-moz-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)),
		-moz-linear-gradient(left, #3199BB, #F8991D);
}

h3.text-muted {
	color: #3199BB !important;
}

.card {
	width: 18rem !important;
	border: #3199BB solid .5em !important;
	border-radius: .25rem !important;

}

.card-header:first-child {
	border-radius: 0 !important;
}

.card-body {
	background-color: #434343 !important;
	border: #3199BB solid .5em !important;
}

.card-header {
	font-family: 'Track' !important;
	background-color: #3199BB !important;
	border-bottom: #3199BB solid .25em !important;
}

h4 {
	color: #434343;
}

div.meterText {
	position: absolute;
	bottom: 1.5em;
	left: 0;
	width: 100%;
	font-size: 2.5em;
	z-index: 9;
	color: #3199BB !important;
}

#dlText,
#ulText,
#pingText,
#jitText,
#ipText {
	color: #F8991D;
}

h1.meterText:empty:before {
	content: "0.00";
}

div.unit {
	position: absolute;
	bottom: 2em;
	left: 0;
	width: 100%;
	z-index: 9;
}

div.testGroup {
	display: inline-block;
}

@media all and (max-width:65em) {
	body {
		font-size: 1.5vw;
	}
}

@media all and (max-width:40em) {
	body {
		font-size: 0.8em;
	}

	div.testGroup {
		display: block;
		margin: 0 auto;
	}
}