:root {
    --color-primary: #2f87c2;
    --color-description: #808080;

    --border-color: #d9d9d9;
    --border-radius: .5rem
}


@font-face {
    font-family: "Helvetica Neue";
    src: url('fonts/helvetica-neue-light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url('fonts/helvetica-neue-regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url('fonts/helvetica-neue-bold.ttf');
    font-weight: bold;
    font-style: normal;
}

*,
:before,
:after {
    box-sizing: border-box;
}

html {font-size: 62.5%;}

html, body {
    width: 100%;
	height: auto !important;
    margin: 0;
    padding: 0;
}

* {
    font-family: "Helvetica Neue", tahoma, sans-serif, arial;
	font-size: 1.3rem;
}

#popupHtml>* {float: left}


a {
    text-decoration: none;
    color: #3498db;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

table {
    width: 100%;
    height: 100%;
}

table:not(.table-condensed) td {
    padding: .5rem 1rem;
    box-sizing: border-box;
}

table td.showDetail {
    color: #3498db;
    cursor: pointer;
}

table .head {z-index: 11}

table .head td,
table thead td {
    height: 4rem;
    vertical-align: middle !important;
    background: #c2c8cc !important;
    color: #fff;
    font-weight: bold;
    border-right: solid 0.1rem #f5f5fa !important;
    position: sticky;
    top: 0;
    left: 0;
}

table .head td,
table thead td:last-child {border-right: none;}

input[type=text],
input[type=number],
input[type=password],
textarea,
select {
    background: #fff;
    border-radius: 0.2rem;
    border: solid 0.1rem #e1e1e8;
    box-sizing: border-box;
    color: #3498db;
    width: 100%;
}
    
input[type=text],
input[type=number],
input[type=password],
select {padding: 0 1rem; height: 4rem}
textarea {padding: 1rem; height: 10rem}

form.search input {width: 20rem}

img {
    max-width: 100%;
}

/* Global */
*[class^="but"] {
    height: 4rem;
    border-radius: 0.2rem;
    background: #3498db;
    display: inline-block;
    color: #f5f5fa;
    line-height: 4rem;
    padding-left: 4rem;
    /*padding-right: 2rem;*/
    position: relative;
    border: none;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
}
*[class^="but"]:not([class*="but-icon"]) {
    padding-right: 2rem;
}

*[class^="but"]:hover {background-color: #3baaf5 !important;}

*[class^="but"]:active {background-color: #2f87c2;}

*[class^="but"]:before {
    width: 4rem;
    height: 4rem;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 36%;
    position: absolute;
    top: 0;
    left: 0;
}

.butChart:before {background-image: url('images/svg/icon_chart.svg')}
.butFilter:before {background-image: url('images/svg/icon_filter.svg')}
.butBack:before {background-image: url('images/icon001.png')}
.butSearch:before {background-image: url('images/svg/icon_search.svg')}
.butStock:before {background-image: url('images/icon003.png')}
.butAddProduct:before {background-image: url('images/icon004.png')}
.butExport:before {background-image: url('images/svg/icon_export.svg')}
.butChange:before {background-image: url('images/icon006.png')}
.butReturnProduct:before {background-image: url('images/icon007.png')}
.butDelete:before {background-image: url('images/icon008.png')}
.butAdd:before {background-image: url('images/icon009.png')}
.butNewProduct:before {background-image: url('images/icon010.png')}
.butUpdate:before {background-image: url('images/icon011.png')}
.butOrderForm:before {background-image: url('images/icon012.png')}
.butPrint:before {background-image: url('images/icon013.png')}
.butPay:before {background-image: url('images/icon014.png')}
.butCancel:before {background-image: url('images/icon015.png')}
.butNewUser:before {background-image: url('images/icon016.png')}
.butDiscount:before {background-image: url('images/icon017.png')}
.butDebt:before {background-image: url('images/icon018.png')}
.butInfo:before {background-image: url('images/icon019.png')}
.butSendMail:before {background-image: url('images/icon020.png')}
.butPutProduct:before {background-image: url('images/icon021.png')}
.butSave:before {background-image: url('images/icon024.png')}
.butPassword:before {background-image: url('images/icon027.png')}
.butPrice:before {background-image: url('images/icon028.png')}
.butProviderProduct:before {background-image: url('images/icon029.png')}

.clear {width: 100%; height: 0; clear: both}

.shadow {box-shadow: 0px 0px 5px #ccc}

*[class^="print"] {display: block}

.divTable {
    width: 100%;
    display: table;
}

.divTable>div {display: table-row}

.divTable>div.head {
    z-index: 10;
}

.divTable>div.head span {
    height: 4rem;
    vertical-align: middle;
    background: #c2c8cc !important;
    color: #fff;
    font-weight: bold;
    border-right: solid 0.1rem #f5f5fa !important;
}

.divTable>div.head span:last-child {border-right: none}

.divTable>div>span {
    display: table-cell;
    padding: 0.5rem 1rem;
    vertical-align: middle;
    height: 3.5rem;
    box-sizing: border-box;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
}

.divTable.records>div:hover>span{
    background: #ededf4;
    box-sizing: border-box;
}

.divTable.records>div:nth-child(n+2)>span {
    border-bottom: solid 1px #e1e1e8;
}


.table {
    width: 100%;
    height: 100%;
    display: table;
}

.row {display: table-row}

.cell {display: table-cell}

.box {
    background: #fff;
    border-radius: 2px
}

.compel:before {
    content: "*";
    color: #ff9933;
    margin-right: 0.5rem;
}

.sBut,
.actionBut {
    width: 4rem;
    height: 4rem;
    border-radius: 0.2rem;
    background-color: #3498db;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 40%;
    display: block;
}

.sBut:hover,
.actionBut:hover {background-color: #3baaf5}

.sBut:active,
.actionBut:active {background-color: #2f87c2;}

.actionBut {
    float: right;
    clear: both;
    width: 90%;
    height: 5.5rem;
    color: #f5f5fa;
    line-height: 6rem;
    padding-left: 5rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.actionBut:before {
    content: "";
    width: 4rem;
    height: 6rem;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0.5rem;
}

.barcode {
    font-weight: bold; 
    color: #ff9933 !important;
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    padding: 0 1rem;
    overflow: hidden;
    resize: none;
}


.listRecords .tb {padding: 0}

.listRecords .rBody {
    height: 100%;
    vertical-align: top;
    padding-bottom: 10px;
    border-bottom: solid 1px #f9fbfd;
    position: relative;
}

/*.listRecords .rBody table .head td {height: 5rem}*/

.listRecords .rBody table {height: auto}

/*.listRecords .rBody table td {*/
    /*border-top: solid 1px transparent;*/
    /*border-bottom: solid 1px transparent;*/
/*}*/

.listRecords .rBody table > tbody tr:hover > td {
    background: #ededf4;
}

.listRecords .rBody table > tbody > tr > td {
    border-top: solid 1px #d9d9d9;
}

.listRecords .rBody tr > :last-child {
    vertical-align: center;
}
.listRecords .rBody tr > :last-child > a {
    width: 3rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.listRecords .rBody>div {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

.listRecords .rBody .action {
    white-space: nowrap;
}

.listRecords .rFoot {
    border-top: solid 1px #c7ced3;
    text-align: right;
    height: 5rem;
    vertical-align: bottom;
}

.listRecords .rFoot * {float: left}

.listRecords .rFoot .info {margin-right: 40px}

.listRecords .rFoot .info span {line-height: 4rem}

.listRecords .rFoot .info span:first-child:after {
    content: ":";
    margin: 0 0.3rem;
}

.listRecords .rFoot .info span:last-child {
    font-weight: bold;
    color: #ff9933
}

.listRecords .rFoot .page {
    float: right;
    width: 160px;
}

.listRecords .rFoot .page input {
    width: 80px;
    text-align: center;
    color: #3498db;
    font-weight: bold;
    border: solid 1px #3498db;
    border-radius: 0;
}

.listRecords .rFoot .next {
    background-image: url('images/icon_next.png');
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.listRecords .rFoot .back {
    background-image: url('images/icon_back.png');
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.listRecords .detail>td {
    height: 48rem;
    background: #c2c8cc !important;
    padding: 2rem;
    text-align: left !important;
    vertical-align: top;
    color: #2b414f !important;
}

.listRecords .tabs {
    height: 100%;
    width: 100%;
}

.listRecords .tabs label {
    height: 4rem;
    padding: 0 2rem;
    background: #e4e4eb;
    display: inline-block;
    line-height: 4rem;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
    float: left;
    position: relative;
    /*top: -4rem;*/
    margin-right: 0.5rem;
}

.listRecords .tabs label:hover{background: #edf0f2 }

.listRecords .tabs label:first-of-type {margin-left: 2rem;}

.listRecords .tabs input:checked + label {
    background: #fff;
    color: #3498db;
    font-weight: bold;
}

.listRecords .tabs input[type=radio] {display: none}

.listRecords .tabs .tabCon {
    width: 100%;
    height: 40rem;
    background: #fff;
    border-radius: 0.3rem;
    position: relative;
    box-shadow: 0 4px 3px #999;
    overflow: auto;
}

.listRecords .tabs .tabCon > div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    display: table-cell;
    z-index: 0;
    opacity: 0;
    transition: 0.5s;
}

.listRecords .tabCon .menu {
    width: 100%;
    clear: both;
    margin-bottom: 1rem;
}

.listRecords .tabCon .menu,
.listRecords .tabCon .menu .txt {float: left}

.listRecords .tabCon .menu .txt span {
    line-height: 4rem;
    font-size: 1.8rem;
    text-transform: uppercase;
}

.listRecords .tabCon .menu .txt span:last-child {
    font-weight: bold;
    color: #3498db;
    font-size: 2.4rem;
}

.listRecords .tabCon .menu .abut {float: right}

.listRecords .tabCon .menu a {
    display: inline-block;
    margin-left: 2rem;
    text-align: center;
}

.listRecords .tabCon .data {
    width: 100%;
    height: 19rem;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
}

.listRecords .tabCon .sum {float: right; clear: both; margin-top: 1rem}

.listRecords .tabCon .sum div {min-height: 2.5rem}

.listRecords .tabCon .sum span {
    float: left;
}

.listRecords .tabCon .sum span:first-child {
    width: auto;
    text-align: right
}

.listRecords .tabCon .sum span:first-child:after {
    content: ":";
    margin: 0 0.5rem 0 0.3rem;
}

.listRecords .tabCon .sum span:last-child {
    width: 12rem;
    font-weight: bold;
    text-align: right;
    display: block;
    float: right;
}


.manageMini {
    width: 50rem;
    margin-top: 4rem !important;
    position: relative;
}

.manageMini .tabCon {
    width: 100%;
    min-height: 40rem;
    position: relative;
    background: #fff;
    border-radius: 0.2rem;
}

.manageMini .tabCon>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    padding: 2rem;
    box-sizing: border-box;
}

.manageMini label {
    float: left;
    height: 4rem;
    padding: 0 3rem;
    line-height: 4rem;
    background: #c2c8cc;
    color: #f5f5fa;
    display: inline-block;
    position: relative;
    top: -4rem;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-right: .5rem;
}

.manageMini label:hover {background: #ced3d6}

.manageMini label:first-of-type {margin-left: 1rem}

.manageMini input:checked+label {
    background: #fff;
    color: #3498db;
    font-weight: bold;
}

.manageMini input[type=radio] {display: none}

.manageMini .tab1:checked ~ .tabCon .tabCon1,
.manageMini .tab2:checked ~ .tabCon .tabCon2 {opacity: 1; z-index: 1}

.manageMini .tabCon1 {overflow-y: auto}

.manageMini .tabCon1 span {height: 3rem}

.manageMini .tabCon1 span:nth-child(1):hover {background: #f5f5fa; cursor: pointer}

.manageMini .tabCon1 span:nth-child(2) {width: 4rem; padding: 0; text-align: right}

.manageMini .tabCon1 span a {float: left; display: inline-block}
.manageMini .tabCon1 span a:last-child {margin-left: 1rem}

.manageMini .tabCon2 * {float: left}

.manageMini .tabCon2>form>div {
    width: 100%;
    clear: both;
    margin-bottom: 1rem;
}

.manageMini .tabCon2>form>div span:nth-child(1) {
    height: 4rem;
    line-height: 4rem;
    width: 12rem;
    text-align: right;
    display: inline-block;
}

.manageMini .tabCon2 input,
.manageMini .tabCon2 select {width: 27rem; margin-left: 1rem}

.manageMini .tabCon2 button {
    margin-left: 13rem;
    margin-top: 1rem;
}

.manageMini .tabCon2 span {font-weight: bold;}



.inRadio {height: 2.6rem; display: inline-block}

.inRadio input {display: none}

.inRadio label {
    line-height: 2.6rem;
    padding-left: 4rem;
    position: relative;
    display: block;
}

.inRadio label:before {
    content: "";
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 1.3rem;
    background: #fff;
    border: solid 0.1rem #e1e1e8;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.inRadio label:after {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 1rem;
    background: #3498db;
    display: block;
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    display: none;
}

.inRadio input:checked ~ label:after {display: block}


/********************* Loading *********************/
#loading {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    user-select: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
#loading,
#loading * {
    text-align: center;
}


/* INDEX */
#index {
    width: 100%; 
    height: 100%;
}

#index>div:nth-child(1)>span {height: 18rem}

#index .pack {
    float: left;
    width: 32%;
    height: 16rem;
    background: #fff;
    display: inline-block;
    padding: 2rem;
    box-sizing: border-box;
}

#index .pack:nth-child(2) {margin:  0 2%;}

#index .pack span {
    float: left;
    width: 100%;
    clear: both;
    text-align: right;
}

#index .lb {
    height: 9rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #3498db;
    font-size: 2.4rem;
    padding-top: 5.5rem;
    box-sizing: border-box;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: left bottom;
}

#index .nb {
    font-size: 3rem;
    color: #ff9933;
}

#index .dt {background-image: url('images/icon70x03.png')}
#index .dh {background-image: url('images/icon70x04.png')}
#index .hh {background-image: url('images/icon70x05.png')}

#index>div:nth-child(2)>span {height: 100%}
/* END INDEX */



/********************* LOGIN *********************/
#login {
    width: 100vw;
    height: 100vh;
    background: #2b414f;
    position: relative;
}

#login form {
    width: 65rem;
    height: 35rem;
    border-radius: 0.5rem;
    background: #f5f5fa;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -32.5rem;
    margin-top: -17.5rem;
    box-shadow: 0 0 0.5rem #333;
}

#login .info,
#login .input {
    padding: 0;
}

#login .info>div,
#login .input>div {
    height: 25rem;
    width: inherit;
    padding-top: 3rem;
    box-sizing: border-box;
}

#login .info>div {
    border-right: solid 1px #fff;
    padding: 2rem;
}

#login .input>div {
    border-left: solid 1px #dbdbe2; 
}

#login div {text-align: center}

#login .info {width: 37.5rem}

#login .info * {color: #c2c8cc}

#login .info-title {
    font-size: 1.5rem;
    font-weight: bold;
}

