.touchgrid .canvas {
  margin: 15px auto 0px auto;
}
.touchgrid .canvas td {
  padding: 5px;
  padding:auto;
}
.touchgrid .canvas tr:first-child td {
  padding-top: 0px;
}
.touchgrid .canvas tr:last-child td {
  padding-bottom: 0px;
}
.touchgrid .canvas tr td:first-child {
  padding-left: 0px;
}
.touchgrid .canvas tr td:last-child {
  padding-right: 0px;
}

.touchgrid input[type="radio"],
.touchgrid input[type="checkbox"] { /*display: none*/;position:absolute;left:-9999px }

.touchgrid label {
  display: block;
  margin: 0px auto;
  min-height: 25px;
  line-height: 25px;
  padding: 10px;
  border-radius: 4px;
  background-color: #ebebeb;
  color: #333333;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  min-width: 30px;
  max-width: 400px;
  transition:background-color .35s ease-in-out;
}

.touchgrid label .touchspan {
  line-height: 1.2;
  vertical-align: middle;
  display: inline-block;
}

.touchgrid label:hover,.touchgrid label:hover td,
.touchgrid label:active,.touchgrid label:active td {
  background-color: #9f9f9f;
  color: #ffffff;
}

.touchgrid .checked label {
  background-color: #1799AD !important;
  color: #ffffff !important;
}

.touchgrid .checked label:hover,.touchgrid .checked label:hover td,
.touchgrid .checked label:active,.touchgrid .checked label:active td {
  background-color: #1799AD !important;
  color: #b2dbe8 !important;
}

@media screen and (max-width: 480px) {
	input[type="text"], textarea {
		width: 100%;
		margin: 0px;
		box-sizing: border-box;
	}	
	.touchgrid .canvas td {
		padding: 2px;
	}
	.touchgrid label {
		max-width: 270px;
	}
}

label td {
	padding: 0px !important;
}

@media screen and (max-width: 320px) {
	input[type="text"], textarea {
		width: 100%;
		margin: 0px;
		box-sizing: border-box;
	}
	.touchgrid .canvas td {
		padding: 2px;
	}
	.touchgrid label {
		max-width: 240px;
	}
}