﻿
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');

body 
{
	
	margin-top:0;margin-right:0;margin-left:0;margin-bottom:0;
	font-weight:normal; font-family:'Kanit', serif;font-size:14px; color: #000000;
	
		
}

.google8 { font-weight:normal; font-family: 'Kanit', sans-serif; color:#2e302e; font-size:8px; }
.google10 { font-weight:normal; font-family: 'Kanit', sans-serif; color:#2e302e; font-size:10px; }
.google12 { font-weight:normal; font-family: 'Kanit', sans-serif; color:#2e302e; font-size:12px; }
.google14 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:14px; }
.google16 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:16px; }
.google18 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:18px; }
.google20 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:20px; }
.google22 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:22px; }
.google24 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:24px; }
.google26 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:26px; }
.google28 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:28px; }
.google30 { font-weight:normal; font-family: 'Kanit', sans-serif;font-size:30px; }
.google24B { font-weight: bold; font-family: 'Kanit', sans-serif;font-size:24px; }

.Verdana14 { font-weight:normal; font-family: 'Verdana', sans-serif;font-size:14px; }
.Verdana16 { font-weight:normal; font-family: 'Verdana', sans-serif;font-size:16px; }
.Verdana18 { font-weight:normal; font-family: 'Verdana', sans-serif;font-size:18px; }
.Verdana20 { font-weight:normal; font-family: 'Verdana', sans-serif;font-size:20px; }




  .fullscreen_bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url('./images/bg.jpg');
    background-repeat:repeat;
  }





.tb10 {
	/*background-image:url(images/form_bg.jpg);*/
	background-repeat:repeat-x;
	border:1px solid #e4e5e6;
	/*width: 230px;*/
	color:#333333;
	padding:3px;
	margin-right:3px;
	margin-bottom:3px;
	font-weight:lighter;
	font-family: 'Kanit', sans-serif;
	font-size:12px;
	border-radius:2px;
	margin-left: 0px;
}