#login .info-brand {
    font-size: 2.4em;
    color: #ff9933;
    font-weight: bold;
    line-height: 1.2;
    margin-top: .5em;
}

#login .info-powered {
    margin-top: 6rem;
}

#login .info a {color: #ff9933}

#login .input span {
    float: left;
    position: relative;
    margin-left: 2.5rem;
}

#login .input span:before {
    content: "";
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
}

#login .input .user:before {background-image: url('images/icon_user.png')}
#login .input .pass:before {background-image: url('images/icon_pass.png')}

#login input[type=text],
#login input[type=password] {
    width: 22rem;
    margin-bottom: 2rem;
    padding-left: 4rem;
    box-sizing: border-box;
}

#login button {
    width: 12rem;
    height: 4rem;
    border-radius: 0.2rem;
    background: #3498db;
    color: #f5f5fa;
    border: none;
    text-align: center;
}


/********************* ERROR *********************/
#error404,
#errorPermission { 
    width: 45rem;
    height: 25rem !important;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12.5rem;
    margin-left: -22.5rem;
    text-align: center;
}

#errorPermission label,
#error404 label {
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 3rem;
}

/********************* LEFT *********************/
#container {
    width: 100%;
    height: 100vh;
    display: table;
}

#conLeft {
    width: 20rem;
    background: #2b414f;
    display: table-cell;
    position: fixed;
    z-index: 20;
    left: -20rem;
    transition: 0.5s;
}

#conLeft .menuMobile {
    width: 5rem;
    height: 5rem;
    background: url('images/icon023.png') center no-repeat #3498db;
    background-size: 30% auto;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
    transition: 0.5s;
    z-index: 10;
    box-shadow: 3px 0 3px rgba(0,0,0,.2);
}

#conLeft .menuMobile:hover {
    background-color: #2b414f
}

#conLeft > * {
    width: 100%
}

#conLeft .logo {
    width: 100%;
    height: 6rem;
    border-bottom: solid 0.1rem #1c2a37;
    position: relative;
    box-sizing: border-box;
}

#conLeft .logo>div:first-child span {
    text-align: center;
    font-size: 1.2em
}

#conLeft .logo .orange {
    color: #ff9933;
    font-weight: bold;
    margin-right: .5rem;
}

#conLeft .logo .white {
    color: #edf0f2;
    font-weight: bold;
}

#conLeft .account {
    width: 6rem;
    background: url('images/icon_account.png') center center no-repeat;
    background-size: auto 40%;
}

#conLeft .account:hover {
    background-color: #959fa6;
}

#conLeft .account:hover ul {display: block;}

#conLeft .account ul {
    position: absolute;
    width: 100%;
    left: 0;
    top: 5.9rem;
    background: #959fa6;
    display: none;
    padding: 2rem 0;
    z-index: 1;
}

#conLeft .account li {width: inherit}

#conLeft .account li a {
    width: inherit;
    height: 4rem;
    display: block;
    line-height: 4rem;
    text-align: right;
    padding: 0 1rem;
    box-sizing: border-box;
    color: #edf0f2;
    transition: 0.5s;
}

#conLeft .account li a:hover {
    color: #fff;
    background: #3498db;
}

#conLeft .menuList {
    height: calc(100vh - 6rem);
    height: -webkit-calc(100vh - 6rem);
    height: -moz-calc(100vh - 6rem);
    overflow: hidden;
    border-top: solid 1px #425466;
    box-sizing: border-box;
    display: block;
}

#conLeft .menuList .con {
    width: 21.7rem;
    height: 100%;
    overflow-y: scroll;
}

#conLeft .con li {position: relative}

#conLeft .con>ul>li a {
    width: 100%;
    height: 4rem;
    padding-left: 4.5rem;
    display: block;
    color: #c2c8cc;
    line-height: 4rem;
    box-sizing: border-box;
}

#conLeft .con li:before {
    width: 4rem;
    height: 4rem;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 40%;
    text-align: right;
    color: #c2c8cc;
    line-height: 40px;
}

#conLeft .con a:hover {color: #fff}

#conLeft .active {position: relative}

#conLeft .active a {color: #fff !important}

/*#conLeft .active:after {
    content: "";
    width: 0;
    height: 0;
    border-left-width: 1.5rem;
    border-right-width: 1.5rem;
    border-top-width: 2rem;
    border-bottom-width: 2rem;
    border-style: solid;
    border-color: transparent;
    border-right-color: #f5f5fa;
    position: absolute;
    right: 0;
    top: 0;
}*/

#conLeft .con>ul>li ul {
    width: 100%;
    clear: both;
    height: 0;
    overflow: hidden;
    transition: height .5s;
}

#conLeft .con .show {height: 100%}

#conLeft .con>ul>li ul li:before {
    content: '\0221F';
    padding-right: 1rem;
    box-sizing: border-box
}

#conLeft .bh:before {background-image: url('images/icon_mbh.png')}
#conLeft .hh:before {background-image: url('images/icon_mhh.png')}
#conLeft .kh:before {background-image: url('images/icon_mkh.png')}
#conLeft .khh:before {background-image: url('images/icon_mkhh.png')}
#conLeft .ncc:before {background-image: url('images/icon_mncc.png')}
#conLeft .cp:before {background-image: url('images/icon_mcp.png')}
#conLeft .bc:before {background-image: url('images/icon_mbc.png')}
#conLeft .nv:before {background-image: url('images/icon_mnv.png')}
#conLeft .ch:before {background-image: url('images/icon_mch.png')}
#conLeft .hm:before {background-image: url('images/icon_hm.png')}
#conLeft .sh:before {background-image: url('images/icon_msh.png')}
#conLeft .ddh:before {background-image: url('images/icon_ddh.png')}
#conLeft .pt:before {background-image: url('images/svg/icon_analytics.svg')}
#conLeft .gs:before {background-image: url('images/svg/icon_monitor.svg')}

