@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,400;1,600&display=swap');
      html,
		body {
			border: none;
			padding: 0;
	/*		margin: 0; */
			background: #ffffff;
			color: #202020;
		}

		body {
		/*	text-align: center; */
			font-family: "Roboto", sans-serif;
		}

		h1 {
			color: #404040;
		}

		#startStopBtn {
         text-align: center;
			display: block;
			margin: 0 auto;
			/* color: #6060AA; */
			/* background-color: rgba(0, 0, 0, 0); */
			
			

			background-color: #f89417;
			color: white;
			border: 1px solid #f89417;
			border-radius: 5px;

			/* border: 0.15em solid #6060FF; */
			/* border-radius: 0.3em; */
			transition: all 0.3s;
			box-sizing: border-box;
			/* width: 16em; */
			/* width: 100%; */
			padding: 3px 45px;
			text-transform: uppercase;
			/* height: 3em; */
			line-height: 2.7em;
			cursor: pointer;
			box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(0, 0, 0, 0.1);
			top: 2em;
		}

		#startStopBtn:hover {
			box-shadow: 0 0 2em rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.1);
			background-color: white;
			/* color: blue; */
			color: #f89417

		}

		#startStopBtn.running {
			background-color: #FF3030;
			border-color: #FF6060;
			color: #FFFFFF;
		}

		#startStopBtn.disabled {
			content: "Пожалуйста подождите";
			background-color: #f7773f;
			border-color: #f7773f;
			color: #FFFFFF;
			cursor: not-allowed;
			pointer-events: none;
		}

		#startStopBtn.disabled:before {
			content: "Пожалуйста подождите";
		}

		#startStopBtn:before {
			/* content: "Начать проверку интернет"; */
			content: "Начать проверку";
		}

		#startStopBtn.running:before {
			content: "Отменить проверку";
		}

		#test {
			margin-top: 1em;
			margin-bottom: 1em;
		}

		div.testArea {
			display: inline-block;
			width: 14em;
			height: 6em;
			position: relative;
			box-sizing: border-box;
		}
		
		div.SplyncArea {
			display: inline-block;
			top: 1em;
			width: 350px;
			height: 350px;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
		}

		div.SplyncName {
			position: absolute;
			top: 1em;
			left: 0;
			width: 100%;
			font-size: 1.2em;
			z-index: 9;
		}		
		
		div.SplyncParam {
			position: absolute;
			top: 2.2em;
			left: 0;
			width: 100%;
			font-size: 1.2em;
			z-index: 9;
		}	
		
		div.SplyncUnit {
			position: absolute;
			top: 19em;
			left: 0;
			width: 100%;
			font-size: 1.2em;
			z-index: 9;
		}

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

		.meterText {
			position: absolute;
			top: 0.8em;
			left: 0;
			width: 100%;
			font-size: 2em;
			z-index: 9;
		}
		
		div.testName {
			position: absolute;
			top: 0em;
			left: 0;
			width: 100%;
			font-size: 1.2em;
			z-index: 9;
		}
		
		div.ipArea {
			position: absolute;
			top: 1;
			left: 0;
			width: 100%;
			font-size: 1em;
			z-index: 9;
		}
		
		

		#dlText {
			/* color: #6060AA; */
		}

		#dlText_vpn {
			color: #6060AA;
		}

		#ulText {
			/* color: #309030; */
		}

		#ulText_vpn {
			color: #309030;
		}

		#pingText,
		#jitText {
			/* color: #AA6060; */
      }
      
      .ping-text, .jit-text {
			color: #AA6060;
      }

		.meterText:empty:before {
			color: #505050 !important;
			content: "0.00";
		}

		div.unit {
			position: absolute;
			top: 4em;
			bottom: 0em;
			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;
			}
      } */

.main-container {
  margin: 0 auto; 
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  /* width: 100%; */
  /* max-width: 1000px; */
  max-width: 860px;
  width: 100%;
}

