	html,
	body {
	    display: flex;
	    flex-direction: column;
	    border: none;
	    padding: 0;
	    margin: 0;
	    color: #eee;
	    text-align: center;
	    font-family: "Exo 2", "Roboto", sans-serif;
	    background-color: #1d1d1d;
	}

	h1 {
	    color: #404040;
	}

	#startStopBtn {
	    display: inline-block;
	    margin: 0 auto;
	    color: #fff;
	    background: linear-gradient(90deg, #199630 5.81%, #CED503 94.41%);
	    border-radius: 0.3em;
	    transition: all 0.3s;
	    box-sizing: border-box;
	    width: 8em;
	    height: 3em;
	    line-height: 2.7em;
	    cursor: pointer;
	    font-weight: 700;
	    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(0, 0, 0, 0.1);
	}

	#startStopBtn:hover {
	    box-shadow: 0 0 2em rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.1);
	}

	#startStopBtn.running {
	    background: linear-gradient(90deg, #CED503 5.81%, #199630 94.41%);
	    ;
	    color: #FFFFFF;
	}

	#startStopBtn:before {
	    content: "Старт";
	}

	#startStopBtn.running:before {
	    content: "Стоп";
	}

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

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

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

	div.meterText {
	    position: absolute;
	    bottom: 1.55em;
	    left: 0;
	    width: 100%;
	    font-size: 2.5em;
	    z-index: 9;
	}

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

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

	div.testArea canvas {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 1;
	}

	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;
	    }
	}

	#progressBar {
	    width: 90%;
	    height: 20px;
	    background-color: #EEEEEE;
	    position: relative;
	    display: block;
	    margin: 0 auto;
	    margin-bottom: 2em;
	    border-radius: 5px;
	    overflow: hidden;
	}

	#progress {
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 100%;
	    width: 0%;
	    transition: width 2s;
	    ---background-color: #f00;
	    background: linear-gradient(90deg, #199630 5.81%, #CED503 94.41%);
	}

	body {
	    width: 100vw;
	    height: 100vh;
	}

	.header {
	    display: flex;
	    color: #fff;
	    padding: 10px 20px;
	    ---border-bottom: 4px solid #199630;
	    align-items: center;
	    margin-bottom: 20px;
	    background: linear-gradient(90deg, #CED503A0, #199630A0);
	}

	.header img {
	    /*-webkit-filter: drop-shadow( 0 0 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 0 0 2px rgba(0, 0, 0, .7)); */
	}

	.header h1 {
	    color: #eee;
	    text-shadow: 0 0 2px black;
	    font-size: 3vh;
	}