#conLeft .bh.active:before,
#conLeft .bh:hover:before {background-image: url('images/icon_mbh_over.png')}
#conLeft .hh.active:before,
#conLeft .hh:hover:before {background-image: url('images/icon_mhh_over.png')}
#conLeft .kh.active:before,
#conLeft .kh:hover:before {background-image: url('images/icon_mkh_over.png')}
#conLeft .khh.active:before,
#conLeft .khh:hover:before {background-image: url('images/icon_mkhh_over.png')}
#conLeft .ncc.active:before,
#conLeft .ncc:hover:before {background-image: url('images/icon_mncc_over.png')}
#conLeft .cp.active:before,
#conLeft .cp:hover:before {background-image: url('images/icon_mcp_over.png')}
#conLeft .bc.active:before,
#conLeft .bc:hover:before {background-image: url('images/icon_mbc_over.png')}
#conLeft .nv.active:before,
#conLeft .nv:hover:before {background-image: url('images/icon_mnv_over.png')}
#conLeft .ch.active:before,
#conLeft .ch:hover:before {background-image: url('images/icon_mch_over.png')}
#conLeft .hm.active:before,
#conLeft .hm:hover:before {background-image: url('images/icon_hm_over.png')}
#conLeft .sh.active:before,
#conLeft .sh:hover:before {background-image: url('images/icon_msh_over.png')}
#conLeft .ddh.active:before,
#conLeft .ddh:hover:before {background-image: url('images/icon_ddh_over.png')}
#conLeft .pt.active:before,
#conLeft .pt:hover:before {background-image: url('images/svg/icon_analytics_hover.svg')}
#conLeft .gs.active:before,
#conLeft .gs:hover:before {background-image: url('images/svg/icon_monitor_hover.svg')}


/********************* RIGHT *********************/
#conRight {
    background: #f5f5fa;
    display: table-cell;
    vertical-align: top;
    height: 100%;
    width: 100%;
    position: relative;
}

#conRight>* {height: 100%}

#conRight .rTop {
    width: 100%;
    height: 6rem !important;
    background: #fff;
    vertical-align: middle;
    border-bottom: solid 0.1rem #e1e1e8;
    padding: 0 2rem;
}

#conRight .rTop h1 {
    float: left;
    font-size: 2.4rem;
    margin: 0;
    padding: 0;
    line-height: 6rem;
}

#conRight .rTop h1 span {
    float: left;
    color: #2b414f; 
    font-size: 2.4rem;
    padding: 0 3px;
}

#conRight .rTop h1 span:first-child {text-transform: uppercase}

#conRight .rTop h1 span:first-child:before {
    content: "";
    margin: 0;
}

#conRight .rTop h1 span:before {
    content: ">";
    margin: 0 1rem;
    color: #3498db;
    font-size: 3rem;
}

#conRight .rTop ul {
    float: right;
    height: inherit;
}

#conRight .rTop li {
    height: inherit;
    display: table-cell;
    vertical-align: middle;
    padding-left: 1.5rem;
    cursor: default;
}

#conRight .rBot {
    height: 100%;
    padding: 2rem;
    vertical-align: top;
}


/* SELL */
#sell {height: 100%}
#sell .rBot {padding: 0 1rem 1rem 1rem}
#sell .col {padding: 0}

#sell .rBot .barcode {margin: 1rem 0}

#sell .c1 {min-width: 30rem; position: relative}
#sell .c2 {max-width: 78rem; padding-left: 1rem}

#sell .c1r1 {height: 6rem; padding: 0; vertical-align: top;}
#sell .c1r1 textarea {position: absolute; z-index: 3}

#sell .c1r1 .searchData {
    width: 100%;
    height: 100%;
    background: #e1e1e8;
    position: absolute;
    left: 0;
    z-index: 2;
    display: none;
    padding-top: 6rem;
    box-sizing: border-box;
    overflow: hidden;
}

#sell .c1r1 .searchData .divTable {float: left; width: 100%; cursor: pointer}
#sell .c1r1 .searchData .divTable div:hover {background: #2b414f; color: #f5f5fa;}
#sell .c1r1 .searchData .info {width: 100%; text-align: left}
#sell .c1r1 .searchData .info>* {float: left; clear: both}
#sell .c1r1 .searchData .info span:nth-child(1) {font-weight: bold}
#sell .c1r1 .searchData .info div {width: 100%}
#sell .c1r1 .searchData .info div span:last-child {
    float: right;
    color: #3498db;
    font-weight: bold;
}

#sell .c1r1 .searchData .img {
    width: 10rem;
    aspect-ratio: 3/2
}
#sell .c1r1 .searchData .img img {
    max-width: none;
}

#sell .pgroup .tt,
#sell .c1r2 {
    height: 4rem;
    background: #3498db;
    color: #f5f5fa;
    position: relative;
    padding: 0 10px;
    font-weight: bold;
}

#sell .c1r2 span:nth-child(2) {
    float: right;
    width: 4rem;
    height: 4rem;
    display: block;
    background: url('images/icon023.png') center center no-repeat;
}

#sell .c1r2 span:nth-child(2):hover {
    background-image: url('images/icon023_over.png');
    background-color: #fff;
}

#sell .list {
    width: 100%;
    height: 100%;
    line-height: 30px;
    overflow-y: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

#sell .pgroup {
    width: 4rem;
    height: 4rem;
    display: block;
    background: url('images/icon023.png') center center no-repeat;
    position: absolute;
    top: -4rem;
    right: 0;
    z-index: 1;
}

#sell .pgroup:hover {width: 100%; height: 100%}
#sell .pgroup:hover .tt,
#sell .pgroup:hover .list {display: block}

#sell .pgroup .list {
    margin-top: 4rem;
    display: none;
}

#sell .pgroup .tt {
    line-height: 4rem;
    display: none;
}


#sell .pgroup a {
    color: #2b414f; 
    width: 100%; 
    height: 100%; 
    display: block;
    padding: 0 10px;
    box-sizing: border-box;
}

#sell .pgroup>ul>li>a {font-weight: bold}

#sell .pgroup a:hover {background: #f5f5fa}


#sell .c1r3 {
    padding: 0; 
    vertical-align: top;
    position: relative;
}

#sell .c1r3 table {
    width: 100%;
    height: 10rem;
    cursor: pointer;
    float: left;
}

#sell .c1r3 table:hover {
    background: #f5f5fa;
}

#sell .c1r3 table img {
    vertical-align: middle;
    max-width: 8rem;
    max-height: 8rem;
}

#sell .c1r3 table td:nth-child(1) {width: 10rem}

#sell .c1r3 table td:nth-child(2) {
    vertical-align: top;
    line-height: normal;
    padding-left: 0;
    padding-right: 0;
}

#sell .c1r3 table span {
    float: left;
    clear: both;
    width: 100%;
}

#sell .c1r3 table span:nth-of-type(1) {
    color: #3498db;
}

#sell .c1r3 table span:nth-of-type(2) {color: #c2c8cc}

#sell .c1r3 table span:nth-of-type(3) {
    margin-top: 5px;
    color: #ff9933
}


#sell .c2r1 {padding: 0}

#sell .data {
    width: inherit;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
    height: calc(100vh - 32rem);
    height: -moz-calc(100vh - 32rem);
    height: -webkit-calc(100vh - 32rem);
}

#sell .data table {
    height: auto;
}

#sell .data img {
    max-width: 4rem;
}


/*#sell .price {*/
    /*background: none;*/
    /*border: none;*/
    /*padding: 0*/
/*}*/

#sell .amount {
    display: flex;
    align-items: center;
}

#sell .discount {
    width: 5rem;
    height: 3rem;
    display: block;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    background: url('images/icon017.png') center center no-repeat #3498db;
    cursor: pointer;
}

#sell .discount:hover {
    background-color: #3baaf5;
}

#sell .discount:active {
    background-color: #2f87c2;
}

#sell .pDiscount {
    float: right;
    width: 100%;
    text-align: right;
    color: #ff9933;
    margin-top: .4rem
}

#sell .code span {
    float: left;
    width: 100%;
    display: block !important;
    clear: both;
}

#sell .code span:nth-child(1) {
    color: #3498db;
    margin-bottom: 0.5rem
}


#sell .records td {
    text-align: center;
    vertical-align: top;
    user-select: none;
}
#sell .records tbody tr:not(:first-child) td {
    border-top: thin solid var(--border-color)
}
#sell .records input,
#sell .records select {
    height: 3rem;
}
#sell .records input {
    text-align: right;
}

#sell .records .col-no {width: 4rem}
#sell .records .col-cover {width: 6rem}
#sell .records .col-info {text-align: left}
#sell .records .col-store {width: 14rem; text-align: left}
#sell .records .col-price {width: 11rem}
#sell .records .col-amount {width: 10rem}
#sell .records .col-unit {width: 10rem}
#sell .records .col-money {width: 10rem; text-align: right}
#sell .records .col-action {width: 4rem}

#sell .c2r3 {
    height: 24rem;
    padding: 1rem 0 0 0;
}

#sell .c2r3 table td {
    vertical-align: top;
    padding: 0;
    position: relative;
}

#sell .c2r3 .c2r3r1 {width: 38rem}
#sell .c2r3 .c2r3r1 td {
    height: 5rem;
    vertical-align: middle;
    padding: 0;
}
#sell .c2r3 .c2r3r1 td:nth-child(2){
    text-align: right;
    font-weight: bold;
    font-size: 1.8rem;
}

#sell .c2r3 .c2r3r1 .ttm {color: #ff9933}

#sell .c2r3 .c2r3r2 {width: 22rem; padding: 0 0 0 1rem}

#sell .c2r3 .c2r3r2 span {padding: 0.4rem 0}
#sell .c2r3 .c2r3r2 [class^=but] {width: 100%}

/*#sell .c2r3 .c2r3r2 input {text-align: right; font-size: 1.6rem !important}*/

#sell .c2r3 .c2r3r2 .billMoneyPay {color: #ff9933}

#sell .c2r3 .c2r3r3 {width: 28rem; text-align: right}
#sell .c2r3 .c2r3r3 > a {
    margin-top: 1rem;
    text-align: left;
    box-shadow: 0 -1px 1px #fafafa, 0 1px 2px rgba(0,0,0,.2);
    border-radius: .5rem;
}
#sell .c2r3 .c2r3r3>*:last-child {margin-bottom: 0}
#sell .c2r3 .c2r3r3 .b1:before {background-image: url('images/icon013.png')}
#sell .c2r3 .c2r3r3 .b2:before {background-image: url('images/icon012.png')}
#sell .c2r3 .c2r3r3 .b3:before {background-image: url('images/icon007.png')}

#sell .c2r3 .c2r3r3 .actionBut.b1 {background-color: #ff9933}
#sell .c2r3 .c2r3r3 .actionBut.b1:hover {background-color: #ffa64c}
#sell .c2r3 .c2r3r3 .actionBut.b1:active {background-color: #ff8c00}

#sell .CustomerList {
    width: 100%;
    height: 20rem;
    background: #e1e1e8;
    position: absolute;
    top: 4rem;
    left: 0;
    z-index: 10;
    display: none;
    overflow-y: auto;
}

#sell .CustomerList * {float: left}

#sell .CustomerList div {width: 100%; cursor: pointer;}

#sell .CustomerList div:hover {background: #2b414f}
#sell .CustomerList div:hover span {
    color: #f5f5fa;
}

#sell .CustomerList span {
    height: 4rem;
    line-height: 4rem;
    display: inline-block; 
    padding: 0 0.5rem;
    box-sizing: border-box
}
#sell .CustomerList span:nth-child(1) {width: 10rem; text-align: right}
#sell .CustomerList span:nth-child(2) {font-weight: bold;}
#sell .CustomerList span:nth-child(3) {display: none}

