body 
{
    padding:0px;
    margin:0px;
    font-family: 'Tahoma', sans-serif;
    font-size: 16px;
    /*-moz-filter: grayscale(90%);
    -webkit-filter: grayscale(90%);
    filter: gray;
    filter: grayscale(90%);*/
}

@font-face {
    font-family: 'supermarket';
    src: url('/Fonts/supermarket.eot');
    src: url('/Fonts/supermarket.eot?#iefix') format('embedded-opentype'),
    url('/Fonts/supermarket.woff2') format('woff2'),
    url('/Fonts/supermarket.woff') format('woff'),
    url('/Fonts/supermarket.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.box01 {border:solid 1px #CCC; padding:10px 20px; border-radius:5px;}

.textA { border-radius:4px;padding:4px;font-size:1.2em;color:#666;border:solid 1px #CCC; }
.textB { padding:2px;border:solid 1px #DDD; }

.delA {display:inline-block;width:24px;height:24px;background-image:url('images/delete.png');cursor:pointer;
         background-repeat:no-repeat;}
.delA:hover {background-position:-54px 0px;}

.errorA { color:White;padding:2px 10px; background-color:Red; margin-left:3px;border-radius:5px;display:inline-block; }
.errorB { width:90%; margin:20px auto; padding:10px; text-align:center; color:Red; border:solid 1px red; }

input,select,option {margin:3px 5px; font-family:Tahoma; font-size:14px;}

.int {width:70px;text-align:right;}
.double,.double2 {width:100px;text-align:right;}
.int2  {width:70px;}

.k-input {border-radius:2px;border:solid 1px #10C4B2;}
.k-input:focus{border:solid 1px #0D9285;-webkit-box-shadow:inset 0px 0px 1px #C5C5C5;} 
.k-datepicker {margin-left:3px;}
.k-icon {margin-top:4px;}
.date {border:none !important;}

.right {text-align:right;}


.checkA {background-image:url('/images/checkA.png');display:inline-block;width:16px;height:16px;
         background-repeat:no-repeat;cursor:pointer;background-position:0px 1px;}
.checkA.active {background-position:0px -17px;}

#window1 .titleA {background-image:url('images/bg01.png'); background-position:left center;}
#window1 .titleB {color:White;font-size:1.1em;font-weight:bold;}
#window1 .titleS {background-color:#EEE;border-bottom:solid 2px #AAA;padding:5px;}
#window1 .titleSearch {margin:auto;border:solid 1px #CCC;padding:8px 0px;border-radius:7px;width:100%;display:block;
                       text-indent:10px;}
#window1 .winsub {margin:0px;height:100px;overflow:auto;}


.ptgList {padding:0px;margin:0px;}
.ptgList li { list-style-type:none;padding:5px 7px;border-bottom:solid 1px #EEE;}
.ptgList li:hover {background-color:#93D9FD; cursor:pointer;}

.ptgGrid {border:solid 1px #CCC; border-collapse:collapse;}
.ptgGrid th {text-align:left;background-color:#000;color:White;padding:5px 2px;}
.ptgGrid td {padding:3px 2px;}
.ptgGrid tr:nth-child(2n) {background-color:#CCC;}

.radioA {background-image:url('/images/radioA.png');
        background-position:-84px -4px;
        display:inline-block;width:120px;
        background-repeat:no-repeat;
        padding-left:30px;
        height:32px;
        vertical-align:center;
        line-height:32px;
        text-decoration:none;}
                   
.radioA.active {background-position:-84px -34px;}


ul.ptgList2 { list-style-type:none;margin:0px;padding:0px;}
ul.ptgList2 li table{width:100%; border-collapse:collapse; border-spacing:0px;}
ul.ptgList2 li {padding:8px;border-bottom:solid 1px #DDD;}
ul.ptgList2 li:hover {background-color:#EEE;}


.winPopup{position:absolute;border:solid 1px #CCC;width:400px;height:350px;overflow:auto;background-color:White;
                z-index:999;}
                
#ulwin1 .pcode {font-size:0.8em;color:#666;}
      
#ulwin1 li:hover {background-color:transparent;}
#ulwin1 li.active {background-color:#93D9FD;}

.k-input { border:solid 1px #CCC; border-radius:0px;}

.sitemap {border:solid 1px #CCC;padding:5px;border-radius:4px;}
.sitemap a {text-decoration:none;color:#444; display:inline-block;}
.sitemap a:hover {text-decoration:underline;color:Navy;}
.sitemap span.gt {margin:0px 5px; color:#888; display:inline-block;}


/* ใหม่ */
@font-face {
  font-family: 'FontAwesome';
  src: url('/Fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('/Fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/Fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/Fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/Fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/Fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased; /* ฟ้อนต์สมูท*/
  -moz-osx-font-smoothing: grayscale; /* ฟ้อนต์สมูท firefox*/
}

/* TopNavTap */
.MainPage {  width: 90%; margin: 10px auto; border: 1px solid #DDD; }
.MainPageSub {  width: 100%; }
.MainPage .Detail {  margin: 12px 20px; }
.MainPage .topBar { color: white; background-color: #4A7CBB; width: 100%;}
.MainPage .topBar .txtBar{ padding: 10px;}
.MainPage .Detail .tab { background-color: #4A7CBB; padding: 8px; color:White; font-size: 1.5em; margin-top: 5px; }
.MainPage a { text-decoration: none; color: white; }
.MainPage a:hover { color: #4DF5FF; }

.box4col  > div {width:25%;float:left;}
.box4col a {display:block; margin:2px; text-decoration:none; background-color:#9BD0FD; text-align:center; padding:5px 0px;}
.box4col a:hover { background-color:#299CFD; color:White; font-weight:bold;}
.box4col a.active { background-color:#299CFD; color:White; font-weight:bold;}

.tbData { border-collapse:collapse; border-spacing:0px; margin:auto;}
.tbData th { background-color:#ADD9FF; font-size:0.9em; border:solid 1px #999; padding:8px 5px;}
.tbData td { padding:3px; border:solid 1px #999; font-size:0.8em;}
.tbData tr:nth-child(2n){ background-color:#E6E4E4;}
.tbData .int { width:80px; text-align:right;}
.tbData .double { width:100px; text-align:right;}
.tbData .date2 { width:120px;}
.tbData tr.total td { background-color:#63B6FD; font-weight:bold; padding:8px 5px;}

        
@media(max-width:767px)
{
    .PTG .logo1 { height: 30px; } 
    .PTG .logo2 { display:none; } 
    .MainPage { width: 100%; border: 0px; margin: 10px 0px; }
    /*.PTG .td2{ padding-bottom:1px; }
    .PTG .td3{ padding-bottom:1px; }*/
    .box4col  > div {width:33.3%;}
}

@media(max-width:550px)
{
    .MainPage .Detail {  margin: 12px 15px; }
    .box4col  > div {width:50%;}
}

@media(max-width:400px)
{
    .MainPage .Detail {  margin: 12px 10px; }
    .box4col  > div {width:50%;}
}

@media(max-width:240px) 
{.box4col  > div {width:100%;}
}




.but { background-color: #157DBA; color: white; border-radius:5px 5px; padding: 5px 10px; margin: 8px 0; border: none; cursor: pointer; width: 100%; font-size:0.8em; }