/*---------------------------------------------------- Address Book -----------------------------*/
#addressList
{
    position:relative;
    display:flex;
    flex-wrap: wrap;
    width:100%;
    align-items: flex-start;
    justify-content: space-around;
}

#addressList>div
{
    position:relative;
    width:100%;
    max-width:320px;
    margin:8px;
    border-radius:15px;
    padding:8px;
    box-sizing: border-box;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}
.BPEditRight
{
    position:absolute;
    right:0;
    top:0;
}
.BPRemoveRight
{
    position:absolute;
    right:0;
    top:60px;

}
/*---------------------------------------------------- Size Chart --------------------------------*/
#SIZECHART
{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height: 100%;
    display:none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;    
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 20000;
    overflow-y:auto;

}
#SIZECHART>div
{
    position:relative;
    padding:15px;
    width:98%;
    max-width:600px;
    margin:auto;
    border-radius: 20px;
    background-color: white;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}
#SIZECHART>div>img
{
    position:absolute;
    right:5px;
    top:5px;
    cursor: pointer;    
}
.sizeChart
{
  position: relative;
  width:100%;   
  font-size:16px;               
}
.sizeChart>div
{
  position: relative;
  display:flex;
  align-items: stretch;
  justify-content: stretch;
  border-top: 1px solid gray;
}
.sizeChart>div:last-child
{
  border-bottom: 1px solid gray;
}
.sizeChart>div:first-child
{
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.sizeChart>div>div
{
  text-align: center;
  display:flex;
  width:50%;
  justify-content: center;
  align-items: center;
  border-left:1px solid gray;
  padding:10px 5px;
  box-sizing: border-box;
}
.sizeChart>div>div:last-child
{
  border-right:1px solid gray;
}
.sizeChart>div>div.title
{
  background-color: #e7e7e7;
  font-weight: bold;
}
.sizeChart>div>div[contenteditable]{background-color: #fff9e7;}


/*-------------------------------------------------- Check out -------------------*/
#checkoutProgress
{
    width:100%;
    display:flex;
    justify-content: space-around;
    align-items: center;
}
#checkoutProgress>div 
{
    width:33.333%;
    text-align: center;
}
#checkoutGauge
{
    position:relative;
    width:100%;
    height:3px;
    background-color: silver;
    background: linear-gradient(to right,white,silver,silver,silver,white);
    margin:15px 0;
    display:flex;
    justify-content: space-around;
    align-items: center;
}
.CheckoutStep
{
    width:24px;
    height:24px;
    border-radius: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;

    border:2px solid silver;
    color:gray;
    background-color: white;    
}
.CheckoutStep.current
{
    color:white;
    background-color: black;
    border:2px solid white;
}
.CheckoutStep.done
{
    border:0px solid white;
    background-color: none;    
}
.CheckoutStep.done>img
{
    width:24px;
    height: auto;
}


#add2BagPopup
{
    position: fixed;
    z-index: 10000;
    display:none;
    top:50%;    
    right:50%;    
    text-align:center;
    flex-wrap:wrap;
    align-content: center;
    justify-content: center;

    margin-top:-100px;
    margin-right:-100px;
    width:200px;
    height:200px;
    background-color: white;
    font-size:16px;
    border-radius: 100px;
    box-sizing: border-box;
    overflow:hidden;
    padding:10px;
    opacity:1;
    border:10px solid white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: none;
}
#add2BagPopup>img
{
    border-radius: 10px;
}

/*-------------------------------------------------- Returns -----------------------------------*/
.SerialReturn
{
    position:relative;
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:50px;
}
.SerialReturn>div:nth-child(1)
{
    width:100%;
}
.SerialReturn>div:nth-child(2)
{
    width:110px;
    display:flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}
.ReturnHeader
{
    border-radius: 20px 20px 0 0;
    position: relative;
    display: flex;
    font-size: 14px;
    height: 30px;
    margin-top: 5px;
    justify-content: space-between;
    align-items: center;
    background-color: #213d72;
    width:100%;
    color: white;
}
.ReturnHeader>div{box-sizing: border-box;padding:0 5px;}
.ReturnHeader>div:nth-child(1){width:80%;text-align:center}
.ReturnHeader>div:nth-child(2){width:100px;text-align:center}
.ReturnHeader>div:nth-child(3){width:40px;text-align:center}

.ReturnItemSelector
{   
    display:flex; 
    width:100%;
    box-sizing: border-box;
    padding:5px;
    align-items: flex-start;
    justify-content: space-between;
    border-left: 1px solid #213d72;
    border-right: 1px solid #213d72;
    transition: all 0.3s
}
.ReturnItemSelector:last-child{border-bottom: 1px solid #213d72;}

.ReturnItemSelector:nth-child(odd){background-color: #f3fafd;}
.ReturnItemSelector>div{height:100%;box-sizing: border-box;padding:0 5px;}
.ReturnItemSelector>div:nth-child(1)
{
    width:80%;
    display: flex;
    justify-content: flex-start
}
.ReturnItemSelector>div:nth-child(1)img{width:100%;height:auto;}
.ReturnItemSelector>div:nth-child(1)>div:nth-child(1){display:flex;flex-flow: column;align-items: flex-start;width:60px;height:100%;margin-right:10px;}
.ReturnItemSelector>div:nth-child(1)>div:nth-child(2){display:flex;flex-flow: column;align-items: flex-start;width:100%;}
.ReturnItemSelector>div:nth-child(2) {width:100px;display:flex;justify-content: center;align-items: center;align-content: center}
.ReturnItemSelector>div:nth-child(3) {width:40px;display:flex;justify-content: center;align-items: center;align-content: center}

.ReturnItemSelector .TCombobox{width:100%;}



/*-------------------------------------  Package ---------------------------------*/
.PackageHeader
{
    width:100%;
    margin-top:15px;
    box-sizing: border-box;
    position:relative;
    padding:10px;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    color:#422300;
    border-radius: 10px 10px 0 0;
    background-color: #fffae3;
    background:linear-gradient(#fffae3,#fffae3,white);
    border:1px solid #dfbf95;
    
    border-bottom:none;
}

.PackageHeader>div:nth-child(1){
    width:80px;
    display:flex;
    align-items: center;
    justify-content: center;}
.PackageHeader>div:nth-child(2){width:100%;padding-left:10px;}

.PackageItem
{
    width:100%;
    
    box-sizing: border-box;
    position:relative;
    padding:10px;
    display:flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-star;
    border-left:1px solid  #dfbf95;
    border-right:1px solid  #dfbf95;
}
.LastPackageItem{border-bottom:1px solid  #dfbf95;}

.PackageItem:nth-child(even){background-color: #f5fafa;}
.PackageItem>div:nth-child(1){width:100%;display:flex;justify-content: space-between}
.PackageItem>div:nth-child(1)>div:nth-child(1)
{
    width:70px;            
}
.PackageItem>div:nth-child(1)>div:nth-child(2)
{
    width:100%;        
    padding:10px;    
}
.PackageItem>div:nth-child(1)>div:nth-child(3)
{
    width:80px;    
    display:flex;
    align-items: center;
    font-size:30px;
    justify-content: center;
    padding-top:10px;
}

.PackageItem>div:nth-child(2)
{
    width:80%;
    box-sizing: border-box;
    margin:10px auto;   
}


.TDocLink
{
    display:flex;
    position:relative;
    left:0;
    align-items: center;
    cursor:pointer;
    transition: all 0.3s;
    opacity:1;
}
.TDocLink:hover {opacity:0.7;left:10px;}

.LotNumberList
{
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;    
}
.LotNumberList>div{box-sizing: border-box; width:33.333%;text-align: center;padding:7px 0;border-left:1px solid  #deebf7;border-right:1px solid  #deebf7}


/*-----------------------------  Sale Document -----------------------------------------------*/

.TDocNumber
{
    font-size: 22px;  
    font-weight: bold;  
}
.TDocNumber div{font-weight: normal; font-size: 13px;font-style: italic; }

.TDocTable
    {
        clear: both;
        position:relative;
        width:100%;
        max-width:1200px;
        margin:0 auto;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }

#staticDocHeader b{color:#0a41a8;}
.TDocHeader
{
    border-radius: 10px 10px 0 0;
    position:relative;
    display:flex;
    font-size:14px;    
    height:30px;    
    margin-top:5px;
    justify-content: space-between;
    align-items: center;
    background-color:#dddddd;
    font-weight: bold;
    color:black;    
} 

.TDocHeader >div{position:relative;justify-content: center;align-items: center;display:flex;}
.TDocHeader >div:nth-child(1) {width:80%;}
.TDocHeader >div:nth-child(2) {width:110px;flex-shrink: 0;justify-content: flex-end;padding-right:10px;}

/*------------------- Read Only -------------------*/

.TSaleDocItemReadOnly
{
    position:relative;
    height: 100%;
    padding:5px;        
    text-align:center;
    box-sizing: border-box;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    height:100px;
    overflow:hidden;        
}
 
.TSaleDocItemReadOnly >div{position:relative;float:left;height: 100%;text-align:center;float:left;box-sizing: border-box;}
.TSaleDocItemReadOnly >div:nth-child(1) {width:60px;display:flex;align-items: center;justify-content: center}
.TSaleDocItemReadOnly >div:nth-child(1) img {width:100%;height:auto;}
.TSaleDocItemReadOnly >div:nth-child(2) {width:40%;padding:0px 5px;text-align:left;}    
.TSaleDocItemReadOnly >div:nth-child(3) {width:100px;padding-top:22px;color:#ff7b00;font-size:16px;}
.TSaleDocItemReadOnly >div:nth-child(3) span{font-size:13px; color:#6f7f90b3;font-weight:normal;font-style: italic;}
.TSaleDocItemReadOnly >div:nth-child(4) {width:70px;padding-top:22px;}

.TSaleDocItemReadOnly >div:nth-child(4) span i{color:#6f7f90b3;font-size:12px}
.TSaleDocItemReadOnly >div:nth-child(4) span b{color:#6f7f90;font-size:14px}
.TSaleDocItemReadOnly >div:nth-child(5) {width:50px;padding-top:22px;}
.TSaleDocItemReadOnly >div:nth-child(6) {width:90px;padding-top:22px;text-align:right; color:#3a5474;font-weight: bold;font-size:16px;}
.TSaleDocItemReadOnly >div:nth-child(6) div {position:absolute;right:5px;bottom:0px;}

/* ----------------- Editable -------------------*/

.TSaleDocItem 
{
    position:relative;
    padding:0 5px;     
    
    box-sizing: border-box;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;    
    width:100%;
    margin-top:15px;
}    

.TSaleDocItem>a
{
    position:relative;
    width:50px;
    flex-shrink: 0;
    
}
.TSaleDocItem>a>img 
{
    width:100%;
    height:auto;
}

.TSaleDocItem>div:nth-child(2)
{
    width:95%;
    margin:0 8px;
}
.TSaleDocItem>div:nth-child(3)
{
    width:70px;
    text-align:right;
}

.itemName{position:relative;width:100%;overflow:hidden;height:18px;font-weight: bold;}
.itemSKU{position:relative;width:100%;overflow:hidden;height:20px;color:gray}
.itemPriceWas{margin-left:5px;font-size: 85%; font-style: italic;color:gray}
.itemDiscount{font-size: 85%; color:#ff0040}


.TSaleDocItemSizeNColor
{
    position:relative;
    padding:0 5px;
    
    box-sizing: border-box;
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;    
    width:100%;
}

.TSaleDocItemQty
{
    position:relative;
    padding:0 5px;      
    
    box-sizing: border-box;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;    
    width:100%;
    margin-bottom:5px;
    border-bottom: 1px solid #e7e7e7;
}

.TSaleDocItemQty>div:nth-child(1)
{
    width:160px;
    display:flex;
    align-self: center;
    align-items: center;
    justify-content: center;
}

.TSaleDocItemQty>div:nth-child(2)
{
    /*width:70px;*/
    display:flex;
    align-self: center;
    text-align: center;
    align-items: center;
    justify-content: center;
}


    .itemSize{position:relative;float:left;width:95px;margin-right:10px;}
    .itemSizereadOnly{position:relative;float:left;margin-top:0px;font-size:13px;line-height:13px;}
    .itemColor{position:relative;float:left;width:120px;}
    .itemSize .TCombobox,.itemColor .TCombobox{font-size:13px;}
    .TSaleDocSizeNcolor{position:absolute;left:80px;bottom:5px;;display:flex;}
    .TSaleDocSizeNcolor>div{margin:0 5px}
    .TSaleDocItemBPRemove{position:absolute;right:5px;top:60px;}
    .itemOptions{position:relative;top:-5px;width:150%;z-index: 50;}
    
    
    .itemQty{position:absolute; width:40px;left:90px;top:40px;display:none;}
    .itemQty span i{position:absolute;top:35px;left:45px;color:#6f7f90b3;width:60px;font-size:11px}
    .itemQty span b{position:absolute;left:0px;color:#6f7f90;font-size:13px}
    
    .itemQtyreadOnly {position:relative;width:100%;display:none;margin-bottom:5px;}
    .itemQtyreadOnly>span{position:absolute;display:inline-block;top:17px;left:0;color:#6f7f90b3;;font-size:11px}
         

    .TDocTotals
    {
        position: relative;
        display:flex;
        flex-flow: column;
        width:100%;
        border:1px solid #2b2c30;        
        border-radius: 0 0 10px 10px;
        box-sizing: border-box;
        overflow:hidden;
        font-size:16px;
        background-color: #f9fafb;
    }
    .TDocTotals>div{display:flex;flex-flow: row;width:100%;padding:7px 5px;box-sizing:border-box;justify-content: space-between;align-items: center;}
    .TDocTotals>div>div:nth-child(1){width:90%;text-align: left;display:flex;align-items: center;justify-content: flex-start;}
    .TDocTotals>div>div:nth-child(1)>img{margin-left:5px;}
    .TDocTotals>div>div:nth-child(2){width:150px;text-align: right;}
    .TDocDiscount {background-color: #00970d;color:white;font-weight: bold;}    
    .GTotal{background-color: #2b2c30;color:white; font-weight: bolder;font-size:18px;}
    .BDue{background-color: #009ffb;color:white; font-weight: bolder;font-size:18px;}
 
    .TPayment
    {
        border:1px solid #213d72;
        width:100%;
        max-width:500px;
        box-sizing: border-box;
        position: relative;
        padding:0;
        font-size:110%;
        margin:0;        
        border-radius: 0 0 10px 10px;
        overflow:hidden;
    }
    .TPayment table {width:100%; border-collapse:collapse;background-color: #f6faff}
    .TPayment table tr:nth-child(1){background-color: #d9dee4}
    .TPayment table td:nth-child(odd){text-align: left;}
    .TPayment table td:nth-child(even){text-align: right;}
    .TPayment img {margin-left:5px;height:30px; width:auto; vertical-align: middle;cursor: pointer;}


    .addItem
    {
        position:relative;
        float:left;
        margin-left:0%;
        width:50%
    }
    
    
    .ReturnItemSelector .TCombobox{width:150%;}
    /*.TSaleDocItem >div:nth-child(3) img{position:absolute;top:10px;left:50px}*/
    .THListPurchaseOrder,.THListFulFillOrder{font-size: 13px;}
    
    .TSaleDocSizeNcolor{left:-70px;width:200%;}
    .THListFulFillOrder>div:nth-child(1),.TIListFulFillOrder>div:nth-child(1){ display:none}
    .THListFulFillOrder>div:nth-child(4),.TIListFulFillOrder>div:nth-child(4){ display:none}
    .TIListFulFillOrder>div:nth-child(2)>span{ display:block;font-size:90%}


    .THListPurchaseOrder>div:nth-child(1),.TIListPurchaseOrder>div:nth-child(1){ width:65px}
    .THListPurchaseOrder>div:nth-child(2),.TIListPurchaseOrder>div:nth-child(2){ width:40%}
    .TIListPurchaseOrder>div:nth-child(2)>span{ display:block;font-size:90%}
    .THListPurchaseOrder>div:nth-child(3),.TIListPurchaseOrder>div:nth-child(3){ display:none}
    .THListPurchaseOrder>div:nth-child(4),.TIListPurchaseOrder>div:nth-child(4){  width:auto}
    
    .THListPurchaseOrder>div:nth-child(5),.TIListPurchaseOrder>div:nth-child(5){  width:50px}
    .TIListPurchaseOrder>div{ font-size:14px}

    .addItem {margin-left:3%;width:70%}
    .TDocHeader >div:nth-child(3) {display:none;}
    .TDocHeader >div:nth-child(4) {display:none;}
    .TDocHeader >div:nth-child(5) {display:none;}


.itemOptions{left:-70px;top:70px;width:300px;}
.itemQty{display:block;}


#MenuAction{padding-left:0};


.TListDocItem>div{font-size: 10px;}
.THeaderListDoc>div {font-size: 14px;}

 .TListDocItem>div:nth-child(3){display:none;} 
 .TListDocItem>div{width: 23%}
 .TListDocItem>div:nth-child(5)>img {width:80px;}
 .THeaderListDoc>div{width: 23%}
 .TListDocItem>div:nth-child(5)>img {width:24px;height:auto;}
 .TListDocItem>div:nth-child(2)>div:nth-child(2){display:block;}   
 .THeaderListDoc>div:nth-child(2) span{display:inline-block;}
 .THeaderListDoc>div:nth-child(3) {display:none;}
 


    .TButton>span{display:none;}
    .TListDocItem{font-size:14px}
    .TIListFulFillOrder{ font-size:17px}
    .TSaleDocSizeNcolor{max-width:300px;}
    .ReturnItemSelector .TCombobox{width:190%;}
    
@media print
{
    .TDocTotals>div{padding:2px;}
}

@media screen and (max-width:600px)
{
    .sizeChart>div>div
    {
        font-size: 14px;
    }
}