#billTax,
#billPayed {
    width: 18rem;
    text-align: right; 
    font-size: 1.8rem;
    font-weight: bold;
}

#billSum,
#billDiscount,
#billPay {
    padding-right: 1rem !important;
}

#billPlate {
    font-weight: bold;
}
#billNote {
    width: 90%;
    background: lightyellow;
    border-radius: .5rem;
    resize: none;
}

#popupPrice {width: 35rem; height: 20rem}
#popupPrice a {float: left; width: auto; margin-top: 2rem}

#sellPrintConfirm .action {
    display: flex;
    column-gap: 1rem;
    margin-top: 2rem;
}
#sellPrintConfirm .action > * {
    background: var(--color-primary);
    border: none;
    color: #fafafa;
    height: 4rem;
    padding: 0 2rem;
    border-radius: var(--border-radius);
    cursor: pointer;
}
#sellPrintConfirm .action > :hover {
    background-color: #3baaf5
}

/* RESTORE PRODUCT */
#restore .col1,
#restore .col2 {vertical-align: top; padding: 0}
#restore .col2 {width: 30rem; padding-left: 20px}

#restore .col1 td[class^="lr"] {vertical-align: top; padding: 0}

#restore .lr1 {height: 5rem}
#restore .lr1 input {font-weight: bold;}

#restore .lr2 {
    height: 100%;
    vertical-align: top;
    position: relative;
}

#restore .data {
    width: inherit;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    position: absolute;
}

#restore img {max-width: 5rem}

#restore .rt div {
    float: left;
    display: inline-block;
}

#restore .rt input {
    height: 2.5rem;
    width: 100%;
    text-align: right;
    font-weight: bold;
}

#restore .rt span {
    float: left;
    height: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    display: inline-block;
    color: #f5f5fa;
}

#restore .rt span:nth-child(1) {width: 30%}
#restore .rt span:nth-child(2) {width: 70%}

#restore .price span {float: right; clear: both}
#restore .discount {font-size: 1.1rem; color: #3498db}

#restore .rt div:nth-child(1) input {color: #c2c8cc}
#restore .rt div:nth-child(1) span {background: #c2c8cc}
#restore .rt div:nth-child(2) span {background: #3498db}

#restore .nc span {float: left; clear: both}
#restore .nc span:nth-child(2) {color: #3498db}

#restore .divTable>div:hover {background: #ededf4}
#restore .divTable>div:nth-child(2n+1)>span {
    border-top: solid 1px #e1e1e8;
    border-bottom: solid 1px #e1e1e8;
}

#restore .divTable>div>span:nth-child(1) {width: 6rem}
#restore .divTable>div>span:nth-child(2) {width: 7rem; text-align: center}
#restore .divTable>div>span:nth-child(4) {width: 12rem; text-align: right}
#restore .divTable>div>span:nth-child(5) {width: 12.2rem; text-align: center}
#restore .divTable>div>span:nth-child(6) {width: 13rem; text-align: right;}


#restore .col2>div {
    width: 100%;
    min-height: 4rem;
    line-height: 4rem;
}

#restore .col2>div span:last-child {
    float: right;
    font-weight: bold;
    font-size: 1.8rem;
}

#restore .col2>div:nth-child(5) span:last-child {
    font-size: 2.4rem;
    color: #ff9933
}

#restore .col2 .actionBut {float: left; width: 10rem}
#restore .col2 .actionBut:before {background-image: url('images/icon007.png')}


/* ORDER FORM*/
#orderForm .tb td:nth-child(1) {width: 8rem; text-align: right}
#orderForm .tb td:nth-child(2) {width: 10rem; text-align: right}
#orderForm .tb td:nth-child(3) {width: 15rem; text-align: center}
#orderForm .tb td:nth-child(5) {width: 15rem; text-align: right}
#orderForm .tb td:nth-child(6) {width: 15rem; text-align: right}
#orderForm .tb td:nth-child(7) {width: 12rem; text-align: center}


#orderForm .tabs input.tab1:checked ~ .tabCon .tabCon1,
#orderForm .tabs input.tab2:checked ~ .tabCon .tabCon2,
#orderForm .tabs input.tab3:checked ~ .tabCon .tabCon3 {opacity: 1; z-index: 10 !important}


#orderForm .tabCon .col-no {width: 5rem}
#orderForm .tabCon .col-code {width: 12rem}
#orderForm .tabCon .col-name {text-align: left}
#orderForm .tabCon .col-store {width: 15rem}
#orderForm .tabCon .col-price {width: 10rem; text-align: right}
#orderForm .tabCon .col-box,
#orderForm .tabCon .col-kg {width: 10rem; text-align: right}
#orderForm .tabCon .col-discount {width: 10rem; text-align: right}
#orderForm .tabCon .col-money {width: 12rem; text-align: right}

#orderForm .tabCon1 .txt span {font-size: 1.3rem; text-transform: capitalize; color: inherit;}

#orderForm .tabCon2 .pk {
    float: left;
    width: 50%;
}

#orderForm .tabCon2 .pk * {float: left}

#orderForm .tabCon2 .pk div {
    width: 100%;
    clear: both;
    margin-bottom: 2rem;
}

#orderForm .tabCon2 .pk span:nth-of-type(1) {
    width: 12rem;
    text-align: right;
    font-weight: bold;
}

#orderForm .tabCon2 .pk span:nth-of-type(1):after {
    content: ":";
    margin: 0 1rem 0 0.5rem;
}

#orderForm .tabCon2 .packR {float: right}


/* CUSTOMER */
#customer .tb td {text-align: right}
#customer .tb td:nth-child(1) {width: 6rem}
#customer .tb td:nth-child(2) {width: 6rem}
#customer .tb td:nth-child(3) {text-align: left}
#customer .tb td:nth-child(4) {width: 11rem}
#customer .tb td:nth-child(5) {width: 15rem}
#customer .tb td:nth-child(6) {width: 15rem}
#customer .tb td:nth-child(7) {width: 8rem}

#customer .tabs input.tab1:checked ~ .tabCon .tabCon1,
#customer .tabs input.tab2:checked ~ .tabCon .tabCon2,
#customer .tabs input.tab3:checked ~ .tabCon .tabCon3 {opacity: 1; z-index: 10 !important}

#customer .tabCon1 .pk {
    float: left;
    width: 50%;
}

#customer .tabCon1 .pk * {float: left}

#customer .tabCon1 .pk div {
    width: 100%;
    clear: both;
    margin-bottom: 2rem;
}

#customer .tabCon1 .pk span:nth-of-type(1) {
    width: 12rem;
    text-align: right;
    font-weight: bold;
}

#customer .tabCon1 .pk span:nth-of-type(1):after {
    content: ":";
    margin: 0 1rem 0 0.5rem;
}

#customer .tabCon1 .packR {float: right}

#customer .tabCon2 .divTable span,
#customer .tabCon3 .divTable span {text-align: right}

#customer .tabCon2 .divTable span:nth-child(1){width: 5rem}
#customer .tabCon2 .divTable span:nth-child(2){width: 10rem}
#customer .tabCon2 .divTable span:nth-child(3){text-align: left}
#customer .tabCon2 .divTable span:nth-child(4){width: 15rem}
#customer .tabCon2 .divTable span:nth-child(5){width: 15rem}
#customer .tabCon2 .divTable span:nth-child(6){width: 15rem}
#customer .tabCon2 .divTable span:nth-child(7){width: 13rem; text-align: center}

#customer .tabCon3 .divTable span:nth-child(1){width: 5rem}
#customer .tabCon3 .divTable span:nth-child(2){width: 12rem; text-align: left}
#customer .tabCon3 .divTable span:nth-child(3){text-align: left}
#customer .tabCon3 .divTable span:nth-child(4){width: 13rem; text-align: center}
#customer .tabCon3 .divTable span:nth-child(5){width: 15rem; text-align: left}
#customer .tabCon3 .divTable span:nth-child(6){width: 15rem}
#customer .tabCon3 .divTable span:nth-child(7){width: 15rem}

#customer .tabCon2 .data,
#customer .tabCon3 .data {height: 29rem}

#popupCustomerOrder {width: 90rem}

#popupCustomerOrder .data {height: 42rem; overflow-y: auto}

#popupCustomerOrder .divTable span {text-align: right}
#popupCustomerOrder .divTable span:nth-child(1) {width: 3rem}
#popupCustomerOrder .divTable span:nth-child(2) {width: 12rem; text-align: left}
#popupCustomerOrder .divTable span:nth-child(3) {text-align: left}
#popupCustomerOrder .divTable span:nth-child(4) {width: 10rem}
#popupCustomerOrder .divTable span:nth-child(5) {width: 10rem}
#popupCustomerOrder .divTable span:nth-child(6) {width: 10rem}
#popupCustomerOrder .divTable span:nth-child(7) {width: 15rem}

#popupCustomerOrder .foot div {
    width: 100%;
    text-align: right;
}

#popupCustomerOrder .foot div:first-child {
    border-top: solid 1px #c2c8cc;
}

#popupCustomerOrder .foot span {
    display: inline-block;
    line-height: 2rem;
}

#popupCustomerOrder .foot span:first-child:after {
    content: ":";
    margin: 0 0.5rem;
}
#popupCustomerOrder .foot span:last-child {width: 12rem; text-align: right; font-weight: bold;}


/* USER */
#user .tb td:nth-child(1) {width: 6rem}
#user .tb td:nth-child(2) {width: 12rem}
#user .tb td:nth-child(4) {width: 11rem}
#user .tb td:nth-child(5) {width: 15rem}
#user .tb td:nth-child(6) {width: 15rem}
#user .tb td:nth-child(7) {width: 8rem}

#user .tabs input.tab1:checked ~ .tabCon .tabCon1,
#user .tabs input.tab2:checked ~ .tabCon .tabCon2 {opacity: 1; z-index: 10 !important}

#user .tabCon1 .pk {
    float: left;
    width: 50%;
}

#user .tabCon1 .pk * {float: left}

#user .tabCon1 .pk div {
    width: 100%;
    clear: both;
    margin-bottom: 2rem;
}

#user .tabCon1 .pk span:nth-of-type(1) {
    width: 30%;
    text-align: right;
    font-weight: bold;
}

#user .tabCon1 .pk span:nth-of-type(1):after {
    content: ":";
    margin: 0 1rem 0 0.5rem;
}

#user .tabCon1 .packR {float: right}


#user .tabCon2 .divTable span:nth-child(1){width: 10rem}
#user .tabCon2 .divTable span:nth-child(3){width: 15rem; text-align: center}
#user .tabCon2 .data {height: 28rem}