.main-header {
  text-align: center;
  margin-top: 0px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

.container {
  /* display: auto; */
  display: flex;
  width: 100%;
  /* flex-wrap: wrap; */
  /* flex-direction: column; */
  /* max-width: 390px; */
  /* min-width: 39%; */
  margin-bottom: 10px;
  align-content: center;
}

.header {
	display: flex;
	/* flex-wrap: wrap; */
	align-items: center;
	/* margin-bottom: 10px; */
	width: 100%;
}

.left {
  /* margin-bottom: 20px; */
  /* padding: 0px 10px 0px; */
  padding: 0;
 /* border: 2px solid red; */
  border-radius: 10px;
  /* width: 35%; */
  width: 350px;
  min-width: 350px;
  /* width: 48%; */
}

.left:last-child {
  margin-bottom: 0;
}

.left--1 {
	order: 1;
	/* margin-bottom: 20px; */
}

.left--2 {
  order: 3;
  margin-bottom: 20px;
}

.left--3 {
	order: 5;
}

/*
.right {
   margin-left: 20px;
   padding: 20px;
   border: 2px solid blue; 
   border-radius: 10px;
}
*/

.right {
	flex-grow: 1;
	/* width: 52%; */
	/* width: 450px; */
	margin-left: 20px;
	padding: 0px 10px 0px;

  	min-width: 260px;
 }
 
.right--1 {
	order: 2;
	/* text-align: center; */
	/* margin-bottom: 20px; */
	/* vertical-align: middle;
	text-align: left; */
	/* text-align: left; */
}

.right--2 {
	order: 4;
	margin-bottom: 20px;
}
 
.right--3 {
	order: 6;
	background-color: whitesmoke;
}


.results {
  /* margin-top: 20px; */
  width: 100%;
  min-width: 260px;
}

.right--borderless {
  border: none;
  padding: 0;
}

.with-border {
	border: 2px solid blue;
	border-color: blue;
	border-radius: 10px;
	padding: 20px;
 }

.data {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 7px;
   list-style: none;
   background-color: silver;
   border-radius: 10px;
}
 
.data__item {
	/* margin-top: 10px; */
	/* padding: 30px 2px; */
	/* width: 47.9%; */
	width: 50%;
	/* background-color: whitesmoke; */
}
 
.data__item:nth-child(even) {
	/* margin-left: auto; */
	/* margin-left: 5px; */
}
 
.data__header {
   margin: 0;
   margin-bottom: 20px;
   text-align: center;
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   font-size: x-large;
   width: 100%;
}
 
.data-item-wrapper {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 15px 0;
	border: 3px solid silver;
	/* background-color: whitesmoke; */
	background-color: #b0dc82;

	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.data__value {
   margin: 0;
   margin-bottom: 10px;
   padding: 0;
   font-size: 35px;
}
.data__value:empty:before {
   color: #505050 !important;
   content: "0.00";
}

.data__measure {
   font-family: 'Open Sans', sans-serif;
   /* font-weight: 400; */
}


.centerr {
   text-align: center;
   margin-top: 5px;
   margin-bottom: 10px;
}

.mbottom {
   margin-bottom: 5px;
}

.mtop {
   margin-top: 10px;
}

.ins-item{
	/* margin-bottom: 10px; */
	margin-top: 10px;
}

.disclaimer {
   font-style: italic;
   font-weight: 400;
}

.diagjour {
   background-color: whitesmoke;
   border-radius: 5px;
   border: 2px solid silver;
   padding-left: 2px;
   margin-top: 10px;
}

.unimp {
   background-color: whitesmoke;
   border-radius: 5px;
   font-size: smaller;
}

.silver-border {
	border: 10px solid silver;
	border-radius: 10px;
	padding: 10px;
	/* height: 100%; */
}


.test-button {
   font-size: 14px;
   text-transform: uppercase;
   background-color: blue;
   color: white;
   border: 1px solid blue;
   border-radius: 5px;
   padding: 15px 25px;
   margin-bottom: 20px;
}
 
.test-button:hover,
.test-button:focus {
   background-color: white;
   color: blue;
}


.logo {
	/* width: 350px; */
	max-width: 350px;
	/* min-width: 300px; */
	/* min-width: 350px; */
	/* width: 350px; */
	/* height: auto; */
	margin-right: 20px;
}

.sname {
	/* vertical-align: middle; */
	/* padding: 0; */
	/* text-align: right; */
	margin-left: auto;
	text-align: center;
	min-width: 300px;
	/* margin-left: 20px; */
}

/* img {
	width: 100%;
} */

.footer {
	text-align: center;
	padding: 0px 40px;
	color: silver;
	font-size: small;
}

.good {
	/* color: green; */
	background-color: #b0dc82;
}

.bad {
	background-color: #fcd84e;
}

@media (max-width: 730px) {
  
	.container {
		flex-wrap: wrap;
	}

	.header {
		flex-wrap: wrap;
	}

	.footer {
		padding: 0px 15px;
	}

	.logo {
		margin: 0 auto;
	}

	.sname {
		margin: 10px auto;
	}

	.left {
	  width: 100%;
	  min-width: 300px;
     margin-bottom: 10px;
	}
	
	.left--1 {
		/* order: 2; */
		order: 1;
		/* margin: 0; */
	}
   
   .left--2 {
     order: 3;
	}
	
	.left--3 {
		order: 4;
	}

	.right--1 {
		order: 2;
	}

		
   
   .right {
     width: 100%;
	  margin: 0;
	  /* min-width: 300px; */
     /* margin-bottom: 10px; */
   }
   
   /* .right--2 {
     order: 4;
   } */
   
   .q-button {
     width: 100%;
	}
	
	#startStopBtn {
		/* width: 100%; */
	}

.data__item:nth-child(even) {
	/* margin-left: auto; */
	/* margin-left: 5px; */
}

}