/* CSS Document */

form {
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#customers {
font-family: 'Sarabun', sans-serif;
  border-collapse: collapse;
  width: 98%;
}
#customers td, #customers th {
  border: 0px solid #ddd;
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 5px;
  padding-bottom: 10px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #F7F7F7;}
#customers th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

.button {
border-radius: 1px;
    background-color: #F0F0F0;
    border: none;
    color: #787878;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 2px 2px;
    cursor: pointer;
	width:110px;
	height:25px;
	font-family: 'Kanit', sans-serif;
}
.button:hover {
	background-color:#FFB198;
}
.button:active {
	position:relative;
	top:1px;
}

.buttonx {
border-radius: 3px;
    background-color: #FF0000;
    border: none;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    cursor: pointer;
	width:150px;
	height:30px;
	font-family: 'Kanit', sans-serif;
}
.buttonx:hover {
	background-color:#95B5F9;
}
.buttonx:active {
	position:relative;
	top:1px;
}

.diplo {
border-radius: 3px;
    background-color: #35CA5B;
    border: none;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    cursor: pointer;
	width:150px;
	height:30px;
	font-family: 'Kanit', sans-serif;
}
.diplo:hover {
	background-color:#95B5F9;
}
.diplo:active {
	position:relative;
	top:1px;
}

.face {
border-radius: 3px;
    background-color: #3C66EC;
    border: none;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    cursor: pointer;
	width:90px;
	height:30px;
	font-family: 'Kanit', sans-serif;
}
.face:hover {
	background-color:#95B5F9;
}
.face:active {
	position:relative;
	top:1px;
}

.circle{
    height: 60px;
    width: 60px;
    border: 0px solid #CECECE;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.ilike {
border-radius: 3px;
    background-color: #FF0000;
    border: none;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    cursor: pointer;
	width:100%;
	height:35px;

	font-family: 'Kanit', sans-serif;
}
.ilike:hover {
	background-color:#95B5F9;
}
.ilike:active {
	position:relative;
	top:1px;
}

.ilikecon {
border-radius: 3px;
    background-color: #DFFF84;
    border: none;
    color: #1a1a1a;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    cursor: pointer;
	height:35px;
	font-family: 'Kanit', sans-serif;
}
.ilikecon:hover {
	background-color:#95B5F9;
}
.ilikecon:active {
	position:relative;
	top:1px;
}

.btn {
  border: 1px solid black;
  background-color: #E2E2E2;
  color: black;
  padding: 8px 8px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
font-family: 'Kanit', sans-serif;
}

/* Gray */
.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #1a1a1a;
  color: white;
}

.btn2 {
  border: 1px solid black;
  background-color: #000000;
 color: #ffffff;
  padding: 8px 22px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'Kanit', sans-serif;
}
/* Gray */
.default2 {
  border-color: #e7e7e7;
  color: #FFFFFF;
}
.default2:hover {
  background: #1a1a1a;
  color: #FFFFFF;
}

.toplaylist {
  border: 1px solid black;
  background-color: #BB63F5;
 color: #1a1a1a;
  padding: 8px 22px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 90px;
}
/* Gray */
.toplaylist {
  border-color: #F8F8F8;
  color: #FFFFFF;
}
.toplaylist:hover {
  background: #1a1a1a;
  color: #FFFFFF;
}

.butment {
border-radius: 1px;
    background-color: #30B1FF;
    border: none;
    color: #1a1a1a;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    cursor: pointer;
	height:40px;
	width:120px;
	font-family: 'Kanit', sans-serif;
}
.butment:hover {
	background-color:#95B5F9;
}
.butment:active {
	position:relative;
	top:1px;
}

.havetest {
border-radius: 1px;
    background-color: #9B00CD;
    border: none;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 2px 2px;
    cursor: pointer;
	width:85px;
	height:25px;
	font-family: 'Kanit', sans-serif;
}
.havetest:hover {
	background-color:#95B5F9;
}
.havetest:active {
	position:relative;
	top:1px;
}