/* PROVIDER */
#provider .tb td {text-align: right}
#provider .tb td:nth-child(1) {width: 6rem}
#provider .tb td:nth-child(2) {width: 6rem}
#provider .tb td:nth-child(3) {text-align: left}
#provider .tb td:nth-child(4) {width: 11rem}
#provider .tb td:nth-child(5) {width: 15rem}
#provider .tb td:nth-child(6) {width: 15rem}
#provider .tb td:nth-child(7) {width: 8rem; white-space: nowrap}

#provider .tabs input.tab1:checked ~ .tabCon .tabCon1,
#provider .tabs input.tab2:checked ~ .tabCon .tabCon2,
#provider .tabs input.tab3:checked ~ .tabCon .tabCon3,
#provider .tabs input.tab4:checked ~ .tabCon .tabCon4 {opacity: 1 !important; z-index: 10 !important}

#provider .tabCon1 .pk {
    float: left;
    width: 50%;
}

#provider .tabCon1 .pk * {float: left}

#provider .tabCon1 .pk div {
    width: 100%;
    clear: both;
    margin-bottom: 2rem;
}

#provider .tabCon1 .pk span:nth-of-type(1) {
    width: 30%;
    text-align: right;
    font-weight: bold;
}

#provider .tabCon1 .pk span:nth-of-type(1):after {
    content: ":";
    margin: 0 1rem 0 0.5rem;
}

#provider .tabCon1 .packR {float: right}

#provider .tabCon2 .divTable span,
#provider .tabCon3 .divTable span {text-align: right}

#provider .tabCon2 .divTable span:nth-child(1){width: 5rem}
#provider .tabCon2 .divTable span:nth-child(2){width: 10rem}
#provider .tabCon2 .divTable span:nth-child(3){text-align: left}
#provider .tabCon2 .divTable span:nth-child(4){width: 15rem}
#provider .tabCon2 .divTable span:nth-child(5){width: 15rem}
#provider .tabCon2 .divTable span:nth-child(6){width: 15rem}
#provider .tabCon2 .divTable span:nth-child(7){width: 13rem; text-align: center}

#provider .tabCon3 .divTable span:nth-child(1){width: 5rem}
#provider .tabCon3 .divTable span:nth-child(2){width: 12rem; text-align: left}
#provider .tabCon3 .divTable span:nth-child(3){text-align: left}
#provider .tabCon3 .divTable span:nth-child(4){width: 13rem; text-align: center}
#provider .tabCon3 .divTable span:nth-child(5){width: 15rem; text-align: left}
#provider .tabCon3 .divTable span:nth-child(6){width: 15rem}
#provider .tabCon3 .divTable span:nth-child(7){width: 15rem}

#provider .tabCon4 .divTable span:nth-child(1){width: 5rem}
#provider .tabCon4 .divTable span:nth-child(2){width: 12rem}
#provider .tabCon4 .divTable span:nth-child(3){width: 6rem; text-align: center}
#provider .tabCon4 .divTable span:nth-child(5){width: 12rem; text-align: right}

#provider .tabCon2 .data,
#provider .tabCon3 .data {height: 29rem}
#provider .tabCon4 .data {height: 34rem}

#provider .tabCon4 img {max-width: 4rem; max-height: 4rem}

#popupProviderImport {width: 90rem}

#popupProviderImport .data {height: 42rem; overflow-y: auto; position: relative; box-sizing: border-box}

#popupProviderImport .divTable span {text-align: right}
#popupProviderImport .divTable span:nth-child(1) {width: 4rem}
#popupProviderImport .divTable span:nth-child(2) {width: 12rem; text-align: left}
#popupProviderImport .divTable span:nth-child(3) {text-align: left}
#popupProviderImport .divTable span:nth-child(4) {width: 10rem}
#popupProviderImport .divTable span:nth-child(5) {width: 10rem}
#popupProviderImport .divTable span:nth-child(6) {width: 15rem}

#popupProviderImport .foot div {
    width: 100%;
    text-align: right;
}

#popupProviderImport .foot div:first-child {
    border-top: solid 1px #c2c8cc;
}

#popupProviderImport .foot span {
    display: inline-block;
    line-height: 2rem;
}

#popupProviderImport .foot span:first-child:after {
    content: ":";
    margin: 0 0.5rem;
}
#popupProviderImport .foot span:last-child {width: 12rem; text-align: right; font-weight: bold;}


#providerProduct {width: 60rem}

#providerProduct .input>* {float: left}

#providerProduct .input {position: relative}

#providerProduct .input input {margin-right: 1rem}

#providerProduct .input .pPrice {text-align: right}

#providerProduct .input .butSave {margin-left: 1rem}

#providerProduct .pSearch {width: 50%}

#providerProduct .pPrice {width: 25%}

#providerProduct .data {width: 100%; height: 45rem; overflow-y: auto}

#providerProduct .data {margin-top: 1rem;}
#providerProduct .data .divTable span:nth-child(1) {width: 5rem}
#providerProduct .data .divTable span:nth-child(3) {width: 11rem; text-align: right}
#providerProduct .data .divTable span:nth-child(4) {width: 4rem; text-align: center}

#providerProduct .data .pProduct span {float: left; clear: both}
#providerProduct .data .pProduct span:first-child {font-weight: bold;}

#providerProduct .searchData {
    position: absolute;
    width: 54rem;
    height: 46rem;
    background: #e1e1e8;
    top: 4.1rem;
    display: none;
    overflow: hidden
}

#providerProduct .searchData .divTable span:nth-child(1) {width: 10rem}
#providerProduct .searchData .divTable span:nth-child(2) span {float: left; clear: both}
#providerProduct .searchData .divTable span:nth-child(2) span:first-child{font-weight: bold}
#providerProduct .searchData .divTable:hover {background: #2b414f; color: #f5f5fa; cursor: pointer}


/* DEPOT */
#depot .tb td:nth-child(1) {width: 10rem}
#depot .tb td:nth-child(2) {width: 10rem}
#depot .tb td:nth-child(4) {width: 13rem; text-align: center}
#depot .tb td:nth-child(5) {width: 13rem; text-align: right}
#depot .tb td:nth-child(6) {width: 13rem; text-align: right}
#depot .tb td:nth-child(7) {width: 13rem; text-align: right}
#depot .tb td:nth-child(8) {width: 8rem; white-space: nowrap}

#depot .tabs input.tab1:checked ~ .tabCon .tabCon1 {opacity: 1; z-index: 10 !important}

#depot .tabCon span {text-align: right}
#depot .tabCon .col-no {width: 5rem}
#depot .tabCon .col-code {width: 10rem; text-align: left}
#depot .tabCon .col-name {text-align: left}
#depot .tabCon .col-store {width: 8rem}
#depot .tabCon .col-cost-kg,
#depot .tabCon .col-cost-box {width: 12rem; display: none}
#depot .tabCon .col-amount-kg,
#depot .tabCon .col-amount-box {width: 10rem}
#depot .tabCon .col-money {width: 14rem; display: none}

#depot .tabCon .data {height: 34rem}

#depotPopupUpdate {width: 100rem}

#depotPopupUpdate span {text-align: right}
#depotPopupUpdate .col-no {width: 5rem; text-align: center}
#depotPopupUpdate .col-cover {width: 7rem; text-align: center}
#depotPopupUpdate .col-info {text-align: left}
#depotPopupUpdate .col-cost-kg,
#depotPopupUpdate .col-cost-box {width: 12rem; display: none}
#depotPopupUpdate .col-amount-kg,
#depotPopupUpdate .col-amount-box {width: 10rem}
#depotPopupUpdate .col-store {width: 12rem}

#depotPopupUpdate  span input {text-align: right}
#depotPopupUpdate .info span {float: left; clear: both}
#depotPopupUpdate .info span:first-child {font-weight: bold; margin-bottom: 0.5rem}
#depotPopupUpdate span img {max-width: 6rem; max-height: 6rem}

#depotPopupUpdate .data {
    width: 100%;
    height: 45rem;
    overflow-y: auto;
	position: relative;
	box-sizing: border-box;
}

#depotPopupUpdate button {float: left; margin-top: 1rem}

#depotPopupUpdate>input {width: 70%; margin-top: 1rem; float: right}


/* STOCK */
#stock .rMid {height: 11rem}

#stock .rMid {padding: 2rem 2rem 0 2rem}

#stock .rMid .divTable>div>span {height: 11rem; padding: 0; width: 33.333%}

#stock .rMid .box {
    height: inherit; 
    width: 95%; 
    display: inline-block;
    padding: 2rem;
    box-sizing: border-box;
    background-origin: content-box;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: auto 80%;
}

#stock .rMid .t2 {text-align: center}

#stock .rMid .t3 {text-align: right}

#stock .rMid .t1 .box {background-image: url('images/icon70x01.png')}
#stock .rMid .t2 .box {background-image: url('images/icon70x02.png')}
#stock .rMid .t3 .box {background-image: url('images/icon70x03.png')}

#stock .rMid .box span {
    clear: both;
    float: right;
    font-weight: bold;
}

#stock .rMid .box span:nth-child(1) {
    text-transform: uppercase;
    color: #3498db;
    height: 3.8rem;
    font-size: 1.8rem;
}

#stock .rMid .box span:nth-child(2) {
    font-size: 2.5rem;
    color: #ff9933;
}

#stock .tb td:nth-child(1) {width: 5rem; text-align: center}
#stock .tb td:nth-child(2) {width: 13rem}
#stock .tb td:nth-child(3) {width: 6rem}
#stock .tb td:nth-child(5) {width: 15rem; text-align: right}
#stock .tb td:nth-child(6) {width: 17rem; text-align: right}
#stock .tb td:nth-child(7) {width: 16rem; text-align: right}

#stock .rBot img {max-width: 4rem; max-height: 4rem}


/* -----------------------------------
 * Store
 * -----------------------------------
 */
#store .rMid {padding: 2rem 2rem 0 2rem; height: 4rem}

/*#store .inData span {padding: 0}*/
/*#store .inData>div>span:nth-child(2),*/
/*#store .inData>div>span:nth-child(1) {width: 30rem; padding-right: 2rem; position: relative;}*/

/*#store .inData>div>span:nth-child(3){text-align: right}*/

/*#store .rMid input {margin-right: 1rem}*/

/*#store .rMid a {*/
    /*float: left;*/
    /*width: auto; */
    /*display: inline-block;*/
    /*margin-left: 1rem;*/
/*}*/

/*#store .rMid a:last-child {float: right}*/

#store .inData {
    display: grid;
    grid-template-columns: 30rem 45rem auto;
    grid-column-gap: 2rem;
}
#store .inData .form {
    position: relative;
}
#store .sProvider {
    display: flex;
    justify-content: space-between;
    column-gap: 1rem;
}
#store .sProvider .form {
    width: 100%
}

#store .sAction {
    display: flex;
    justify-content: end;
    column-gap: 1rem;
}


#store .searchData {
    width: 33rem;
    height: 51rem;
    background: #e1e1e8;
    position: absolute;
    top: 4.1rem;
    overflow: hidden;
    z-index: 10;
    display: none;
}