.boxselect {
	/*background-image:url(images/form_bg.jpg);*/
	background-repeat:repeat-x;
	border:1px solid #ececeb;
	/*width: 230px;*/
	background-color : #fff;
	color:#000000;
	padding:0px;
	margin-right:0px;
	margin-bottom:0px;
	font-family: 'Kanit', sans-serif;
	font-size:12px;
	font-weight:lighter;
	border-radius:2px;	
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.boxselectrigth {
	/*background-image:url(images/form_bg.jpg);*/
	background-repeat:repeat-x;
	border:1px solid #c9cac9;
	/*width: 230px;*/
	color:#333333;
	text-align: right;
	font-family: 'Kanit', sans-serif;
	font-size:12px;
	font-weight:lighter;
	padding:3px;
	margin-right:2px;
	margin-bottom:2px;
	border-radius:2px;	
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.boxselectcenter {
	/*background-image:url(images/form_bg.jpg);*/
	background-repeat:repeat-x;
	border:1px solid #f2f3f4;
	/*width: 230px;*/
	color:#333333;
	text-align: center;
	font-family: 'Kanit', sans-serif;
	font-size:10px;
	font-weight:lighter;
	padding:2px;
	margin-right:2px;
	margin-bottom:2px;
	border-radius:3px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.boxlineslip 
{
		border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}


.boxline
{
		border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ccc;
	border-right-color: #ccc;
	border-bottom-color: #ccc;
	border-left-color: #ccc;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}


.rightline 
{
	border-right-width: 1px;
	border-right-style:  dotted;	
	border-right-color: #cccccc;
	
}
.right-buttondot
{
	border-right-width: 1px;
	border-right-style:  dotted;	
	border-right-color: #ccc;
	border-bottom-width: 1px;
	border-bottom-style:  dotted;	
	border-bottom-color: #ccc;
}
.buttondot
{
	border-bottom-width: 1px;
	border-bottom-style:  dotted;	
	border-bottom-color: #ccc;
	
}

.buttonline
{
	border-bottom-width: 1px;
	border-bottom-style:  solid;	
	border-bottom-color: #ccc;
	
}

.buttonline2
{
	border-bottom-width: 1px;
	border-bottom-style:  double;	
	border-bottom-color: #ccc;
	
}
.topline
{
	border-bottom-width: 1px;
	border-bottom-style: solid;	
	border-bottom-color: #ccc;
	
}



.mGrid {background-color: #fff;  margin: 2px 0 5px 0; border: solid 1px #60bff0; border-collapse:collapse;  }
    .mGrid td { padding: 2px; border: solid 1px #f4f4f4; text-align: left; color: #a3a4a3; font-weight:lighter; font-family: 'Kanit', sans-serif;font-size:12px;}
    .mGrid th { padding: 5px 2px; color: #000;text-align: center; background: #b5def3 url('css/grd_head.png') repeat-x top; border-left: solid 1px #60bff0; font-weight:lighter; font-family: 'Kanit', sans-serif;font-size:12px; }
.mGrid .alt { background: #fcfcfc url('css/grd_alt.png') repeat-x top;  }
.mGrid .pgr {background: #b5def3 url('css/grd_pgr.png') repeat-x top; }
    .mGrid .pgr table { margin: 2px 0; }
    .mGrid .pgr td { border-width: 0; padding: 0 0px; border-left: solid 0px #666; font-weight: normal; color: #fff; line-height: 12px;  }   
    .mGrid .pgr a { color: #666; text-decoration: none; }
    .mGrid .pgr a:hover { color: #ed931f; text-decoration: none; }
    
    
    
  .mGrid1 {background-color: #fff;  margin: 2px 0 5px 0;  border: solid 0px #f4f4f4; border-collapse:collapse;  }
    .mGrid1 td { padding: 2px; border: solid 1px #f4f4f4;  color: #000; font-weight:lighter; font-family: 'Kanit', sans-serif;font-size:12px;}
    .mGrid1 th { padding: 5px 2px; color: #1160e2; text-align: center; border-left: solid 0px #f4f4f4; font-weight:lighter; font-family: 'Kanit', sans-serif;font-size:12px; }
.mGrid1 .alt { background: #fcfcfc url('css/grd_alt.png') repeat-x top;  }
.mGrid1 .pgr {background: #b5def3 url('css/grd_pgr.png') repeat-x top; }
    .mGrid1 .pgr table { margin: 2px 0; }
    .mGrid1 .pgr td { border-width: 0; padding: 0 0px; border-left: solid 0px #666; font-weight: normal; color: #fff; line-height: 12px;  }   
    .mGrid1 .pgr a { color: #666; text-decoration: none; }
    .mGrid1 .pgr a:hover { color: #ed931f; text-decoration: none; }   
    
    
       
  .mGrid2 {background-color: #fff;  margin: 2px 0 5px 0;  border: solid 0px #f4f4f4; border-collapse:collapse;  }
    .mGrid2 td { padding: 2px; border: solid 0px #f4f4f4;  color: #000; font-weight:lighter; font-family: 'Kanit', sans-serif;font-size:12px;}
    .mGrid2 th { padding: 5px 2px; color: #1160e2; text-align: center; border-left: solid 0px #f4f4f4; font-weight:lighter; font-family: 'Kanit', sans-serif;font-size:12px; }
.mGrid2 .alt { background: #fcfcfc url('css/grd_alt.png') repeat-x top;  }
.mGrid2 .pgr {background: #b5def3 url('css/grd_pgr.png') repeat-x top; }
    .mGrid2 .pgr table { margin: 3px 0; }
    .mGrid2 .pgr td { border-width: 0; padding: 0 0px; border-left: solid 0px #666; font-weight: normal; color: #fff; line-height: 12px;  }   
    .mGrid2 .pgr a { color: #b5def3; text-decoration: none; }
    .mGrid2 .pgr a:hover { color: #ed931f; text-decoration: none; }    
    
    
    
    
    
    
.BoxRs{
   font-weight:lighter; font-family: 'Kanit', sans-serif;font-size:12px;
    padding: 0px 0px; 
    background: #bfe0f9;
    max-width:100%;
    border-radius: 5px;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


.img {
max-width:100%;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

.dap_text
{
	/*background-image:url(images/form_bg.jpg);*/
	background-repeat:repeat-x;
	border:1px solid #ededed;
	/*width: 230px;*/
	background-color : #fff;
	color:#000000;
	padding:5px;
	margin-right:5px;
	margin-bottom:5px;
	font-family: 'Kanit', sans-serif;
	font-size:14px;
	font-weight:lighter;
	border-radius:4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-align: left;
}



.dap_text_box
{
	/*background-image:url(images/form_bg.jpg);*/
	background-repeat:repeat-x;
	border:1px solid #ededed;
	/*width: 230px;*/
	background-color : #fff;
	color:#000000;
	padding:3px;
	margin-right:3px;
	margin-bottom:3px;
	font-family: 'Kanit', sans-serif;
	font-size:12px;
	font-weight:lighter;
	border-radius:2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	text-align: left;
}

.dap_text_dropbox
{
	/*background-image:url(images/form_bg.jpg);*/
	background-repeat:repeat-x;
	border:1px solid #ededed;
	/*width: 230px;*/
	background-color : #fff;
	color:#000000;
	padding:1px;
	margin-right:1px;
	margin-bottom:1px;
	font-family: 'Kanit', sans-serif;
	font-size:11px;
	font-weight:lighter;
	border-radius:2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	text-align: left;
}


.select
{
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 1px 20px 1px 1px;
 border: none;
 font-family: 'Kanit', sans-serif;
	font-size:12px;
	font-weight:lighter;
}



   .align_middle {
        vertical-align: middle;
    }

   .align_bottom {
        vertical-align: bottom;
    }



.border 
{
    padding:4px;
	margin-right:4px;
	margin-bottom:4px;
    border-style:solid;
    border-color:#fcff01;
    border-width: 2px;
}





.borderdropdown
{
    padding:2px;
	margin-right:2px;
	margin-bottom:2px;
    border-style:solid;
    border-color:#0d8531;
    border-width: 2px;
}

.bordertxt
{
    padding:1px;
	margin-right:1px;
	margin-bottom:1px;
    border-style:solid;
    border-color:#0d8531;
    border-width: 1px;
}



.bgfooter
{
 background-color: #474b4f;
}

.bgLogin
{
 background-color: #e4e5e5;
}
.bgLogin_user
{
 background-color: #dadcdd;
}



@media (min-width: 768px) {
 .container {
 width: 500px;
 }
 }
 @media (min-width: 992px) {
 .container {
 width: 800px; 
 }
 }
 @media (min-width: 1200px) {
 .container {
 width: 1000px;
 }
 }
 
 
 
 
 
 
 .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #95dff4;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /*of Nave Bar
.navbar-default {
  background-color: #ffffff;
  border-color: #ffffff;
}
.navbar-default .navbar-brand {
  color: #101112;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #86cff3;
}
.navbar-default .navbar-text {
  color: #101112;
}
.navbar-default .navbar-nav > li > a {
  color: #101112;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #86cff3;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #86cff3;
  background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #86cff3;
  background-color: #ffffff;
}
.navbar-default .navbar-toggle {
  border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #101112;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #101112;
}
.navbar-default .navbar-link {
  color: #101112;
}
.navbar-default .navbar-link:hover {
  color: #86cff3;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #101112;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #86cff3;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #86cff3;
    background-color: #ffffff;
  }
}
*/