@import 'https://fonts.googleapis.com/css?family=Kanit';
:root {
	--tpablue: #034ea2;
    --tpagold: #d09b2c;
	--teal: #008080;
}
html { position: relative; min-height: 100%; background-image: url("https://www.tpif.or.th/consult/safety/safety-01.jpg"); background-size: cover; background-attachment: fixed; }
body { margin: auto; font-family: sans-serif !important; }
h1,h2,h3,h4 { font-family: 'Kanit', sans-serif !important; font-weight: bold; } 
/* #safetyHeader, */footer, #myGridView th { font-family: 'Kanit', sans-serif !important; } 
h5 { font-weight: bold; }

.container { background-color: rgba(255, 255, 255, 1); padding: 15px; margin: 2.5% 10%; }
#form1 { text-align: center; }
#form1 table { margin: 0 auto; }
#form1 h1 { font-weight: bold; font-size: 28px; color: var(--teal); text-align: center; }
#safetyHeader { font-size: 0.8em; text-align: center; }
#safetyHeader img { width: auto; height:200px; }
#safetyHeader span { display: block; }
#myGridView th { padding: 0.5em 1em; font-size: 0.8em; }
footer { margin-top: 2em; font-size: 0.9em; color: #777777; }
footer hr { margin: 2em 0; border: 1px solid #EEEEEE; width: 95%; }

#cert-header { width: 100%; margin-bottom: 1.7em !important; text-align: left !important; }
#cert-header td:first-child { width: 42px; vertical-align: top; padding-right: 0.5em; }
#cert-header td { font-size: 12px; color: #000080; text-align: left !important; }
#cert-header td img { width: 42px; height: 55px; }
#cert-header td strong { font-size: 14px; }
#cert-title { margin-bottom: 2em; }
#cert-title h1 { font-size: 28px; color: var(--teal); text-align: center; }
#cert-title h1 span { display: block; }
#cert-body { clear: both; }
#cert-body th, #cert-body td { padding-bottom: 1em; vertical-align: middle; }
#cert-body th { text-align: right; padding-right: 0.5em; }
#cert-body td { text-align: left; padding-left: 0.5em; }

@media (min-width: 769px) {
	body { margin: auto; }
}

@media (min-width: 992px) {
	.container { border-radius: 2em; }
	#form1 h1 { font-size: 37px; }
	.form-block:nth-child(2) { margin: 0 2.5em; }
	#myGridView { margin: 2.7em 0 !important; border-radius: 0.4em; }
}
@media (max-width: 991px) {
	.container { margin: 1.5% 1.5%; }
}
@media (max-width: 768px) {
	.container { margin: 0.5% 0.5%; }
	#form1 h1 { text-align: left; }
	#form1 #cert-title h1 { text-align: center; }
	#cert-header td strong span { display: block; }
	#cert-header td { font-size: 10px; }
	#cert-header td strong { font-size: 12px; }
	#cert-body th, #cert-body td, #cert-body td span { font-size: 18px !important;}
	.form-block { display: block; text-align: left; margin-bottom: 1em; }
	#myGridView { margin: 0.7em 0 !important; }
	#myGridView th:first-child, #myGridView td:first-child, #myGridView th:nth-child(5), #myGridView th:nth-child(6), #myGridView td:nth-child(5), #myGridView td:nth-child(6) { display: none; }
}
@media (max-width: 480px) {
	body { margin: auto; }
}
@media print {
	html { background: none; }
	#form1 h1, #cert-title h1 { color: black; }
	.form-block:nth-child(3) { display: none; }
}

#myGridView td a, .btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	  border-top-color: transparent;
	  border-right-color: transparent;
	  border-bottom-color: transparent;
	  border-left-color: transparent;
	border-radius: 4px;
	font-family: 'Kanit', sans-serif !important;
  }
#myGridView td a { text-decoration: none; color: #ffffff; background-color: #3366CC; border-color: #003399; }

#form1 input[type=text] {
	padding: 3px 6px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
#form1 input[type=text]:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}

/* --- --- --- */
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
  }
   .btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
  }
  .btn-warning {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #eea236;
  }
  .btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
  }
  .btn-success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
  }
  .lblError
  {
	  font-family: MS Sans Serif;
	  font-size: 18px;
	  color: #FF0000;
	  font-weight: bold;
	  text-align:left;
  }