#store .sProduct .searchData>div:hover {
    background: #2b414f; 
    color: #f5f5fa;
    cursor: pointer;
}

#store .sProduct .searchData .img {
    width: 10rem !important; 
    height: 10rem; 
    position: relative; 
}

#store .sProduct .searchData img {
    max-height: 8rem;
    max-width: 8rem;
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#store .sProduct .searchData .info span {
    float: left;
    clear: both;
    padding-right: 1rem;
}

#store .sProduct .searchData .info span:first-child {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#store .sProvider .searchData div{
    height: 4rem;
    width: 100%;
    line-height: 4rem;
}

#store .sProvider .searchData div:hover {
    background: #2b414f; 
    color: #f5f5fa;
    cursor: pointer
}

#store .sProvider .searchData span {float: left}

#store .sProvider .searchData span:nth-child(1) {
    width: 10rem;
    text-align: right;
    padding-right: 1rem;
    box-sizing: border-box;
}

#store .sProvider .searchData span:nth-child(2) {font-weight: bold;}

#store .tb td {text-align: right}
#store .tb .col-no {width: 5rem; text-align: center}
#store .tb .col-cover {width: 6rem; text-align: center}
#store .tb .col-name {text-align: left}
#store .tb .col-cost-kg,
#store .tb .col-cost-box {width: 12rem; display: none}
#store .tb .col-amount-kg,
#store .tb .col-amount-box {width: 10rem}
#store .tb .col-store {width: 12rem}
#store .tb .col-money {width: 15rem; display: none}
#store .tb .col-action {width: 4rem}

/*#store .tb td:nth-child(1) {width: 5rem; text-align: center}*/
/*#store .tb td:nth-child(2) {width: 6rem; text-align: center}*/
/*#store .tb td:nth-child(3) {text-align: left;}*/
/*#store .tb td:nth-child(4) {width: 15rem}*/
/*#store .tb td:nth-child(5) {width: 15rem}*/
/*#store .tb td:nth-child(6) {width: 15rem}*/
/*#store .tb td:nth-child(7) {width: 15rem}*/
/*#store .tb td:nth-child(8) {width: 4rem}*/

#store .tb td img {max-width: 4rem; max-height: 4rem}

#store .rBody span {
    float: left;
    clear: both;
}

#store .rBody span:last-of-type {color: #3498db}

#store .rBody input {
    text-align: right;
    font-weight: bold;
}

#popupStorePayment {width: 50rem}

#popupStorePayment * {float: left}

#popupStorePayment>* {clear: both; width: 100%; position: relative; margin: 0.5rem 0}

#popupStorePayment span {height: 4rem; line-height: 4rem}

#popupStorePayment span:first-child {
    width: 18rem; 
    text-align: right;
}

#popupStorePayment span:first-child:after {
    content: ":";
    margin: 0 0.5rem;
}

#popupStorePayment span:nth-of-type(2) {
    font-weight: bold;
    width: 26rem;
}

#popupStorePayment a {
    position: absolute;
    right: 0;
    background-image: url('images/icon017.png')
}

#popupStorePayment button {
    margin-left: 18rem;
    margin-top: 2rem;
    width: auto;
}

#popupStorePayment .paySum {font-size: 1.8rem; color: #ff9933}

#storeProviderPopup {width: 50rem}
#storeProviderPopup .data {margin-top: 1rem}
#storeProviderPopup .data span {height: 4rem}
#storeProviderPopup .data span:nth-child(1) {width: 4rem}
#storeProviderPopup .data span:nth-child(3) {width: 10rem; text-align: right}
#storeProviderPopup .data div.imported span {
    font-weight: bold;
    color: #ff9933;
}

#storeProviderPopup .data div.imported:after {
    content: "Đã từng nhập hàng";
    position: absolute;
    width: 20rem;
    height: 5rem;
    background: #fff;
    left: 0;
    top: -5rem;
    color: #ff9933;
    text-align: center;
    line-height: 5rem;
    left: 50%;
    margin-left: -10rem;
    border-radius: 3px;
    display: none;
}

#storeProviderPopup .data .imported:hover:after {display: block}

#storeProviderPopup>div {position: relative}

#storeProviderPopup .data {
    width: 100%;
    height: 45rem;
    overflow-y: auto;
}

#storeProviderPopup .searchData {
    width: 100%;
    height: 46rem;
    background: #e1e1e8;
    position: absolute;
    z-index: 10;
    top: 4.1rem;
    overflow: hidden;
    display: none;
}

#storeProviderPopup .searchData .divTable:hover {
    background: #2b414f; 
    color: #f5f5fa;
    cursor: pointer;
}

#storeProviderPopup .searchData .divTable>div>span:nth-child(1) {width: 10rem}
#storeProviderPopup .searchData .divTable>div>span:nth-child(2) span {
    height: auto;
    float: left; 
    clear: both
}

#storeProviderPopup .searchData .divTable>div>span:nth-child(2) span:first-child {font-weight: bold;}

#storeProviderPopup .searchData img {max-width: 8rem; max-height: 8rem}


/* COST */
#cost .tb td:nth-child(1) {width: 5rem; text-align: center}
#cost .tb td:nth-child(2) {text-align: left;}
#cost .tb td:nth-child(3) {width: 15rem}
#cost .tb td:nth-child(4) {width: 18rem}
#cost .tb td:nth-child(5) {width: 15rem; text-align: right;}
#cost .tb td:nth-child(6) {width: 13rem; text-align: center}
#cost .rHead td:nth-child(7) {width: 6rem}
#cost .rBody td:nth-child(7) {width: 4.3rem}

#costAdd {width: 40rem}

#costAdd *:not(i) {float: left}

#costAdd>div {width: 100%; margin-bottom: 1rem}

#costAdd>div span {width: 100%; clear: both; font-weight: bold;}

#costAdd .type select {width: 36rem}

#costAdd .type a {background-image: url('images/icon026.png'); background-size: 40% auto}

#costAdd button {margin-top: 2rem;}


/* -----------------------------------
    POPUP STYLE 
------------------------------------*/
/* Add user */
#popupAddCustomer {width: 62rem}

#popupAddCustomer * {float: left}

#popupAddCustomer>div {
    height: 4rem;
    width: 100%;
    clear: both;
    margin-bottom: 1rem;
}

#popupAddCustomer>div>span:nth-child(1) {
    width: 15rem;
    text-align: right;
    line-height: 4rem;
    font-weight: bold;
    margin-right: 1rem;
}

#popupAddCustomer input,
#popupAddCustomer textarea {
    width: 40rem
}

#popupAddCustomer .inRadio {margin-right: 2rem}

#popupAddCustomer .but a {
    margin-left: 16rem;
    margin-top: 3rem;
}

/* Discount */
#popupDiscount {width: 38rem}

#popupDiscount .switch {
    width: 10rem;
    height: 4rem;
    border-radius: 2rem;
    border: solid 0.1rem #e1e1e8;
    background: #fff;
    display: block;
    position: relative;
    overflow: hidden;
}

#popupDiscount .switch label {
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
    background: #3498db;
    display: block;
    box-shadow: 0.2rem 0 0.1rem #666;
    cursor: pointer;
    position: relative;
    left: 0;
    transition: 0.5s;
}

#popupDiscount .switch label:before,
#popupDiscount .switch label:after {
    width: 6rem;
    line-height: 4rem;
    height: inherit;
    font-weight: bold;
    position: absolute;
    text-align: center;
    font-size: 1.8rem;
}

#popupDiscount .switch label:before {
    content: "%";
    color: #c2c8cc;
    right: 4rem;
}

#popupDiscount .switch label:after {
    content: "VNĐ";
    color: #3498db;
    left: 4rem;
}

#popupDiscount .switch input {display: none}

#popupDiscount * {float: left}

#popupDiscount div {clear: both}

#popupDiscount div:nth-of-type(1) span:first-child {
    margin-right: 2rem;
}

#popupDiscount div:nth-of-type(1) span:last-child {
    width: 10rem;
}

#popupDiscount div:nth-of-type(1) input {text-align: right; width: 19rem}

#popupDiscount div:nth-of-type(2) span {
    width: 7rem;
    height: 4rem;
    background: #c2c8cc;
    display: block;
    color: #f5f5fa;
    line-height: 4rem;
    text-align: center;
    font-weight: bold;
    border-radius: 0.3rem;
    margin: 2rem 0.5rem;
    cursor: pointer;
}

#popupDiscount div:nth-of-type(2) span:hover {background: #3498db}



/* Payment */
#popupPaymode {width: 38rem}

#popupPaymode * {float: left; clear: both}

#popupPaymode .inRadio {margin-bottom: 2rem}


/* Bill information */
#popupBillInfo {width: 40rem}

#popupBillInfo * {float: left}

#popupBillInfo>* {clear: both; margin-bottom: 1rem}

#popupBillInfo span:first-child {
    width: 8rem;
    text-align: right;
    margin-right: 1rem;
    line-height: 4rem;
    font-weight: bold;
}

#popupBillInfo input,
#popupBillInfo textarea {
    width: 25rem;
}

#popupBillInfo a {margin-left: 9rem; margin-top: 1rem}

/* popup account */
#popupChangePassword input[name=nPassA] {margin-top: 1rem}


/* --------- Add user -------- */
.AddPerson {width: 80rem}

.AddPerson * {float: left}

.AddPerson .packR {float: right}

.AddPerson>div {width: 45%}

.AddPerson>div>div,
.AddPerson>div>div>* {width: 100%; clear: both}

.AddPerson>div>div {margin-bottom: 1rem}

.AddPerson>div div span{font-weight: bold;}
.AddPerson>div div span:last-child {height: 4rem; line-height: 4rem}

.AddPerson .inRadio {margin-right: 3rem}
.AddPerson button,
.AddPerson a {margin-top: 1rem; margin-right: 2rem; cursor: default;}

/* User */

#popupAccount .id>div,
#popupUserAdd .id>div {
    clear: none;
    width: 45%;
}

#popupAccount .id>div:last-child ,
#popupUserAdd .id>div:last-child {float: right}

/* Customer */
#popupCustomerAdd textarea {height: 10.6rem}

/* Provider */
#popupProviderAdd textarea {height: 10.6rem}
#popupProviderAdd .butProviderProduct {margin: 1rem 0 0 0}


/* --------- Search -------- */
.popupSearch {
    width: 30rem
}

.popupSearch .field > :first-child {
    display: block;
    font-size: .8em;
    padding: 0 1rem;
    color: var(--color-description)
}
.popupSearch .field > :nth-child(2) {
    margin-top: .3em;
}

.popupSearch .legend {
    display: block;
    margin-bottom: .5rem;
    font-size: .8em;
    color: #808080
}

.popupSearch > * {
    float: left;
    clear: both;
    margin-bottom: 1rem;
}
.popupSearch > :not(button) {
    width: 100%;
}

.popupSearch button {margin-top: 1rem;}


