@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;
}

/*------------------ Icon -------------------------*/
    .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;}

    .loading {background-image:url('/Images/PTGWeb/GifW8/loading.gif');background-size:170px 64px;background-repeat:no-repeat;
              background-position:center center;padding:10px 10px 10px 40px;width:200px; height:300px; margin:auto;}

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

    .icon-leftEmp {background-image: url('Images/icon-BackEmp.png'); background-size:auto 18px; background-repeat:no-repeat;
                     display:inline-block; width:100%; height:18px; padding-left:18px; margin-right:15px;}

    .icon-arrowleft {background-image: url('Images/left-arrow.png'); background-size:auto 18px; background-repeat:no-repeat;
                     display:inline-block; width:100%; height:18px; padding-left:18px; margin-right:15px;}

    .icon-arrowleft2 {background-image: url('Images/left-arrow2.png'); background-size:auto 18px; background-repeat:no-repeat;
                     display:inline-block; width:100%; height:18px; padding-left:18px; margin-right:15px;}

    /*.icon-arrowleft2 {background-image: url('Images/back2.png'); background-size:auto 18px; background-repeat:no-repeat;
                     display:inline-block; width:100%; height:18px; padding-left:18px; margin-right:15px;}*/

    /*.icons-left {background-image: url('Images/left-arrow.png'); background-size:auto 18px; background-repeat:no-repeat;
                 display:inline-block; width:100%; height:18px; padding-left:18px; margin-right:15px;}*/

    .icon-arrowRight {background-image: url('Images/right-arrow.png'); background-size:auto 12px; background-repeat:no-repeat;
                      background-position:center center; display:inline-block; width:12px; height:12px; margin-right:5px;}

    .icon-arrowRight2 {background-image: url('Images/right-arrow2.png'); background-size:auto 12px; background-repeat:no-repeat;
                      background-position:center center; display:inline-block; width:12px; height:12px; margin-right:5px;}

    .icon-closeSearch {background-image: url('Images/icons-close.png');  background-size:auto 24px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:24px;}

    .iconMenu {background-image: url('Images/icons-menu.png');  background-size:auto 24px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:24px;}

    .iconMenu2 {background-image: url('Images/icons-menu2.png');  background-size:auto 24px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:24px;}

    .iconOrder {background-image: url('Images/icon-cart.png');  background-size:auto 30px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:100%;}

    .iconOrder2 {background-image: url('Images/icon-cart2.png');  background-size:auto 30px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:100%; position:absolute;top:3px;left:0;}

    .iconEdit {background-image: url('Images/icon-edit.png');  background-size:auto 20px; background-repeat:no-repeat;
             background-position:center center; display:inline-block; width:100%; height:20px;}

    .iconDel {background-image: url('Images/icon-delete.png');  background-size:auto 24px; background-repeat:no-repeat;
             background-position:center center; display:inline-block; width:100%; height:24px;}

    .icons-Barcode {background-image: url('Images/icon-barcode.png'); background-size:auto 50px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:50px;}

    .icons-SearchBarcode {background-image: url('Images/icons-SearchBarcode.png'); background-size:auto 50px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:50px;}
    
    .icons-RFBarcode {background-image: url('Images/icons-RFBarcode.png'); background-size:auto 50px; background-repeat:no-repeat;
               background-position:center center; display:inline-block; width:100%; height:50px;}

    /*------------------ form -------------------------*/
    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 input {width:200px;padding:2px;}
    form input.double {text-align:right;width:110px;}

    /*------------------ ptgList -------------------------*/
    .ptgList {padding:0; margin:0; list-style-type:none;}
    .ptgList li {padding:6px 10px;border-bottom:solid 1px #DDD; cursor:pointer;}
    .ptgList li:hover {background-color:#ABEDFD;}

    /*------------------ Framework7 -------------------------*/
    .BGApp {background-image: url('Images/BG6.png');}
    .BGHome {background-image: url('Images/BG2.png');}
    .BGNavbar {background-color:#31487C; color:#fff;}
    /*.BGNavbar {background-image: linear-gradient(to right, #0575e6, #021b79);
    box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.08);color:#fff;}*/
    /*.BGNavbar {background-color:#4268B3; color:#fff;}*/
    .back.link {display:inline-block; width:24px;}
    .page-content {background-color:#fff; padding:0 5px;}
    .list-block {padding:10px 15px;margin:0;}
    span {display:inline-block;}

    ul {margin: 0; padding:0; display:block; list-style: none; box-sizing: border-box;}
    li {list-style: none;}
    .tableUl {width: 100%;border-spacing:0;border-collapse: collapse; box-sizing: border-box;}
    .tableUl td {color: #000;}

    .NoData {color:#808080; font-size:1em; text-align:center; margin:35px auto;}
    .navbar::after {background-color:transparent;}
    .navbar .center {font-weight:bold;}
    .notifications .item-media {width: 80px;}
    .item-text {text-align:center;}

    .infinite-scroll-preloader {margin-top:-20px;margin-bottom: 10px; text-align: center;}
    .infinite-scroll-preloader .preloader {width:34px; height:34px;}
    .toolbar table {width:100%;border-spacing:0;height:100%;}
    .toolbar table td {padding:0;text-align:center;vertical-align:middle;font-weight:bold;}
    .ptgButCancel {width:50%; background-color:#8B1A1A;color:white;cursor:pointer;}
    .ptgButOK {width:50%; background-color:#31487C;color:white;cursor:pointer;}

     /*------------------ Search FW7 -------------------------*/
    .list-block .item-title {white-space:normal !important;}
    .list-block ul:before, .list-block ul:after {background-color:transparent;}
    .autocomplete-page ul span {display:inline-block !important;margin-right:5px; vertical-align:top !important;}
    .autocomplete-page li:hover {background-color:#BBEBFF;}
    .autocomplete-page .list-block .item-title {display:block;width:100%;}

    /*------------------ Search -------------------------*/
    .boxSearch {width:100%; margin:10px auto; box-sizing:border-box; text-align:center;}
    .search {background-color:White; width:70%; height:35px; margin:8px auto; border:none; border-radius:20px; padding:4px 4px 4px 35px;
                background-image:url('Images/icons-search.png'); background-repeat:no-repeat; background-position:6px center;
                box-sizing:border-box; border:solid 1px #ccc; background-size:24px auto; font-size:14px;}
    .search:focus {outline:none;}
    .PTGbtClear {width:70px; background-color:#BBDEFB; color:#31487C; border-radius:20px; margin-left:10px; padding:7px 0; text-align:center; font-size:1em; font-weight:bold; cursor:pointer;}
    .PTGbtClear:hover {background-color:#31487C; color:#fff;}

    /*------------------------- Button -----------------------------*/
    .PTGbtCancel {width:120px; background-color:#8B1A1A; margin:25px 5px; padding:8px 3px; text-align:center; font-size:1em; font-weight:bold; color:white; border-radius:4px; cursor:pointer;}
    .PTGbtOK {width:120px; background-color:#31487C; margin:25px 5px; padding:8px 3px; text-align:center; font-size:1em; font-weight:bold; color:white; border-radius:4px; cursor:pointer;}

    /*------------------------- Toolbar ----------------------------*/
    .toolbar {height:50px;  box-sizing:border-box;}
    .toolbar:before {background-color:rgba(230,226,225,1);}
    #tbToolbar {width:100%; border-collapse:collapse; margin:auto; box-sizing:border-box;}
    #tbToolbar td {width:25%; text-align:center;}
    #tbToolbar .boxToolbar {width:100%; height:100%; box-sizing:border-box;}
    #tbToolbar .boxToolbar a {color:#424242;display:block;}
    #tbToolbar .boxToolbar a:hover {background-color:#79D8FF !important;}
    #tbToolbar .boxToolbar a.active {color:#007aff;}
    #tbToolbar .divImg {width:100%; padding-top:3px; height:28px;}
    #tbToolbar .divTxt {width:100%; height:20px; padding-top:3px; font-size:12px; font-family:Tahoma; box-sizing:border-box;}
    .iconTB1 {background-image: url('Images/icon-home.png'); background-size: auto 26px; background-repeat: no-repeat; background-position: center center;
            display: inline-block; width:26px; height: 26px;}
    .iconTB2 {background-image: url('Images/icon-shop.png'); background-size: auto 26px; background-repeat: no-repeat; background-position: center center;
            display: inline-block; width: 26px; height: 26px;}
    .iconTB3 {background-image: url('Images/icon-alert.png'); background-size: auto 26px; background-repeat: no-repeat; background-position: center center;
            display: inline-block; width: 26px; height: 26px; position:relative; top:3px; left:0;}
    .iconTB4 {background-image: url('Images/icon-other.png'); background-size: auto 26px; background-repeat: no-repeat; background-position: center center;
            display: inline-block; width: 26px; height: 26px; padding-top:8px;}

    /*------------------------- Basket SaleOrder ----------------------------*/
    .BasketSO {position:relative; width:40px; height:30px; margin:auto;}
    .CountBasketSO {background-color:#E53935;color:white; width:16px; height:14px; font-size:10px;
     position:absolute;top:0;right:0; border-radius:50%;text-align:center;padding-top:2px;}

    /*------------------------- Basket ChangePoint ----------------------------*/
    .BasketPoint {position:relative; width:40px; height:30px; margin:auto;}
    .CountBPoint {background-color:#E53935;color:white; width:16px; height:14px; font-size:10px;
     position:absolute;top:0;right:0; border-radius:50%;text-align:center;padding-top:2px;}

    /*------------------------- Basket ChangePoint ----------------------------*/
    .BasketHM {position:relative; width:40px; height:30px; margin:auto;}
    .CountBasketHM {background-color:#E53935;color:white; width:16px; height:14px; font-size:10px;
     position:absolute;top:0;right:0; border-radius:50%;text-align:center;padding-top:2px;}

    /*------------------------- PTG Notification ----------------------------*/
    .divNotify {position:relative; width:40px; height:30px; margin:auto;}
    .xcountNotify {background-color:red;color:white; width:18px; height:15px;font-size:9px;position:absolute;top:0;right:0;
                    border-radius:50%;text-align:center;padding-top:3px;}
    .divNoMessage {text-align:center; margin:15px auto; font-size:16px; color:#424242;}

/*รออัพเดท*/

    /*-------------------- 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:'supermarket',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 !important;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;text-align:left !important;}
        .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; background-color:transparent !important;}
        .fav.active {background-image:url('Images2/icon-fav2.png'); background-color:transparent !important;}
/*------------ Close Menu Right -------------*/