.clear {
	clear: both;
}
body {
	font-family: arial, sans-serif;
	margin: 0;
	padding: 15px 0 100px;
	padding-left: 1%;
	padding-right: 1%;
}

h1 {
	font-size: 20px;
	margin-bottom: 15px;
	margin-left:  15px;
	margin-right: 15px;
	color: #ccc;
	float: left;
	width: 45%;
}

button {
	background: #eee;
	border: none;
	padding: 8px 15px;
	border-radius: 3px;
	font-size: 11px;
}
button:hover {
	cursor: pointer;
}

.c-datacenter {
	width: 45%;
	max-width: 700px;
	padding: 15px;
	float: left;
	background: #f1f1f1;
	border-radius: 5px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 5px;
	margin-bottom: 30px;
	font-size:12px;
	display: flex;
}

h3 {
	font-size: 14px;
	margin-top: 0;
	display: inline-block;
	width: 30%;
}

h4 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 13px;
}

.c-datacenter__column {
	display: inline-block;
	padding: 0 15px;
/*	border-left: 1px solid #bbb;*/
	width: 33%;
	line-height:1.4;
}

.c-datacenter__item {
	border: 1px solid #bbb;
	border-bottom: none;
}
.c-datacenter__item:last-child {
	border-bottom: 1px solid #bbb;
}
.c-datacenter__key {
	display: inline-block;
	min-width: 60px;
	border-right: 1px solid #bbb;
	padding: 3px 10px;
}
.c-datacenter__general .c-datacenter__key{
	min-width:100px;
}


.c-datacenter__value {
	display: inline-block;
	width: 20px;
}

.c-testform {
	display: inline-block;
	clear: left;
	width: 45%;
	max-width: 700px;
	float: left;
	margin-right: 15px;
	margin-left: 15px;
}
.c-testform span {
	display: inline-block;
	padding: 10px 0 0 15px;
	font-size: 12px;
	color: #ccc;
}


.c-testform__container {
	width: 100%;
	display: flex; 
	padding: 15px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}


.c-buttons {
	clear: left;	
	width: 100%;
	display: block;
	float: left;
	color: #eee;
}
.c-buttons__container {
	width: 45%;
	max-width: 700px;	
	display: inline-block;
	float: left;
	padding: 0 0 15px 0;
	margin: 0 15px 20px;
}


	.c-testform__header {
		font-size: 12px; 
		padding-bottom: 5px;
	}
	.c-testform__item {
		display: inline-block;
		text-align: center;
		flex: 0 1 auto;
		width: 11.6%;
		margin-bottom: 0px;
	}
	.c-testform__input input {
		display: inline-block;
		width: 65%;
		height: 25px;
		border: 1px solid #ccc;
		text-align: center;
		border-radius: 3px;
	}

	.c-testform__button {
		clear: both;
		text-align: center;
		margin-bottom: 20px;
		font-size: 11px;
		color: #ccc;
		text-align: left;
	}


.c-tables__container {
	clear: both;
}

	.c-matrix__wrapper {
		padding: 15px 5px;
/*		border-bottom: 1px solid #eee;*/
		border-top: 1px solid #eee;
		font-size: 12px;
		color: #ccc;
	}
	.c-matrix {
		width: 45%;
		max-width: 700px;
		display: inline-block;
		float: left;
		margin-right: 15px;
		margin-left: 15px;
		overflow: hidden;
		border-radius: 3px;
	}

	.c-matrix__header {
		height: 35px;
		font-weight: bold;
		background: #eee;
	}

	.c-matrix__row {
		display: flex;
		border-bottom: 1px solid #eee;
	}
	.c-matrix__col {
		display: inline-block;
		width: auto;
		flex-grow:1;
		flex-basis: 0;
		text-align: center;
		padding: 10px;
		line-height:1.4;
		font-size: 11px;
		border-right: 1px solid #eee;
	}
	.c-matrix__col:first-child {
		border-left: 1px solid #eee;
	}

	.c-matrix__header:first-child {
		border-left: none;
	}

	.c-matrix__header .c-matrix__col {
		border-right: 1px solid #fff;
		border-left: none;
	}

	.c-matrix__header .c-matrix__col:last-child {
		border-right: none;
	}

	#basicmatrix {
		margin-bottom: 30px;
	}

	#button0{margin-top: 15px;}
	#button1{margin-right: 15px;}
	#button2{display: none;}
	#button3{display: none;margin-right: 15px;}
	#button4{display: none;margin-right: 15px;}
	#button5{display: none;margin-right: 15px;}
	#button6{display: none;float: right}


	@media(max-width:991px) {
		.c-datacenter,
		.c-testform,
		.c-matrix,
		.c-buttons__container {
			width: 95%;
			float: left;
		}
		.c-datacenter {
			clear: both;
			max-width: 500px;
			margin-top: 30px
		}		
	}