.popupSearch div:not(.field) > input {
    width: 48%
}

.popupSearch div:not(.field) > input:last-child {float: right}

.popupSearch .inRadio:nth-of-type(n+2) {
    margin-left: 3rem;
}

.popupSearch .date {width: 100%}
.popupSearch .date * {float: left}
.popupSearch .date span {width: 14%; line-height: 4rem }
.popupSearch .date select {width: 27%; margin-right: 2.5%}
.popupSearch .date select:last-child {margin-right: 0}

.popupSearch .action > :nth-child(n+2) {
    margin-left: 2rem
}


/* ---------Export-------- */
div[class^="Export"] {width: 40rem}
div[class^="Export"] *:not(i) {float: left}
div[class^="Export"] > div {width: 20rem}
div[class^="Export"] > .colR {float: right}
div[class^="Export"] button {margin-top: 2rem; margin-right: 2rem;}

div[class^="Export"] > div > div {
    clear: both;
    margin-bottom: 1rem;
    display: flex;
}
div[class^="Export"] input[type=checkbox] {
    margin-right: 1rem;
}


.ExportOrder .date {width: 100%; margin-top: 3rem}
.ExportOrder .date input {width: 12rem; margin-right: 1.5rem; text-align: center}
.ExportOrder button {margin-right: 3rem !important}



/* POWER */
#powerSetting {
    position: absolute;
    width: 100% !important;
    height: 100%;
}

#powerSetting .data {
    width: 100%; 
    height: 100%; 
    overflow-y: scroll;
    position: relative;
    box-sizing: border-box;
}

#powerSetting span {border-right: solid 1px #e1e1e8 !important}
#powerSetting span:nth-child(1){width: 4rem}
#powerSetting span:nth-child(2){text-align: left}
#powerSetting span:nth-child(3),
#powerSetting span:nth-child(4),
#powerSetting span:nth-child(5),
#powerSetting span:nth-child(6) {width: 15rem}

#powerSetting label * {float: left}

#powerSetting span label {
    line-height: 2rem;
    width: 50%;
    display: inline-block;
}

#powerSetting .divTable div:nth-child(2n) span {
    background: #ededf4;
    border-top: solid 1px #e1e1e8;
    border-bottom: solid 1px #e1e1e8;
}

#powerSetting label.checked {color: #ff9933; font-weight: bold}


/* REPORT */
#chart {width: 100%; height: 99%}


/* CONFIG */
#config .rBot {position: relative; padding: 0}
#config .rBot h1 {
    color: #3498db;
    font-size: 2.4rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: solid 1px #e1e1e8;
    display: block;
}

#config .rBot .content>* {margin-top: 3rem}
#config .rBot .content>*:first-child {margin-top: 0}
#config .rBot .content>*:last-child {margin-bottom: 2rem}

#config .rBot .info div span:nth-of-type(1){
    width: 15rem;
    text-align: right;
    color: #8b9094;
}

#config .info div span:nth-of-type(1):after {
    content: ":";
    margin-left: 0.5rem;
}

#config .rBot button {margin-top: 2rem}


.popupSearch.pConfig input {color: #2b414f}

#config .setup .divTable span {padding: 0.5rem}
#config .setup .divTable span:first-child {
    width: 15rem;
    text-align: right
}

#config .setup .divTable input {text-align: right}

#config .frame {
    position: absolute; 
    width: 100%;
    height: 100%;
    padding-left: 2rem;
    box-sizing: border-box;
}

#config .content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}


/* SAMPLE */
#sampleAdd {width: 40rem}

#sampleAdd textarea {
    height: 18rem;
    margin-top: 2rem;
}

#sampleAdd button {margin-top: 2rem}

#sample .tb td:nth-child(1) {width: 5rem; text-align: center}
#sample .tb td:nth-child(2) {width: 25rem}
#sample .tb td:nth-child(4) {width: 13rem}
#sample .tb td:nth-child(5) {width: 5rem}


/*
 * ----------------------------------------
 * Cart
 * ----------------------------------------
 */
#cart .content > table > tbody > tr > td {text-align: center}
#cart .content > table > tbody > tr > td:nth-child(1) {width: 5rem}
#cart .content > table > tbody > tr > td:nth-child(2) {width: 20rem; text-align: left}
#cart .content > table > tbody > tr > td:nth-child(3) {width: 10rem; text-align: right}
#cart .content > table > tbody > tr > td:nth-child(4) {width: 12rem; font-weight: bold; text-align: right}
#cart .content > table > tbody > tr > td:nth-child(5) {text-align: left}
#cart .content > table > tbody > tr > td:nth-child(6) {width: 8rem; font-size: .9em}
#cart .content > table > tbody > tr > td:nth-child(7) {width: 12rem}
#cart .content > table > tbody > tr > td:nth-child(8) {width: 8rem}

#cart .content > table > tbody > tr[data-state='0'] > td {
    background: #e4fbdd;
}
#cart .content > table > tbody > tr[data-state='3'] > td {
    background: #fbdddd
}

#cart .content > table > tbody > tr > td select {
    height: 3rem
}
#cart .content > table > tbody > tr > td img {
    max-height: 100%;
    max-width: 100%;
}


#cart .content .detail .tabs input.tab1:checked ~ .tabCon .tabCon1,
#cart .content .detail .tabs input.tab2:checked ~ .tabCon .tabCon2 {
    opacity: 1;
    z-index: 10 !important
}

#cart .content .detail .frame {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
#cart .content .detail .tabCon1 .box {
    display: flex;
    justify-content: space-between;
}
#cart .content .detail .tabCon1 .box .L {
    width: 35%;
}
#cart .content .detail .tabCon1 .box .R {
    width: 60%
}
#cart .content .detail .tabCon1 .box .item div {
    display: flex;
    margin: 1em 0;
}
#cart .content .detail .tabCon1 .box .item span:nth-child(1) {
    width: 8rem;
    color: #999
}
#cart .content .detail .tabCon1 .box .item span:nth-child(2) {
    width: calc(100% - 8rem)
}


#cart .content .detail .tabCon2 .divTable span {text-align: right}
#cart .content .detail .tabCon2 .divTable span:nth-child(1) {width: 5rem; text-align: center}
#cart .content .detail .tabCon2 .divTable span:nth-child(2) {width: 10rem; text-align: center}
#cart .content .detail .tabCon2 .divTable span:nth-child(3) {text-align: left}
#cart .content .detail .tabCon2 .divTable span:nth-child(4) {width: 12rem}
#cart .content .detail .tabCon2 .divTable span:nth-child(5) {width: 10rem}
#cart .content .detail .tabCon2 .divTable span:nth-child(6) {width: 15rem}

#cart .content .detail .tabCon2 .divTable span p {
    margin: .5em 0;
}
#cart .content .detail .tabCon2 .divTable span p.id {
    color: #3498db;
    font-size: .9em;
    letter-spacing: .1em;
}

#conLeft [data-count] {
    position: relative;
}
#conLeft [data-count]:before {
    content: attr(data-count);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    text-align: center;
    line-height: 1.4rem;
    background: red;
    font-size: .6em;
    color: #fff;
    display: block;
    position: absolute;
    top: .5em;
    left: .5em;
}


#popupCartUpdate {width: 30rem}
#popupCartUpdate > div:nth-of-type(n+2) {
    margin-top: 2em;
}
#popupCartUpdate > * > label {
    display: block;
    margin-bottom: .3em;
    color: #666
}


/*
 * ----------------------------------------
 * Responsive
 * ----------------------------------------
 */

@media only screen and (max-width: 1024px) {
    
    #login form {
        width: 70%;
        height: 17rem !important;
        background: none;
        margin-left: -35%;
        margin-top: -8.5rem;
        box-shadow: none;
    }
    
    #login .info {display: none}
    
    #login .input,
    #login .input>div {
        width: 100%; 
        height: 100%; 
        padding: 0; 
        border: none;
        text-align: center;
    }
    
    #login .input * {float: left; clear: both}
    
    #login .input span,
    #login .input span input {width: 100%; margin: 0 0 1rem 0}
    
    #login button {float: none !important; margin-top: 0.5rem; display: inline-block}

    #productAdd {width: 100vw}
}


@media only screen and (max-width: 768px) {
    
    /* INDEX */
    #index .pack {
        float: left;
        width: 100%;
        height: 10rem;
        background: #fff;
        display: inline-block;
        padding: 2rem;
        box-sizing: border-box;
        margin: 0 0 2rem 0 !important;
        clear: both;
    }
    
    #index .lb {
        background: none;
        padding: 0;
        height: 50%;
    }
    
    #index .pack:nth-of-type(1) {background: url('images/icon70x03.png') 3rem center no-repeat #fff}
    #index .pack:nth-of-type(2){background: url('images/icon70x04.png') 3rem center no-repeat #fff}
    #index .pack:nth-of-type(3) {background: url('images/icon70x05.png') 3rem center no-repeat #fff}
    
    #popupAccount {width: 100vw}
    
    /* SELL */
    
    #sell .c1,
    #sell .c2 {
        width: 100%;
        float: left;
        display: block;
        padding: 0;
    }
    
    #sell .c1r1 .searchData {height: 100vh}
    
    #sell .c2 {
        height: calc(100vh - 7rem);
        height: -moz-calc(100vh - 7rem);
        height: -webkit-calc(100vh - 7rem);
    }
    
    #sell .c1r2,
    #sell .c1r3 {display: none}
    
    
    /* ORDER */
    #orderForm .tabCon .butPrint,
    #orderForm .tabCon .divTable span:nth-child(4),
    #orderForm .tabCon .divTable span:nth-child(6),
    #orderForm .rTop li:nth-of-type(3),
    #orderForm .tb td:nth-child(6) {display: none}
    
    
    /* RESTORE */
    #restore .col1,
    #restore .col2 {
        width: 100%;
        float: left;
        display: block;
        padding: 0;
    }
    
    #restore .col1 {
        height: calc(100vh - 50rem);
        height: -moz-calc(100vh - 50rem);
        height: -webkit-calc(100vh - 50rem);
        margin-bottom: 2rem;
    }
    
    
    /* PRODUCT */
    #productProvider .tb td:nth-child(7),
    #productProvider .tb td:nth-child(8),
    #product .tb td:nth-child(5),
    #product .tb td:nth-child(6),
    #productProvider .rTop li:nth-of-type(1),
    #product .rTop li:nth-of-type(1),
    #product .rTop li:nth-of-type(5) {display: none}
    
    
    /* CUSTOMER */
    #popupCustomerOrder .divTable span:nth-child(4),
    #popupCustomerOrder .divTable span:nth-child(6),
    #customer .tabCon3 .divTable span:nth-child(5),
    #customer .tabCon3 .divTable span:nth-child(6),
    #customer .tabCon2 .divTable span:nth-child(5),
    #customer .tabCon2 .divTable span:nth-child(6),
    #customer .tb td:nth-child(6),
    #customer .rTop li:nth-of-type(1),
    #customer .rTop li:nth-of-type(4) {display: none}
    
    #popupCustomerOrder {width: 100vw}
    
    #popupCustomerAdd {width: 100vw}
    
    
    /* DEPOT */
    #depot .tabCon1 .divTable span:nth-child(4),
    #depot .tb td:nth-child(3),
    #depot .tb td:nth-child(7),
    #depot .rTop li:nth-of-type(4) {display: none}
    
    #depotPopupUpdate {width: 100vw}
    
    
    /* STORE */
    #store .inData>div>span:nth-child(1),
    #store .inData>div>span:nth-child(2) {width: 26vw}
    
    
    /* STOCK */
    #stock .rTop li:nth-of-type(2),
    #stock .tb td:nth-child(6),
    #stock .tb td:nth-child(7) {display: none}
    
    #stock .rMid .box {
        background-position: left top;
        background-size: 3rem auto;
    }
    
    /* PROVIDER */
    #provider .tabCon3 .divTable span:nth-child(5),
    #provider .tabCon3 .divTable span:nth-child(6),
    #provider .tabCon2 .divTable span:nth-child(5),
    #provider .tabCon2 .divTable span:nth-child(6),
    #provider .tb td:nth-child(6),
    #provider .rTop li:nth-of-type(1),
    #provider .rTop li:nth-of-type(4) {display: none}
    
    #popupUserAdd,
    #popupProviderImport,
    #popupProviderAdd {width: 100vw}
    
    
    /* COST */
    #cost .tb td:nth-child(3),
    #cost .tb td:nth-child(4),
    #cost .rTop li:nth-of-type(3) {display: none}
    
    
    /* USER */
    #user .tb td:nth-child(3),
    #user .tb td:nth-child(4),
    #user .rTop li:nth-of-type(1),
    #user .rTop li:nth-of-type(4) {display: none}
}


