@font-face {
    font-family: 'samarn';
    src: url('../fonts/Kt_smarn-Soccer.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SUPERMARKET';
    src: url('../fonts/SUPERMARKET.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChulabhornLikit';
    src: url('../fonts/ChulabhornLikitText-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.logo1 {background-image:url('Images/PTG01.png');background-size:auto 15px;
        background-repeat:no-repeat;display:inline-block;
        width:80px;height:15px;
        padding-left:10px;
        margin-left:10px;
        margin-top:3px;
}

.notifications .item-media {
    width: 80px;
}

.item-text {text-align:center;}

.loading {background-image:url('Images/loading.gif');
          background-size:100px auto;
          background-repeat:no-repeat;
          background-position:-27px center;
          padding:10px 10px 10px 40px;
          width:190px;
          margin:auto;
}

.page-content {background-color:white;}

.ptgList {padding:0;margin:0;list-style-type:none;}
.ptgList li {padding:6px 10px;border-bottom:solid 1px #DDD;}
.ptgList li:hover {background-color:#ABEDFD;}
.ptgList table {width:99%;margin:auto; border-collapse:collapse; border-spacing:0;}
.ptgList td { vertical-align:top;text-align:left;}
.ptgList li a {display:block;text-decoration:none;color:inherit;}

.back.link {display:inline-block;width:24px;}

span {display:inline-block;}

.edit {background-image:url('Images/edit.png');
       background-repeat:no-repeat;
       background-size:25px auto;
       background-position:center center;
       width:25px;
       height:20px;
}

form{padding:15px;}
form > div {margin-bottom:4px;}
form label {display:inline-block;font-size:0.9em;margin-right:5px;min-width:100px;}
form label.required {color:blue;}
/*form label.required:before {content:"*";color:red;}*/
/*form label::after {content:" : ";}*/
/*form input {width:200px;padding:2px;}*/
form input {width:200px;padding:2px;background:transparent;border:solid 1px #DDD;}
form input.double {text-align:right;width:110px;}
form input.int {text-align:right;width:100px;}
form input.date {text-align:left;width:100px;}
form input[readonly] {border:none}

.list-block { margin-top:0px;}


.infinite-scroll-preloader {
  margin-top:-20px;
  margin-bottom: 10px;
  text-align: center;
}
.infinite-scroll-preloader .preloader {
  width:34px;
  height:34px;
}

form { margin:0px; padding:0px;}       


#menuMain {background-color:#B7DDFB !important;}

ul.menuLeft {font-size:1.1em;font-weight:bold;color:#000;}
.menuLeft > li{font-size:1.1em;font-weight:bold;background-color:#1E84D2 !important;color:white;}
.menuLeft li {border-bottom:dotted 1px #EEE;}
.menuLeft > ul {font-weight:normal;padding-left:10px;font-size:0.9em; color:#333;margin-left:10px}
.menuLeft > ul > ul {font-weight:normal;padding-left:10px;font-size:0.9em; color:#666;margin-left:10px;}

.scrollB::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollB::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
.scrollB::-webkit-scrollbar-thumb {
  background: #666;
  border: 0px none #666;
  border-radius: 50px;
}

.scrollB::-webkit-scrollbar-track {
  background: #EEE;
  border: 0px none #ffffff;
  border-radius: 50px;
}

.scrollB::-webkit-scrollbar-corner {
  background: transparent;
}

.toolbar table {width:100%;border-spacing:0;height:100%;}
.toolbar table td {padding:0;text-align:center;vertical-align:middle}
.tdCancel {width:50%;background-color:red;color:white;cursor:pointer;}
.tdOK {width:50%;background-color:#007aff;color:white;cursor:pointer;}

.ptgSearch1 {
    background-image:url('Images/PTGserch1.png');background-size:24px auto;background-repeat:no-repeat;
    background-position:center center;
          padding:10px 10px 10px 20px;
}

.ptgPrint1 {
    background-image:url('Images/PTGPrint1.png');background-size:24px auto;background-repeat:no-repeat;
    background-position:center center;
          padding:10px 10px 10px 20px;
}

.reBill1 {
    background-image:url('Images/reBill.png');background-size:auto 24px;background-repeat:no-repeat;
    background-position:center center;padding:10px;
}

.PTGdownload1 {
    background-image:url('Images/PTGdownload1.png');background-size:auto 24px;background-repeat:no-repeat;
    background-position:center center;
          padding:10px 10px 10px 10px;
}

.ptgselect {
    padding:3px;margin: 0;-webkit-border-radius:2x;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;background: #f8f8f8;color:#888;
    border:none;outline:none;display: inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;
    cursor:pointer;height:40px;font-size:1.2em;padding:0 3px;}
@media screen and (-webkit-min-device-pixel-ratio:0) {.ptgselect {padding-right:50px}}
.ptgLselect {position:relative}
.ptgLselect:after {content:'<>';font-size:1.2em;color:#aaa;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);
    transform:rotate(90deg);right:8px; top:3px;padding:0 0 3px;border-bottom:1px solid #ddd;position:absolute;pointer-events:none;}
.ptgLselect:before {content:'';right:8px; top:3px;width:25px; height:28px;background:#f8f8f8;position:absolute;pointer-events:none;display:block;}

.tbData { border-collapse:collapse; border-spacing:0px; margin:auto;width:100%;}
.tbData th { background-color:#57bafc; 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;}
.tbData tr:hover {background-color:#ADD9FF;}
.tbData tr:nth-child(2n):hover {background-color:#ADD9FF;}

table {width: 99.5%;border-collapse: collapse;margin: auto;}
th {background-color:#077DD7;color: white;text-align: left;padding: 7px 3px;}
td {border: solid 1px #EEE; text-align: left;padding: 3px;vertical-align: top;}
.tbFoot {background-color: #077DD7;color: white;padding: 7px 3px;font-weight: bold;font-size: 1.2em;}


    /*-------------------- Button ------------------*/
    .btBlue {width:150px; margin:15px auto; background-color:#4268B3; color:#fff; border:none; border-radius:2px;
             padding:8px 5px;text-align:center; font-weight:bold; cursor: pointer;}
    .btBlue:hover {background-color:#31487C;}

    /*-------------------- Error ------------------*/
    .errorB {display:block;color:#EE0000;margin-bottom:10px;}
    input.errorC {border:solid 1px #EE0000 !important;background-color:rgba(255,0,0,0.2) !important;}

/*-------------------- Design New ------------------*/
         body {font-family:'ChulabhornLikit',sans-serif;}
        .BGNavbar2 {background-color:#30487C; color:#fff;}
        .navbar .center {font-size:1.2em;letter-spacing:1px;}
        .icon-home {background-image: url('Images2/icon-home.png'); background-size:auto 18px; background-repeat:no-repeat;
                    display:inline-block; width:100%; height:18px; padding-left:18px; margin-right:15px;}
        .icon-logout {background-image: url('Images2/icon-logout.png');background-size:auto 18px; background-repeat:no-repeat;
                      display:inline-block; width:100%; height:18px; padding-left:18px; margin-right:15px;}

/*-------------------- Toolbar New ------------------*/
        .toolbar {background-color:#e7e8ea !important;}
        .toolbar:before {background-color:transparent !important;}
        #tbtool {width:100%; border-collapse:collapse; margin:auto;}
        #tbtool td {width:33%; text-align:center;}
        #tbtool .boxicon {width:100%; height:100%;}
        #tbtool .boxicon a {color:#424242;display:block;}
        #tbtool .divImg {width:100%; padding-top:3px; height:28px;}
        #tbtool .divTxt {width:100%; height:20px; padding-top:3px; font-size:12px; font-family:Tahoma; box-sizing:border-box;}

        .icon-scanqr {background-image: url('Images2/icon-scanqr.png'); background-size: auto 26px; background-repeat: no-repeat; background-position: center center;
                      display: inline-block; width:26px; height: 26px;}
        .icon-favorite {background-image: url('Images2/icon-favorites.png'); background-size: auto 26px; background-repeat: no-repeat; background-position: center center;
                    display:inline-block; width:26px; height: 26px;}

        .r1-scan {position:fixed; bottom:4px; left:4px; right:4px; width:80px; height:80px; border-radius:50%; background-color:#d1d2d4; margin:auto;}
        .r2-scan {position: fixed;bottom: 9px;left: 4px;right: 4px;margin: auto;background-image: url('Images2/icon-scan.png');
                  background-size: auto 70px; background-repeat: no-repeat; background-position: center center;display: inline-block; width:70px; height: 70px;}
        .tb-imgL {background-image: url('Images2/icon-hotline.png');position: fixed;bottom:20px;margin: auto;margin:0 0 4px -13px;
            background-size: auto 40px; background-repeat: no-repeat; background-position: center center;display: inline-block; width:60px; height:40px; box-sizing:border-box;}
        .tb-imgR {background-image: url('Images2/icon-contact.png');position: fixed;bottom:20px;margin:auto;margin:0 0 4px -24px;
            background-size: auto 40px; background-repeat: no-repeat; background-position: center center;display:inline-block; width:50px; height:40px;box-sizing:border-box;}
        .tb-text {line-height:80px;color:#394984;font-size:0.8em; text-align:center;margin:auto;}

        .icon-ptgcard {background-image: url('Images2/icon-ptgcard.png'); background-size: auto 60px; background-repeat: no-repeat; background-position: center center;
                display:inline-block; width:auto; height: 60px;}

/*------------ Menu Right -------------*/
        /*-------------- Zone Main Menu ---------------*/
        .favBar {width:30px;transition-duration:0.2s;}
        .favBar table {border-spacing:0; }
        .favBar td {padding:0;}
        .favBar .col2 { display:none;background-color:#f5f5f5;}/*background-color:#5D7099;*/
        .favBar.max1 {width:95%;max-width:400px;}
        .favBar.max1 .col2 {display:table-cell;}
        .favBar .img1 {border-top-left-radius:8px;border-bottom-left-radius:8px;}
        .favbarB {z-index:9999;right:-210px;position:fixed;width:240px;top:unset;bottom:0;transition-duration:0.5s;}
        .favbarB.max1 {right:0;top:44px;}
        .favbarB .favbarBsub {margin-left:30px;background-color:#30487C;height:100%;box-sizing:border-box;overflow:scroll;}


        /*-------------- Zone Favorite Menu ---------------*/
        #tabMenu {height:40px;}
        #tabMenu #tb1 {width:100%;height:100%;max-width:500px;margin:auto;border-spacing:0;}
        #tabMenu #tb1 td {width:20%;text-align:center;vertical-align:middle;}
        .tab {border-bottom:solid 3px rgba(0,0,0,0.2);background-color:#f5f5f5;color:#30487C;font-weight:bold;letter-spacing:1px;}
        .tab.active {background-color:#BBDEFB;border-bottom:solid 3px #6EB0FA;}

        .menuRight {width:100%;height:95%;box-sizing:border-box;}
        .menuRight ul {margin:0;padding:0;list-style-type:none;}
        .menuRight li {color:#FFF; border-bottom:solid 1px #E5E3E6;}
        .menuRight .tbR {width:100%;border-spacing:0;display:table;}
        .menuRight .tbR td {padding:7px 0; vertical-align:middle;}
        .menuRight .tbR .col1 {width:80%;}
        .menuRight .tbR .col2 { text-align:center;font-size:0.9em;}
        .favbarB .list-block {padding:0 !important;}
        .favbarB .list-block ul {background-color:transparent !important;}
        .favbarB .list-block .item-content {padding-left:0 !important;min-height:unset;font-size:0.9em;}

        .menuRight a {color:#fff;letter-spacing:1px;}
        .subName {width:80%;vertical-align:bottom;padding-left:10px;box-sizing:border-box;}
        .icon-delete {background-image: url('Images2/icon-delete.png');  background-size:auto 18px; background-repeat:no-repeat;box-sizing:border-box;
              background-position:bottom bottom; display:inline-block; width:18px; height:18px;margin-left:4px;margin-top:4px;}
        .li2 {background-color:#f5f5f5;border-bottom:solid 1px #30487C !important;}
        .li2 a {color:#30487C !important;}

        .fav {background-image: url('Images2/icon-fav.png'); background-size:auto 16px; background-repeat:no-repeat;box-sizing:border-box;
              background-position:center center; display:inline-block; width:16px; height:16px;}
        .fav.active {background-image:url('Images2/icon-fav2.png');}
/*------------ Close Menu Right -------------*/