@media only screen and (max-width: 640px) {    
    #popupFore {
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    #popupHtml {padding: 0 !important;}
    
    #popupHtml>* {padding: 1rem !important ; box-sizing: border-box !important;}
    
    #index .pack {
        background-size: 5rem auto !important;
        background-position: 1rem center !important;
    }
    
    #popupAccount,
    #popupChangePassword {width: 100vw}
    
    #popupAccount>div {
        float: left;
        width: 100%;
    }
    
    #popupAccount button:last-child {margin-right: 0}
    
    #conRight {
        float: left;
        display: block !important;
        width: 100% !important;
    }
    
    #conRight .rTop ul {float: left; clear: both}
    #conRight .rTop ul li{padding: 0 1rem 0 0}
    
    #conRight .cell {padding: 1rem}
    
    #conRight .content {position: relative; height: auto}

    #chart {height: 80rem}
    
    .listRecords .detail>td {height: 70rem}
    
    .report .rTop h1 {line-height: normal !important}
    .report .rTop ul li:last-child {display: none !important}
    
    /* SELL */
    #sell .data {position: relative; height: auto}
    
    #sell .data span:nth-child(6) {display: none}
    
    #sell .c2 {height: auto}
    #sell .c2r1 {padding: 0}
    
    #sell .row,
    #sell .c2r3>table,
    #sell .c2r3r1,
    #sell .c2r3r2,
    #sell .c2r3r3 {float: left}
    
    #sell .c2r3r1 {width: 65% !important}
    #sell .c2r3r2 {width: 35% !important}
    
    #sell .c2r3r3 {width: 100% !important}
    #sell .c2r3r3 a {
        width: 32% !important;
        float: left; 
        clear: none !important;
        margin: 1rem 0 !important;
        box-sizing: border-box !important;
    }
    
    #sell .c2r3r3 a:nth-child(2) {margin: 1rem 2% !important}
    
    
    /* ORDER FORM */
    #orderForm .tabCon3 .divTable span:nth-child(7),
    #orderForm .tb td:nth-child(4),
    #orderForm .rTop ul li:nth-child(1) {display: none}
    
    #orderForm .content {height: auto}
    
    #orderForm .tabCon .abut {float: left; clear: both}
    
    #orderForm .tabCon .abut a {margin: 0 1rem 0 0}
    
    #orderForm .tabCon1 .data {height: 36rem}
    
    #orderForm .tabCon2 .pk {
        float: left;
        clear: both;
        width: 100%;
    }
    
    #orderForm .tabCon3 .data {height: 44rem}
    
    
    /* RESTORE */
    #restore .col1 {height: auto}
    #restore .data {position: relative; height: auto}
    #restore .divTable span:nth-child(6) {display: none}
    
    
    
    /* PRODUCT */
    #product .tabCon2 .divTable span:nth-child(3),
    #product .tabCon2 .divTable span:nth-child(4),
    #product .tb td:nth-child(7),
    #product .tb td:nth-child(8) {display: none}
    
    #product .tabCon1 div[class^=pack]{
        float: left;
        width: 70% !important;
    }
    
    #productAdd {width: 100vw}
    
    #productAdd div[class^=col] {
        float: left;
        width: 100%;
    }
    
    #productAdd select {
        width: calc(100% - 4rem) !important;
        width: -moz-calc(100% - 4rem) !important;
        width: -webkit-calc(100% - 4rem) !important;
    }
    
    #productPrice {width: 100vw; padding-top: 5rem !important}
    
    
    /* CUSTOMER */
    #customer .tb td:nth-child(5) {display: none}

    #popupCustomerAdd div[class^=pack] {
        float: left;
        width: 100%;
    }
    
    /* DEPOT */
    #depot .tb td:nth-child(5) {display: none}
    
    
    /* STOCK */
    #stock .rMid {height: auto !important}
    
    #stock .divTable, 
    #stock .divTable * {float: left !important; display: block !important}
    
    #stock .divTable .box,
    #stock .divTable span {
        width: 100% !important;
        text-align: right;
    }
    
    #stock .divTable span {margin-bottom: 1rem}
    
    #stock .rMid .box {
        background-size: auto;
    }
    
    
    /* STORE */
    #store .rTop ul {float: right; clear: none}
    
    #store .rMid .inData>div>span {
        float: left; 
        display: block; 
        clear: both;
        margin-bottom: 2rem;
        width: 100%;
    }
    
    #store .rMid .inData>div>span a {
        float: left;
        margin: 0 2rem 0 0 !important
    }
    
    #store .rMid .inData input {width: 100%}
    
    #store .tb td:nth-child(6) {display: none}
    
    #storeProviderPopup {width: 100vw}
    
    
    /* PROVIDER */
    #provider .tb td:nth-child(5) {display: none}
    
    #provider .pk {
        float: left;
        width: 100% !important;
        clear: both;
    }
    
    
    /* USER */
    #user .tabCon1 .pk {float: left; width: 100%}
    
    #popupUserAdd div[class^=pack] {float: left; width: 100%}
    
    
    /* POWER */
    #powerSetting,
    #powerSetting>* {float: left}
    
    #config,
    #powerSetting {position: static !important}
    #powerSetting .data {height: auto}
    #powerSetting label {float: left; clear: both; width: 100% !important}
    #powerSetting span:nth-child(3),
    #powerSetting span:nth-child(4),
    #powerSetting span:nth-child(5),
    #powerSetting span:nth-child(6) {width: 10rem}
    
    #config .frame {position: static}
    .popupSearch.pConfig {width: 100vw}
}


@media only screen and (max-width: 360px) {   
    #popupHtml>* {width: 100vw}
    .page {clear: both !important; float: left !important}
    
    
    /* SELL */
    #sell .c2r3r1,
    #sell .c2r3r2 {
        clear: both;
        padding: 0 !important;
        width: 100% !important;
    }
    
    #sell .data span:nth-child(1),
    #sell .data span:nth-child(2) {display: none}
    
    #sell .c2r3r3 a {
        float: left;
        clear: both !important;
        width: 100% !important;
    }
    
    #sell .c2r3r3 a:nth-child(2) {margin: 1rem 0 !important}
    
    
    /* ORDER FOM */
    #orderForm .tabCon1 .divTable span:nth-child(1),
    #orderForm .tabCon1 .divTable span:nth-child(2),
    #orderForm .tb td:nth-child(3) {display: none}
    
    #orderForm .abut a {width: 3rem; overflow: hidden}
    #orderForm .abut a:last-child {margin: 0 !important}
    
    
    /* RESTORE */
    #restore .data .divTable>div>span:nth-child(1),
    #restore .data .divTable>div>span:nth-child(2) {display: none}
    
    #restore .rTop ul {float: right; clear: none}
    
    
    /* PRODUCT */
    #productProvider .tb td:nth-child(1),
    #productProvider .tb td:nth-child(2),
    #product .tb td:nth-child(2) {display: none}
    
    #product .tabCon1>* {clear: both; width: 100% !important}
    #product .tabCon1 .img {height: 10rem; text-align: center !important}
    #product .tabCon1 img {max-height: 10rem; position: static}
    
    #product .divTable span:nth-child(1) {display: inline-block; width: 10rem !important}
    
    
    /* CUSTOMER */
    #customer .tb td:nth-child(2) {display: none}

    #customer .abut a {float: left !important; margin: 0 1rem 0 0; width: 3rem; overflow: hidden}
    #customer .abut a:last-child {margin: 0 !important}
    
    #customer .pk {
        float:left !important; 
        clear: both !important; 
        width: 100% !important
    }
    #customer .pk span:nth-child(1) {width: 10rem !important}
    
    
    /* DEPOT */
    #depot .tb td:nth-child(1),
    #depot .tb td:nth-child(2) {display: none}
    
    
    
    /* STOCK */
    #stock .tb td:nth-child(1),
    #stock .tb td:nth-child(2) {display: none}
    
    #stock .tb td:nth-child(5) {width: 8rem !important}
    
    #stock .rMid .box {
        background-size: 5rem;
    }
    
    
    /* STORE */
    #store .tb td:nth-child(1),
    #store .tb td:nth-child(2) {display: none}
    
    
    /* PROVIDER */
    #provider .tb td:nth-child(2) {display: none}
    
    #provider .abut a {float: left !important; margin: 0 1rem 0 0; width: 3rem; overflow: hidden}
    #provider .abut a:last-child {margin: 0 !important}
    #provider .pk span:nth-child(1) {width: 10rem !important}

    #popupProviderAdd>* {float: left; clear: both; width: 100%}
    #popupProviderAdd .butProviderProduct {box-sizing: border-box;}
    
    
    /* USER */
    #user .tb td:nth-child(5),
    #user .tb td:nth-child(6) {display: none}
    
    #user .abut a {float: left !important; margin: 0 1rem 0 0; width: 3rem; overflow: hidden}
    #user .abut a:last-child {margin: 0 !important}
    #user .pk span:nth-child(1) {width: 10rem !important}
    
    #popupUserAdd a {width: 10rem !important; margin-right: 0 !important}
}